Wie du Performance Tools für dich sinnvoll nutzen kannst

Performance Tools zeigen oft unterschiedliche Ergebenisse
Performance Tools zeigen oft unterschiedliche Ergebenisse

Mobile Nutzerfreundlichkeit heißt auch seine Website schnell auszuliefern. Mobile Nutzer und Nutzerinnen warten nicht mehr und außerdem kosten heruntergeladene Bites and Bytes für etliche viel Geld.

So werde ich immer öfter gefragt wieso diverse Performance Tools so unterschiedliche Ergebnisse liefern. Andere bekommen die Panik, weil sie keinen CDN nutzen können, da dies aus datenschutzrechtlichen Gründen vom Domainbesitzer verboten wurde.

Aber fast alle streben nach den 100/100 Performance Grad Angaben. Klar das wäre erstrebenswert. Aber selbst 100/100 sagt nichts über die Benutzerfreundlichkeit oder gar Geschwindigkeit deiner Website aus.

Ich habe drei verschiedene WordPress Webseiten mit Page Speed Insights, Pingdom und GTMetric getestet. Hier die Ergebnisse und was sie bedeuten. Außerdem etliche hilfreiche Links.

Unterschiedliche Ladezeiten

Ladezeit aus dem Ausland ca 4mal höher
Ladezeit aus dem Ausland mindestens 4mal höher
je nach Testserver Standort unterschiedliche Ladezeiten
je nach Testserver Standort unterschiedliche Ladezeiten

Page Speed Insights zeigt die Ladezeit gar nicht an.
Bei Pingdom kannst du unter „settings“ den Ort der Messung eingeben.
GTMetrix bietet nur registrierten Usern die Auswahl von 13 verschiedenen Testservern an. Nutzt du GTMetrix als Gastuser testet dieses Tool die Ladezeit aus Canada.

Logisch kannst du Leser und Leserinnen aus aller Welt haben. Daher ist es auch wichtig wie schnell deine Site z.B. für User aus den Staaten angezeigt wird. Absolut wichtig ist sie für deine Kernleserschaft.

Als Faustregel kannst du annehmen: Ladezeit eines Testservers in deiner Nähe mindestens mal Vier.

CDN oder nicht CDN

Serve static content from a cookieless domain – wenn dir hier was Fehlendes angezeigt wird, dann kannst du entweder einen CDN mieten oder dir eine Subdomain als cookie freie Domain einrichten.

Das erhöht allerdings die Anzahl der http-requests.
Und ein CDN aus dem Ausland kann deine Seite für den User langsamer machen, selbst wenn sie dann für das Tool schneller ist => siehe obigen Punkt der Ladezeitenmessung aus dem Ausland

Page Speed Insights zeigt dies gar nicht an. Pingdom meldet dies und bei GTMetrix wird dies unter dem Punkt YSlow Grade massiv hervorgehoben.

YSLOW mag unbedingt einen CDN
YSlow mag unbedingt einen CDN

Oft wäre ein CDN aber wirklich nur mehr eine Fleißaufgabe, um ein Tool zu befriedigen. Die Domain ulrich-security.de lädt auch bei GTMetrix unter 1.5sec.

Geschwindigkeit hängt viel vom Server ab

Pingdom zeigt Mängel unter folgenden Überschriften auf:
Leverage browser caching
Specify a Vary: Accept-Encoding header
Specify a cache validator

GTMetrix unter YSlow:
Add Expires headers
Compress components with gzip
Make favicon small and cacheable
Configure entity tags (ETags)

Diese Mängel und einige andere kannst du entweder in der htaccess selbst beheben oder du überläßt dies einem gut eingestellten Cache Plugin.

Wenn dein Server oder dein Hoster etliche dieser hilfreichen Module aber nicht anbietet sind die besten Cache Plugins und deine Angaben in der htaccess nutzlos.

Unabhängig, dass manches WordPress Cache Plugin genau hier nicht die optimalsten Einstellungen liefert. So macht ein falsch eingestelltes WP Super Cache oder WP Total Cache dein WordPress langsamer.

Hier findest du hilfreiche Angaben für die htaccess ScottNix Github.

Es gibt dabei aber keine „genauso und nur so gehts Lösung“. Du musst dies testen.

Solltest du das Glück haben einen Server mit den Google Page Speed Modulen nutzen zu können, dann brauchst du dafür andere Angaben in der htacces.

Remove query strings from static resources

WordPress setzt die Versionssnummern an CSS Dateien und manche Scripte mit sogenannten Query Strings. Schneller wäre es, wenn dies Teil der URL wäre. WordPress macht dies damit der Browser auch weiß wann er z.B. eine neue CSS Datei laden sollte.

Es gibt dafür ein Plugin, das ich aber nicht getestet habe: Remove Query Strings from static resources.

Oder du machst es selbst in einem Modul für die Toolbox von Sergej Müller:

function remove_wp_ver_css_js( $src ) {
if ( strpos( $src, 'ver=' ) )
$src = remove_query_arg( 'ver', $src );
return $src;
}
add_filter( 'style_loader_src', 'remove_wp_ver_css_js', 9999 );
add_filter( 'script_loader_src', 'remove_wp_ver_css_js', 9999 );

Sichtbare Inhalte priorisieren – Above the Fold

Page Speed Insights legt Wert auf Bilder Optimierung
Page Speed Insights legt Wert auf Bilder Optimierung
Page Speed Insights bringt viele mit der Meldung „sichtbare Inhalte priorisieren- Above the Fold“ an den Rand der Verzweiflung.

Cache Plugins aktiv, Scripte sind im Footer, werden sogar nachgeladen, es wurde komprimiert, dass der Server nur so ächzt. Aber diese Meldung prankt bei jeder Messung wie in Stein gemeißelt.

Zu 90% sind es die Bilder.

Ich habe es hier ausprobiert und es passiert sicher immer wieder:
Ein einziges Bild kann diese Meldung hervorrufen, wenn es nicht auf Teufel komm raus komprimiert wurde.

D.h. nutzt du die Angaben von Page Speed Insights dann fange bei deinen Bildern an.
Werden die zu groß oder in der falschen Größe ausgeliefert wirst du dieses Tool nie befriedigen können.

Lösungsansätze:
Trachte die richtige Bildgröße für dein Theme auszuliefern. Hinweise dazu findest du im Beitrag Wer mag noch seine Thumbnails ändern. .

Setze dich mit adaptiven Bildern auseinander. Derzeit gibt es noch kein wirklich gutes Plugin, dass auch alle vorhandenen Bilder adaptiv macht. Fast alle guten Plugins bieten diese Möglichkeit nur für neue Bilder. Aber es wäre ein Anfang. RICG responsive Images ist verdammt gut. Hammy wird nicht weiterentwickelt und hat Macken.

Allheilmittel Scripte in den Footer

Viele versuchen alle Scripte im Footer zu laden. Das befriedigt aber oftmals nur mehr ein Tool, denn:

  • hast du einen Slider kann der erst anfangen zu arbeiten bis alle Scripte geladen sind. Mancher Slider arbeitet dann gar nicht mehr.
  • Und dann beschwert sich Google, dass alles erst angezeigt werden kann, wenn der DOM geladen wurde.

Sinnvoll ist es sicher die Scripte zusammenzufassen und wenn geht und alles noch funktioniert asynchron zu laden.

Ziemlich gute Ergebnisse kannst du mit dem Plugin WP Deferred Javascripts erreichen.

Lädst du CSS komplett im Footer ist es sehr wahrscheinlich, dass deine Site beim Aufbau „flackert“. Dies mag schnell sein, aber es sieht bescheiden aus…

Fazit:

Gier nicht immer nach den 100/100 der Performance Tools sondern setze dich Punkt für Punkt mit den Ergebnissen auseinander. Entscheide dich welches Feature auf deiner Site ein „must have“ ist und welches ein „nice to have“.

Nutze nur das Cache Plugin, das du auch wirklich selbst einstellen kannst.

GTMetrix mit YSlow setzt auf CDN, Pingdom bietet unter Page Analysis eine Aufstellung, die ziemlich sicher auf für Laien verständlich ist. Page Speed Insights setzt auf Bildoptimierung und Nutzerfreundlichkeit auf mobilen Endgeräten.

Performance Optimierung ist aber ein steter Prozess. Niemals eine Einzelleistung auf deren Lorbeeren man sich ausruhen kann und das macht sie so spannend und schön :-)

Da ich ziemlich sicher was vergessen habe, freue ich mich auf Ergänzungen …

7

7 Beiträge zu “Wie du Performance Tools für dich sinnvoll nutzen kannst

  1. Kommentar Autor
    Frank
    Kommentar

    Monika, ein netter Artikel, der in etwa beschreibt, was einen erwartet, wenn die Seite optimiert werden soll. Es klingt nicht nur nach Stress – es ist Stress pur aber es lohnt sich! Daher besser heute als nie angefangen.

    Übrigens, ich bin noch immer am Optimieren der Bilder … :-D

  2. Kommentar Autor
    Jörg
    Kommentar

    Hi Monika,
    sehr netter Artikel von dir. Hat mich direkt gleich animiert, PageSpeed auf ner neuen Seiten auszuprobieren. Jetzt habe ich den Salat: Bilder optimieren, CSS-Darstellung optimieren (k.A. wie ich das anstellen soll) etcpp.
    Und immer diese Meldungen die Analytics-Code betreffen … Orrrrr.

    Aber danke für den Stups in die Richtung und dir noch nen schönen Ostermontag
    Jörg

  3. Kommentar Autor
    Monika
    Kommentar

    auch dir noch ein schönen Feiertag Jörg

    zu Bilder optimieren incl JS gibts sehr viele Hilfe bereits. GA getrost erstmals vergessen, den Rest so gut es geht erledigen :-)

  4. Kommentar Autor
    Jörg
    Kommentar

    Ich habe Optimus und das von dir erwähnte RICG im Einsatz. Original-JPGs werden auf 70% komprimiert. Und trotzdem meint PageSpeed, dass 89% Einsparpotential bei dem einen Bild da ist.
    Die spinnen doch …

  5. Kommentar Autor
    Jörg
    Kommentar

    ah warte mal … meine Seite nimmt für Smartphones keine angepasste Bildgröße … sondern skaliert runter. Ok … ich kann es ja mal mit dem Script Adaptive Images probieren, über welches ich gerade gestolpert bin. Oder hast du ne bessere Alternative kurzfristig parat?

  6. Kommentar Autor
    Monika
    Kommentar

    RICG sollte doch adaptive Bilder liefern => eventuell hat es die nicht zur Verfügung?

  7. Kommentar Autor
    Andre
    Kommentar

    @Jörg ich weiß ja nicht mit welchem Programm Du deine Jpegs komprimierst, aber Photoshop ist z.B. nicht die erste Wahl. Ich komprimiere die Bilder mit Photoshop in Jpeg und PNG und jage Sie denn noch mal durch Tinypng ( der nimmt beide Formate) https://tinypng.com/. Da kommen zum Teil sehr überraschende Ergebnisse raus. Gerade bei kleineren Grafiken ist PNG dem JEPG deutlich überlegen. Ich mach das meist per Hand um zu sehen was wie besser funktioniert.

    Bei Pagespeed findest du unter „Bestandene Regeln“ einen Link „Sie können optimierte Bild-, JavaScript- und CSS-Ressourcen für diese Seite herunterladen.“ Das ist ganz hilfreich um zu sehen wie klein das Google schafft.

    Ich hab meine Seite auf 94 / Desktop und 99/ Mobil optimiert, ich finde das reicht alles weitere artet dann in einen Fetisch aus. Von 80 auf 90 zu kommen ging noch, aber dann wird es aber mit jedem Punkt schwieriger. Als Plugin nutze ich Autoptimize und Cachify der Rest ist Handarbeit. Bilder optimiere ich wie oben beschrieben, setze aber auch nicht so viele ein, so das ich das mit mit der Hand bewerkstelligen kann.

    Um dieses nicht ganz so einfache „above the fold“ anzugehen nutze ich diesen Generator: Das Ergebnis habe bei Autopimize eingebaut.

    Ganz hilfreich ist es noch entweder den Firebug im Firefox zu installieren oder die Developer Tools im Chrome zu nutzen und sich im Reiter „Netzwerk“ mal an zu sehen, was, wann, in welcher Zeit geladen wird und vor allem wie lange auf die einzelnen Komponenten gewartet wird.

    Ich hab mal wieder ein paar Anregungen bekommen und versuch mal nächste Woche die 98 zu erreichen… Jaaa jeder braucht seinen Fetisch ;-) Diese Woche sind Inhalte dran, sollen ja auch nicht ganz unwichtig sein.
    Gruß aus Hamburg