Schnell auf dem Handy: was die Zahlen wirklich bewegt hat
Vier Änderungen, die den Großteil der Arbeit auf dem Telefon geleistet haben, davon zwei, die wie Best Practice aussehen und die Lage verschlechterten.
Ratschläge zur Mobile-Performance sind meist eine Liste von Dingen, die man einschalten soll. Nach unserer Erfahrung kommen die Gewinne daher, die zwei oder drei Elemente zu finden, die auf der Seite bereits still teuer sind, und die meisten davon sehen im Code korrekt aus.
backdrop-filter ist das Teuerste auf Ihrer Seite
Milchglasflächen kosten bei jedem Scroll-Frame ein Neuzeichnen des gesamten Bildschirms. Auf iOS Safari hält das allein eine Seite unter sechzig Bildern pro Sekunde, egal was Sie sonst reparieren. Wir deaktivieren es unterhalb von 768 Pixeln vollständig. Auf dem Handy hat den Unterschied noch nie jemand bemerkt; das Scrollen ist spürbar flüssiger.
loading="lazy" verschiebt nicht immer
Ein natives Lazy-Bild wird nur dann verschoben, wenn der Browser weiß, dass es weit vom Sichtbereich entfernt ist. Wird der Abschnitt eingehängt, bevor das Layout ihn platziert hat, entscheidet der Browser „nah genug“ und lädt sofort. Wir hatten eine Videoleiste und zwei Porträts elf Bildschirme weiter unten, beide luden beim ersten Rendern, beide als lazy markiert und beide spezifikationskonform.
Die Lösung ist, das Element an einen Intersection Observer zu koppeln, sodass nichts angefordert wird, bevor sich der Abschnitt dem Sichtbereich wirklich nähert. Auf unserer eigenen Seite waren das 232 KiB und sechs Lighthouse-Punkte, zurückgewonnen von Inhalten, zu denen niemand gescrollt hatte.
Der Ladeindikator war der Layout-Sprung
Jede Fallstudie auf dieser Seite hatte einen kumulativen Layout-Sprung von 0,546, das Dreifache der Durchfallgrenze. Die Ursache war eine nachgeladene Route, deren Platzhalter ein kleiner Ladeindikator war: Die Seite zeigte 200 Pixel Platzhalter, ersetzte ihn durch den echten Artikel, und alles darunter verschob sich.
Diese Route sofort zu laden kostet 1,7 KB komprimiert. Der Layout-Sprung ging auf 0,001. Ein nachgeladener Chunk ist nicht kostenlos, wenn der Platz, den er einnehmen wird, unbekannt ist.
Bilder verkleinern, bevor sie ins Repository kommen
Der unspektakulärste Punkt der Liste und meist der größte. Zwei Gründerporträts kamen als 2-MB-PNGs an. In der Größe, in der sie tatsächlich dargestellt werden, als WebP neu kodiert, wiegen sie zusammen 54 und 45 KB: 96% weniger ohne sichtbaren Unterschied. Die Kundenlogos auf dieser Seite waren je 200 KB groß, bis jemand sie gemessen hat.
Woran Sie merken, dass es gewirkt hat
Messen Sie dieselbe Seite vorher und nachher auf einem gedrosselten Mobilprofil und behalten Sie die Zahlen. Jede der obigen Änderungen war durch ein Messpaar begründet und nicht durch eine Regel, und eine davon, die sofort geladene Route, ist das Gegenteil des üblichen Rats.