IT & Technik
Kommentare 11

PageSpeed optimieren – wie & warum?

PageSpeed

In diesem Artikel geht es um das Thema PageSpeed Optimierung, also die Verbesserung der Zugriffs- & Ladezeiten der Website.

Ich zeige am Beispiel meiner Seite einfache Tests, die man leicht selbst durchführen kann, und gebe Tipps, wie man eigenhändig die Performance seiner Seite verbessern kann.

Und warum das Ganze?

Damit sowohl der Leser als auch Google mehr Spaß beim Aufrufen & Lesen der Seite haben.

Denn nur wenn diese beiden die Website mögen, steigt der Platz in den Rankings. Dann bekommen Suchende die Links weiter vorne angezeigt, klicken darauf, werden so zum Besucher und am Ende gar zum Stammleser und der Traffic auf der Seite steigt & steigt.

PageSpeed testen

Da Google das Thema PageSpeed so wichtig findet, fängt man am besten gleich bei Google PageSpeed Insights an zu testen: https://pagespeed.web.dev/

Einfach die eigene URL eingeben und warten, was Google davon hält. Im Web gibt es tatsächlich Seiten, die 100 von 100 Punkten erreichen, aber das ist wirklich nur mit viel Mühe und technischem Sachverstand möglich. Das Unternehmerhandbuch erreicht aktuell Werte um die 88 Punkte, das finde ich schon sehr gut.

Google gibt neben einer Bewertung dann auch gleich ganz viele Optimierungsvorschläge aus. Nicht wundern, wenn man zunächst die ganzen Begriffe nicht kennt und auch nicht weiß, wie man vorgehen soll. Ich musste mich da auch Stück für Stück reinfuchsen, aber es ist gar nicht so schwer, wenn man erst mal weiß, wo man anfangen sollte. Bei mir stehen unter High Priority die Begriffe Improve server response time und Bilder in CSS-Sprites kombinieren.

Eine Alternative Testplattform ist http://www.webpagetest.org/. Auch hier einfach die URL eingeben und ein wenig warten, dann spuckt der Webpagetest ganz viele Bewertungen und Hinweise aus, die man für eine Verbesserung des PageSpeed nutzen kann.

Für das Unternehmerhandbuch sieht das aktuell so aus:

WebPageTest.org - Ergebnis

WebPageTest.org – Ergebnis

Wie man sieht muss ich mir also besonders die Bereiche First Byte Time und Compress Images mal vornehmen.

Auch Pingdom sagt mir, dass das Unternehmerhandbuch erst nach 1.186 Millisekunden antwortet, das ist weit über dem Durchschnittswert bei vergleichbaren Seiten von unter 760 ms und kann so nicht bleiben!

Fazit: Google, Pingdom & der WebPageTest sind sich also einig, dass mein Server zu spät antwortet, wenn man die Seite aufruft. Da muss ich wohl mal mit meinem Hoster sprechen, denn das kann ich selbst gar nicht beeinflussen. Hier kommt es sehr stark darauf an, wo der Server steht und mit wem man sich ihn teilt.

PageSpeed verbessern

Eine gute Seite, die von Google gezeigten Tipps zu verstehen und umzusetzen, ist Page-Speed.net. Hier wird zu vielen von Google vorgeschlagenen Verbesserungstipps gezeigt, wie man das macht. Außerdem gibt es auch bei Torben Leuschner eine Reihe guter Tipps zum Thema.

Ich habe mich jetzt erst mal an den für mich wichtigsten 3 Themen versucht:

GZIP Komprimierung aktivieren

Falls der Server, auf dem die Website liegt, GZIP-Komprimierung unterstützt, kann man diese ganz leicht mit einem Eintrag in der .htaccess aktivieren:

<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/plain text/html text/xml
    AddOutputFilterByType DEFLATE text/css text/javascript
    AddOutputFilterByType DEFLATE application/xml application/xhtml+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/javascript application/x-javascript
</IfModule>

Einfach einfügen, speichern und schwupps geht alles schon viel schneller.

Bei WordPress liegt die .htaccess direkt im WordPress-Verzeichnis. Da kann man sie dann mittels eines FTP-Clients wie FileZilla und eines Texteditors wie Notepad++ bearbeiten.

Bilder komprimieren

Wer wie das Unternehmerhandbuch gerne mit Bildern arbeitet, sollte darauf achten, dass man diese gleich im benötigten Format hoch lädt. Also die Bilder VOR dem Upload mit einem Bildbearbeitungsprogramm auf das richtig Format verkleinern oder zuschneiden, denn wenn der Verkleinerungsvorgang erst online im Browser durchgeführt werden muss, dann dauert das natürlich länger, als wenn das passende Bild sofort bereit steht.

Das habe ich aber schon immer so gemacht, so dass sich hier für mich keine Änderung im Workflow ergeben hat. Spart außerdem auch Platz auf dem Server.

Wer genau wissen will, wie man optimale Bilder fürs Netz erstellt guckt hier nach: Bilder fürs Internet optimieren in 3 einfachen Schritten!

Browser-Caching nutzen

Hier wird festgelegt, ob der Browser nach einer neuen Datei auf dem Server suchen soll oder die aus seinem Cache verwenden kann (was deutlich schneller geht). Auch dafür reichte bei mir ein kleiner Eintrag in die .htaccess:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 month 1 days"
ExpiresByType text/html "access plus 1 month 1 days"
ExpiresByType image/gif "access plus 1 month 1 days"
ExpiresByType image/jpeg "access plus 1 month 1 days"
ExpiresByType image/jpg "access plus 1 month 1 days"
ExpiresByType image/png "access plus 1 month 1 days"
ExpiresByType text/css "access plus 1 month 1 days"
ExpiresByType text/javascript "access plus 1 month 1 week"
ExpiresByType application/x-javascript "access plus 1 month 1 days"
ExpiresByType text/xml "access plus 1 seconds"
</IfModule>

Wie bereits oben beschrieben: einfügen, speichern & hochladen und schon sollte Google nicht mehr motzen.

Wichtig: natürlich immer eine Sicherungskopie der gerade bearbeiteten Datei machen, vielleicht verträgt sich die eine oder andere Einstellung nicht mit dem eigenen System!

Ergebnis der Optimierung

Bei mir hat sich die Bewertung bei Google um rund 20 Punkte verbessert, ob sich dass in Zukunft in mehr Besuchern und besseren Rankings auszahlt bleibt abzuwarten. Peer Wandiger konnte z.B. eine deutliche Steigerung der Besucherzahlen verzeichnen, nachdem er seine Seite optimiert hatte. Ich bin also optimistisch!

Aber auch für den menschlichen Leser ist die PageSpeed Optimierung deutlich sichtbar. Wenn man die Seite aufruft hat man nach diesen Verbesserungen den Inhalt wesentlich schneller auf dem Schirm als vorher und das steigert mit Sicherheit das Uservergnügen.

Natürlich könnte ich noch viel viel mehr optimieren, aber damit warte ich jetzt bis das neue Theme da ist. Das wird mein Geburtstagsgeschenk ans Unternehmerhandbuch. Das wird nämlich am 31.05.2013 drei Jahre alt und ich denke, in dem Alter kann man sich ein Make Over gönnen, oder?

Dies ist mein Beitrag zur Blogparade von Martin Grünstäudl „Mein wichtigster Traffictipp für Blogger“.

PageSpeed

Pin it!

11 Kommentare

  1. Avatar-Foto
    Marc sagt

    Vielen Dank für die wertvollen Tipps. Du hast mich auf die richtige Spur gebracht; jetzt ist unser Blog endlich auch reaktionsschnell. 80 Punkte statt 54, da will ich mal nicht meckern!

  2. Avatar-Foto

    Pagespeed wird künftig immer wichtiger. Besonders für mobile Projekte ist sie relevant. Günstig ist stets, einzelne Dateien klein zu halten.

  3. Avatar-Foto

    Hallo Heike!

    Danke für die Teilnahme und den sehr interessanten Beitrag mit vielen nützlichen Infos.

    PS: Der Link zur Parade fehlt noch, dann bist du mit dabei :)

    Liebe Grüße
    Martin

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Wenn Du wissen möchtest, welche Daten wir beim Hinterlassen eines Kommentars speichern, schau bitte in unsere Datenschutzerklärung.