Pagespeed-Optimierung bei Google

Bereits seit langer Zeit ist bekannt, dass der Suchmaschinenriese Google immer mehr Wert auf den Faktor Pagespeed, also die Ladezeit einer Webseite, legt. In diesem Beitrag erfahren sie, wie wir die Ladezeiten ihrer Webseite auf ein Minimum reduzieren können.

Bitte beachten sie, dass die folgenden Optimierungsmaßnahmen nicht immer 1:1 auf jede Web-Anwendung übertragen werden können. Wir prüfen von Projekt zu Projekt, was an einzelnen Maßnahmen notwendig und sinnvoll als auch möglich sind, um ein optimales Ergebnis zu erreichen.


Test ihrer Webseite durch Google's PageSpeed Insights.

Als erste Massnahme prüfen wir ihre Webseite durch den Google PageSpeed Dienst. So können wir uns schon einmal ein grobes Bild davon machen, wie es derzeit in Punkto Ladezeit um ihre Webseite steht. Hierzu sollte allerdings gesagt sein, dass die Optimierung des Google Page Speed Scores nicht immer zu 100% mit der Optimierung der tatsächlichen (messbaren) Ladezeit der Website gleichzusetzen ist.

Im Grossen und Ganzen wird Ihre Website natürlich deutlich schneller, wenn Sie sie gemäss den Empfehlungen des Google Page Speed Tools optimieren. Es gibt aber auch Empfehlungen, die in einigen Fällen die tatsächliche Ladezeit der Website sogar verschlechtern können (insbesondere bei der CSS Optimierung der „Above the Fold“ Elemente).

Test der Google-Webseite durch PageSpeed Insights


Eingebette Bilder auf ihrer Webseite.

Die erste Ladezeit-Optimierung betrifft Bild- und Grafikdateien, die auf ihrer Webseite angezeigt werden. Hier lassen sich oftmals viele Kilo- wenn nicht sogar Megabytes einsparen. Was viele Webseitenbetreiber nicht wissen, ist, dass man Bilder, bevor man sie auf seiner Internet-Präsenz darstellt, noch einmal durch Bildbearbeitungsprogramme wie Photoshop oder Gimp für das Web optimieren sollte. Im Klartext heißt das:

  • Bilder auf tatsächliche Größe zuschneiden (Breite, Höhe - so wie sie auf der Webseite ausgegeben werden)
  • Die Qualität der Bilder reduzieren (ohne dass man es mit bloßem Auge groß bemerkt)

Wenn wir diese Schritte erfolgreich abgeschlossen haben, gibt es allerdings immer noch mögliche Optimierungen - die von Photoshop und Gimp nicht beachtet werden, von Google allerdings immer noch bemängelt werden. Hierfür nutzen wir dann einen Bilderkompressor, welcher die Bilddateien nochmal auf ein Minimum an Dateigröße reduziert. Zum Einsatz kommen hier unter anderem:

  • ImageOptm (für Mac-User)
  • Optimizilla (Browser-Kompressor)
  • Compressor.io (Browser-Kompressor)

Browser-Caching nutzen.

Die zweite PageSpeed Optimierungs-Maßnahme betrifft das sogenannte Caching von Dateien und Ressourcen.

So beschreibt Google diesen Punkt: "Das Festlegen eines Ablaufdatums oder eines Höchstalters in den HTTP-Headern für statische Ressourcen weist den Browser an, zuvor heruntergeladene Ressourcen über die lokale Festplatte anstatt über das Netzwerk zu laden."

Einfach gesagt bedeutet dies, dass ihr Browser bei einem erneuten Besuch einer Webseite nicht wieder alle Daten, wie z.B. das Logo oder andere Bilddateien vom Server runterlädt, sondern sie aus dem Browser-Zwischenspeicher nimmt, das spart Unmengen an Ladezeit und wirkt sich so positiv auf ihren Google PageSpeed Score aus.

Reguliert wird dieses Verhalten über die .htaccess Datei der jeweiligen Webseite. Hier geben wir an welche Dateien und wie lange sie zwischengespeichert werden sollen, wenn ein Benutzer auf der Webseite unterwegs war.

Diagnose der Google Pagespeed Analyse


Komprimierung aktivieren.

Der nächste Punkt zur Verbesserung der Ladezeit einer Webseite betrifft die Komprimierung von Dateien und Ressourcen, bevor diese an den Client ausgeliefert werden.

Im Grunde ist dies nichts anderes, als die Komprimierung von Dateien auf einem lokalen Rechner. Wenn also jemand eine Webseite besucht, werden die herunterzuladenden Dateien vom Server gezippt, an den Besucher versendet und dort wieder entpackt. Das beschleunigt den Seitenaufbau enorm und spart unzählige Bytes an Übertragung ein.

Um diese Funktion zu nutzen, muss vorerst geklärt werden, ob der verwendete Server Gzip oder Deflate unterstützt. Wenn dem so ist, können wir in der .htaccess Datei ihrer Webapplikation angeben, welche Dateiformate komprimiert werden sollen, bevor sie an den Besucher versendet werden. Hier ist zu beachten, dass es contraproduktiv ist, Bildformate mit aufzulisten, da diese ja bereits komprimiert sind. Der Server würde Bilddateien somit noch einmal komprimieren, was aber keine Änderung nach sich zieht und somit nur unnötige Rechenzeit beansprucht.


HTML, CSS und JavaScript-Reduzierung.

In diesem Abschnitt sehen wir uns die anderen Dateien ihrer Webseite einmal genauer an, denn auch hier lassen sich noch einige Bytes an Ladezeit einsparen. Wenn Web-Entwickler Code schreiben, ist die goldene Regel hierbei, diesen Code möglichst leserlich zu halten, damit andere Entwickler diesen später lesen können und sich entsprechend zurecht finden.

Aus genau diesem Grund finden wir in HTML-, CSS und vorallem JavaScript-Dateien Unmengen an Zeilenumbrüchen und Leerzeichen, welche vom Browser überhaupt nicht berücksichtigt werden und trotzdem steigern sie die Ladezeit unnötig.

Vorher.


.beispiel {
	display: inline-block;
	color: #fff;
	text-align: center;
	white-space: nowrap;
}

Nachher.

.beispiel{display:inline-block;color:#fff;text-align:center;white-space:nowrap;}

Man könnte sich nun alle Dateien einmal ansehen und die Leerzeichen und unnötigen Zeilenumbrüche händisch entfernen. Das ist bei statischen Seiten vielleicht möglich, aber sobald man größere Projekte vor sich hat ein Zeitfresser der seines gleichen sucht. Aus diesem Grund gibt es sogenannte Minifier, welche HTML-, CSS- und JavaScript-Dateien komprimieren können.

Die Dateien sind im Anschluss nicht mehr sehr leserlich, werden vom Browser aber nach wie vor verstanden und verarbeitet. Lediglich bei der Komprimierung von JavaScript-Dateien kommt es hin und wieder zu Komplikationen, weshalb Sie unmittelbar nach der Komprimierung alle Funktionen einmal testen sollten.


Ressourcen die das Rendern blockieren.

Nun kommen wir zum wohl aufwendigsten Teil der Google PageSpeed-Optimierung. Vorab sollte klar sein, dass es zwei Wege gibt JavaScript-Ressourcen in eine Webseite einzubetten, dies ist einmal über den Head eines Dokumentes, ebenso wie über den Footer möglich. Das heißt, dass das HTML-Gerüst erst aufgebaut werden kann, wenn die JavaScript-Ressourcen im Head vollständig geladen sind.

Anzeige der Google-PageSpeed Analyse für den Above the Fold Bereich

Das verzögert den Aufbau der Seite in vielen Fällen enorm. Nun fragt man sich natürlich, warum man nicht einfach alle Ressourcen über den Footer einbindet, wenn es im Head doch eh nur blockiert? Und genau hier liegt das Problem des Ganzen.

Viele Systeme setzen darauf, JavaScript Befehle im HTML (sogenanntes Inline JavaScript) einzubinden – also dort, wo sie gebraucht werden. Das kann unter Umständen dazu führen, dass die Befehle aufgrund der nun in den Footer verschobenen Ressourcen nicht mehr ausgeführt werden können, denn diese müssen bereits geladen sein, bevor die daraus resultierenden Befehle ausgeführt werden. Also müssen auch die auszuführenden Befehle in den Footer verschoben werden. Das hat zur Folge, dass Stück für Stück bearbeitet und anschließend getestet werden muss. Gegebenenfalls reicht ein verschieben und testen nicht aus, in diesem Fall passen wir die Funktionen für Sie an.


Kontaktieren Sie uns gerne.

Wenn Sie die Performance ihrer Webseite verbessern möchten oder mit der Ladezeit ihrer Webseite unzufrieden sind, kontaktieren Sie uns gerne per E-Mail oder nutzen Sie unsere kostenlose Telefon-Hotline. Wir können folgend einen Beratungstermin vereinbaren und ihnen ein unverbindliches Angebot erstellen.

*Pflichtangaben Bitte beachten Sie unsere Datenschutzrichtlinien.
↓ Nehmen Sie jetzt Kontakt zu unserem Expertern auf ↓ Immo W. Fietz

Immo W. Fietz

eCommerce Berater seit 15 Jahren (0 51 41) 204 892 0 support@fietz-medien.de FIETZ eCommerce Profis
Karte mit Standort von FIETZ eCommerce