WordPress Homepage Ladezeit messen und optimieren

Webseiten-Optimierung im Bezug auf die Ladezeit kann eine Wisschenschaft für sich sein…

… beachtet man jedoch

ein paar wichtigste Faktoren

ist das meiste bereits getan.

  1. Optimierte Bilder
  2. WordPress Cache Plugin
  3. Komprimierung (gzip/compress)
  4. Minfizierung und Zusammenfassung von Javascript und CSS-Dateien (nur soweit problemlos möglich)
  5. Schneller Webspace

Bilder Optimierung

Bei meinen WordPress Installationen verwende ich für die Bildoptimierung den EWWW Image Optimizer (Werbe-Link). Die Einstellungen sind übersichtlich und man wird Herr über die WordPress-seitige Bildverarbeitung.

Gut zu wissen: WordPress erstellt JPEG-Thumbnails standardmäßig mit einer Qualitätseinstellung von 82% …

und das kann manchmal zuviel des Guten sein, wenn die Originalbilder auch schon mit dem Bildbearbeitungsprogramm komprimiert wurden.

Die Standardeinstellung lag bei früheren WordPress Versionen bei 90%. Die neuen 82% sind den mobilen Geräten geschuldet.

Meine Einstellungen für eine akzeptable Bildqualität: 94/92

  • 94% JPEG-Qualitätseinstellung beim Abspeichern mit dem Bildbearbeitungsprogramm
  • 92% EWWW JPEG Qualitätseinstellung (das überschreibt die voreingestellten 82%)
  • … und EWWW maximale Bildbreite/Bildhöhe: 1900 px (alle größeren Original-Bilder werden beim Upload auf diese Größe skaliert)

Ein Bild braucht einen beschreibenden Dateinamen

Wenn sich ein Bild bei der Vorbereitung schonmal in der unmittelbaren Nähe der Tastatur befindet vergibt man ihm am besten gleich auch einen sprechenden Datei-Namen, der den Inhalt des Bildes beschreibt, denn mit Schoenes_Holzhaus_am_See.jpg können die Suchmaschinen-Indizierer mehr anfangen wie mit DSC23341q33.jpg.

WordPress Rocket Cache Plugin

WordPress tut ein Cache-Plugin gut. Bei meinen Projekten kommt das WordPress Rocket Cache Plugin (Werbe-Link) … Update 2019: Cache Enabler (Werbe-Link), zum Einsatz. Es beschleunigt die Auslieferung der Seiten erheblich. Trotz allem Speedrausch die Praxis nicht vergessen: No-Cache-Areas sind Suchen, Warenkörbe, Kontaktformulare, Kontos etc. Schön deswegen, dass das Rocket-Cache Plugin mit Woocommerce 100% kompatibel ist (Cache Enabler ebenfalls) und die “Nicht-Cache-fähigen-Woocommerce-Seiten” eigenständig erkennt. Auch schön: Wer Rocket-Cache verwendet, dem wird die .htaccess-Datei gleich mit gemacht.

Webspace

Hier gilt bestes Cache-Plugin hin oder her: Je schneller, desto besser. Die erforderliche Leistung dafür kommt bei meinen Kundenpräsenzen seit 2 Jahren von den Mittwald-Server-Profis. Beobachten Sie bei der Messung Ihrer Ladezeit auch die “Webseiten-Zusammenbau-Millisekunden” bis WordPress beginnt auszuliefern (in Pingdom-Tools der erste Eintrag) … und wenn z.B. Google Pagespeed Insights eine langsame Serverantwortszeit moniert dann liegt es daran, dass die Auslieferung erst nach ca. 200 Millisekunden beginnt. Das ist nichts außergewöhnliches und alle CMS haben im direkten Vergleich zu einer statischen Webseite diese höhere Latenz. Mit einem WordPress-Cache-Plugin kann man diese Latenzzeit jedoch näher an die “Auslieferungsbeginnzeit” einer statischen Seite bringen.

Optimierungs-Prioritäten sezten

Im Bezug auf die Optimierung gibt es wichtigere und nicht so wichtige Seiten. Die wichtigeren Seiten sind die Seiten, die Ihre Besucher für gewöhnlich zuerst sehen, also Startseite, Landing-Pages und Blog-Beitragsseite. Hier macht es Sinn mehr Zeit in die Optimierung zu investieren da auf diesen Seiten ein ausgewogener Mix aus kurzer Ladezeit und Zweck gefragt ist. Man kann sich Fragen stellen wie: Lädt der Slider on demand nach oder kann der Slider auch mit zwei anstatt drei Slides auskommen? Braucht es überhaupt einen Slider? Haben die Bilder des Blog- oder Portfolio-Rolls die richtige Breite? Ist die Seite voll Cache-fähig? usw.

Testtools für Ihre Webseite

  1. Google Pagespeed Insights: PageSpeed Insights (Werbe-Link)
  2. Pindom Tools: Website speed test (Werbe-Link)
  3. GTmetrix: GTmetrix | Website Speed and Performance Optimization (Werbe-Link)
  4. Pagespeed von Experte.de https://www.experte.de/pagespeed (Werbe-Link)

Kurze Beschreibung der Tools:

Google Pagespeed Insights gibt Ihnen Hinweise zur Verbesserung des strukturellen Aufbaus Ihrer Webseite und weist ebenfalls auf Assets (Bilder, Javascript, CSS etc.) hin, die optimiert werden sollten. Im Hinblick auf den wichtigsten Optimierungsfaktor, die Ladezeit, widersprechen sich die Vorschläge teilweise, deswegen gelassen bleiben wenn Sie rot und gelb sehen. Der Score verbessert sich am schnellsten wenn Sie die Bilder optimieren und die gzip-Komprimierung (meistens per htaccess) einrichten. Weitaus wichtiger ist wie gesagt die Ladezeit, und über die gibt Google Pagespped Insights keine Auskunft, sondern die Pingdom Tools und GTmetrix.

Mit den Pingdom Tools läßt sich der wichtigste Optimierungsfaktor einer Webseite messen, die Ladezeit. Messen Sie immer mit dem gleichen Testserverstandort, so daß die Ergebnisse vergleichbar bleiben. Ich wähle z.B. immer den Testserverstandort Schweden. Pingdom-Tools gibt auch eine gute Übersicht über den “Wasserfall” (in welcher Reihenfolge die Elemente Ihrer Webseite geladen werden) und man erkennt schnell wenn es mit einer Datei Probleme gibt. Auch bei den Pingdom-Tools gibt es Vorschläge, die sich widersprechen. Z.B. der Vorschlag CSS- oder Javascript-Dateien so gut wie möglich in einer Datei zusammenzufassen. Im Bezug auf die Ladezeit ist es besser die Dateien auf mehrere (ca. 6 ?)  Dateien zu verteilen damit der Browser sie parallel laden kann.

GTmetrix gibt eine gute Gesamtübersicht über den Optimierungsgrad Ihrer Webseite. Bei der Analyse ist das Ergebnis aus Google Pagespeed Insights enthalten, dazu kommen auch die Ergebnisse aus YSlow. Eine Wasserfall-Ansicht wie auch die Messung der Ladezeit und ein Vergleich mit den Durchschnittswerten von den Messungen anderer Webseiten sind ebenfalls enthalten.

Pagespeed von Experte.de Das Besondere an dem Pagespeedtool von experte.de ist seine Bulk-Funktion. Damit haben Sie die Möglichkeit mehrere Websites parallel auf ihre Geschwindigkeit hin analysieren zu können, auch die Ihrer Mitbewerber, z.B. im Vergleich mit Ihren eigenen Websites. Interessant ist, neben dem Crawlen einer einzelnen Website oder per URL-Liste, auch die Möglichkeit des Crawlens nach Keyword. So verschaffen Sie sich einen Überblick darüber welchen Pagespeed-Score die Top50 Websites zu einem Keyword abliefern. Ausführlichere Informationen zu jeder analysierten Website in der Liste gibt es danach per Klick auf den Detail-Button, der die Seite daraufhin zur direkten Einzelanalyse an das Pagespeed-Tool von Google weiterleitet.

Tipp Assets (Bilder)-Optimierung

Google Pagespeed Insights wie auch GTMetrix bieten Ihnen nach der Seitenanalyse den Download von optimiertem Bildern, CSS und Javascript an.