Print this page

Technische Möglichkeiten zur Verringerung der Ladezeit / PageSpeed 100

Schnelle Webseiten sind heutzutage nicht mehr nur ein "Kann", sondern längst ein "Muss" geworden: Suchmaschinen werten Webseiten, die nicht innerhalb weniger Sekunden geladen sind ab, weil sie für die Nutzer schlicht weg nicht interessant sind.

In der Regel sucht der Nutzer bei der Suchmaschine nach einem bestimmten Begriff. Er öffnet die ersten drei bis vier Seiten als Tab und entscheidet im Bruchteil einer Sekunde ob er den Tab offen lässt oder wieder schließt. Und das noch bevor man ihn mit einer tollen Nutzerführung überzeugen kann.

Wie funktionioniert der PageSpeed Test deiner Webseite?

Google misst die Geschwindigkeit einer Webseite auf Grund ihrer PageSpeed Note. PageSpeed ist ein Tool, welches der Google Such Algorithmus benutzt, um eine Webseite auf ihre Geschwindigkeit zu testen (Hier findest du das PageSpeed Insight Tool um deine eigene Webseite zu testen). Webseiten, die nicht optimiert werden, haben in der Regel einen PageSpeed Wert von unter 40.

Beim PageSpeed Test werden verschiedene Bereiche deiner Webseite einer Prüfung unterzogen. Erfüllt deine Homepage alle Kriterien perfekt, bekommst du 100 Punkte. Bei großen Webseiten ist es sehr schwierig einen Wert in dieser Höhe zu erhalten. Wir helfen unseren Kunden dabei diesen Wert zu erreichen. Nachfolgend möchte ich darauf eingehen, was PageSpeed hier testet und wie du in jeder Prüfung die volle Punktzahl erzielst.

Antwortzeit des Servers reduzieren

Je nach dem, in welcher Form deine Webseite erstellt wurde, ist dieser Punkt mehr oder weniger herausfordernd. Hast du eine HTML Datei erstellt, so wird diese dem Browser in der Regel ohne eine große Ladezeit zur Verfügung gestellt. Wenn du ein Content Management System nutzt, dann wird dein HTML Code dynamisch mit Hilfe einer PHP Datei erstellt. Während dieses Vorgangs muss der Server auf eine Datenbank zugreifen und die HTML Angabe individuell ausgeben. Das benötigt Rechenzeit und führt in der Regel dazu, dass dein Server zu langsam ist. Du solltest daher darauf achten, dass dein Hoster PHP 7 unterstützt, das in den meisten Fällen bis zu 300 % schneller ist als seine Vorgängerversionen. Mehr liest du hier.

Bilder optimieren

Wenn du Bilder mit deiner Kamera machst und diese auf deine Webseite stellen möchtest, dann mache dies nicht, bevor du nicht die Qualität und die Größe deiner Bilder reduziert hast. Wenn du ein zu großes Bild auf deine Webseite lädst, dann führt das dazu, dass dein Besucher mehr Bandbreite benötigt um deine Webseite zu laden. Gerade für Mobile Geräte ist dies eine kritische Stelle, da die meisten Handy Tarife nur eine begrenzte Bandbreite zur Verfügung haben. Mehr Informationen zu diesem Thema findest du hier.

HTML, CSS undJavaScript reduzieren

Durch das Reduzieren von HTML, CSS und JavaScript Code wird wertvolle Bandbreite gespart. Du kannst in einen JavaScript Dateien Speicherplatz einsparen in dem du z.B. Leerzeichen entfernst oder du allgemeinere Funktionen verwendest. Da niemand gerne in Code ohne Leerzeichen schreibt, kannst du auch Plugins wie z.B. JCH Optimize verwenden um diese Aufgabe für dich zu übernehmen. Du findest bei Google Hilfreiche Informationen zu diesem Thema.

JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten "above-the-fold" (ohne Scrollen sichtbar) beseitigen

Google möchte, dass deine Webseite so schnell wie möglich lädt, damit die Nutzer die von Google auf deine Seite geschickt werden nicht wieder den Tab schließen. Wenn deine Webseite viele Bilder oder ein Video beinhaltet, dann dauert der Ladevorgang deiner Webseite entsprechend lange. Das liegt daran, dass deine Webseite erst dann vollständig angezeigt wird, sobald alle Daten geladen sind. Wenn du deine Webseite so anpasst, dass die Inhalte die beim ersten Ladevorgang, ganz oben angezeigt werden sofort geladen werden, dann kann deine Webseite auch schneller laden. Google nennt den Bereich der als erstes Sichtbar ist "Above-the-fold" - Man könnte das mit der Titelseite einer Zeitung vergleichen, die noch nicht aufgeschlagen ist.

In der Regel werden alle CSS Angaben in eine externe CSS Datei ausgelagert. Hier gilt es, alle CSS Werte, welche "Above-the-fold", also den ersten sichtbaren Bereich betreffen, auszulagern. Man schreibt diese dann "Inline" in den HEAD des Dokuments. Inline bedeutet, dass diese Angaben nicht in einem CSS Dokument, sondern in STYLE Tags im Dokument eingefügt werden.

Wir nutzen für diesen Vorgang das Tool JCH Optimize, welches nach einer Konfiguration diese Aufgabe perfekt übernehmen kann. JCH Optimize ist für alle gängigen Systeme verfügbar.

Komprimierung aktivieren

Dein Webserver sollte so eingerichtet sein, dass er alle gesendeten Daten komprimiert. Dies kann bei Apache mittels "mod_deflate" bei Nginx mittels "HttpGzipModule" erzielt werden. Mehr zu diesem Thema erfährst du hier.

Zielseiten Weiterleitung vermeiden

Vermeide es eine Weiterleitung auf dieser Seite einzurichten. Weiterleitungen solltest du nur dann verwenden, wenn eine Webseite permanent den Standort wechselt. Beispielsweise wenn du das Verzeichnis "/leistungen" in "/produkte" umbenennst. Die Suchmaschine wird nach einigerzeit das alte Verzeichnis aus dem Index entfernen und es mit dem neuen ersetzen. Mehr zu diesem Thema erfährst du hier.