Kampf mit Page Speed Insights: Leistung Mobil/Computer liegen weit auseinander
Hallo, woran kann es liegen, wenn sich die Leistungswerte Mobil (89)/Computer (98) stark unterscheiden?
Die Messwerte im Einzelnen sind:
Mobil:
First Contentful Paint: 1,1 s
Largest Contentful Paint: 3,8 s
Total Blocking Time: 0 ms
Cumulative Layout Shift: 0
Speed Index: 1,1 s
Desktop:
First Contentful Paint: 0,3 s
Largest Contentful Paint: 1,2 s
Total Blocking Time: 0 ms
Cumulative Layout Shift: 0
Speed Index: 0,3 s
Optimierungen:
- Caching und GZIP-Komprimierung sind aktiviert (.htaccess)
- Die Bildgrößen sind optimiert - Sizes Attribut: "(max-width: 500px) 70vw, (max-width: 768px) 385px, (max-width: 930px) 40vw, 350px"
Die WepP-Bilder in Originalgröße bewegen sich zwischen 35 KB und 150 KB und werden entsprechend verkleinert. In der Mobilen Ansicht hat ein Bild zwischen 28 KB und 100 KB bei dreifacher Pixeldichte.
Die zusammengefasste CSS-Datei hat nur 34 KB, die JavaScript-Dateien haben zusammen nur 5 KB. Es sind keine Contao-Erweiterungen installiert, keine jQuery-Bibliothek, keine JS-Templates, etc.
Ich habe auf dem Smartphone mit mobilen Daten getestet. Alles prima. Dennoch sind die von Page Speed Insights gemessenen Werte nicht gut, was sich negativ auf das Ranking auswirken kann.
Komisch ist auch, dass beim "Mobil"-Test die Bilder unterhalb des View-Ports angeblich nicht geladen werden können.
Page Speed Insights protokolliert mehrfach folgenden Fehler in der Browser-Konsole:
Failed to load resource: the server responded with a status of 503 (Service Unavailable)
Beim Test auf dem Smartphone mit mobilen Daten werden alle Bilder einwandfrei geladen.
Im "Computer"-Test gibt es diese Fehler nicht.
Wer hat vielleicht schon ähnliche Erfahrungen gemacht, und kann mir hier weiterhelfen? Ich weiß nicht so recht wo ich anfangen soll zu suchen.
Kampf mit Page Speed Insights: Leistung Mobil/Computer liegen weit auseinander
Hab's gefunden.
PageSpeed Insights hat sich daran gestört, dass einzelne JavaScript-Dateien am Ende der HTML-Seite eingebunden werden. Das Ganze steht in der Rubrik "Verkettung kritischer Anfragen vermeiden".
Ich habe nun die einzelnen JavaScript-Dateien in einer JavaScript-Datei zusammengefasst und dadurch die Verkettung kritischer Anfragen auf zwei reduziert:
1. Anfrage: CSS-Datei
2. Anfrage: JS-Datei
Dadurch bin ich um 3 Prozentpunkte auf 92% Leistung geklettert und damit im grünen Bereich. Der Largest Contentful Paint ist mit 3,3 zwar immer noch nicht optimal, aber die Gesamtwertung stimmt nun.
Da Contao - anders als bei externen CSS-Dateien - externe JavaScript-Dateien nicht zusammenfasst, muss man diese selbst extern zusammenfassen und als einzelne JavaScript-Datei in Contao einbinden.
Der "Failed to load resource"-Fehler ist nicht mehr aufgetreten. Das war vermutlich ein internes Problem der PageSpeed Insights-API.