PageSpeed von 68 auf 91 in 5 Minuten

Google PageSpeed ist ja nach wie vor eine wichtige Messlatte, wenn es um Seitenoptimierung geht. Auf gute Werte zu kommen, ist gar nicht so schwierig – es dauert nur ein paar Minuten, um zumindest in den grünen Bereich zu kommen.

Ich habe es mal auf einer Demoseite (WP 4.9.1) mit einem Standardtheme (twentyseventeen) ausprobiert und konnte tatsächlich nach ein paar Minuten deutlich gesteigerte Bewertungen sehen:
Mobil „ab Werk“ 68%, gesteigert auf 91%
Desktop „ab Werk“ 74%, gesteigert auf 97%

Ohne Plugins geht es nicht, ich habe folgende Plugins verwendet:

  • Autoptimize
    optimiert lediglich HTML und CSS (auch inline)
  • Responsify WP
    läuft mit den Standardeinstellungen
  • WP Super Cache
    läuft mit Experteneinstellungen (Seiten komprimieren, Header cachen), der Cache wurde manuell vorgeladen

Zusätzlich habe ich in der .htaccess nochmal explizit die Komprimierung aktiviert und das Ablaufdatum erhöht:

# BEGIN browser caching
<FilesMatch "\.(html|htm)$">
  FileETag None
  <ifModule mod_headers.c>
    Header unset ETag
    Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires "Mon, 29 Oct 1923 20:30:00 GMT"
  </ifModule>
</FilesMatch>

# BEGIN Gzip
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/ico
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/xml
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE font/opentype font/ttf font/eot font/otf
</IfModule>
# END Gzip
# BEGIN LBC
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf|x-html|css|xml|js|woff|woff2|ttf|svg|eot)(\.gz)?$">
  <IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault A0
    ExpiresByType image/gif "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType image/jpg "access plus 1 month"
    ExpiresByType image/jpeg "access plus 1 month"
    ExpiresByType image/ico "access plus 1 month"
    ExpiresByType image/x-icon "access plus 1 month"
	ExpiresByType image/vnd.microsoft.icon "access plus 1 month"
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType text/javascript "access plus 1 month"
	ExpiresByType text/html "access plus 1 month"
	ExpiresByType text/plain "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 month"
    ExpiresByType application/x-javascript "access plus 1 month"
    ExpiresByType application/ico "access plus 1 month"
    ExpiresByType application/x-icon "access plus 1 month"
	ExpiresByType application/x-shockwave-flash "access plus 1 month"
	ExpiresByType application/xhtml-xml "access plus 600 seconds"
  </IfModule>
  <IfModule mod_headers.c>
    Header set Expires "max-age=2592000, public"
    Header unset ETag
    Header set Connection keep-alive
  </IfModule>
  FileETag None
</FilesMatch>
# END LBC
# END browser caching

<IfModule mod_headers.c>
  <FilesMatch "\.(js|css|xml|gz)$">
    Header append Vary: Accept-Encoding
  </FilesMatch>
</IfModule>

Das war schon alles

Ja wirklich.

Autoptimize brachte mobil 70%, Desktop 77%.
WP Super Cache brachte mobil 85%, Desktop 93%
Cache vorgeladen brachte dann die letzten Punkte: mobil 91%, Desktop 97%

WordPress Performance

Auch so ein Thema, zu dem schon viel geschrieben wurde… Ich will mich gar nicht lange mit Details aufhalten – hier sind meine Testergebnisse mit den gängigen Webtools (zuletzt geprüft am 19.09.2014).

Zuerst die Werte der alten Seite mit Yoko als Vergleich (Cache aktiviert)

Das neue Theme ohne Titelbilder mit deaktiviertem Cache liefert

  • Google PageSpeed Insights:
    mobil 78/100, Nutzererfahrung 89/100, Desktop 92/100
  • Pingdom Website Speed Test: 98/100
  • GTmetrix: PageSpeed grade A (90%), YSlow grade B (87%)
  • WebPagetest.org
    first byte time: F, Keep-alive: A, compress transfer: A, compress images: A, cache static content: C

Mit aktiviertem Cache ergeben sich nur leicht andere Ergebnisse:

  • Google PageSpeed Insights
    mobil 78/100, Nutzererfahrung 89/100, Desktop 92/100
  • Pingdom Website Speed Test: 97/100
  • GTmetrix: PageSpeed grade A (95%), YSlow grade A (92%)
  • WebPagetest.org
    first byte time: A, Keep-alive: A, compress transfer: A, compress images: A, cache static content: B

Mal sehen, ob und wie weit sich das in Zukunft noch verbessern läßt und wie sich die Titelbilder auf die Performance auswirken…

[update 22.09.2014]
Nachdem jetzt auch Titelbilder angezeigt werden, wird es Zeit für eine neue Messung, natürlich mit aktiviertem Cache. Die Titelbilder haben bei Catch Evolution immerhin 65% mehr Pixel, das dürfte sich trotz Optimierung irgendwie bemerkbar machen – jedenfalls solange ich noch nicht auf echte responsive images umgestellt habe.

  • Google PageSpeed Insights
    mobil 72/100, Nutzererfahrung 89/100, Desktop 91/100
  • Pingdom Website Speed Test: 100/100
  • GTmetrix: PageSpeed grade B (86%), YSlow grade A (92%)
  • WebPagetest.org
    first byte time: B, Keep-alive: A, compress transfer: A, compress images: B, cache static content: A

Unterm Strich hat sich die Umstellung auf ein anderes Theme zumindest im Hinblick auf die Performance schonmal gelohnt.

Nicht zu verachten sind natürlich auch die Hinweise der diversen Tools, wie die Performance verbessert werden kann. GTmetrix bietet z.B. gleich optimierte Versionen von noch nicht ganz optimalen Bildern an, die kann man dann gleich in die eigene Mediathek übernehmen…

[update 26.09.2014]
Inzwischen sind auch die Bilder komplett auf angepasste Formate („responsive images“) umgestellt, was sich zusammen mit noch ein paar zusätzlichen Optimierungen sehr positiv auf die Messwerte auswirkt:

  • Google PageSpeed Insights
    mobil 84/100, Nutzererfahrung 89/100, Desktop 92/100
  • Pingdom Website Speed Test: 100/100 (load time 1,17s)
  • GTmetrix: PageSpeed grade A (97%), YSlow grade A (90%)
  • WebPagetest.org
    first byte time: A, Keep-alive: A, compress transfer: A, compress images: B, cache static content: B
    First view: 2,929s, repeat view: 1,072s