Steffen Voß - Technologie & Gesellschaft

Wordpress Performance : 100 Punkte bei Google PageSpeed Insights

100 Punkte bei den Google Pagespeed Insights
100 Punkte bei den Google Pagespeed Insights

Steffen Voß

Gestern habe ich mein Multisites-Wordpress aufgelöst. Kaffeeringe.de läuft wieder in einer eigenen Installation. Für mich war das die Gelegenheit, mir auch die Performance anzuschauen und der Site wieder Beine zu machen. Inzwischen zeigt der Test bei Google Pagespeed Insights wieder 100 Punkte.

Die 100 Punkte im Google Speedtest zu bekommen ist schon nicht so ganz leicht – sie über längere Zeit zu halten, finde ich noch schwieriger. Immer wieder ändern sich die Anforderungen. Seit meinem letzten Anlauf 2015 hat sich einiges geändert. Aber dieses Wochenende hatte ich Zeit und eine frische WordPress-Installation, die ich ohnehin neu konfigurieren musste.

Mein blankes WordPress mit dem aktuellen Layout war sowieso im Test schon nicht so ganz schlecht. Mit Autoptimize und w3 Total Cache lag ich schon bei 90 Punkten.

Autoptimize

Autoptimize kümmert sich darum, dass HTML, CSS und JavaScript optimiert werden – in jeweils einer einzigen Datei zusammengeführt und komprimiert. Und es kann „Critical CSS“ gesondert behandeln.

Mit den Standard-Einstellungen läuft das Plugin schon ziemlich gut. Man muss nur die Option für „CSS-Code inline einfügen und verschieben?“ aktivieren und das „Critical CSS“ dort einfügen.

Critical CSS

„Critical CSS“ sind diejenige CSS-Formatierungen, die dafür sorgen, dass die Seite möglichst schnell dargestellt wird: Die Breite der Seite, die wichtigsten Farben, Schriften usw. Dieses CSS wird direkt ins HTML eingefügt. So muss nicht erst das HTML geladen werden und dann das gesamte CSS. Das HTML kann schon dargestellt werden, wenn noch nicht das gesamte CSS geladen ist.

Mit dem Critical-Path-CSS-Tool kann man sich das generieren lassen. Dazu habe ich einfach das gesamte CSS, das Autoptimize zusammengefügt hat, dort reingeschmissen und eine Auswahl zurück bekommen, die ganz okay war. Ich musst nur die Teile rausschmeißen, die Webfonts geladen haben. Die würden schon hier dafür sorgen, dass die Darstellung der Seite unterbrochen wird, bis die Schriftarten geladen sind. Das will man nicht.

Man will aber, dass der Browser möglichst schnell weiß, wie breit die Seite ist. Das war irgendwie im CSS aus dem Tool nicht vorhanden. So konnte man immer sehen, wie der Browser die Seite erst in ganzer Breite darstellt und dann erst zusammen schiebt. Ein unschöner Effekt.

w3 Total Cache

w3 Total Cache kümmert sich darum, dass möglichst wenig Teile der Seite jedesmal komplett neu erzeugt werden müssen. Auch dieses Plugin funktioniert mit seinen Standard-Einstellung ziemlich gut. Ich habe nur Page Cache, Database Cache, Object Cache und Browser Cache eingeschaltet. Da mein Webspace keine besonderen Möglichkeiten bietet, habe ich jeweils nur den Disk-Cache ausgewählt. Bei den Einstellungen für den Page Cache habe ich den Cache Preload aktiviert und die XML-Sitemap aus Yoast SEO angegeben.

Bilder komprimieren

Compress JPEG & PNG images habe ich schon einmal in einem eigenen Artikel vorgestellt. Das Plugin komprimiert alle Bilder direkt wenn sie hochgeladen werden. Bei mir waren die Bilder bereits alle komprimiert, weil ich das Plugin schon vorher benutzt habe.

Allerdings schlägt Google inzwischen vor, dass man statt JPG und PNG lieber WebP als Bilderformat benutzt. WebP wurde von Google entwickelt. Leider wird das Format bisher auch nur von den Google Browsern unterstützt. Mit dem Plugin WebP Express muss man aber eigentlich gar nichts machen, um alle vorhandenen Bilder optional auch als WebP vorzuhalten. Einfach so einstellen, dass JPG und PNG in WebP umgewandelt und ein Jahr lang gecacht werden.

font-display:swap;

Die letzte Beschwerde von Google Pagespeed Insights hatte mit den Web-Fonts zu tun. Die kann man so laden, dass der Text schon dargestellt wird, wenn die Schriftart noch nicht geladen ist. Jetzt beschwert sich der Test nur noch, dass die WebFonts aus einer CSS-Datei geladen werden und nicht direkt aus dem HTML. Die 100 Punkte gibt es aber auch so.

Hat's Dir gefallen? Bitte teilen:



Schreibe einen Kommentar

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