Pagespeed Insights und WordPress

Möchtest Du mehr Besucher durch bessere Suchmaschinenplatzierungen?

Kennst Du Dich mit Onpage Optimierung aus?

Hierfür gibt es speziell für WordPress entwickelte Plugins welche prüfen, ob das Schlüsselwort mit einem bestimmten Prozentsatz im Text vorkommt, die richtigen Überschriften-Tags verwendet wurden (H1, H2, …), ob das Schlüsselwort mal schräg und mal fett geschrieben vorkommt und mehr.
Du kennst das sicher.

Nur ist das noch zeitgemäß?

Google möchte Dir Inhalte liefern, die Dir gefallen.
Weiterhin kann Google mittlerweile sehr gut Besucher analysieren.

Stell Dir jetzt vor, Du besuchst eine Webseite. Schaust Du wirklich danach, welche Überschriften-Tags verwendet wurden und ob das Schlüsselwort fett geschrieben ist?

Sicher nicht. Warum sollte Dir Google dann gerade solche Seiten möglichst weit vorn anzeigen?

Stell Dir jetzt vor, Du kommst auf eine Seite mit super Inhalten, die sich noch dazu wahnsinnig schnell aufbauen.

So geht SEO heute!

Wie aus der Überschrift ersichtlich, geht es in diesem Beitrag um das Thema Geschwindigkeit.

Unter https://developers.google.com/speed/pagespeed/insights findest Du ein wunderbares Werkzeug von Google, welches Dir genau sagt, wie schnell Deine Webseite auf Desktop-PCs und mobilen Geräten ist und ob Deine Webseite für mobile Geräte geeignet ist.

WordPress für mobile Endgeräte optimieren

Um Deine Seite für mobile Geräte verwendbar zu machen, solltest Du ein sogenanntes Responsive Theme für Deinen WordPress Blog auswählen, welches Deine Inhalte für mobile Geräte optimiert.

Hierdurch hast Du die Chance, dass Deine Seite in der mobilen Suche von Google besser gerankt wird.

WordPress beschleunigen

Wie können wir nun unsere WordPress Seite schneller machen? Um dies so anschaulich wie möglich zu gestalten, verwende ich eine meiner Nischenseiten:

http://schallzahnbürste-test.de/

Aufgrund des von mir verwendeten Themes Sahifa, ist meine Nischenseite für mobile Geräte geeignet.Pagespeed Insights Nutzererfahrung
Allerdings gibt es beim Thema Geschwindigkeit noch einiges zu tun.

Google Pagespeed Insights zeigt mir einen Geschwindigkeitswert von 48/100 (Mobile), bzw. 58/100 (Desktop).Pagespeed Insights

Falls Du bisher noch keine Optimierungen vorgenommen hast, wird dies bei Dir sicher ähnlich aussehen.

Das ist definitiv eine Ursache für schlechte Rankings!

Wir gehen jetzt anhand der Empfehlungen von Pagespeed Insights vor.

Komprimierung aktivieren

Hierzu installieren und aktivieren wir das Plugin W3 Total Cache.

Klicke nun im Admin Bereich von WordPress im linken Menü auf Performance und dann auf General Settings.

Sollte ein Popup stören, klicke es einfach weg.

Scrolle nun bis zum Ende der Seite herunter. Dort findest Du den Import/Export Bereich.

Ich habe die von mir verwendeten Einstellungen für Dich in einer Datei gespeichert, welche Du Dir hier downloaden und speichern kannst.
Diese Datei musst Du vor dem Import noch entpacken.
Klicke danach neben Import auf ‚Durchsuchen‘, wähle diese Datei aus und klicke ‚Upload‘.

Jetzt hast Du die gleichen Einstellungen, wie ich sie auf meinen Webseiten verwende.

Als Ergebnis bekomme ich 71 bzw. 81 von 100 angezeigt.Geschwindigkeit steigern mit w3 total cache


Der nächste Pagespeeds Insights Tipp lautet nun:

‚JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten „above the fold“ (ohne Scrollen sichtbar) beseitigen
Ihre Seite enthält 3 blockierende Skript-Ressourcen und 5 blockierende CSS-Ressourcen. Dies verursacht eine Verzögerung beim Rendern Ihrer Seite.‘

Die Ursache hierfür liegt darin, dass JavaScript- und CSS-Ressourcen meist im Kopfbereich einer HTML Datei geladen werden und somit den Seitenaufbau verlangsamen. Die meisten JS Dateien, können jedoch problemlos auch am Seitenende geladen werden.

Bei CSS Dateien würde dies jedoch dazu führen, dass das Layout der Seite erst korrekt angezeigt wird, wenn die ganze Seite geladen wurde. Das ist nicht wirklich schlimm, sieht aber eventuell anfangs etwas eigenartig aus. Daher sorgen wir dafür, dass die JS Dateien an das Ende rutschen. Die CSS-Dateien lassen wir erst einmal unberührt.

Hierfür installieren und aktivieren wir das Plugin ‚Speed Booster Pack‘ und klicken dann auf ‚Settings‘.

Speed Booster Pack

Hier klickst Du nun unter ‚General Options‘ alle Kästchen an.

Wichtig ist nun noch der letzte Punkt ‚Still need more speed?‘
Wähle hier die obersten beiden Optionen aus.Speed Booster Pack

Nun scrollst Du nach unten und klickst ‚Änderungen übernehmen‘.
Damit unsere Änderungen auch wirksam werden, leeren wir nun den Seitencache. Drücke hierzu auf ‚empty the page cache‘.
empty page cache

Zurück bei Pagespeed Insights sehen wir nun das folgende Ergebnis:
Pagespeed Insights nach speed booster

Bzgl. der Geschwindigkeit haben wir diesmal keine wirkliche Verbesserung erzielt. Allerdings sind eine ganze Menge Meldungen bzgl. störender JS und CSS Dateien bereits verschwunden.

Zwei Dateien stören weiterhin und stellen uns nun vor eine größere Herausforderung.
Die erste wird scheinbar von dem von mir installierten Plugin GD Star Rating verwendet.
Ich entscheide mich dieses Plugin zu löschen, da ich es nicht für sehr wichtig halte.

Auch das macht meine Seite nicht wesentlich schneller.

http://fonts.googleapis.com/css?family=Droid+Sans:regular,700
sieht so aus, als ob hier ein Zeichensatz von Google geladen werden soll. Ich brauch ihn nicht, also löschen.
Doch wie?

Prinzipiell gibt es ein Plugin, welches das Nachladen von Zeichensätzen von Google verhindern soll. Dieses hat jedoch bei mir nicht funktioniert. Mir bleibt also nur noch das Eingreifen in den Quellcode. Dies sollte immer die letzte Möglichkeit sein, da diese mit jedem Update des Themes wieder aufgehoben wird.

Ich durchsuche also den Quellcode meines Themes mit notepad++ und werde in der Datei ’sahifa\framework\functions\common-scripts.php‘ fündig.

common-scripts.phpHier lösche ich den Code, leere den Seitencache und prüfe das Ergebnis:

google fonts entferntImmerhin. Bereits 80 bzw. 84 von 100 Punkten.

Die nächste Pagespeed Insights Empfehlung lautet nun:

Browser Caching nutzen

Browser Caching nutzen

Und wenn wir uns jetzt die genannten Dateien anschauen, stellen wir fest, dass es sich ausnahmslos um Dateien handelt, welche auf anderen Servern liegen und wir somit nichts machen können, wenn wir sie dann wirklich verwenden wollen.

Pinterest, Google+, Linkedin sind Social Media Plattformen, auf welche ich im Interesse eines besseren Rankings zumindest am Anfang verzichten kann. Also werde ich sie entfernen.
Amazon hingegen lasse ich natürlich drin, da mir Einnahmen wichtig sind. 🙂

Die Social Media Buttons deaktiviere ich in meinen Theme Einstellungen. Anschließend den Seitencache leeren nicht vergessen!
Hierzu deaktiviere ich irgendein Plugin. Dann fordert mich WordPress auf, den Cache über den ‚empty Cache‘ Button zu leeren. (s. Bildschirmfoto oben)

Voila! 85 bzw. 91 von 100 Punkten. Ich befinde mich nun im grünen Bereich.

Browser Caching social media entfernt

Wahrscheinlich könnte ich jetzt bereits aufhören, aber da geht noch mehr. 🙂

http://s.gravatar.com/js/gprofiles.js entferne ich durch Löschen des Plugins ‚Jetpack for WordPress‘.

Browser Caching Gravatar entfernt

96 bzw. 95 von 100 Punkten. Schon fast ideal.

Wenn Du weißt, wie Du Dir automatisch einmal am Tag die Datei analytics.js von Google auf Deinen Server kopierst, kannst Du auch nochmal etwas an Geschwindigkeit herausholen.
Dies führt jetzt aber hier zu weit.
Solltest Du Interesse haben, hinterlasse mir bitte einen Kommentar.

Borwser Caching analytics.js entfernt

In dem Fall hat uns dies nicht viel weitergebracht. Prinzipiell ist jeder vermiedene externe Dateizugriff jedoch positiv.

Die verbleibenden aufgeführten Dateien liegen auf fremden Servern. Hier sind wir machtlos.
Also gehen wir weiter zur nächsten Empfehlung von Pagespeed Insights:

Antwortzeit des Servers reduzieren

Pagespeed Insights bemängelt hier Antwortzeiten von über 0,2 Sekunden. Der Wert meines Servers ist mit 0,26 Sekunden also schon recht ordentlich. Solltest Du keinen eigenen Server betreiben, kannst Du hier nichts machen, außer vielleicht perspektivisch den Hoster zu wechseln. Je nachdem wie gut oder schlecht der Wert für Deine Webseite ausfällt.

Ich habe noch die Möglichkeit den FastCgi Modus auf meinem Server zu aktivieren.

Antwortzeit des Servers minimieren

96 und 96 von 100 Punkten!

Jetzt schlägt uns Pagespeed Insights noch die Komprimierung von Javascript Dateien vor. Hierbei werden nicht benötigte Leerzeichen und Zeilenumbrüche entfernt. das erledigen wir mit Onlinetools wie beispielsweise http://javascript-minifier.com/

Natürlich können wir dies nur mit jenen Dateien machen, die auf unserem Server liegen.
Auch hier solltest Du Dich etwas mit Quellcode auskennen und das Original vorher sichern.

Öffne die Datei mit einem Texteditor, kopiere den Dateiinhalt in das entsprechende Eingabefeld auf http://javascript-minifier.com, klicke auf ‚Minify‘. Das Ergebnis kopierst Du jetzt in die Textdatei und speicherst diese wieder auf Deinen Server.

Javascript Dateien minimieren

Das war wiederum nur ein kleiner Schritt zum perfekten Ergebnis.
Solltest Du diesbezüglich auch Meldungen zu CSS Dateien bekommen. Kannst Du genau so vorgehen und den CSS Minimierer http://cssminifier.com verwenden.

Der letzte TIPP lautet ‚HTML reduzieren‘.
Dies bezieht sich jedoch wieder auf eine externe Datei, auf die wir keinen Einfluss haben.

Solltest Du Bilder verwenden, erscheing ggf. der Hinweis, dass sich diese verkleinern lassen. Auch hierfür gibt es Online Tools.

Allerdings hilft Google selber auch kräftig mit. Am Ende der Auswertung stellt Dir Google alle benötigten minimierten Dateien in einer ZIP-Datei zur Verfügung. Suche einfach nach ‚Sie können optimierte Bild-, JavaScript- und CSS-Ressourcen für diese Seite herunterladen.‘

Somit habe ich getan, was ich konnte. Ein Ergebnis von 100 ist möglich. Allerdings muss ich dann ohne externe Dateien auskommen, was für die meisten Webseiten nicht sinnvoll ist.
Wie Du gesehen hast, musst Du auch Entscheidungen zwischen Nutzen und Ladezeit, sprich Suchmaschinenpositionierung treffen.
Ich habe mich gegen die Verlinkung zu Sozialen Medien entschieden und verzichte dadurch auf Besucher. Andererseits wird meine Webseite dadurch schneller und somit hoffentlich bei Google höher gerankt, was dann wiederum Besucher bringt.
Das kann für Deine Webseite ganz anders aussehen.

Nachdem Du die Ladezeit mit diesen Tipps sicher um einiges reduzieren konntest, solltest Du in einigen Tagen Verbesserungen beim Ranking feststellen.

3 comments

  1. Hi!

    Danke für die gute Zusammenfassung. Du beschreibst hier die Optimierung für die „Startseite“. Auf anderen Seiten können ja mittels PageSpeed Test weiterhin sehr viel schlechtere Ergebnisse Status quo sein, als es die Indexseiten-Ergebnisse vermuten lassen. So gesehen müsste ja die Optimierung per Seite geschehen, was für mich persönlich irgendwann zur Sysyphus Arbeit wird, da die „knöpfchen“ in den Plugins ja irgendwann ausgereizt sind. Wie siehst Du das?

    LG
    Timo

    • Hi Timo,

      Danke für Deinen Hinweis.
      Da im normalen Bloggeralltag die meisten Seiten auf dem gleichen Template beruhen und somit die gleichen Komponenten laden,
      sollte die Optimierung der Startseite auch für die meisten Seiten ähnlich gute Ergebnisse liefern.
      Selbstverständlich wäre mir die Optimierung jeder einzelnen Seite auch zu viel Arbeit. 🙂

      Liebe Grüße,
      Dirk

      • Hi Dirk,

        danke für Deine Rückmeldung. Im Großen und Ganzen passt es bei mir auch. Ich verfahre jetzt einfach nach dem Motto „Hauptsache grün“.

        VG
        Timo

Schreibe einen Kommentar

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