HowTo: WordPress auf hohen PageSpeed optimieren – Teil 1

Im einleitenden Artikel „Ranking Faktor Page Speed: WordPress optimieren“ dieser kleinen Artikel-Reihe bin ich auf die Gründe, warum man seine Webseite auf Geschwindigkeit optimieren sollte, bereits eingegangen. Hier beschäftigen wir uns nun mit den gängigen Vorschlägen von Google für einen schnelleren WordPress Blog.

404-Fehler: Wenn eine Webseite auf eine Grafik verweist, die nicht vorhanden ist, schickt der Webserver einen Fehler „404“ zurück. Die ist unnötig und bremst die Seite aus. Zumeist sind solche „Leichen“ in der CSS-Datei (style.css) verborgen. Also: Analysieren und entweder den Aufruf entfernen oder die Datei (Image) korrekt zur Verfügung stellen.

GIF-Bilder: Google kritisiert sehr gerne GIFs, die auf der Webseite bzw. in der Theme verwendet werden. Hier erreicht man sehr schnell Abhilfe, indem man das GIF mittels der freien Grafiksoftware „Gimp“ öffnet und als PNG (Kompression 9) exportiert. Diese PNG-Datei dann in den HTML-Code oder CSS-Datei einbinden.

HTML, CSS und JS-Dateien optimieren: Ziel ist es, den nachzuladenden Code so kurz wie möglich bereit zu stellen. Kommentare im Code, so sinnvoll sie für Änderungen sind, sind unnötiger Ballast bei der Übertragung zum Besucher. Auch Einrückungen in HTML oder CSS erhöhen die Lesbarkeit, sind aber unnötig. Also wird man zwei Versionen dieser Dateien benötigen. Die lesbare Ur-Version und eine auf dem produktiven Server zur Auslieferung bereitstehenden optimierten Code.
Zur Optimierung gibt es diverse CSS und HTML online Kompressoren. Für alle gilt: Immer die Original-Version zuerst sichern! Den optimierten Code im Web einsetzen und testen. Hier muss man probieren und experimentieren.
Tipp: Oftmals gibt es Probleme mit WordPress-Dateien, die HTML und PHP-Code beinhalten. Kommentare im PHP-Block bereiten je nach Kompressor hier Probleme. Meist entferne ich zuerst diese Kommentare per Hand und nutze dann einen Kompressor. Je nach Datei optimiere ich auch nur den HTML-Code und lasse den PHP-Block unverändert.

  1. YUI Compressor: JS und CSS Kompressor
  2. HTML Compress: HTML Kompressor

Bilder optimieren, skalierte Version bereitstellen
Viele Punkte Abzug in Rechung stellt Google, wenn man zu große Bilder auf einer Webseite einfügt und diese mittels „width“ und „height“-Tag herunterskaliert. Google hat schon Recht: Es ist unnötige Ressourcenverschwendung. Beispielsweise stellen wir im Artikel „WordPress: Recent Post (Letzte Artikel) mit Thumbnail-Images in der Sidebar anzeigen“ per WordPress eine Sidebar mit Thumbs zur Verfügung. Hier nutzen wir 150px große Bilder. Im Code reduzieren wir die Anzeige auf 70px. Ein böses Foul und Google moniert dies mit einer roten Karte.

Wie man individuelle WordPress-Bildgrößen (automatische Erstellung) generiert, zeige ich in einem weiteren Artikel. Auch sei erwähnt, dass Google die Kompression von JPGs mittels WordPress anmäkelt. Laut Google kann die Kompression noch weiter erhöht werden. Da ich mit 96 Punkten PageSpeed zufrieden bin, ignoriere ich diese „Low priority“-Meldung.

Wichtig auch: WordPress bietet beim Einbinden eines Bildes an, eine vorliegende Bildgröße herunterzurechnen. Dies mit Bedacht wählen. Besser: Die endgültige Größe des einzubindenden Bildes optimal komprimiert via WordPress hoch laden und einbinden. Zuvor das optimale Grafikformat PNG/JPG für Grafiken/Bilder wählen.

Zum Teil 2: HowTo: WordPress auf hohen PageSpeed optimieren – Teil 2

Schreibe einen Kommentar