Lange Ladezeiten werden oft als stöhrend empfunden. Sie sind auch oft der Grund, warum die BesucherInnen wieder von der Webseite abspringen. Denn sowohl für die Suchmaschine als auch für InternetnutzerInnen ist der Pagespeed ein entscheidendes Qualitätskriterium, an der die Seite gemessen wird. Eine kurze Ladezeit ist daher maßgeblich.

Dieser Artikel enthält einige nützliche Tipps, die bei der Optimierung des Pagespeeds helfen können.

Caching

Ladezeiten kann man verringern, indem man häufig oder dieselben Inhalte nicht immer wieder erneut laden muss. Und dabei hilft das Caching. Dabei wird zwischen serverseitigen- und Browser-Caching unterschieden werden.

Das serverseitige Caching ist bei häufigen Requests von Resourcen, wie Datenbank-Anfragen, hilfreich damit diese nicht immer wieder ausgeführt werden müssen. Mit Browsercaching kann man Ressourcen der Webseite im Browser zwischenspeichern, beispielsweise Headerelemente wie Bilder. Alles was man nicht unnötig nochmal neu anfordert bzw laden muss, hilft natürlich bei der Performance.

Bilder komprimieren und Lazy Loading

Oft haben Bilder eine größere Auflösung, als wirklich benötigt wird. Daher ist hier die Komprimierung dieser eine sehr gute Möglichkeit, um den Pagespeed hinaufschnellen zu lassen. Denn Bilder gehören neben CSS und JS zu den ressourcenintensivsten Formaten. Die Komprimierung von Bildern beschleunigt also den Download und die damit verbundene Ladezeit der Seite deutlich.

Eine weitere Möglichkeit ist das sogenannte Lazy Loading. Dieses Script sorgt dafür, dass Bildressourcen erst dann angefordert werden, wenn sie gebraucht werden, sprich wenn sie im Blickfeld der NutzerInnen sind. Vor allem bei sehr bildlastigen Websites kann man so bei der Ladezeit einiges einsparen. Aber nicht nur das Lazy Loading kann hier helfen, Ladezeit bei später gebrauchte Ressourcen einzusparen. Allgemein sich Gedanken zu machen welche Ressourcen früher benötigt werden und hier priorisiert die Elemente zu laden, kann sich positiv auf die Performance auswirken. Bildelemente die beispielsweise erst im Footer angezeigt werden, können also ruhig zum Schluss geladen werden anstatt ganz am Anfang.

Bad Requests

Das Anfordern von Ressourcen, die es nicht gibt, hat nicht nur eine schlechte User Experience zur Folge, sondern bremst auch erheblich die Performance der Webseite ein. Daher heißt es unbedingt darauf achten, ob Ressourcen die man anfordert wie beispielsweise Bilder oder Fonts, wirklich zur Verfügung stehen.

Optimierung von HTML, CSS und JS

Auch HTML, CSS und JS können so optimiert werden, um Datenvolumen einzusparen. Bei HTML kann beispielsweise bereits durch das Weglassen von überflüssigen Kommentaren und Leerzeilen Einiges eingespart werden. Auch sollte darauf geachtet werden, eher größere als viele JS- und CSS-Files zu generieren, um HTTP-Requests gering zu halten. Auch sollte man die CSS-Dateien vor JS einbinden, um den BenutzerInnen bereits die Darstellung der Seite früher richtig anzuzeigen. Denn Pagespeed-Analysetools kalkulieren den Score des Pagespeeds auch anhand des sogenannten “Cumulative Layout Shifts”. Dieser validiert, welche unerwarteten Änderungen BenutzerInnen am Layout der Webseite noch visuell wahrnehmen können. Allgemein lohnt es sich, sich Gedanken zu machen, wann welche Ressource wirklich benötigt wird. Ist es zb. Notwendig diverse JS-Dateien direkt im Header zu laden, oder reicht es im Footer?

Zusätzlich sollte man CSS- und JS-Dateien komprimieren. Dafür kann man beispielsweise JS-Taskrunner verwenden. Ist es ein kleines Projekt mit wenig CSS und JS, gibt es einige Webseiten die das Minimieren solcher Files gratis anbieten.

Critical CSS und Third Party

Oft rentiert es sich Inline-JS und -CSS zu verwenden, besonders auf der Startseite. Bei CSS ist es zum Beispiel von Vorteil ein sogenanntes „Critical CSS“ zu erstellen, dass die wichtigsten Styles liefert. Alle andern Styles können somit im Footer nachgeladen und wirken sich nicht mehr negativ auf den PageSpeed aus. Auch hier gibt’s es schon einige Webseiten, wo lediglich die Website-Adresse angegeben werden muss, um sich das Critical-cSS generieren lassen zu können.

Bei Third-Party Ressourcen wie beispielsweise Bootstrap, ist es übrigens auch oft ratsam eine CDN zu verwenden, anstatt diese auf dem eigenen Server bereitzustellen. CDNs weisen meist eine bessere Performance beim Ausliefern auf. Falls man aus irgendeinem Grund dennoch Bootstrap direkt am Server verwendet, dann kann es auch viel einsparen, nur die Elemente einzubinden (beispielsweise nur den Slider), die man wirklich benötigt.

Verwendung von Pagespeed-Analysetools

Es gibt bereits einige Webseiten, die detaillierte Informationen über eine Webseite in Bezug auf den Pagespeed liefern. Diese zeigen dir anhand verschiedener Kriterien einen bestimmten Pagespeed-Score, an dem du dich orientieren kannst. Dieser kann auch nützlich sein, die bereits ergriffenen Maßnahmen zu validieren. Der vermutlich bekannteste Analysereport bietet Google an: „PageSpeed Insights“. Diesen Report kann man auch direkt unter den Developer Tools in Chrome unter den „Lighthouse“ generieren lassen. Anhand verschiedener Kriterien wird der Score kalkuliert und genau aufgelistet, welche Ressourcen und Aufgaben am meisten an Ladezeit beanspruchen:

• First Contentful Paint: Die Zeit, welche für das Darstellen des ersten Textes oder Bildes der Seite benötigt wird
• Speedindex: Der Geschwindigkeitsindex gibt an, wie schnell die Inhalte einer Seite sichtbar dargestellt werden.
• Largest Contentful Paint: Largest Contentful Paint gibt an, wie lange das Zeichnen des längsten Texts oder des größten Bilds dauert
• Time to Interactive: Die Zeit bis Interaktivität entspricht der Zeit, die vergeht, bis die Seite vollständig interaktiv ist
• Total Blocking Time: Summe aller Zeiträume (in Millisekunden) zwischen FCP und Zeit bis Interaktivität, wenn die Aufgabendauer 50 ms überschreitet
• Cumulative Layout Shift: Cumulative Layout Shift misst die Bewegung sichtbarer Elemente innerhalb des Darstellungsbereichs.

Solche Analysetools sind also ein mächtiges Werkzeug, um bestehende Probleme auf der eigenen Webseite zu finden und mit den Empfehlungen diese zu beseitigen. Gmetrix bietet beispielsweise zusätzlich auch ein Wasserfall-Diagramm an, um genauere Wartezeiten von bestimmten Ressourcen analysieren zu können. Übrigens kannst du dir so ein Diagramm auch unter den Devtools im Chrome unter Netzwerk ansehen.

Fazit

Die Ladezeit ist ein wichtiges Qualitätskriterium der Webseite und bestimmt oft darüber, ob BenutzerInnen auf einer Webseite verweilen oder nicht. Es gibt Richtlinien, die dabei helfen können, die eigene Webseite zu optimieren. Dazu zählt das Cachen von häufig verwendeten identischer Daten. Ein wichtiger Punkt ist auch das Optimieren von Bildern und Quellcode-Ressourcen, wobei auch darauf geachtet werden sollte, ob diese überhaupt zur Verfügung stehen um Bad Requests zu vermeiden. Auch das Priorisieren der Ressourcen und die Verwendung von CDNs und Critical CSS beeinflussen die Ladezeiten positiv. Analysetools wie PageSpeed Insights und GtMetrix sind mächtige Werkzeuge, die detaillierte Reports über Pagespeed-Probleme der Webseite Aufschluss geben können.

Quellen

https://developers.google.com/speed/docs/insights/v5/about

https://gtmetrix.com/

https://wao.io/de/ratgeber/pagespeed-optimierung/

https://pixeltale.de/lazy-load/

https://www.klickkonzept.de/online-marketing-blog/seo/pagespeed-optimierung/

https://www.omsag.de/online-marketing-blog/seo/pagespeed-optimierung-mit-diesen-tipps-zur-blitzschnellen-website/