Anleitung für Pagespeed 100 / 100
Auf dieser Seite ist Kode für domostratieve Zwecke geschrieben. Das sieht wahrscheinlich nicht sehr verständlich aus wenn du das mit kleinem einem Mobilgerät betrachtest. Schalte doch bitte mal ein Gerät mit einem größeren Monitor an :)
Wir gehen hier von einer ganz normalen statischen HTML Seite aus. Einige Schritte die wir hier unternehmen, sind in einem CMS nicht möglich – sonst würde das CMS nicht mehr funktionieren. Andere Schritte können in jeglicher Art von Webseiten ausgeführt werden. (Es gibt eventuell Umwege und Ausnahmen um auch mit einem CMS das gewünschte Ergebnis zu erzielen).
Die grundsätzlichen Kriterien einer Webseite sollten natürlich schon in Ordnung sein, dann erreicht man in der Bewertung etwa 90 aus 100 Punkten. Das pagespeed-tool von Google gibt auch Hinweise woran es noch mangelt. In der Anleitung hier geht es nun darum wie man diese Letzten Punkte auch noch bekommen kann.
Um die letzten Punkte auch noch zu bekommen:
- HTML, CSS, und Skripte zu minimieren (unnötiges entfernen)
- Leerzeichen komprimieren und Zeilen zu verringern
- Bilder zu kodieren auf base64
- keine links mehr zu externen Dateien haben
- Cache und G-zip aktivieren
Die einzelnen Schritte:
#1. Website fertig stellen: Wir schreiben erst mal das gesamte Website fertig, im normalen üblichen Stil, denn wenn wir anfangen zu komprimieren wird es aufwendig sich im HTML zurecht zufinden. Das Website sollte auch von der Gestaltung her finalisiert sein, sodass keine Änderungen am CSS mehr bevorstehen.
Tipp: Es könnte später sehr viel Zeit und Ärger ersparen, wenn wir jetzt auch jede Seite auf CSS und auf HTML beim W3C-Validator testen. Diese Fehler können den Pagespeed und andere Resultate beeinflussen. Nachdem wir die folgenden Schritte ausgeführt haben, werden diese Tests Fehler anzeigen wegen der Bilder die wir kodieren. Also Test vorher ausführen.
#2. HTML-Minimiren, Komprimieren (Head): Alle links zu stylesheets und Skripten nehmen wir aus dem head. Wo das HTML anfängt bis zur Zeile bevor der </head> schließt, kopieren wir in ein online Tool um es zu komprimieren (google-Suche = "compress html"). Die nun fehlenden Links zum Stylesheet und zu eventuellen Skripten werden weiter unter behandelt.
Es sollen (wenn möglich) keine links zu Dateien hier im head sein.
Von <DOCTYPE> bis zum letzten <meta .... /> ist also eine einzige Zeile und der </head> end-tag ist auf Zeile 2, den schieben wir ein Zeile runter auf Zeile 3. In die Zeile 2 kommt noch das CSS.
2 <script> hier setzen wir CSS ein </script>
3 </head>
4 <body>
#3. Stylesheet (CSS): Hat man das CSS finalisiert, dann kann es komprimiert werden. Dafür kann man kostenlose online-tools benutzen (google-Suche = "compress css").
Diese komprimierte Version setzen wir nun zwischen <script type ... > start-tag und </script> end-tag ein und fügen es in die HTML-Datei auf Zeile 2. Der </head> end-tag folgt auf Zeile 3.
Gibt es Bilder die als Hintergrund im CSS eingebunden sind, dann müssen diese in Code "dargestellt" werden, nicht mit "background: url(ein-bild.jpg)". Das CSS erst komprimieren, dann die Stelle suchen wo die base64 code für die Bild-Datei rein kommt. Das könnte etwas mühsam sein. Zum kodieren einer Bild-Datei siehe Schritt 4.
Das CSS sieht dann so aus:
#4. Bilder kodieren (encode): Der Link zur Bild Datei ist für Pagespeed Optimierung nicht erwünscht. Um den Link "weg zu bekommen" muss man das Bild kodieren und die code ins HTML einfügen.
Man kann sich das etwa mal so vorstellen: Ein Bild (.jpg, .png, .gif usw.) ist auch nur Code. Der Browser kann die Code entziffern und stellt daraus ein Bild mit Farben und Schattierungen auf den Monitor dar. Die Code nimmt der Browser aus der Datei. Es fliegt also keine Bild vom Sever durch die Leitung zum Browser - nur Code.
Jetzt drehen wir das so, dass der Browser nicht mehr code runter laden muss, sondern geben dem Browser gleich die Code. Diese code muss natürlich auch ein Format haben damit der Browser versteht was er damit machen soll. Das Format nennt sich "base-code" oder "base64-code". Das Resultat auf dem Browser ist dasselbe - ein Bild in derselben Qualität.
Man kann kostenlose tools online finden welche eine Bild-Datei auf base64 kodieren (google-Suche = "base64 encoder").
Die Code für das Image speichern wir zunächst mal als .txt Datei in einem Editor, oder WordPad, separat für jedes Bild (nicht MS-Word!). Wir werden diese Datei/Dateien für den nächsten Schritt brauchen.
Achtung: a) Einige alte Browser können Bilder in im base64 Format nicht darstellen. b) Diese Kode könnte recht lang werden, ist aber nur eine einzige Zeile. Diese Zeile sollte keineswegs einen Zeilenumbruch oder sonstige Änderungen bekommen.
Tipp: Je größer die Bild Datei desto länger der Code. Allerdings ist nicht nur die Pixel-Größe ausschlaggebend, aber auch das Volumen. Man sollte also vorerst das Volumen ein wenig reduzieren/optimieren ... genau, mit einem kostenlosen online tool (google-Suche = "compress jpg" oder png, gif). Auch in der code von einem Bild kann es "whitespace" geben. Diese Leerstellen werden beim komprimieren des Bildes entfernt. Der Vorgang ändert nichts an der Qualität, es reduziert nur die KB ober MB des Bildes und verkürzt somit die code.
#5. HTML-Minimiren, Komprimieren (Body): Jetzt wollen wir den Rest des Html komprimieren, also jegliche unnötigen Leerzeichen und Zeilen sollen entfernt werden. Idealerweise ist dann alles auf einer einzigen Zeile, ABER die code für Bilder müssen wir im nachhinein noch dazwischen fügen. Dafür die richtige Stelle zu finden, könnte einige Zeit in Anspruch nehmen, deshalb kopieren wir erst mal nur vom </head> end-tag bis zum ersten <img ... />, fügen das in ein online-tool zum komprimieren. Die komprimierte Version fügen wir dann auf Zeile 3 ein.
Auf die nächste Zeile fügen wir nun die code für das erste Bild ein. Weiter geht's mit HTML komprimieren, einfügen, nächstes Bild usw.
Das HTML sollte dann so aussehen:
3 </head><body>< ... komprimiertes html bis zum ersten Bild, eine Zeile
4 <img alt="Beschreibung Bild-1" src="data:image/jpg;base64,... deine lange code hier" />
5 < ... komprimiertes html weiter bis zum nächsten Bild, eine Zeile
6 <img alt="Beschreibung Bild-2" src="data:image/jpg;base64,... deine lange code hier" />
7 < ... komprimiertes html weiter bis zum Ende, eine Zeile ...></body></html>
#6. Skripte (Javascript) Diese sollte man sowieso minimieren, denn da steht oft 10 mal soviel drinnen als tatsächlich für das Website benötigt wird. Danach wird es komprimiert mit einem kostenlosen online-tool (für js!). Nun fügt man die komprimierte Version von jedem Skript in die HTML-Datei ein. Wenn möglich sollten dies immer am Ende der Datei stehen
7 < ... komprimiertes html weiter ...</footer>
8 <script>komprimiertes js hier</script>
9 <script>mehr komprimiertes js hier</script></body></html>
Hat man Skripte die unbedingt in den head müssen, dann setzen wir es unterhalb des CSS ein, dies sollte aber bei einer HTML-Datei meist nicht nötig sein. Die Reihenfolge der Skripte (falls mehrere) spielt allerdings eine wichtige Rolle.
Tipp: jquery-Skripte sind meist groß, die meisten kann man auch schon in der minimierten/komprimierten Version runterladen = jquery-min, die sind aber trotzdem noch groß. Frage ist ob man das alles wirklich braucht? Ich habe hier z.B. ein Dropdown-Menü welches jquery braucht um zu funktionieren, aber den Skript den ich auf die Seite eingesetzt habe, ist nur ganz kurz, nicht das ganze sheet.
Nun Sollten alle links zu externen Dateien verschwunden sein, alles minimiert sein, komprimiert sein und wir sind fertig mit HTML, CSS, Skripten und Bildern
Hinweis: Ein link zu einer anderen Website die nichts in dein Website lädt, ist (hier) keine "externe Datei". Aber z.B. ein Bild, welches in deinem image-folder liegt ist eine externe Datei. Auch ein i-frame der Daten von einer anderen Website lädt, ist eine externe Datei.
#7. Cache anschalten: Was ist cache? Kurzgefasst bedeutet es, dass der Browser Kopien einiger Dateien der Website speichert und wenn wir die nächste URl des Webservers abrufen, brauchen diese Dateien nicht nochmals geladen werden – Der Browser kann dann einfach auf diese Dateien im Cache zugreifen. Weniger Downloads von Dateien bedeutet eine schnellere Website = besseres page-speed.
Nun haben wir in Schritt #1 bis #6 ja alles aus dem HTML genommen was runtergeladen werden muss, wozu dann noch Cache?
Das tun wir in diesem Fall mal nur um volle Punkte in der Bewertung zu erreichen, aber grundsätzlich sollte man den Cache sowieso anschalten - in der htaccess Datei.
Achtung: Auf einigen CMS z.B. auf Joomla gibt es diese Einstellung unter den globalen Einstellungen im Administrationsbereich. Schalte es dort an – ein Test wird zeigen ob es funktioniert oder nicht.
Angaben zum caching sind von Website zu Website verschieden, und man sollte dies wo anders noch mal nachlesen! Ein einfaches Beispiel würde etwa so aussehen:
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 5 days"
ExpiresByType image/gif "access plus 5 days"
ExpiresByType image/png "access plus 5 days"
ExpiresByType text/css "access plus 5 days"
ExpiresByType application/pdf "access plus 5 days"
ExpiresByType text/x-javascript "access plus 5 days"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
ExpiresDefault "access plus 5 days"
</IfModule>
Bildlich erklärt, wenn im HTML z.B. ein übliches image ist (also nicht base64 image), dann geschieht folgendes:
ohne Cache: Browser an Server: "Sever, schick mir mal bild-xyz.jpg".
mit Cache an: Browser an Cache "Cache, gib mir mal bild-xyz.jpg".
OK, und wenn der Besucher nächstes Jahr mal wieder kommt, kriegt er immer noch dasselbe Bild auf seinem Monitor zu sehen, vorausgesetzt der Besucher hat nicht seinen Cache geleert. Aber was ist wenn der Webmaster inzwischen das Bild gewechselt hat? ... Oops ja.
Deshalb geben wir dem Bild eine "Haltbarkeit" und nun läuft die Sache so:
mit Cache an und noch gültige Haltbarkeit: Browser an Cache "Cache, gib mir mal bild-xyz.jpg". Cache an Browser "Alles klar, bitteschön".
mit Cache an aber Haltbarkeit abgelaufen: Browser an Cache "Cache, gib mir mal bild-xyz.jpg". Cache an Browser "Nee, das Ding ist wie saure Milch, frag mal Server für eine neue Version"
Laut dem Code im Beispiel oben, haben also die meisten Dateien eine "Cache-Haltbarkeit" von 5 Tagen, andere von 1 Monat. Sollte ich also eine Datei erneuern, bekommt ein ehemaliger Besucher trotzdem noch die alte Version die auf seinem Cache gespeichert ist zusehen, solange diese bei ihm noch die "gültige Haltbarkeit" hat (expired = abgelaufen).
Es gibt noch etliche mehr Einstellungen für den Cache die man unternehmen könnte, auch in die HTML Datei kann man etwas zum caching einsetzen, aber für unsere Zwecke sollte dies erstmals reichen.
#8 g-zip Kompression anschalten: Wenn ein Benutzer auf eine URl eingibt, werden Anfragen zum Server gemacht um Dateien runter zu laden. Umso größer diese Dateien sind, desto länger braucht es diese vom Server zum Benutzer-Browser zu laden. Steckt man die Dateien in einen Zip, werden die sie nochmal komprimiert und lassen sich viel schneller runterladen. g-zip vermindert vor allem Leerstellen und leere Zeilen in den Dateien (whitespace) und kann somit eine Datei bis zu 70% in Volumen reduzieren. Der Browser entpackt die zip-Datei dann wieder. Das Verfahren für "packen und entpacken" des zips benötigt minimale Zeit im Gegensatz zur Einsparung der Zeit für den Download.
Diese Art Optimierung sollte eigentlich am oberen Ende der Liste für Optimierung stehen, fällt hier aber als letztes an. Da wir durch die Schritte #1 bis #6 eigentlich nichts mehr haben das durch einen Zip weiter komprimiert werden kann. Aber Google-Page-Speed möchte trotzdem dass dies angeschaltet ist.
Achtung: Auf einigen CMS z.B. auf joomla gibt es diese Einstellung im Administrationsbereich. Schaltet es dort erst mal an, ein Test wird zeigen ob es funktioniert.
Bei einer statischen HTML Seite, schrauben wieder mal an der htaccess Datei. Vorausgesetzt a) Man hat Zugang zu dieser Datei und b) das Website liegt auf einem Apache Server, dann könnte das etwa so aussehen:
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (fallback fuer alte browser)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>
Fertig, jetzt können wir die Webseite mal testen.
Gib Strg + u ein um meinen Quelltext zu sehen - sieht der Quelltext deiner Website ähnlich aus?
Bist Du jetzt auch Pagespeed Buster?
Setz deine URl der in den Google-Pagespeed-Test oder in andere SEO-online-Test ein, z.B. auf GT Metrix und schau was sie sagen.
Viel glück
Für fragen kann man mich hier kontakten.
Ob es gescheit ist alle diese Schritte auf der eigenen Website auszuführen und ob es sich lohnt dies zu tun, sollte jeder für sich entscheiden.
Wir diskutieren auch gerne über dieses und ähnliche Themen im Forum auf ayom.com