Ladezeit-Optimierung, Footer, Artikel und eine Erkältung – NSC-Rückblick Woche 4

Ladezeit-Optimierung, Footer, Artikel und eine Erkältung - NSC-Rückblick Woche 4Die vierte Woche stand ganz im Zeichen von Optimierungen und Anpassungen.

Dabei habe ich mich vor allem der Ladezeit gewidmet, da diese noch sehr schlecht war. Im Folgenden gehe ich darauf ein, was ich optimiert habe, welche Plugins ich nutze und wie sich das auf die Ladezeit ausgewirkt hat.

Zudem habe ich mich um den Footer und neue Inhalte gekümmert.

Nischenseiten-Challenge Hauptquartier

Rückblick Woche 4: Ladezeit und mehr

Leider hat mich in der letzten Woche eine Erkältung erwischt. Ab Mitte der Woche war ich etwas angeschlagen und nicht so produktiv, wie ich das gern gewesen wäre.

Allerdings habe ich dennoch das geschafft, was ich mir vorgenommen hatte, was auch daran lag, dass ich auf bewährte Plugins zurückgegriffen habe.

Ladezeit-Optimierung

Als erstes stand auf meiner Liste eine Optimierung der Ladezeit. Nach der Installation des Themes und ohne sonstige Optimierungen war die Performance ziemlich schlecht.

Da ich aus meiner Erfahrung sagen kann, dass eine gute Ladezeit sowohl bei den Rankings in Google, als auch bei den Einnahmen hilft, war mir die Ladezeit-Optimierung natürlich wichtig.

Vor der Optimierung
Ich habe mit Hilfe von 3 Online-Tools ein paar Werte ermittelt, die zeigen, dass die Ladezeit wirklich schlecht war und damit nicht nur bei Google durchaus Nachteile bringen könnte, sondern auch sicher einige Besucher kosten wird.

PageSpeed Insights
Dieses Google-Tool erstellt eine Gesamtbewertung für die mobile Ansicht und die Desktop-Version. Beide hatten vor der Optimierung sehr schlechte Werte. Man sollte mindestens 80 Punkte erreichen.

Hier die Werte für die Startseite und einen Artikel:

Mobile Bewertung Desktop Bewertung
44 / 100 52 / 100
44 / 100 51 / 100

Das zeigt auch dieser Screenshot, wo Google dann auch einige Probleme aufgelistet hat.
Ladezeit, Footer und eine Erkältung - NSC-Rückblick Woche 4

Pingdom
Das zweite Tool misst ebenfalls die Ladezeit und erstellt daraus ein sogenanntes Waterfall-Diagramm, an dem man sehen kann, welche Elemente wie lange laden. Zudem ermittelt es auch ein paar Gesamtwerte.

Hier die Werte für die Startseite und einen Artikel:

Performance Grade Website ist schneller als … Ladezeit Seitengröße Requests
85 / 100 83% aller Websites 1,4s 1,6 MB 33
83 / 100 74% aller Websites 1,91s 1,4 MB 34

Die Gesamtperformance sieht zwar nicht so schlecht aus, aber die Seite ist zu groß und die Ladezeit könnte deutlich besser sein.

GTMetrix
GTMetrix ist ein sehr gutes Tool zur Ladezeiten-Analyse, welches detaillierte Auswertung mitbringt und genau anzeigt, an welcher Stelle was optimiert werden sollte.

Hier die Gesamtwerte für die Startseite und einen Artikel:

Pagespeed YSlow Ladezeit Seitengröße Requests
35% 75% 3,9s 1,18 MB 27
50% 74% 3,8s 1,45 MB 34

Auch hier ist die Bewertung der Ladezeit sehr schlecht. Die hohen Ladezeiten kommt dadurch zustande, dass der Test von Amerika durchgeführt wird. Aber als Ausgangswert vor der Optimierung ist das genauso hilfreich.

Was habe ich gemacht?
Eigentlich gar nicht so viel.

Die Tools haben vor allem die folgenden Punkte bemängelt:

  • Fehlende Komprimierung
    Die HTML-Datei insgesamt ist nicht komprimiert. Es fehlt also die gzip-Komprimierung.
  • Blockierende JavaScript- und CSS-Dateien
    Im Header werden alle JavaScript- und CSS-Dateien geladen, was natürlich erstmal dauert.
  • Script-Größen reduzieren
    Zudem waren diesen JavaScript- und CSS-Dateien nicht komprimiert.
  • Browser-Caching nicht aktiviert
    Es gibt grundsätzliche Einstellungen in der .htaccess Datei, mit denen der Browser die Elemente einer Website länger speichert, damit sie nicht bei jedem Seitenaufruf neu heruntergeladen werden müssen.

Das sind eigentlich gar nicht so viele Probleme und relativ leicht durch Plugins zu beheben.

Ich habe deshalb diese Plugins installiert und eingerichtet:

  • WP Fastest Cache
    Das ist ein Caching-Plugin, welches unter anderem die gzip Komprimierung mitbringt und auch Möglichkeiten zur JS und CSS Komprimierung anbietet.
  • WP Minify Fix
    Für die Komprimierung der CSS und JavaScript Dateien habe ich aber lieber auf dieses Plugin gesetzt, da es diese zuverlässig zusammenfasst und komprimiert, was der Ladezeit sehr hilft. Zudem optimiert es den HTML-Code.
  • Scripts to Footer
    Mit Hilfe dieses Plugins habe ich dann die meisten die JS- und CSS-Dateien vom Header in den Footer verschoben. Damit bremsen diese nicht mehr das Laden der Seiten.

Ich hätte natürlich lieber nur ein Plugin genutzt als 3, aber nach etwas herumprobieren hat sich das als die beste Kombination herausgestellt.

Eine weitere Sache habe ich noch gemacht. Ich habe die neue WP Emoji Funktion in der functions.php deaktiviert. Das sind nur zusätzlich Scripte für eine Funktion, die ich überflüssig finde.

Nach der Optimierung
Im folgenden seht ihr, was die Optimierung gebracht hat.

PageSpeed Insights
Ich konnte fast alle angezeigten Probleme beheben und sehr gute Werte erreichen.

Hier wieder die Werte für die Startseite und einen Artikel:

Mobile Bewertung Desktop Bewertung
84 / 100 94 / 100
84 / 100 91 / 100

Das sind für mich völlig ausreichende Werte. Ich brauche keine 100%.

Das zeigt auch dieser Screenshot, wie die Desktop-Analyse nach der Optimierung aussah:
Ladezeit, Footer und eine Erkältung - NSC-Rückblick Woche 4

Hier werden nur noch wenige Scripte im Header bemängelt und beim Browsercaching betrifft dies nur noch das Analytics-Script.

Pingdom
Bei Pingdom waren die Verbesserungen in der Ladezeiten ebenfalls deutlich sichtbar.

Hier die Werte für die Startseite und einen Artikel:

Performance Grade Website ist schneller als … Ladezeit Seitengröße Requests
88 / 100 96% aller Websites 573ms 638 kb 16
88 / 100 95% aller Websites 699ms 749 kb 20

Die Ladezeit hat sich deutlich verbessert und ist nun nur noch ein Drittel so lang. Ebenso deutlich besser ist die Seitengröße und die Requests sind ebenfalls deutlich weniger geworden.

Ladezeit, Footer und eine Erkältung - NSC-Rückblick Woche 4

GTMetrix
Und auch die Auswertung mit diesem Tool hat nun deutlich bessere Werte gebracht.

Hier die Gesamtwerte für die Startseite und einen Artikel:

Pagespeed YSlow Ladezeit Seitengröße Requests
96% 94% 2,0s 632 kb 15
94% 94% 2,0s 742 kb 19

Die Pagespeed und YSlow Bewertung ist nahe am Maximum und die Seitengrößen und Requests konnte deutlich reduziert werden. Auch die Ladezeit aus den USA wurde halbiert.

Ladezeit, Footer und eine Erkältung - NSC-Rückblick Woche 4

Fazit nach der Ladezeit-Optimierung
Durch ein paar Plugins konnte ich die Werte deutlich verbessern und bin mit dem Ergebnis mehr als zufrieden, gerade für eine solch bilderlastige Nischenwebsite.

Man sollte sich also auf jeden Fall um die Ladezeitoptimierung kümmern, da dies relativ einfach und schnell umzusetzen ist.

Footer

Sehr schnell ging die Gestaltung des Footers. Hier habe ich mich nicht groß aufgehalten und einfach die Widgets mit den letzten Artikel, den Kategorien und den Seiten gefüllt.

Evtl. werde ich später nochmal den Footer etwas mehr optimieren, aber aktuell reicht das völlig aus.

Neue Inhalte

Zu guter Letzt habe ich 2 neue Artikel verfasst.

Zum einen ist das ein allgemeiner Artikel über wichtige Orte auf der Halbinsel Jandia mit ein paar Infos über diese. Später plane ich dann noch zu jedem Ort einen extra Artikel. Zum anderen habe ich einen Reisetipp über Sommer- und Winter-Urlaube auf Jandia bzw. Fuerteventura verfasst.

Nach und nach werden weitere Artikel erscheinen.

Stunden, Einnahmen und Ausgaben

Diese 3 Dinge haben mich insgesamt 4 Stunden in der letzten Woche gekostet. Es war also insgesamt wirklich recht schnell erledigt.

Kosten sind diesmal keine hinzugekommen und Einnahmen habe ich auch noch nicht, da ich mit der Monetarisierung noch nicht begonnen habe.

investierte Stunden (Woche/Insgesamt) 4 Stunden 17 Stunden
Ausgaben (Woche/Insgesamt) 0,- Euro 89,03 Euro
Einnahmen (Woche/Insgesamt) 0,- Euro 0,- Euro

Weitere Teilnehmer und ihre Reports

Auf nischenseiten-guide.de findet ihr die Wochenreports vieler weiterer Teilnehmer der Nischenseiten-Challenge 2016.

Mehr als 250 Teilnehmer veröffentlichen dort eine Menge Praxis-Einblicke und Erfahrungen in den 13 Wochen der Challenge.

Peer Wandiger

14 Gedanken zu „Ladezeit-Optimierung, Footer, Artikel und eine Erkältung – NSC-Rückblick Woche 4“

  1. Was ich neben den deaktivieren der Emojis noch empfehlen kann, ist die Rest API und die Header-Einträge zu entfernen, wenn selbige nicht benötigt werden. Außerdem integrieren die neuen Embeds immer eine “wp-embed.min.js”, die du ebenfalls entfernen kannst, wenn du sie nicht benötigst.

    Ansonsten würde ich darüber nachdenken jQuery herauszuschneiden, da ich auf den ersten Blick gar nicht sehe wozu ein Framework wie jQuery genau nötig wäre. Ohne wäre die Seite aber deutlich flotter unterwegs.

    Wer jetzt angestachelt ist und noch mehr machen will, darf mal bei mir vorbeischauen. Dort gibts ne Menge Tipps für Optimierungswütige 🙂 …um nicht zu sagen alle Tipps die bei WordPress Sinn ergeben.

    http://fastwp.de/wordpress-performance/

    Antworten
  2. Hi Per, interessanter Artikel. Ich finde das Thema immer recht schwierig, da ich mich mit der technischen Seite (Programmierung) nicht sonderlich gut auskenne. Da bin ich für jedes Plugin, dass mir hilft dankbar.

    VG
    Sebastian

    Antworten
  3. Hallo Peer,

    ich habe gerade mal meine Seiten überprüft, die Fallen alle sehr schlecht aus. Vorallem im Mobilen Ansicht sind meine Seiten unter der 50 bis 70% Marke. Ich hatte mir daher bisher keine Gedanken gemacht. Deshlab werde ich mir das für diese Woche auf meine Todo-Liste aufnehmen.

    Schöne Grüße
    Metin

    Antworten
  4. Da sieht man auch immer wieder wie schnell sich einige Dinge optimieren lassen 😉

    Leider habe ich noch keine Lösung für das VG-Wort Plugin gefunden…

    Gibt es da eine Möglichkeit?
    Peer, nutzt du das Plugin nicht auch noch und hast das mal gelöst?

    Antworten
      • Genau, ich nutze dieses Plugin:
        Prosodia VGW OS für Zählmarken (VG WORT)

        Als Meldung wird mir dann immer angezeigt:
        vgwort.de/blank.gif (Ablaufdatum nicht festgelegt)

        Aber wie kann ich das lösen. Das bleibt immer bestehen. Es ist ja eine externe Quelle. Darf ich da überhaupt etwas cachen und wenn ja, wie?

        Antworten
        • Da kann ich dir bei dem Plugin auch nicht helfen, da ich es nicht nutze. Aber wie oben geschrieben, muss man keine 100% erreichen. Wenn bei mir 1-2 Ressourcen nicht gecached werden, ist mir das egal.

          Antworten
        • Ich würde mir da auch keine Gedanken machen. Dann gibt es halt eine Ressource und an dieser Stelle muss man auch sagen, dass die Heuristik von Google schwerwiegende “Verstöße” nicht von “leichten” unterscheiden kann:

          Bei der Datei handelt es sich wahrscheinlich um eine kleine transparente Grafik von 1×1 Pixeln. Die ist verschwindend gering, was die Dateigröße angeht und wenn die nicht gecached ist, dann ist es halt so. Performanceeinbußen würde ich nicht erwarten.

          Schlimmer wäre ein wirklich großes Bild, dass nicht gecached wird.

          Aktuell steht da eh ein 307 Temp. Redirect hinter.

          Antworten
  5. Hallo Peer, das “Scripts to Footer” brauchst du eigentlich nicht. Das bringt doch WP-Minifiy-Fix schon mit. In den Experten-Einstellungen wechseln und ein Häkchen setzen.

    Antworten
  6. Hallo Peer,

    mich würde interessieren, was du für welche detailierten Einstellungen bei den 3 Plugins WP Fastest Cache, WP Minify Fix und dem YOAST Seo tätigst, um eine guten Pagespeed und ein gute SEO Technische Performance bekommst. Es muss nicht 100% sein, sondern ich bin der gleichen Meinung wie du, dass man eine 80% gute / 20% weniger gute Einstellung einen voran bringen. Aber mit diesen drei Plugins habe ich kaum Erfahrung. Und meinem eigenen Blog habe ich, dass ausprobiert, sodass das sogar negative Bewertungen bei der Analyse auf Google PageSpeed gebracht hat 🙁
    Kannst du mir da weiterhelfen oder auf eine Quelle hinweisen?

    Schöne Grüße
    Metin

    Antworten
  7. Hallo Peer,

    ich habe die drei Plugins WP Fastest Cache, WP Minify Fix und Scripts to Footer alle drei geladen und die Werte bei Google Pagespeed und Pingdom konnten sich verbessern.

    Das Plugin WP Minify Fix musste ich löschen, da das Review Plugin nicht mehr richtig angezeigt wurde. Das hatte aber auch keine Auswirkung auf die Ergebnisse.

    Mobile bin ich nun bei 79 und auf dem Desktop erreiche ich 91, ich denke, dass das in Ordnung ist.

    Antworten
  8. Hallo Peer,

    wie immer ein guter Beitrag. Erst einmal möchte ich ein riesen Lob an deine Blogs aussprechen. Die sind wirklich sehr informativ und auch sehr gut zu lesen.

    Ich habe deine Plugins mal ausprobiert und festgestellt, dass das WP Fastest Cache Plugin nicht bei WordPress multisite läuft. Hast du hierzu vielleicht eine gute Alternative?

    Antworten
  9. Phantastischer, extrem hilfreicher Artikel für die Ladezeit-Optimierung.

    Perfekt recherchierte und verständliche sowie nachvollziehbare Tipps, die enorm weiterhelfen.

    Danke!!!

    Antworten

Schreibe einen Kommentar