Canlı WebGL ile PageSpeed’de 100 ve arkasındaki küçük kapı
Stüdyomuzun sitesi WebGL ile çizilen canlı oyun kapakları gösteriyor ve yine de PageSpeed Insights’ın dört kategorisinde de, hem mobilde hem masaüstünde 100 alıyor. Bizi oraya götüren değişikliklerden biri artık minicik bir açık kaynak paket: webgl-gate.
Lighthouse mobili işlemcide test ediyor
PageSpeed Insights mobil sayfaları SwiftShader ile ölçer; bu, WebGL’i ekran kartı yerine işlemciyle çizen bir rasterleştiricidir. Pek çok sanal makine, uzak masaüstü ve donanım hızlandırması kapalı tarayıcı da aynısını yapar. Orada bir WebGL sahnesi yalnızca yavaş değildir: kodunu indirip ayrıştırmak bile ana iş parçacığından zaman çalar ve bu Total Blocking Time’da görünür.
Yeniden tasarlanan sitemiz mobilde 78 ile başladı; en büyük görsel 4,2 saniyede beliriyordu.
Neleri değiştirdik
- Kritik CSS doğrudan HTML’e gömüldü, ilk çizimi hiçbir şey engellemiyor.
- WebGL yalnızca sayfayı gerçek bir GPU çizdiğinde; diğer durumlarda sayfa durağan görsel gösteriyor ve PixiJS’i hiç indirmiyor.
- Duyarlı AVIF kapaklar: telefonlar 720 piksellik, yaklaşık üç kat daha hafif görseller alıyor.
- Oyun ekran görüntüleri ana kapak yüklenene kadar bekliyor.
Mobil puan 100’e çıktı: en büyük görsel 1,7 saniyede, Total Blocking Time 0 ms, düzen kayması yok. Masaüstünde de 100, en büyük görsel 0,4 saniyede.
Kapı nasıl karar veriyor
Kapı geçici bir WebGL bağlamı oluşturur, işleyicinin adını okur ve içinde SwiftShader, llvmpipe, softpipe ve Basic Render arar. Tek başına failIfMajorPerformanceCaveat seçeneği yetmez: testlerimizde SwiftShader üzerindeki headless Chrome yine de bağlam veriyor.
Bizi şaşırtan sayı
Gerçek bir GPU’da kontrol 10–24 ms sürüyor. SwiftShader’da o ilk bağlamı oluşturmak ana iş parçacığından 1,4–1,7 saniye aldı. Kontrol tam da cevabın hayır olduğu yerde pahalı. Bu yüzden webgl-gate sormadan önce sayfanın yüklenmesini ve tarayıcının boşa çıkmasını bekler; asla kritik yolda durmaz.
Nasıl kullanılır
npm ile kurun ve sahnenizi yalnızca gerçek bir GPU’da yükleyin. İşlemcide import hiç çağrılmaz, yani paket hiç indirilmez.
npm i webgl-gateimport { loadIfFastWebGL } from 'webgl-gate';
const scene = await loadIfFastWebGL(() => import('./scene'));
if (scene) scene.mount(canvas);Bir React hook’u, useFastWebGL, ve Next.js, three.js, React Three Fiber, Vue, Svelte ve MapLibre için hazır tarifler de var. Çekirdek 1 kB’den küçük.
Neler yapmaz
Tek bir soruyu yanıtlar: GPU mu, değil mi. GPU’nun ne kadar güçlü olduğunu bilmeniz gerekiyorsa, pmndrs’ın detect-gpu paketi GPU’ları benchmark puanlarına göre sınıflandırır. Karar henüz ziyaretler arasında saklanmıyor: saklanan bir cevap, tarif ettiği donanımdan uzun yaşayabilir.