Need for Page Speed. Perfekte Ladezeit für Ihre Website

Schließlich ist schon lange bekannt, dass sich die Ladezeit einer Website maßgeblich auf ihr Google-Ranking auswirkt.

Am Beispiel von Google Lighthouse habe ich hier die wichtigsten Messwerte für Sie erklärt:

• Der First Contentful Paint misst, wann der Browser den ersten Text oder das erste Bild vollständig anzeigt. Das kann auch das Hintergrundbild der Website sein. Dieser Wert verrät also, ab wann User zum ersten Mal mit der entsprechenden Website kommunizieren kann.
• Beim First Input Delay geht es um die Zeit zwischen der ersten Eingabe eines Users auf der Website - beispielsweise dem Klick auf einen Button - und der Reaktion des Browsers. Dieser Wert gibt an, wie interaktiv die Website ist.
• Der Speed Index gibt an, wann alle Inhalte einer Website für den User sichtbar sind. 
• Die Total Blocking Time addiert alle Aufgaben - Buttonklicks, Texteingaben, etc. - die länger als 50 Millisekunden dauern und so die nächste Reaktion der Website blockieren
• Der Largest Contentful Paint misst, wann das größte Element der Seite komplett geladen ist. Der Grund dafür: Google Lighthouse nimmt an, dass es sich dabei um den wichtigsten Inhalt der Seite handelt. Der Wert soll also angeben, ab wann User den Hauptbestandteil der Website nutzen können.
• Die Cumulative Layout Shift misst, wie häufig und wie stark der jeweilige Content „ruckelt. Besonders wenn Bilder nachladen oder Inhalte erst später eingeblendet werden, ist das der Fall. Je weniger das Layout “zuckt”, desto besser können Besucher*innen die Website nutzen.

Mit den folgenden Massnahmen schaffen Sie eine grundlegende Voraussetzung für die hohe Ladegeschwindigkeit Ihrer Website:

• Komprimieren Sie Bilder: Viele CMS, CRM und E-Commerce-Systeme komprimieren Bilder automatisch. Allerdings können sie auch "nur" einen viel zu großen Upload in eine etwas kleinere Datei verwandeln. Das hilft nur bedingt. Sinnvoller ist es, gleich eine für die Seite optimierte Bildgröße zu wählen. Mit PNG sparen Sie gegenüber JPG 50 Prozent der Dateigröße ein. Webp schafft nochmals eine um 25-34 Prozent kleinere Datei - und das ohne Qualitätsverlust. Am besten laden Sie die Original-Datei auch hoch, falls der Browser Webp nicht unterstützt.
• Setzen Sie auf ein CDN: Ein Content Delivery Network ist ein absolutes Must-Have, wenn viele Bilder im Spiel sind. Anbieter wie Cloudflare kombinieren Ihre Bilder zudem automatisch auf PNG oder Webp.
• Verkleinern Sie Ihre Dateien mit GZIP: Mit GZIP können Sie Ihre HTML- und JavaScript-Dateien sowie Stylesheets komprimieren.
• Nutzen Sie leistungsstarke Server: Gute Inhalte benötigen eine performante Infrastruktur. Für Business-Zwecke brauchen Sie eine Antwortzeit von unter 500 Millisekunden - und die finden Sie selten bei 08/15-Hostern. Eine professionelle Hardware schafft Abhilfe.
• Perfektionieren Sie die Ladezeit mit Preload: Vereinfacht gesagt, handelt es sich bei Preload um ein träges Laden für CSS und JavaScript. Setzen Sie einfach bei Links ein rel="preload"-Attribut.So weiß der Browser, dass er diese Datei nicht sofort laden muss, sondern erst den Rest der Seite. Irgendwann wird die Preload-Datei dann wie ein normaler Aufruf eines externen Stylesheets angefordert. So beschleunigen Sie die Ladegeschwindigkeit Ihrer Website erheblich. 
• Noch effizienter mit JavaScript arbeiten: Bei JavaScript laden einzelne Seitenteile entweder synchron oder asynchron. Synchrone Elemente warten bis das vorherige Element fertig geladen ist.  Asynchrone Bestandteile einer Website laden dagegen gleichzeitig - und sind somit deutlich schneller. Mit dem Attributen “async” weiß der Browser Bescheid. Das “defer”-Attribut weist den Browser darauf hin, dass er nicht auf das Skript warten soll - er verarbeitet dann HTML-Skript weiter.
• Minimaler Code, maximale Leistung: Minimieren ist eine Technik mit der Sie den Programmcode verkleinern, ohne die Funktion zu beeinträchtigen. In vier Schritten können Sie Ihren Code ganz einfach minimieren.

1. Leerräume entfernen, sofern nicht syntaktisch erforderlich
2. Kommentare entfernen
3. Kompaktere Sprachkonstrukte verwenden
4. Bezeichner umbenennen

Wichtig zu wissen: Bei kompilierten Sprachen ist Minifizierung nicht bedeutsam. Programme, die im Quelltext übermittelt und interpretierte werden, sparen so aber sehr viel Platz. Der Pageload verringert sich somit deutlich.

Viele Websites erreichen bei den Tools nur einen mittleren Score. Ab einem bestimmten Seitenumfang ist es sehr schwer, einen Page Score über 90 Punkte zu erreichen. Das sollte aber auch nicht das Ziel sein: Der Pagescore ist nicht das Maß aller Dinge - sondern vielmehr eine Hilfestellung, um einzelne Faktoren zu optimieren. Wichtiger ist die reale Ladegeschwindigkeit der Website. Ist diese gut, dann ist meistens auch alles andere im grünen Bereich.