Need for Page Speed. Perfekte Ladezeit fĂĽr Ihre Website.

Eine erfolgreiche Website braucht eine hohe Ladegeschwindigkeit. So messen und verbessern Sie diese.

Page Speed fĂĽr die Webseite.

Oh nein, was ist denn nun los: Die Website lädt extrem langsam... Spinnt etwa der Router? Wurden die Server attackiert? Nein, der Betreiber hat nur den Page Speed nicht optimiert.

Ich arbeite seit 2,5 Jahren als Senior Application Engineer bei Namics – in dieser Zeit ist mir das Thema Page Speed mehrfach begegnet. Angesichts von JPG-Bildern mit 7 MB Dateigröße, einer Auflösung von 3400 px mal 2700 px und Time-to-first-Byte-Zeiten jenseits der 700 Millisekunden wird mir schon etwas unwohl…

Selbst eine perfekt designte, informative Website ist nur so gut wie ihr technisches Fundament.

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

So messen Sie Ihren Page Speed.

Page Speed: Webseite Screen.
Website-Screen mit Ladezeichen.

Es gibt verschiedene kostenlose Tools, mit denen Sie die Ladegeschwindigkeit Ihrer Website richtig messen. Sehr aufschlussreich ist beispielsweise Google Lighthouse. Hier bekommen Sie konkrete Hinweise, wie Sie Ihren Page Speed optimieren. Allerdings bewertet Google Lighthouse sehr streng: Die Abfragen finden in Realtime statt und wenn Sie Pech haben, ist der Server genau zu diesem Zeitpunkt sehr ausgelastet. Nutzen Sie daher am besten zwei bis drei Tools und vergleichen Sie deren Ergebnisse und Empfehlungen.

Das bedeuten die Messwerte im Detail.

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.
Google Lighthouse.
Google Lighthouse.

State of the Art: Basics fĂĽr optimalen Page Speed.

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.

Page Speed und Page Score - mein Fazit.

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.