In dem heutigen Blogartikel geht es um ein sehr interessantes Thema, das dich als Technical Seo Freak höchstwahrscheinlich brennend interessieren wird– es ist die Ladezeitoptimierung. Die Ladezeit ist bekanntermaßen seit einigen Jahren ein wichtiger Rankingfaktor und spätestens seit dem Speed-Update von Google vor ca. 1 Monat leidet das Ranking sehr langsamer Webseiten stark darunter. Wie man dieses Problem nun löst, erkläre ich dir im Folgenden.
Wie du an dem oberen Screenshots sehen kannst hat unsere Agenturseite seolusion.com einen relativ hohen Pagespeed Score und eine geringe Ladezeit. Es ist natürlich nicht perfekt und es wurde kein Score von 100/100 oder eine Ladezeit unter 1 Sekunde erreicht, jedoch muss ich dazusagen, dass der perfekte Score den Aufwand der Optimierung nicht wert ist und wir hier deshalb nach der 80/20-Regel (Pareto-Prinzip) arbeiten. Das heißt, wir optimieren unsere Ladezeit nur so stark, dass diese besser als bei der Konkurrenz abschneidet und lassen die zu technischen Kleinigkeiten am Ende weg, da diese sowohl nichts an dem Ranking als auch an der Perfomance der Webseite maßgeblich verändern.
Bevor wir aber auch gleich an das Eingemachte gehen, muss ich kurz vorab sagen, dass ich mich in dem heutigen Beitrag ausschließlich auf den Pagespeed Score von Google konzentriere und nicht auf die tatsächlich geringste Ladezeit. Du denkst dir jetzt wahrscheinlich das eine hängt doch mit dem anderen zusammen – richtig. Jedoch ist es, dass Google Empfehlungen gibt, wie zum Beispiel die CSS-Optimierung „Above the Fold“ , die dafür sorgen dass die Ladezeit nicht verbessert, sondern sogar verschlechtert werden kann. Meistens geht es hier jedoch um Millisekunden, weshalb du unbesorgt auf einen guten Page Speed Score von Google optimieren kannst.
Let’s go!
1. Bilder optimieren
Bilder sind eine schöne visuelle Unterstützung von Inhalten und heutzutage nicht mehr wegzudenken von einer Webseite. Problem ist hier jedoch, dass Bilder sehr viele Databytes aufwenden und somit die Ladezeit der Serverinhalte verlangsamen.
Folgende Meldung wird von Google angezeigt:
„Durch eine korrekte Formatierung und Komprimierung von Bildern können viele Datenbytes gespart werden.“
Übersetzt heißt das einfach, wir müssen konkret zwei Sachen tun:
- Die Bilder müssen in der Größe richtig zugeschnitten werden mit einem Bildbearbeitungsprogramm wie Photoshop, Paint, Gimp, o.Ä. Zuschneiden auf die Größe, die man auch auf der Webseite abgebildet haben möchte.
- Die Bilder müssen in der Qualität komprimiert (reduziert) werden, jedoch nur so stark, dass für das menschliche Auge kaum Unterschied festzustellen ist.
Oft reicht die „für Web optimiert“ – Speicherfunktion in den Bildbearbeitungsprogrammen leider nicht aus, weshalb man hier die Bilder manuell in der Höhe&Breite zuschneiden und mit einem Komprimierungsprogramm bei der Qualitätsreduzierung ein wenig nachhelfen muss.
Stark empfehlen kann ich hier den Online-Komprimierer Optimizilla.
Das war’s dann auch schon mit dem Optimieren von Bildern – mehr kann man hier nicht machen und wird auch von Google nicht verlangt. Oft hilft dies aber schon sehr stark, vor allem bei großen Webseiten, den Page Speed Score in die Höhe zu treiben.
2. Gzip-Komprimierung
Googles Meldung sieht hier wie folgt aus:
"DURCH DIE KOMPRIMIERUNG DER RESSOURCEN MIT „GZIP“ ODER „DEFLATE“ KANN DIE ANZAHL DER ÜBER DAS NETZWERK GESENDETEN BYTES REDUZIERT WERDEN.“
Ähnlich wie bei Bildern können auch HTML und CSS-Dateien einer Webseite komprimiert werden. Das heißt diese Dateien werden ähnlich wie eine .zip-Datei an den Server, der die Webseite aufruft gesendet. Dieser entpackt diese „.zip-Datei“ wieder und der Browser zeigt die Webseite normal an. Unser Server hat bei diesem Prozess jedoch gut Zeit gespart, da dieser nicht so lange nach den abgefragten Informationen „suchen“ musste, wenn man es einfach erklären möchte.
- Um die gzip-Komprimierung nutzen zu können, müssen wir das Komprimierungsmodul mod_deflate über die .htaccess-Datei aktivieren.
- Lade dir hierfür die .htaccess-Datei auf deinem Server herunter und öffne einen Texteditor wie zb. Notepad++. Alternativ kannst du auch über das Yoast-Plugin über Werkzeuge -> Dateieditor auf die .htaccess-Datei zugreifen und bearbeiten.
Füge folgenden Code ein (funktioniert nur für Apache-Webserver):
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE application/atom+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/json
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-web-app-manifest+json
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/x-component
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/javascript
</IfModule>.htaccess-Datei wieder hochladen bzw. Veränderungen speichern
Um nun zu überprüfen, ob die gzip-Komprimierung auch erfolgreich war die Webseite einfach in eines der folgenden Tools eingeben:
https://checkgzipcompression.com/
https://hosting.1und1.de/website-check
Allein durch das Einfügen eines kleinen Codes werden meistens große Veränderungen sichtbar im Pagespeed Score. Vor allem wenn kein CDN vorhanden ist.
3. Browser Caching
Erneut erstmal wieder Googles Meldung:
„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.“
Die Erklärung hier ist ganz einfach. Bei jedem Besuch einer Webseite müssen die Inhalte erst heruntergeladen werden von dem Server. Um zu verhindern das wiederkehrende Besucher die Inhalte jedes Mal aufs Neue herunterladen müssen, nutzt man hierfür Browser-Caching, wodurch die Inhalte in einen Zwischenspeicher geladen werden und nicht wieder vom Server heruntergeladen werden müssen.
Dies müssen wir jedoch so wieder in der .htaccess-Datei festlegen. Folgender Code muss eingefügt werden (nur für Apache-Webserver):
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 month"
ExpiresByType image/jpeg "access 1 month"
ExpiresByType image/gif "access 1 month"
ExpiresByType image/png "access 1 month"
ExpiresByType text/css "access 1 week"
ExpiresByType text/html "access 1 week"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 month"
ExpiresDefault "access 1 month"
</IfModule>Obwohl die Veränderung hier sehr minimal war, ist auch diese meistens am Pagespeed Score zu sehen.
Kommen wir gleich zum nächsten Aspekt.
4. HTML, CSS und JS reduzieren
Ausgegeben wird folgende Meldung für uns:
„DURCH DIE KOMPRIMIERUNG DES CSS-CODES KÖNNEN VIELE DATENBYTES GESPART UND DAS HERUNTERLADEN UND PARSEN BESCHLEUNIGT WERDEN.“
Zum Verständnis, jeder Code kann in einer minimierten Schreibweise ausgegeben werden. Dieser Prozess wird auch „Minify“ genannt und erfolgt glücklicherweise nicht durch Hand. Hier nimmt uns das WordPress Plugin Autoptimze die Arbeit ab.
Folgende Einstellungen würde ich empfehlen einfach zu übernehmen:
Ich muss dich vorwarnen, dass bei diesem Schritt sich der Pagespeed Score eventuell sogar minimal verschlechtern kann, da wir anstatt vielen kleinen Dateien nun eine große zum Rendern bereitstellen.
Die Ladegeschwindigkeit der Seite wird zwar dadurch besser – der Pagespeed Score jedoch nicht. Genau das war am Anfang des Artikels gemeint, als ich geschrieben habe, dass Pagespeed Score und Ladegeschwindigkeit nicht immer kohärent zueinander optimiert werden.
Für den nächsten Optimierungsprozess können wir gleich im Plugin Autoptimize bleiben.
5. JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten „above the fold“ (ohne Scrollen sichtbar) beseitigen
Das ist die für uns Webmaster angezeigte Meldung im PageSpeed Tool. Dieses Problem zu lösen ist jedoch nicht so einfach, da es keine „Allzweck-Lösung“ gibt. Der zu optimierende „above the fold“-Bereich ist nämlich von Theme zu Theme unterschiedlich und so können schon kleinste Änderungen zu technischen und/oder visuellen Problemen führen.
Um euch jedoch nichts vorzuenthalten, schildere ich euch im Folgenden den grundsätzlichen Abauf der Optimierung.
1. Entfernen von JS, das das Rendering blockiert
Kurz vorab: Es gibt zwei Möglichkeiten, die JS-Ressourcen zu laden – entweder im Header oder im Footer der Webseite. Wir möchten, dass die Ressourcen im Footer geladen werden, da die HTML-Version der Webseite bereits angezeigt und gerendert werden kann ohne, dass die JV-Ressourcen geladen sind (diese laden später). Andersherum müssen die JV-Ressourcen zuerst geladen werden damit die HTML-Version angezeigt werden kann – das Rendering ist also blockiert.
Problem bei der Umsetzung ist hier, dass „unschöne“ Nebeneffekte entstehen können, wenn die Ressourcen sowohl im Header als auch im Footer geladen werden.
Deshalb kann man die folgenden Einstellungen im Plugin Autoptimize nicht immer 1:1 übernehmen.
ACHTUNG: BEI DIESEM SCHRITT KÖNNEN UNERWÜNSCHTE NEBENEFFEKTE ENTSTEHEN. DESHALB MUSS MAN HIER AUCH EIN WENIG SELBER AUSPROBIEREN, SODASS ALLES RICHTIG FORMATIERT ANGEZEIGT WIRD!
2. CSS-Optimierung „Above the fold“
Hier ist es so, dass nachdem der Browser die HTML-Seite geladen hat die CSS-Dateien nachladen muss, um die korrekte Darstellung der Webseite anzuzeigen. Deshalb ist Google’s Vorschlag hier das CSS Inline im HTML einzufügen.
Folgende Einstellungen im Autoptimize Plugin für das „Above the fold“ – CSS zu empfehlen:
Den CSS-Code eurer Seite kannst du auch ganz einfach durch eine Plugin-Lösung herausfinden. Mit dem Above the Fold Optimization Plugin kannst du unter Einstellunge >> „Extract Full CSS“ den gesamten CSS-Code deiner Seite herunterladen.
Dieser Code wird dann kopiert und in den Critical Path CSS Generator eingefügt. Nachdem die URL angegeben worden ist, erscheint im rechten Feld der gerenderte CSS-Code für die „Above the Fold“ – Optimierung.
Diesen CSS-Code müssen wir jetzt noch einmal kurz minifyen, sodass wichtige Kilobytes eingespart werden können. Den Code minifyen kann man auf https://cssminifier.com/.
Der letzte Schritt ist nun das Einfügen dieses Codes in das Autoptimize-Plugin und das Abspeichern der Veränderungen.
ACHTUNG: AUCH HIER KANN ES ZU UNERWÜNSCHTEN NEBENEFFEKTEN KOMMEN, DIE JEDOCH NUR DEN VISUELLEN ASPEKT DER WEBSEITE BETREFFEN. HAT MAN JEDOCH ALLES KORREKT EINGEBUNDEN, SO WERDEN DIE BEMÜHUNGEN MIT EINEM GUTEN PAGESPEED SCORE VON GOOGLE BELOHNT.
6. Reduzieren der Antwortzeit des Servers
Damit unser Sever nicht bei jeder Anfrage die HTML-Seite neu generieren und ausgeben muss, kann man durch „Caching“ Ladezeit einsparen, da die HTML-Seite abgespeichert wird. Das spart viele Ressourcen vor allem wenn es sich um kein starkes Hosting handelt.
Für das Caching gibt es glücklicherweise auch Plugins, die diesen Prozess optimal unterstützen. Wir verwenden WP Fastest Cache mit folgenden Einstellungen:
Ist nun alles korrekt abgespeichert, so haben wir mittlerweile einen relativ starken Pagespeed Score und eine geringe Ladezeit erreicht. Höchstwahrscheinlich ist der Score auch bei dir nicht optimal, aber das kann auch sehr gut daran liegen, dass es immer noch mehr Optimierungsmaßnahmen, wie zum Beispiel das Einrichten eines CDN (Content Delivery Network) gibt, die den Score wirklich perfektionieren.
FAZIT: IN DIESEM ARTIKEL HABE ICH MICH WIE ZU SEHEN WIRKLICH STARK AUF DEN OPTIMALEN PAGESPEED SCORE UND NICHT DIE OPTIMALE LADEZEIT KONZENTRIERT. SIND ALLE GESCHILDERTEN ASPEKTE UMGESETZT, SO SOLLTE DIESER NUN DEFINITIV IM GRÜNEN BEREICH SEIN. IST DIES NICHT DER FALL, DANN GIBT ES NOCH WEITERE EINZELNE OPTIMIERUNGSMASSNAHMEN, DIE ANGEGANGEN WERDEN KÖNNEN. DOCH AUCH HIER GILT – 80/20-PRINZIP, DAS HEISST IN WIE FERN LOHNT SICH DER ZEITLICHE AUFWAN
IN DIESEM SINNE WÜNSCHE ICH EIN ERFOLGREICHES OPTIMIEREN UND SEID GESPANNT AUF DEN NÄCHSTEN BLOGARTIKEL!
