100 ב-PageSpeed עם WebGL חי, והשער הקטן שמאחורי זה

האתר של הסטודיו שלנו מציג עטיפות משחקים חיות שמצוירות ב-WebGL, ועדיין מקבל 100 בכל ארבע הקטגוריות של PageSpeed Insights, בנייד ובמחשב. אחד השינויים שהביאו אותנו לשם הוא עכשיו חבילה זעירה בקוד פתוח: webgl-gate.

Lighthouse בודק את הנייד על המעבד

PageSpeed Insights מודד דפים לנייד עם SwiftShader, רסטרייזר שמצייר WebGL במעבד במקום בכרטיס הגרפי. כך עושים גם מכונות וירטואליות רבות, שולחנות עבודה מרוחקים ודפדפנים שבהם האצת החומרה כבויה. שם סצנת WebGL היא לא רק איטית: עצם ההורדה והניתוח של הקוד שלה גוזלים זמן מהתהליכון הראשי, וזה ניכר ב-Total Blocking Time.

האתר שלנו אחרי העיצוב מחדש התחיל עם 78 בנייד, והתמונה הגדולה ביותר הופיעה אחרי 4.2 שניות.

מה שינינו

• CSS קריטי מוטמע ישירות ב-HTML, כך ששום דבר לא חוסם את הציור הראשון.
• WebGL רק היכן שכרטיס גרפי אמיתי מצייר את הדף; בכל מקום אחר הדף מציג תמונה סטטית ואפילו לא מוריד את PixiJS.
• עטיפות AVIF רספונסיביות: טלפונים מקבלים תמונות ברוחב 720 פיקסלים, קלות פי שלושה בערך.
• צילומי המסך של המשחקים ממתינים עד שהעטיפה הראשית נטענת.

הציון בנייד עלה ל-100: התמונה הגדולה ביותר אחרי 1.7 שניות, Total Blocking Time של 0 מ״ש ואין תזוזות בפריסה. גם במחשב 100, עם התמונה הגדולה ביותר אחרי 0.4 שניות.

איך השער מחליט

השער יוצר הקשר WebGL חד־פעמי, קורא את שם המרנדר ומחפש בו SwiftShader, llvmpipe, softpipe ו-Basic Render. הדגל failIfMajorPerformanceCaveat לבדו לא מספיק: בבדיקות שלנו Chrome בלי ממשק על SwiftShader עדיין מחזיר הקשר.

המספר שהפתיע אותנו

על כרטיס גרפי אמיתי הבדיקה לוקחת 10–24 מ״ש. על SwiftShader יצירת ההקשר הראשון לקחה 1.4–1.7 שניות מהתהליכון הראשי. הבדיקה יקרה בדיוק היכן שהתשובה היא לא. לכן webgl-gate ממתינה שהדף ייטען והדפדפן יתפנה לפני שהיא שואלת, ולעולם לא עומדת בנתיב הקריטי.

איך משתמשים

התקינו דרך npm וטענו את הסצנה רק על כרטיס גרפי אמיתי. על המעבד ה-import לא נקרא בכלל, כך שהחבילה לא יורדת אף פעם.

npm i webgl-gate

import { loadIfFastWebGL } from 'webgl-gate';

const scene = await loadIfFastWebGL(() => import('./scene'));
if (scene) scene.mount(canvas);

יש גם hook ל-React בשם useFastWebGL, ומתכונים מוכנים ל-Next.js, three.js, React Three Fiber, Vue, Svelte ו-MapLibre. הליבה שוקלת פחות מ-1 קילובייט.

מה היא לא עושה

היא עונה על שאלה אחת: כרטיס גרפי או לא. אם צריך לדעת עד כמה הכרטיס חזק, detect-gpu של pmndrs מסווגת כרטיסים לפי תוצאות מבחני ביצועים. התשובה עדיין לא נשמרת בין ביקורים: תשובה שמורה עלולה לשרוד את החומרה שהיא מתארת.

החבילה ב-npm→הקוד ב-GitHub→