Pagespeed 2.0 & Crawlersteuerung

Beschreibung zum kostenlosen Online Marketing Webinar

Ladezeit Optimierung ist ein herausragender Hebel für mehr Conversions und bessere Rankings in Google. Bereits jetzt können mit diesen Methoden Conversionsteigerungen von bis zu 30% und bessere Rankings erreicht werden. Mit der Google-Umstellung auf den Mobile Index ist Pagespeed ein Prio 1 Rankingfaktor. Im Workshop werden Methoden bearbeitet, die über Google PageSpeed Insights hinausgehen. Dabei werden Basisthemen mit Quick wins, effektive Maßnahmen und fortgeschrittene Aspekte wie Seitenarchitektur und Renderzeit thematisiert.

Video zum Webinar

Webinar Termin:

18.12.2017

16:00 Uhr - 16:45 Uhr

Was Du nach dem Webinar gelernt hast:

  • Die Bedeutung der Pagespeed für die Suchmaschinenoptimierung
  • Möglichkeiten der Optimierung von Ladezeiten
  • Auswirkungen einer durchdachten Crawlersteuerung auf Website-Rankings

Zielgruppe:

  • Fortgeschritten
  • Experten
  • Online Marketing Manager
  • SEO Manager / SEO-Consultants
  • sonstige

 

Pagespeed 2.0 und Crawlersteuerung

Die Digitalisierung und das Web 2.0 beeinflussen viele Bereiche des täglichen Lebens. Die Art und Weise wie wir kommunizieren, wie Nachrichten verbreitet und wahrgenommen werden, wie wir einkaufen, wie Unternehmen Werbung betreiben und viele andere Ebenen und Prozesse des Alltags werden stark beeinflusst und verändert. Gerade in den digitalen Sphären des Marketing gab es in den vergangenen Jahren so viele Entwicklungen, wie wohl in kaum einem marketingtechnischen Sektor sonst. Suchmaschinenoptimierung, Suchmaschinenmarketing, Apps, die sozialen Netzwerke sowie kleinere und doch enorm wichtige Faktoren wie die Optimierung von Bildern, Videos oder die Einbindung von Javascript- oder CSS-Daten in die Homepage selbst kleinster Unternehmen sind dabei Aspekte, die für tiefgreifende Veränderungen gesorgt haben. Einer dieser Faktoren, der in diesem Artikel genauer erläutert werden soll und gerade in der jüngsten Vergangenheit immer wichtiger geworden ist, ist die Ladezeit von Websites, der sogenannte Pagespeed.

Die Geschwindigkeit unserer Nutzungsgewohnheiten im Internet hat sich in der Vergangenheit enorm gesteigert, niemand will mehr lange auf seine Informationen warten, schließlich gibt es in den Weiten des Internets auch andere Seiten und Plattformen, die ähnliche Informationen bereit stellen. Wieso also warten? Wie wichtig die Geschwindigkeit für die Nutzer des World Wide Web mittlerweile ist, hat auch Google erkannt. Die wichtigste und meist genutzte Suchmaschine der Welt hat bereits in vergangenen Updates die Tendenz offenbart, dass Pagespeed ein immer zentraler werdender Faktor ist und zunehmend an Bedeutung gewinnt. Ein Aspekt, der mit der zunehmenden Bedeutung der Ladezeit in engem Zusammenhang steht, ist die Nutzung von Smartphones und mobilen Geräten. Mittlerweile haben die Smartphones von Apple, Microsoft oder Huawei die Desktopnutzung verdrängt. Das Smartphone ist bei vielen das erste und letzte, was sie am Tag betrachten. Daher rückt auch bei Google und seinen Suchmaschinenrankings die Mobilnutzung immer weiter in den Vordergrund. Diese Entwicklung fand nun in einem der letzten Updates seinen Höhepunkt, als Google die Ansicht der Suchergebnisse in erster Linie auf die mobile Ansicht ausrichtetet. Dieser Schritt beweist insbesondere eine, hier bereits geäußerte, Tendenz: Die Ladegeschwindigkeit bzw. die Ladezeit von Websiten werden zu einem der zentralsten Hauptrankingfaktoren überhaupt und müssen durch die Umstellung auf den Mobile Index als Faktor mit höchster Prioriät behandelt werden. Denn die Ladezeit ist oftmals entscheidend für den Nutzer. Hier werden nicht nur Kaufentscheidungsprozesse beeinflusst, indem kurzfristige Entscheidungen über den Verbleib auf der jeweiligen Website gefällt werden, sondern auch langfristige Effekte hervorgerufen. Das heißt: verliert man einmal einen Nutzer wegen einer zu langen Ladezeit, sinkt gleichzeitig die Wahrscheinlichkeit, dass dieser Nutzer wieder auf die Website zurückkehrt um ein Vielfaches.

Wie wichtig der Pagespeed mittlerweile ist, verdeutlichen auch viele Studien, die sich aufgrund der immer wichtiger werdenden Thematik mittlerweile auch in vielerlei Richtungen spezialisieren. 40 Prozent der Nutzer brechen beispielsweise den Vorgang des Ladens ab, wenn dieser mehr als drei Sekunden in Anspruch nimmt. Drei Sekunden entspricht dabei einer Zeit, die viele Domains in Deutschland (noch) nicht abliefern können, worauf später noch genauer eingegangen wird. Eine weitere Studie kam zu dem Ergebnis, dass 52 Prozent der Nutzer von eShops die Ladezeit als entscheidenden Faktor für die erneute Nutzung und somit auch für den weiteren Kaufentscheidungsprozess sehen. Diese Studie verdeutlicht also bereits, dass auch im Internet “Zeit ist Geld” gilt. Ein nicht ganz so deutliches Ergebnis präsentiert die Studie, die einen ähnlichen Test für Online-Shops durchgeführt hat. Laden Online-Shops langsam, neigen 23 Prozent der Nutzer dieser Shops dazu, den Vorgang abzubrechen. Eine Hochrechnung zeigt, wie wichtig der Pagespeed heutzutage auch in monetärer Hinsicht ist: Erzielt eine Website pro Tag einen Umsatz von 100.000 Euro, verursacht eine Sekunde Verzögerung bei der Ladezeit der Website einen Verlust von ganzen 2,5 Millionen Euro pro Jahr.
Weitere Studien untermauern diese Ergebnisse. Das Institut “Nielsen Netratings” kam zu dem Ergebnis, dass 47 Prozent der Nutzer eine Ladezeit von zwei Sekunden oder weniger erwarten. Radware startete aufgrund dieser Studie ein Experiment. Dabei wurde eine Website mit Absicht bzw. künstlich um zwei Sekunden verlangsamt, um Unterschiede hinsichtlich nutzungsspezifischer Effekte bei identischem Inhalt vergleichen zu können. Das Ergebnis zeigt die Bedeutung des Pagespeed, selbst bei “nur” zwei Sekunden. Die Bounces stiegen auf der manipulierten Website um 20 Prozent an, obwohl weiterhin Inhalte präsentiert wurden, die auch auf der “originalen” Website zu finden waren.
Diverse Ergebnisse von Google selbst zeigen einen ähnlichen Effekt, was die Auswirkungen auf die Suchmaschine betrifft. 0,5 Sekunden langsamere Ergebnisse der Suchmaschine generieren laut offiziellen Angaben von Google 20 Prozent weniger Traffic. Der Pagespeed bzw. die Ladezeit hat also direkten Einfluss auf die Sichtbarkeit von Websiten, er beeinflusst den Traffic, die Conversion Rates und somit letztlich die Effizienz einer gesamten Performance.

Wer diesen Studien nicht glaubt, kann gerne eigene Studien durchführen. Hierfür eignen sich insbesondere Tools wie “webpagetest.org”, “pingdom.com” oder “gtmetrix.com”.
Nun kommen wir zurück zur Thematik der Ladezeit. Wie bereits erwähnt erreichen gerade deutsche Domains die oftmals erwarteten Pagespeeds noch nicht. Ordnet man deutsche Webseiten in den internationalen Vergleich ein, wird diese These noch deutlicher. Während die durchschnittliche Ladezeit in den USA bei ca. 3,5 bis 6 Sekunden liegt, befinden sich in Deutschland selbst größere Unternehmen und Anbieter in Bereichen zwischen 9 und 10 Sekunden. Dies ist zwar einerseits der viel weiter entwickelten und ausgebauten Netzabdeckung in den USA geschuldet (Deutschland hinkt hierbei im internationalen Vergleich durchaus hinterher), jedoch zeigen sich amerikanische Webseiten auch besser an die aktuelle Situation angepasst. Denn oftmals liegt der Hebel für eine bessere Performance der Website nicht – wie in Deutschland oft angenommen – in der Technik, sondern eher im Frontend-Bereich, was sich eigentlich anhand simpler Analyseinstrumente beweisen lässt.

Ansätze zur Optimierung des Pagespeed

Doch wo genau im Frontend sind dann die Tücken des Pagespeed versteckt? Hierbei gibt es vielerlei Faktoren, die letztlich eine große Rolle spielen können. Ein Aspekt, der bereits mit kleineren Optimierungen weitreichende Verbesserungen mit sich bringen kann, ist der richtige Einsatz der HTTP 1.1 Techniken.
Dazu zählt beispielsweise die Nutzung von Subdomains. Subdomains unterstützen und beschleunigen die Auslieferung von Daten, indem z.B. Grafiken auf die Subdomains verteilt werden, wodurch dem Crawler einiges an Arbeit erspart wird. Die Eigenschaften der modernen Browser unterstützen die Bildung von Subdomains dabei enorm, da sie mittlerweile bis zu acht Hosts gleichzeitig laden können, was nicht nur positive Auswirkungen auf den Crawler und somit die Suchmaschine hat, sondern auch dem Nutzer eine kürzere Ladezeit bietet.
Ein weiterer Aspekt in diesem Bereich ist das Bilden von CSS-Sprites. Gerade kleinere grafische Elemente wie Icons, Länderflaggen oder Buttons sollten in CSS-Sprites zusammengefasst werden, um die Requests und somit auch die Ladezeit der Website zu reduzieren. Zudem lässt sich dank HTTP 1.1 auch der sog. “Preconnect” mit dem “Handshake” verknüpfen, was wiederum dem Crawler und dem Pagespeed zugute kommt. Die frühzeitige Konnektierung der Website und das Auflösen der SSL ermöglichen schnellere Übertragungszeiten, was selbstverständlich im Sinne jeder Website mit höheren Ansprüchen an seinen Pagespeed ist.

Neben der HTTP-Techniken bildet auch die Übertragungsleistung einen Bereich, der durchaus einige Optimierungen für die Crawler und die Ladezeiten offenbart.
Hier gilt grundsätzlich zuerst einmal, dass jede Domain separat auf die Optimierungen in dieser Ebene überprüft werden muss und ob z.B. Caching oder eher inline die richtige und wegweisende Lösung für die Website darstellen. Trotzdem gilt auch hier, dass CSS-Sprites, die z.B. Header und Footer, die Startseite oder Kategorien zusammenfassen ebenso sinnvoll sind, wie Javascript-Dateien zusammenzufassen (z.B. Warenkorb.js, Kategorie.js), um auch hier Requests reduzieren zu können.
Inline spart grundsätzlich immer Ladezeit, lässt sich jedoch zugleich auch nicht mit dem Caching von Javascript- oder CSS-Dateien vereinen, weshalb die Vor- und Nachteile hier je nach Domain unterschiedlich bewertet werden müssen. Eine Idee, die oftmals Sinn macht, ist der Einbau von Lazy Loading. Hierbei werden in erster Linie grafische Elemente, die bspw. erst durch Scrollen sichtbar werden für die erste Ansicht der Website reduziert. So wird verhindert, dass diese Grafiken von vorneherein geladen und vom Crawler analysiert werden müssen. Eine weitere Möglichkeit, die Übertragungsleistung im Sinne des Pagespeed zu verbessern, ist die Verschlüsselung von Bildern und Icons als Base64. Auch hier kann durch eine geschickte Integration in die HTML-Datei eine nicht unbedeutende Menge an Requests eingespart werden, die letztlich vielleicht entscheidend im Konkurrenzkampf des World Wide Web wird.
Zudem ist die Anwendung von Image Convertern zu empfehlen. Zwar sollte je nach Bildformat, Größe und Auflösung abgewogen werden, welches Tool am effektivsten arbeitet und die besten Ergebnisse liefert, trotzdem erlauben solche Instrumente inzwischen eine schnelle und effiziente Bearbeitung von Bildern, die vor allem bei größeren Datenmengen eine riesige Menge einsparen können. Tools wie “kraken.io”, “ImageOptim” oder “SVGOMG” lassen sich sogar in den Deploymentprozess einbinden, wodurch Bilder automatisch optimiert werden. Hierdurch wird nicht nur die Rendertime deutlich verkürzt, auch die Crawler danken es Ihnen mit einem höheren Ranking und verbessertem Pagespeed.

Gerade erwähnt, ist die Rendertime ein weiterer großer Themenbereich, der vielversprechende Optimierungen anbietet. Um die Rendertime aber effektiv bearbeiten und verbessern zu können, sind zuerst Recherchearbeiten nötig. Wie viel Rendering wird auf meiner Website betrieben? Wie viel Scripting findet auf meiner Website statt? Wie sind diese Werte im Vergleich zu meiner direkten Konkurrenz? Diese Fragen sollten geklärt werden, bevor man sich mit der Frage beschäftigt, wo einsparende und optimierende Potenziale bestehen. Viele Browswer wie z.B. Google Chrome bieten diese Ergebnisse bereits in Form einer “Inhaltsanalyse” bereits an, weshalb sich diese Recherchearbeiten auch ohne größeren Zeitaufwand erledigen lassen.
Was sind nun also die wichtigen Faktoren, die sich auf die Rendertime der Domain beziehen?
Eines der wichtigsten Elemente ist die Anzahl der Domain-Elemente. Diese Thematik lässt sich simpler durch eine Frage beschreiben: Wie viele Elemente brauche ich, um meinen Content effektiv darzustellen? Sind wirkliche alle Elemente von Nutzen oder besteht bereits im inhaltlichen Element Einsparungspotenzial? Diese Fragen führen zwangsweise zum nächsten wichtigen Element: der Verschachtelung der Elemente. Auf wie vielen Ebenen oder wie “tief” sind meine Elemente verschachtelt? Wo besteht hier Potenzial, die Effektivität zu verbessern?
Die Verschachtelungstiefe hat dabei auch noch einen Nebeneffekt, der nicht ganz unbedeutend ist. Durch die Zugriffe via Javascript und CSS auf die Domain entsteht grundsätzlich das Problem, dass alle Ebenen der Website gerendert werden müssen. Werden im Bearbeitungsprozess also bspw. Elemente in den untersten Ebenen geändert, muss der Crawler erst alle anderen Ebenen rendern und analysieren, bis er zum veränderten Element gelangt. Muss das Rendering in diesem Zuge neu gestartet werden, nennt sich dies “Recalculation”. Google Chrome bietet zu dieser Thematik ein interessantes, aber noch selten genutztes Tool, das sich “Paint Flashing” nennt. “Paint Flashing” markiert die gerenderten Elemente und zeigt dem Nutzer an, wie eine effektivere Anordnung seiner Inhalte aussehen könnte bzw. in welchen Bereichen seiner Website Verbesserungspotenzial besteht.
Entscheidet man sich letzten Endes dazu, seine inhaltliche Struktur anzupassen, sollten zuerst einige Faktoren recherchiert und analysiert werden, die bei der Neuanordnung durchaus nützlich sein können. Zum einen gilt es, Requests zu reduzieren. Dann sollte erforscht werden, ob die Domains eingeschränkt werden sollten. Auch hier besteht oftmals viel Potenzial zur Verbesserung des Pagespeed. Ein Problem, dass gerade durch Subdomains oft entsteht, ist das Entstehtn von identischem Content. Auch dieser kann durch diverse Tools ausfindig gemacht und eliminiert werden, was wiederum positiv zum Pagespeed beiträgt. Ein Aspekt, der bei vielen noch eine große Unbekannte darstellt, sind die sog. “Below the fold images”. Hier greift wieder ein Prinzip, das vorher bereits zur Anwendung kommt, das sog. Lazy Loading. Somit werden unnötige Requests eingespart, was in einer Verbesserung der Ladezeit resultiert.
Ein allgemeiner Hinweis für die Rendertime ist, ein Auge auf die Code-Qualität der Domain zu werfen. Gerade was Queries oder die Lokalisierung der Requests betrifft, bestehen oftmals ungenutzte Verbesserungspotenziale, die unnötig verschwendet werden.

Ein Optimierungsfaktor, der im Bezug auf den JS-Code gerne übersehen wird, aber durchaus Einfluss auf die Performance der Website haben kann, sind die “Global variables”. Bei der Optimierung dieses Aspekts gilt grundsätzlich: “Local variables” werden durch die Eigenschaften und die Struktur der modernen Browser schneller geladen. Somit sollte man sich immer vor Augen führen, welche Variablen man lokalisieren kann. Da dieser Aspekt allerdings schon in sehr fortschrittliche Ebenen des Optimierungsprozess eingreift, sei hierbei dazu gesagt, dass man sich bei der Optimierung dieser Faktoren auch immer vor Augen führen muss, welche Optimierungen wirklich effektiv sind und welche den Aufwand nicht wirklich wert sind.
Außerdem schadet es nicht, immer ein Auge auf die Aktualität der jQuery-Version zu haben. Niedrige Versionen sind nicht mehr up-to-date, weshalb ein Update fast nur Vorteile birgt. Bei der Aktualisierung der jQuery-Version sollte allerdings unbedingt berücksichtigt werden müssen, dass darunter die Funktionalität einiger Elemente leiden könnte, weshalb ein Nacharbeiten nach dem Update unumgehbar ist, um Fehler oder Disfunktionen in der Website-Performance zu vermeiden.
Ein weiterer Tipp zur Verbesserung des Pagespeed entstand durch den Umstieg Googles auf den Mobile Index erst vor kurzem. Integriert man auch auf seiner Website den Mobile Index zuerst, leidet zwar die Desktop-Version etwas darunter, da aber bei der Desktop-Nutzung meist viel größere Datenübertragungsraten zur Verfügung stehen, sollte dieser Effekt beinahe unbemerkt aufgefangen werden können.

Wie lässt sich dieses ganze Wissen nun effektiv und möglichst kurz zusammenfassen? Es gibt durchaus Regeln, die bei der Optimierung des Pagespeed allgemeingültig sind: Zuerst sollte man die Anzahl der Domain-Elemente möglichst gering halten und diese dabei wenn möglich auf weniger als 10 Ebenen verschachteln. Zudem sollten die Zugriffe auf die Domain beschränkt und reduziert werden. Abschließend sind CSS-Sprites sehr zu empfehlen, um die Anzahl der Requests durch kleinere Dateien, die oftmals kein entscheidender Content sind und daher auch keinen negativen Impact auf die Ladezeit haben sollten, zu reduzieren.

Pagespeed 2.0 und Crawlersteuerung

Die Digitalisierung und das Web 2.0 beeinflussen viele Bereiche des täglichen Lebens. Die Art und Weise wie wir kommunizieren, wie Nachrichten verbreitet und wahrgenommen werden, wie wir einkaufen, wie Unternehmen Werbung betreiben und viele andere Ebenen und Prozesse des Alltags werden stark beeinflusst und verändert. Gerade in den digitalen Sphären des Marketing gab es in den vergangenen Jahren so viele Entwicklungen, wie wohl in kaum einem marketingtechnischen Sektor sonst. Suchmaschinenoptimierung, Suchmaschinenmarketing, Apps, die sozialen Netzwerke sowie kleinere und doch enorm wichtige Faktoren wie die Optimierung von Bildern, Videos oder die Einbindung von Javascript- oder CSS-Daten in die Homepage selbst kleinster Unternehmen sind dabei Aspekte, die für tiefgreifende Veränderungen gesorgt haben. Einer dieser Faktoren, der in diesem Artikel genauer erläutert werden soll und gerade in der jüngsten Vergangenheit immer wichtiger geworden ist, ist die Ladezeit von Websites, der sogenannte Pagespeed.

Die Geschwindigkeit unserer Nutzungsgewohnheiten im Internet hat sich in der Vergangenheit enorm gesteigert, niemand will mehr lange auf seine Informationen warten, schließlich gibt es in den Weiten des Internets auch andere Seiten und Plattformen, die ähnliche Informationen bereit stellen. Wieso also warten? Wie wichtig die Geschwindigkeit für die Nutzer des World Wide Web mittlerweile ist, hat auch Google erkannt. Die wichtigste und meist genutzte Suchmaschine der Welt hat bereits in vergangenen Updates die Tendenz offenbart, dass Pagespeed ein immer zentraler werdender Faktor ist und zunehmend an Bedeutung gewinnt. Ein Aspekt, der mit der zunehmenden Bedeutung der Ladezeit in engem Zusammenhang steht, ist die Nutzung von Smartphones und mobilen Geräten. Mittlerweile haben die Smartphones von Apple, Microsoft oder Huawei die Desktopnutzung verdrängt. Das Smartphone ist bei vielen das erste und letzte, was sie am Tag betrachten. Daher rückt auch bei Google und seinen Suchmaschinenrankings die Mobilnutzung immer weiter in den Vordergrund. Diese Entwicklung fand nun in einem der letzten Updates seinen Höhepunkt, als Google die Ansicht der Suchergebnisse in erster Linie auf die mobile Ansicht ausrichtetet. Dieser Schritt beweist insbesondere eine, hier bereits geäußerte, Tendenz: Die Ladegeschwindigkeit bzw. die Ladezeit von Websiten werden zu einem der zentralsten Hauptrankingfaktoren überhaupt und müssen durch die Umstellung auf den Mobile Index als Faktor mit höchster Prioriät behandelt werden. Denn die Ladezeit ist oftmals entscheidend für den Nutzer. Hier werden nicht nur Kaufentscheidungsprozesse beeinflusst, indem kurzfristige Entscheidungen über den Verbleib auf der jeweiligen Website gefällt werden, sondern auch langfristige Effekte hervorgerufen. Das heißt: verliert man einmal einen Nutzer wegen einer zu langen Ladezeit, sinkt gleichzeitig die Wahrscheinlichkeit, dass dieser Nutzer wieder auf die Website zurückkehrt um ein Vielfaches.

Wie wichtig der Pagespeed mittlerweile ist, verdeutlichen auch viele Studien, die sich aufgrund der immer wichtiger werdenden Thematik mittlerweile auch in vielerlei Richtungen spezialisieren. 40 Prozent der Nutzer brechen beispielsweise den Vorgang des Ladens ab, wenn dieser mehr als drei Sekunden in Anspruch nimmt. Drei Sekunden entspricht dabei einer Zeit, die viele Domains in Deutschland (noch) nicht abliefern können, worauf später noch genauer eingegangen wird. Eine weitere Studie kam zu dem Ergebnis, dass 52 Prozent der Nutzer von eShops die Ladezeit als entscheidenden Faktor für die erneute Nutzung und somit auch für den weiteren Kaufentscheidungsprozess sehen. Diese Studie verdeutlicht also bereits, dass auch im Internet “Zeit ist Geld” gilt. Ein nicht ganz so deutliches Ergebnis präsentiert die Studie, die einen ähnlichen Test für Online-Shops durchgeführt hat. Laden Online-Shops langsam, neigen 23 Prozent der Nutzer dieser Shops dazu, den Vorgang abzubrechen. Eine Hochrechnung zeigt, wie wichtig der Pagespeed heutzutage auch in monetärer Hinsicht ist: Erzielt eine Website pro Tag einen Umsatz von 100.000 Euro, verursacht eine Sekunde Verzögerung bei der Ladezeit der Website einen Verlust von ganzen 2,5 Millionen Euro pro Jahr.
Weitere Studien untermauern diese Ergebnisse. Das Institut “Nielsen Netratings” kam zu dem Ergebnis, dass 47 Prozent der Nutzer eine Ladezeit von zwei Sekunden oder weniger erwarten. Radware startete aufgrund dieser Studie ein Experiment. Dabei wurde eine Website mit Absicht bzw. künstlich um zwei Sekunden verlangsamt, um Unterschiede hinsichtlich nutzungsspezifischer Effekte bei identischem Inhalt vergleichen zu können. Das Ergebnis zeigt die Bedeutung des Pagespeed, selbst bei “nur” zwei Sekunden. Die Bounces stiegen auf der manipulierten Website um 20 Prozent an, obwohl weiterhin Inhalte präsentiert wurden, die auch auf der “originalen” Website zu finden waren.
Diverse Ergebnisse von Google selbst zeigen einen ähnlichen Effekt, was die Auswirkungen auf die Suchmaschine betrifft. 0,5 Sekunden langsamere Ergebnisse der Suchmaschine generieren laut offiziellen Angaben von Google 20 Prozent weniger Traffic. Der Pagespeed bzw. die Ladezeit hat also direkten Einfluss auf die Sichtbarkeit von Websiten, er beeinflusst den Traffic, die Conversion Rates und somit letztlich die Effizienz einer gesamten Performance.

Wer diesen Studien nicht glaubt, kann gerne eigene Studien durchführen. Hierfür eignen sich insbesondere Tools wie “webpagetest.org”, “pingdom.com” oder “gtmetrix.com”.
Nun kommen wir zurück zur Thematik der Ladezeit. Wie bereits erwähnt erreichen gerade deutsche Domains die oftmals erwarteten Pagespeeds noch nicht. Ordnet man deutsche Webseiten in den internationalen Vergleich ein, wird diese These noch deutlicher. Während die durchschnittliche Ladezeit in den USA bei ca. 3,5 bis 6 Sekunden liegt, befinden sich in Deutschland selbst größere Unternehmen und Anbieter in Bereichen zwischen 9 und 10 Sekunden. Dies ist zwar einerseits der viel weiter entwickelten und ausgebauten Netzabdeckung in den USA geschuldet (Deutschland hinkt hierbei im internationalen Vergleich durchaus hinterher), jedoch zeigen sich amerikanische Webseiten auch besser an die aktuelle Situation angepasst. Denn oftmals liegt der Hebel für eine bessere Performance der Website nicht – wie in Deutschland oft angenommen – in der Technik, sondern eher im Frontend-Bereich, was sich eigentlich anhand simpler Analyseinstrumente beweisen lässt.

Ansätze zur Optimierung des Pagespeed

Doch wo genau im Frontend sind dann die Tücken des Pagespeed versteckt? Hierbei gibt es vielerlei Faktoren, die letztlich eine große Rolle spielen können. Ein Aspekt, der bereits mit kleineren Optimierungen weitreichende Verbesserungen mit sich bringen kann, ist der richtige Einsatz der HTTP 1.1 Techniken.
Dazu zählt beispielsweise die Nutzung von Subdomains. Subdomains unterstützen und beschleunigen die Auslieferung von Daten, indem z.B. Grafiken auf die Subdomains verteilt werden, wodurch dem Crawler einiges an Arbeit erspart wird. Die Eigenschaften der modernen Browser unterstützen die Bildung von Subdomains dabei enorm, da sie mittlerweile bis zu acht Hosts gleichzeitig laden können, was nicht nur positive Auswirkungen auf den Crawler und somit die Suchmaschine hat, sondern auch dem Nutzer eine kürzere Ladezeit bietet.
Ein weiterer Aspekt in diesem Bereich ist das Bilden von CSS-Sprites. Gerade kleinere grafische Elemente wie Icons, Länderflaggen oder Buttons sollten in CSS-Sprites zusammengefasst werden, um die Requests und somit auch die Ladezeit der Website zu reduzieren. Zudem lässt sich dank HTTP 1.1 auch der sog. “Preconnect” mit dem “Handshake” verknüpfen, was wiederum dem Crawler und dem Pagespeed zugute kommt. Die frühzeitige Konnektierung der Website und das Auflösen der SSL ermöglichen schnellere Übertragungszeiten, was selbstverständlich im Sinne jeder Website mit höheren Ansprüchen an seinen Pagespeed ist.

Neben der HTTP-Techniken bildet auch die Übertragungsleistung einen Bereich, der durchaus einige Optimierungen für die Crawler und die Ladezeiten offenbart.
Hier gilt grundsätzlich zuerst einmal, dass jede Domain separat auf die Optimierungen in dieser Ebene überprüft werden muss und ob z.B. Caching oder eher inline die richtige und wegweisende Lösung für die Website darstellen. Trotzdem gilt auch hier, dass CSS-Sprites, die z.B. Header und Footer, die Startseite oder Kategorien zusammenfassen ebenso sinnvoll sind, wie Javascript-Dateien zusammenzufassen (z.B. Warenkorb.js, Kategorie.js), um auch hier Requests reduzieren zu können.
Inline spart grundsätzlich immer Ladezeit, lässt sich jedoch zugleich auch nicht mit dem Caching von Javascript- oder CSS-Dateien vereinen, weshalb die Vor- und Nachteile hier je nach Domain unterschiedlich bewertet werden müssen. Eine Idee, die oftmals Sinn macht, ist der Einbau von Lazy Loading. Hierbei werden in erster Linie grafische Elemente, die bspw. erst durch Scrollen sichtbar werden für die erste Ansicht der Website reduziert. So wird verhindert, dass diese Grafiken von vorneherein geladen und vom Crawler analysiert werden müssen. Eine weitere Möglichkeit, die Übertragungsleistung im Sinne des Pagespeed zu verbessern, ist die Verschlüsselung von Bildern und Icons als Base64. Auch hier kann durch eine geschickte Integration in die HTML-Datei eine nicht unbedeutende Menge an Requests eingespart werden, die letztlich vielleicht entscheidend im Konkurrenzkampf des World Wide Web wird.
Zudem ist die Anwendung von Image Convertern zu empfehlen. Zwar sollte je nach Bildformat, Größe und Auflösung abgewogen werden, welches Tool am effektivsten arbeitet und die besten Ergebnisse liefert, trotzdem erlauben solche Instrumente inzwischen eine schnelle und effiziente Bearbeitung von Bildern, die vor allem bei größeren Datenmengen eine riesige Menge einsparen können. Tools wie “kraken.io”, “ImageOptim” oder “SVGOMG” lassen sich sogar in den Deploymentprozess einbinden, wodurch Bilder automatisch optimiert werden. Hierdurch wird nicht nur die Rendertime deutlich verkürzt, auch die Crawler danken es Ihnen mit einem höheren Ranking und verbessertem Pagespeed.

Gerade erwähnt, ist die Rendertime ein weiterer großer Themenbereich, der vielversprechende Optimierungen anbietet. Um die Rendertime aber effektiv bearbeiten und verbessern zu können, sind zuerst Recherchearbeiten nötig. Wie viel Rendering wird auf meiner Website betrieben? Wie viel Scripting findet auf meiner Website statt? Wie sind diese Werte im Vergleich zu meiner direkten Konkurrenz? Diese Fragen sollten geklärt werden, bevor man sich mit der Frage beschäftigt, wo einsparende und optimierende Potenziale bestehen. Viele Browswer wie z.B. Google Chrome bieten diese Ergebnisse bereits in Form einer “Inhaltsanalyse” bereits an, weshalb sich diese Recherchearbeiten auch ohne größeren Zeitaufwand erledigen lassen.
Was sind nun also die wichtigen Faktoren, die sich auf die Rendertime der Domain beziehen?
Eines der wichtigsten Elemente ist die Anzahl der Domain-Elemente. Diese Thematik lässt sich simpler durch eine Frage beschreiben: Wie viele Elemente brauche ich, um meinen Content effektiv darzustellen? Sind wirkliche alle Elemente von Nutzen oder besteht bereits im inhaltlichen Element Einsparungspotenzial? Diese Fragen führen zwangsweise zum nächsten wichtigen Element: der Verschachtelung der Elemente. Auf wie vielen Ebenen oder wie “tief” sind meine Elemente verschachtelt? Wo besteht hier Potenzial, die Effektivität zu verbessern?
Die Verschachtelungstiefe hat dabei auch noch einen Nebeneffekt, der nicht ganz unbedeutend ist. Durch die Zugriffe via Javascript und CSS auf die Domain entsteht grundsätzlich das Problem, dass alle Ebenen der Website gerendert werden müssen. Werden im Bearbeitungsprozess also bspw. Elemente in den untersten Ebenen geändert, muss der Crawler erst alle anderen Ebenen rendern und analysieren, bis er zum veränderten Element gelangt. Muss das Rendering in diesem Zuge neu gestartet werden, nennt sich dies “Recalculation”. Google Chrome bietet zu dieser Thematik ein interessantes, aber noch selten genutztes Tool, das sich “Paint Flashing” nennt. “Paint Flashing” markiert die gerenderten Elemente und zeigt dem Nutzer an, wie eine effektivere Anordnung seiner Inhalte aussehen könnte bzw. in welchen Bereichen seiner Website Verbesserungspotenzial besteht.
Entscheidet man sich letzten Endes dazu, seine inhaltliche Struktur anzupassen, sollten zuerst einige Faktoren recherchiert und analysiert werden, die bei der Neuanordnung durchaus nützlich sein können. Zum einen gilt es, Requests zu reduzieren. Dann sollte erforscht werden, ob die Domains eingeschränkt werden sollten. Auch hier besteht oftmals viel Potenzial zur Verbesserung des Pagespeed. Ein Problem, dass gerade durch Subdomains oft entsteht, ist das Entstehtn von identischem Content. Auch dieser kann durch diverse Tools ausfindig gemacht und eliminiert werden, was wiederum positiv zum Pagespeed beiträgt. Ein Aspekt, der bei vielen noch eine große Unbekannte darstellt, sind die sog. “Below the fold images”. Hier greift wieder ein Prinzip, das vorher bereits zur Anwendung kommt, das sog. Lazy Loading. Somit werden unnötige Requests eingespart, was in einer Verbesserung der Ladezeit resultiert.
Ein allgemeiner Hinweis für die Rendertime ist, ein Auge auf die Code-Qualität der Domain zu werfen. Gerade was Queries oder die Lokalisierung der Requests betrifft, bestehen oftmals ungenutzte Verbesserungspotenziale, die unnötig verschwendet werden.

Ein Optimierungsfaktor, der im Bezug auf den JS-Code gerne übersehen wird, aber durchaus Einfluss auf die Performance der Website haben kann, sind die “Global variables”. Bei der Optimierung dieses Aspekts gilt grundsätzlich: “Local variables” werden durch die Eigenschaften und die Struktur der modernen Browser schneller geladen. Somit sollte man sich immer vor Augen führen, welche Variablen man lokalisieren kann. Da dieser Aspekt allerdings schon in sehr fortschrittliche Ebenen des Optimierungsprozess eingreift, sei hierbei dazu gesagt, dass man sich bei der Optimierung dieser Faktoren auch immer vor Augen führen muss, welche Optimierungen wirklich effektiv sind und welche den Aufwand nicht wirklich wert sind.
Außerdem schadet es nicht, immer ein Auge auf die Aktualität der jQuery-Version zu haben. Niedrige Versionen sind nicht mehr up-to-date, weshalb ein Update fast nur Vorteile birgt. Bei der Aktualisierung der jQuery-Version sollte allerdings unbedingt berücksichtigt werden müssen, dass darunter die Funktionalität einiger Elemente leiden könnte, weshalb ein Nacharbeiten nach dem Update unumgehbar ist, um Fehler oder Disfunktionen in der Website-Performance zu vermeiden.
Ein weiterer Tipp zur Verbesserung des Pagespeed entstand durch den Umstieg Googles auf den Mobile Index erst vor kurzem. Integriert man auch auf seiner Website den Mobile Index zuerst, leidet zwar die Desktop-Version etwas darunter, da aber bei der Desktop-Nutzung meist viel größere Datenübertragungsraten zur Verfügung stehen, sollte dieser Effekt beinahe unbemerkt aufgefangen werden können.

Wie lässt sich dieses ganze Wissen nun effektiv und möglichst kurz zusammenfassen? Es gibt durchaus Regeln, die bei der Optimierung des Pagespeed allgemeingültig sind: Zuerst sollte man die Anzahl der Domain-Elemente möglichst gering halten und diese dabei wenn möglich auf weniger als 10 Ebenen verschachteln. Zudem sollten die Zugriffe auf die Domain beschränkt und reduziert werden. Abschließend sind CSS-Sprites sehr zu empfehlen, um die Anzahl der Requests durch kleinere Dateien, die oftmals kein entscheidender Content sind und daher auch keinen negativen Impact auf die Ladezeit haben sollten, zu reduzieren.