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). Nur man muss diese Empfehlungen eben auch verstehen können, bewerten, einordnen und richtig umsetzen.
Core Web Vitals Bericht
In Google's Core Web Vitals-Bericht finden Sie Informationen zur Leistung Ihrer Seiten. Grundlage hierfür sind tatsächliche Nutzungsdaten (manchmal auch Felddaten genannt). Unterteilt wird Core-Web-Vitals-Bericht in drei Hauptteile CLS (Cumulative Layout Shift), FID (First Input Delay) und LCP (Largest Contentful Paint).
CLS spiegelt die Gesamtsumme der einzelnen Werte für alle unerwarteten Layoutverschiebungen wider, die während der Lebensdauer einer Webseite auftreten. Der Wert liegt hierbei zwischen null und einer beliebigen positiven Zahl – je höher der Wert, desto mehr Layoutverschiebungen wurden aufgezeichnet. Das ist wichtig, weil es nicht besucherfreundlich ist, wenn sich Seitenelemente während der Interaktion verschieben. Wenn der Wert hoch ist und Sie die Ursache dafür nicht finden können, versuchen Sie, mit der Seite zu interagieren, um zu sehen, wie sich das auf den Wert auswirkt.
FID ist die Dauer von der ersten Interaktion des Besuchers mit Ihrer Webseite bis zur Reaktion des Browsers auf diese Interaktion. Eine Interaktion findet zum Beispiel statt, wenn der Besucher auf einen Link klickt oder auf eine Button tippt. Der Wert wird immer von dem Element abgerufen, auf das der Besucher zuerst klickt. Das ist auf Seiten wichtig, auf denen Besucher etwas tun müssen, weil die Seite dann als interaktiv gilt.
LCP ist die Zeit vom Aufrufen der URL durch den Besucher bis zum vollständigen Rendern des größten sichtbaren Elements im Darstellungsbereich. Das größte Element ist hier in der Regel ein Bild- oder Video-Slider, aber auch großflächige Textblöcke sind möglich. Das ist wichtig, weil der Besucher so weiß, dass die URL tatsächlich geladen wird.
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.
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.
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.
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 für die Pagespeed-Optimierung erstellen.
