Mittlerweile trägt die Punktzahl von google page speed zum Ranking bei. Wenn auch im geringen Maße. Dennoch Grund genug, das etwas genauer unter die Lupe zu nehmen.

Der page speed Score wird von google nach Qualität der Optimierung vergeben und nicht generell für Seiten mit sehr geringer Ladezeit. Auch wenn dies ebenfalls ein Faktor ist. Eine Seite mit mehreren großen Bildern (oder Scripten) kann ebenso eine hohe Score erreichen. Faktor ist hier in erster Linie der Grad der Optimierung.

Ein anderes online-tool, welches noch genauer ist, kann man unter GTmetrix.com finden.

pagespeed erläuterung
Der Score ist die Summe an erzielten Punkten, die Google nach der Auswertung des Seiten-Quelltextes und einigen anderen Fakoren vergibt. Je höher der page speed Score, desto performanter ist die Seite.



Mögliche Optimierungen, die mit einem roten Anführungszeichen versehen werden, sind mit höherer Priorität zu behandeln.

Google stellt einen Dienst bereit, welcher die Dateien (inklusive Bilder, JavaScript und CSS) on-the-fly optimiert. Ohne das man sich im Detail darum kümmern muß. Momentan ist dieser Service kostenlos, man kann aber davon ausgehen, dass er dies in Zukunft nicht unbedingt bleiben wird.

Zusätzlich wird ein Modul für Apache (2.2 und 2.4) und Nginx zur Verfügung gestellt. Dieses kann man sich lokal auf seinem Server installieren und so die Optimierung bequem automatisch erfolgen lassen. Dies ist zu empfehlen, wenn genügend Ressourcen zur Verfügung stehen. Diese Erweiterung ist auf der google page speed Seite zu beziehen.

Viele dieser Optimierungen werden auch bereits vom eigenen CMS übernommen. Ein gängiges plugin für Wordpress, welches direkt den google page speed beeinflusst, ist z.B. W3-Total-Cache.

Was sind die Optimierungen für google page speed score im einzelnen?


Der page speed Score wird hauptsächlich anhand von 10 Regeln definiert:

  1. Komprimierung


    Hiermit ist die GZIP Komprimierung der Dateien gemeint. Wird in der Regel vom Seitenbetreiber (Hoster) eingestellt. In manchem Fällen ist dies auch im CMS steuerbar. Durch die Komprimierung wird die zu übertragende Datenmenge spürbar reduziert.

    Wenn man Zugriff auf seine Apache Dateien hat, kann man die Kompression folgendermaßen einstellen:

    <ifmodule mod_deflate.c>
    <filesmatch "\.(js|css|html|htm|xml|json|rss|txt|svg|pdf)$"
    SetOutputFilter DEFLATE
    </filesmatch>
    </ifmodule>


    oder mittels einer LOCATION Anweisung:

    <Location />
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/atom_xml
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/x-httpd-php
    AddOutputFilterByType DEFLATE application/x-httpd-fastphp
    AddOutputFilterByType DEFLATE application/x-httpd-eruby
    </Location>


  2. Zielseiten-Weiterleitungen vermeiden


    Damit sind Weiterleitungen (redirects) auf andere Seiten gemeint. Da jede Weiterleitung eine weitere Serveranfrage bedeutet, sind diese, wenn möglich, zu vermeiden.

  3. Antwortzeit des Servers reduzieren


    Hier hat man in der Regel wenig Einfluss. Die Antwortzeit lässt sich durch eine schnelle Server-Anbindung, einem guten Hoster, sowie durch Cache und Cache-Direktiven direkt beeinflussen. Die gängigen CMS Systeme stellen dafür Erweiterungen oder plugins bereit, welche das caching von dynamischen Webseiten ermöglichen. Zum Beispiel das oben bereits verlinkte W3-Total-Cache plugin. Ähnliche plugins gibt es für jedes größere CMS auf dem Markt.

  4. Browser-Caching nutzen


    Browser Cache beschleunigt enorm die Darstellung einer Webseite, wenn der Nutzer die Seite erneut besucht. Dies kann über mehrere Wege geschehen.

    Am gängigsten ist sicher die EXPIRES Angabe im Header. Entweder im Response Header der Anfrage oder direkt in der HTML Seite. Auch diese Aufgabe sollte vom CMS übernommen werden. Für statischen Content kann man dies aber wieder manuell in der Apache Konfigurationsdatei eintragen:

    <IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType text/javascript "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 month"
    ExpiresByType application/x-javascript "access plus 1 month"
    ExpiresByType image/gif "access plus 1 month"
    ExpiresByType image/jpeg "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType image/x-icon "access plus 1 month"
    ExpiresByType image/svg+xml "access plus 1 month"
    </IfModule>


    Diese Angabe wird reichen, besser sind aber (zusätzliche) Direktiven wie Cache-Control, Last-Modified oder ETag.

  5. Bilder optimieren

    Hier lässt sich, wenn die Bilder bisher nicht optimiert wurden, eine sehr hohe Datenmenge einsparen und viele Punkte für page speed Score gewinnen. Das oben angegebene Apache/Nginx Modul pagespeed übernimmt auch hier wieder diese Aufgabe. Das eigene CMS sollte die Bilder beim hochladen und/oder modifizieren ebenfalls optimieren.

    Stehen beide Methoden nicht zur Verfügung, lässt sich auch hier manuell nachhelfen. Ein Windows tool zum komprimieren und optimieren von Jpeg Bildern ist z.B. jpeg mini. Ein guter online-Dienst zum komprimieren von PNG Bildern ist TinyPNG.

    Serverseitig kann ich jpegoptim nur empfehlen. Mit diesem Werkzeug lassen sich rasch ganze Verzeichnisse voller Bilder optimieren, so dass google page speed nicht mehr meckern sollte. Aufgerufen wird jpegoptim mit dem Parameter --strip-all.

    Zusätzlich kann man mehrere Bilder in CSS Sprites zusammenfassen und so die Anzahl der Requests verringern.

    Auch sollten die Bilder immer in der richtigen Größe eingebunden werden.

  6. CSS reduzieren

    CSS Dateien werden von überflüssigen Zeilen und Zeichen bereinigt - "minified".

    Auch diese Aufgabe wird vom Apache/Nginx Modul pagespeed übernommen. Sowie von gängigen CMS mit entsprechenden plugins.

    Dazu gibt es einige PHP Scripte, die diese Aufgabe übernehmen. Manuell kann man diese Aufgabe mit einem Windows Programm lösen. Dieses kann CSS und JavaScript Dateien komprimieren.

  7. JavaScript reduzieren


    Hier gilt dasselbe wie unter Punk 6.

  8. HTML reduzieren


    Dies ist nicht ganz so einfach machbar, wie Punkt 6 und Punkt 7. In der Regel hat man HTML Templates, die unleserlich werden, wenn man sie reduziert. Das gilt natürlich für CSS und JavaScript Dateien ebenfalls, aber diese ändert man doch wesentlich seltener.

    Hier sollte ein CMS mit entsprechendem plugin oder eben das bereits erwähnte pagespeed Modul eingesetzt werden.

  9. Sichtbare Inhalte priorisieren


    Dies betrifft die Struktur der HTML Seite. Inhalte, die der Besucher sofort zu Gesicht bekommen soll, sollten an den Anfang der HTML Seite verschoben werden. Auch können JavaScript Anweisungen und CSS Formatierungen aufgeteilt und zumindest teilweise an das untere Ende der HTML Datei gesetzt werden.

    Dies betrifft in erster Linie den Webdesigner, bzw. das Template, welches man benutzt.

    Zum Beispiel wird der eigentliche Inhalt einer Webseite an den Angang der Seite gesetzt und Navigation, Sidebar usw. an das Ende. Ebenso sollten Code Blöcke von Drittanbietern, z.B. Facebook oder diverse Widgets, die man in die HTML Seite einbauen kann (dies betrifft direkt auch Werbung), nicht unbedingt am Anfang der HTML Seite stehen.

  10. JavaScript und CSS Ressourcen, die das Rendering blockieren


    Jede Datei die mit eingebunden wird, bedeutet für den Browser eine weitere Server-Anfrage und beeinflusst den page speed Score einer Seite enorm.

    Falsch platzierte JavaScript oder CSS Einbindungen blockieren den Browser kurzfristig und beeinflussen direkt den page speed.

    Auch hier ist in erstler Linie der Designer gefragt, bzw. die Struktur des eigenen Templates.

    JavaScript und CSS Dateien, die nicht benötigt werden, um den Hauptteil einer Webseite korrekt darzustellen, (above-the-fold-region), können aus dem HEAD in einen hinteren Bereich der Seite verschoben werden. Kleinere Anweisungen, oder Anweisungen die sofort benötigt werden, können direkt in die HTML Seite geschrieben und nicht in externe JavaScript Dateien ausgelagert werden.

    Außerdem sollte man soviel Dateien zusammenfassen, wie möglich. Entweder macht man dies direkt, in dem man alle Scripte und CSS Dateien zu einer großen Datei zusammenfasst, oder man lässt diese Aufgabe ebenfalls durch sein CMS inklusive plugin erledigen.

    Eine weitere Möglichkeit, die Dateien zusammenzufassen und die eigene Dateistruktur zu erhalten (was die Übersichtlichkeit erhöht), ist diese einfache PHP Umsetzung:

    <?phpheader('Content-type: text/css');?>

    <?php
    header('Content-type: text/css');
    echo file_get_contents('pfad/datei1.min.css').
    file_get_contents('pfad/datei2.min.css').
    file_get_contents('pfad/datei3.min.css');
    file_get_contents('pfad/datei4.min.css');
    ?>


    Diese php Datei nennt man einfach css.php und bindet sie anstelle der einzelnen CSS Dateien in die HTML Seite ein:

    <link rel="stylesheet" href="css/css.php" type="text/css" media="screen">

Wenn man sich diese 10 Punkte vornimmt und optimiert, sollte man bereits ein page speed score von über 90 erreichen. Dies sagt aber noch nicht alles über die tatsächliche Geschwindigkeit aus, mit der die Webseite ausgeliefert wird.

Darüberhinaus gibt es noch sehr viele weitere Punkte, die page speed score beeinflussen, bzw. die Ladezeit verringern. Darauf im einzelnen einzugehen, würde hier den Rahmen sprengen und ist einen weiteren Artikel wert.

Darunter fällt unter anderem:

  • Content Delivery Network´s (wenn möglich für CSS und JS-Dateien)
  • Subdomains ohne Einsatz von Cookies
  • async und defer für JavaScript-Einbindungen
  • Verzicht auf @import-Befehle für CSS-Dateien
  • Templates und Datenbankabfragen
  • Korrekter Cache Validator
  • CSS Sprites
  • Reduce DNS lookups
  • Configure entity tags (eTags)


teile diesen Beitrag

14 Kommentare

  1. Avatar
    Mo, Feb 10, 2014

    Danke für diese tolle Auflistung, bin jetzt auch bei 90 aber im mobilen Bereich komme ich nicht so richtig weiter.

    Habe Autooptimize im Einsatz, dass Plugin sorgt aber selbst für eine neue Fehlermeldung, ist gar nicht so einfach.

  2. Avatar
    Tinka
    Mi, Jul 16, 2014

    Auch von mir vielen Dank. Stehe nur grad aufm Schlauch, wo genau binde ich den Code ein?



    Vielen Dank im Voraus!

  3. Avatar
    So, Sep 14, 2014

    Hallo Jörg. Ich habe eine Frage an dich. Irgendwo im Net habe ich mal gelesen. Wenn ein Artikeltext viele Zeilenumbrüche enthält oder Leerzeilen. Das sei schlecht für die Ladezeit. Stimmt das. Oder ist das Humbuck? Ich mag es nämlich, Texte luftig zu machen. Mit Zeilen, die nicht bis ans Ende gehen. Schau dir die Artikel mal an. Dann siehst du, was ich meine. Ich finde: damit muss der Leser zwar etwas mehr scrollen. Weil die Artikel nach unten länger werden. Aber die Zeilen lassen sich sehr leicht lesen. Das Ganze macht nur dann Sinn, wenn die Ladezeit nicht nennenswert darunter leidet. Es wäre schön, wenn du mir deine Meinung schreiben könntest. Vielen Dank!

  4. Avatar
    Mi, Sep 17, 2014

    Also ich bleibe ja immer noch an diesem "above the fold" hängen. Komischerweise zeigt er das bei ein paar Seiten von mir an und bei ein paar nicht. Der Quelltext ist allerdings bis auf den Inhalt der gleiche oO

  5. Avatar
    Fr, Okt 17, 2014

    Danke für die Tipps, meine Antwortzeit beträgt nun 0,32. Mal sehen was ich noch so alles herausfinden kann.

  6. Avatar
    Do, Jul 2, 2015

    Danke für das tolle Tutorial und für die Aufklärung. Meine Seite kann ich nur mäßig optimieren, weshalb ich mal alle Punkte durchgehen werde und versuche sie umzusetzen. Mal schauen, ob es was bringt.

    LG

    Ulf

  7. Avatar
    Di, Jul 28, 2015

    Hi ,
    wer größere Seiten betreibt sollte sich unbedingt mit dem Content Delivery Network beschäftigen. Ansonsten eben - wie der Artikel es auch sehr gut beschreibt - die einzelnen Maßnahmen zur Optimierung der Websites durchführen. Ich habe die Erfahrung gemacht, dass bei Bildern einiges rauszuholen ist und auch fähige Coder den Code der Webseite strukturierter und mit weniger Zeilen programmieren können. Natürlich muss auch entsprechendes Geld in das Hosting gesteckt werden, Datenbanken sind generell ein Garant für Optimierung ;)

    Viele Grüße

  8. Avatar
    Fr, Okt 23, 2015

    Ich habe da seit Jahren so meine Probleme mit dem Punkt 10, wie wahrscheinlich alle die PS-Optimierung machen und habe immer noch keine vernünftige Lösung hierfür :(
    Und gerade dieser Punkt bringt wohl die meisten Punkte?!

    In jedem Layout ist die Navigation nun eben im ATF-Bereich..
    setzt man z.b. Bootstrap ein, hat man gleich eine din a4 Seite minimiertes CSS nur für diesen Bereich (alleine von bootrap her UND noch so paar Zeilen eigenes css) und das jetzt extrahieren und auf jeder Seite neu laden? *heul*

    Das verdreifacht ja schon fast die Dateigröße bei simplen Seiten..

  9. Avatar
    Sa, Jan 30, 2016

    Mal ein Beispiel zu Punkt 5 "Bilder optimieren". Ich habe auf einer Webseite (Unterseite) 3 Bilder mit einer jeweiligen Größe von 20kb. Das ist nichts. Trotzdem bekomme ich die Meldung von Google, das meine Bilder optimiert werden sollte um die Ladezeit zu verkürzen. Das nenne ich mit "Kanonen auf Spatzen zu schiessen", da andere Webseite Bilder im MB bereich verwenden. Ganz ausgereift scheint mir das System nicht zu sein...

    Gruß aus Hamburg
    Thomas

  10. Avatar
    Mo, Mrz 7, 2016

    Ich halte mich auch schon länger an die Vorgaben und Ergebnisse aus dem Page Speed Checker. Ich denke schon das dies größere Bedeutung für das Ranking haben kann oder tut. Der Großteil davon lässt sich auch recht schnell und einfach umsetzen.

  11. Avatar
    Mo, Mrz 7, 2016

    Ich halte mich auch schon länger an die Vorgaben und Ergebnisse aus dem Page Speed Checker. Ich denke schon das dies größere Bedeutung für das Ranking haben kann oder tut. Der Großteil davon lässt sich auch recht schnell und einfach umsetzen.

  12. Avatar
    Di, Apr 12, 2016

    Wir haben unseren Page Speed auf anraten unseres Websigners vor einem halben Jahr optimieren lassen und bis jetzt keinerlei Veränderungen bei Goggle festellen können...

  13. Avatar
    So, Apr 24, 2016

    (CDN) währe hier vielleicht noch ein Thema, alles andere ist mir bekannt.

  14. Avatar
    Do, Mai 12, 2016

    Ich denke das der Page Speed eher in der "mobilen Suche" Vorteile verschaffen kann, da die meisten User heute zu Hause schnelles Internet haben. Auf dem Handy dagegen macht es sich schon bemerkbar.

Diskutiere mit!

 
Kommentar senden