100 bei PageSpeed mit Live-WebGL – und das kleine Tor dahinter
Die Website unseres Studios zeigt live gerenderte Spiel-Cover mit WebGL und erreicht trotzdem 100 in allen vier Kategorien von PageSpeed Insights, auf dem Handy und am Desktop. Eine der Änderungen, die uns dorthin gebracht haben, ist jetzt ein winziges Open-Source-Paket: webgl-gate.
Lighthouse testet Mobilgeräte auf der CPU
PageSpeed Insights misst mobile Seiten mit SwiftShader, einem Rasterizer, der WebGL auf dem Prozessor statt auf der Grafikkarte zeichnet. Viele virtuelle Maschinen, Remote-Desktops und Browser mit abgeschalteter Hardwarebeschleunigung tun dasselbe. Dort ist eine WebGL-Szene nicht nur langsam: Schon das Laden und Parsen ihres Codes kostet Zeit im Hauptthread, und die Total Blocking Time zeigt das.
Unsere neu gestaltete Website startete mobil mit 78 Punkten, das größte Bild erschien nach 4,2 Sekunden.
Was wir geändert haben
- Kritisches CSS direkt im HTML, damit nichts das erste Rendern blockiert.
- WebGL nur dort, wo eine echte GPU die Seite zeichnet; sonst zeigt die Seite statische Grafik und lädt PixiJS gar nicht erst.
- Responsive AVIF-Cover: Handys bekommen Bilder mit 720 Pixeln, etwa dreimal leichter.
- Screenshots der Spiele warten, bis das Haupt-Cover geladen ist.
Mobil stieg der Wert auf 100: größtes Bild nach 1,7 Sekunden, Total Blocking Time 0 ms, keine Layoutverschiebung. Am Desktop ebenfalls 100, mit dem größten Bild nach 0,4 Sekunden.
Wie das Tor entscheidet
Das Tor erstellt einen Wegwerf-WebGL-Kontext, liest den Namen des Renderers und sucht nach SwiftShader, llvmpipe, softpipe und Basic Render. Die Option failIfMajorPerformanceCaveat allein reicht nicht: In unseren Tests liefert Headless Chrome mit SwiftShader trotzdem einen Kontext.
Die Zahl, die uns überrascht hat
Auf einer echten GPU dauert die Prüfung 10–24 ms. Auf SwiftShader kostete schon der erste Kontext 1,4–1,7 Sekunden Hauptthread. Die Prüfung ist genau dort teuer, wo die Antwort Nein lautet. Deshalb wartet webgl-gate, bis die Seite geladen und der Browser untätig ist, und steht nie im kritischen Pfad.
So setzt du es ein
Installiere es mit npm und lade deine Szene nur auf einer echten GPU. Auf der CPU wird der Import nie aufgerufen, also wird das Bundle nie heruntergeladen.
npm i webgl-gateimport { loadIfFastWebGL } from 'webgl-gate';
const scene = await loadIfFastWebGL(() => import('./scene'));
if (scene) scene.mount(canvas);Es gibt auch einen React-Hook, useFastWebGL, und fertige Rezepte für Next.js, three.js, React Three Fiber, Vue, Svelte und MapLibre. Der Kern ist kleiner als 1 kB.
Was es nicht tut
Es beantwortet genau eine Frage: GPU oder nicht. Wer wissen muss, wie stark die GPU ist, findet in detect-gpu von pmndrs eine Einstufung nach Benchmark-Werten. Das Ergebnis wird noch nicht zwischen Besuchen gespeichert: Eine gespeicherte Antwort könnte die Hardware überleben, die sie beschreibt.