Artikelbild NSC 2015

Nischenseiten, Nutzerfreundlichkeit und PageSpeed

Ladezeit ist schon ein Rankingfaktor bei Google, die Benutzerfreundlichkeit auf mobilen Geräten wird es laut Google offiziell am 21. April. Da bei der Nischenseiten-Challenge gerade haufenweise neue Webseiten entstehen, lasse ich mal ein paar Stichproben durch Googles Pagespeed Tool laufen.




Ein Teil der  an der Nischenseiten-Challenge teilnehmenden Seiten sind auf dieser Seite aufgeführt. Dort sind bereits über 30 Seiten gelistet, darum finden hier nur ein paar Stichproben statt.
Interessant ist sicher ein Vergleich mit den gleichen Seiten, nur eben am Ende der Challenge, inwiefern die Seiten optimiert wurden.

Pagespeed Nischenseiten

An die Inhaber der Seiten: Die Absicht dieses Artikels ist es nicht, jemanden an Pranger zu stellen. Am Ende des Artikels gibt es ein paar Tipps, wie der Pagespeed verbessert werden kann.

Kandidat 1: http://www.auf-die-zugspitze-wandern.info/

Auf dem Desktop kommt diese Seite auf einen Wert von 88 Punkten bei der Ladezeit. Das ist ok, allerdings liegt mobil einiges im Argen. Lediglich 62 Punkte konnten erreicht werden. Als wichtigsten Punkt listet Pagespeed die Bilder auf. Diese sollten weiter kompromiert werden. Mit ein wenig Glück gelingt der Sprung in die 80er Punkte.

Pagespeed zugspitze
Wandern ist ja auch nicht die schnellste Art der Fortbewegung

Kandidat 2: http://www.fitness-armbaender.de/

Eine Seite, die mir von allen Teilnehmer bisher am Besten gefällt. Leider geht die Ladezeit nicht ganz bei der Optik mit. 71 Punkte mobil und 84 über Desktop – da geht noch was.
Pagespeed empfiehlt die Antwortzeiten des Servers zu überprüfen. Dieses Problem liegt beim Webhoster, der Server benötigt zu lange um eine Antwort zu liefern.

Pagespeed fitness-armbaender
Auch hier kann noch was „fit“ gemacht werden

Kandidat 3: http://kinderrucksack-abc.de/

Mit ganzen 99 Punkten spielt die Seite vorne mit. Leider nur bei der Nutzerfreundlichkeit. Die Ergebnisse zum Pagespeed sind eher bedenklich. Mobil bringen es die Kinderrucksäcke nur auf 35 Punkte, auf dem Desktop nur auf 43 Punkte. Mit ein Grund für diese schlechten Werte ist das überdimensionale Logobild.

Pagespeed kinderrucksack-abc
Pagespeed vom kinderrucksack-abc.de

Kandidat 4: http://www.muelleimer-vergleich.de/

Der Mülleimer Vergleich ist auf den ersten Blick recht schlicht, doch das hilft dem Pagespeed nicht. 58 Punkte mobil und 69 auf dem Desktop bieten durchaus Verbesserungsbedarf.
Hier kann schon die Aktivierung der Serverkomprimierung helfen.

Nicht für die Tonne - weiter machen!
Nicht für die Tonne – weiter machen!

Kandidat 5: http://transportbox-test.de/

Auf den ersten Blick sollte diese Seite gute Werte liefern. Viel Text und wenig Bilder befinden sich auf der Startseite, doch leider auch hier keine guten Ladezeiten: 68 (mobil) und 83 (Desktop) haben noch Luft nach oben.

Pagespeed transportboxtest
Immerhin gelb, mit wenig Aufwand geht’s nach oben

Kandidat 6: motorradgarage-kaufen.de

Auch motorradgarage-kaufen.de schneidet trotz der schlichten Optik ziemlich schlecht ab. Mobil geht es mit 51 Punkten so gerade über die Hälfte, Auch der Desktop zieht mit 62 Punkten nicht wirklich viel vom Teller. Auch hier wird eine langsame Antwortzeit des Servers bemängelt.

Pagespeed motorradgarage
Auch die Motorradgarage muss nochmal in die Pagespeed-Werkstatt

Kandidat 7: whisky-entdecken.de

Kein Alkohol ist eben auch keine Lösung für das Pagespeed Problem dieser Seite. Hier hat trotz mehrmaligen Versuchen das Pagespeed-Tool die Segel gestrichen und die Analyse der mobilen Variante gar nicht fertig gebracht. Desktop geht es auf 53 Punkte, da nützt auch der beste Tropfen nix 😉
Allerdings ist whisky-entdecken.de eine der schickeren Webseiten bei dieser Challenge.

Pagespeed Whisky
Mobil ging gar nix – ein temporäres Problem?

Kandiadat 8: http://mechanische-tastatur.info/

Besser steht es um diese Webseite. Mobil mit 77 Punkten fast an den 80ern, auf dem Desktop langt es immerhin für gute 90 Punkte.

Pagespeed mechanische tastatur
Noch ein bisschen mehr bei mobil und es ist OK!

Kandidat 9: http://www.der-richtige-kratzbaum.com/

Man sieht auf den ersten Blick: Die Seite nutzt kein WordPress. Sie ist im Layout einfach völlig anders und bietet kein responsive Design. Leider sind die gemessenen Werte nicht viel besser als die der WordPress-Fraktion. Zum ersten Mal steht die Benutzerfahrung als Mangel ganz oben oben. 68 Punkte weisen darauf hin, dass dieses Layout am 21. April nach Googles Willen nicht mehr gut ranken sollte. Auch die Pagespeed Werte sind mit 70 und 76 Punkten verbesserungswürdig.

Pagespeed Kratzbaum
Bitte unbedingt auf responsive umstellen!

Kandidat 10: http://www.espressomaschinen-vergleich.net/

Keine Überraschung mehr beim letzten Kandidaten. 69 Punkte mobil aber flotte 85 beim Desktop – auch hier kann bei der mobilen Ausgabe noch die ein oder andere Schraube justiert werden.

Pagespeed Espressomaschinen
Auch bei den Espressomaschinen kann mobil noch verbessert werden

Nutzerfreundlichkeit hui, Ladezeiten Pfui

Der große Anteil der hier vorgestellten Nischenseiten basiert auf WordPress. Die Themes sind bei der mobilen Nutzerfreundlichkeit durchweg in Ordnung. Nur bei den Ladezeiten sind alle durch die Bank verbesserungswürdig.
Leider lassen sich viele Dinge nur über das Theme regeln. Wer WordPress deswegen schätzt, weil eben keine Eingriffe in den Quellcode nötig sind und auch nicht das Wissen dazu hat, sollte das vielleicht auch lassen.

JavaScript und CSS reduzieren

Ein Beispiel: Sehr häufig ist die Fehlermeldung „JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten above the fold beseitigen“. Was hat es damit auf sich?

Wenn die Seite im Browser geladen wird, ist die Ladezeit der sichtbaren Inhalte wichtig. Das CSS, welches für die Darstellung des HTML-Codes zuständig ist, befindet sich meistens in einer separaten Datei. Diese wird dann erstmal vom Browser geladen und ausgewertet.
Da sich oft das gesamte CSS für die Seite in dieser Datei befindet, kann sich der Ladevorgang durchaus etwas hinziehen. Die Lösung ist so einfach wie kompliziert: Das für den beim ersten Laden sichtbaren Bereich erforderliche CSS wird einfach direkt mit in das Template bzw. den Angaben zwischen <head> und </head> gepackt. Idealerweise wird er zusätzlich noch komprimiert. Es hilft auch schon, die CSS-Datei des Themes durch den Kompressor zu jagen, den ausgeworfenen Code abzuspeichern und im Theme wieder zu ersetzen.

CSS komprimiert
CSS unleserlich komprimimiert – geht trotzdem

Der Rest kann erst geladen werden, wenn der Browser am Seitenende den Befehl erhält nun auch den Rest des CSS-Codes zu laden.
Genau so funktionert es mit JavaScript bzw. einem Framework wie jQuery. Diese interagieren erst auf Nutzereingaben und haben mit dem Seitenaufbau recht wenig zu tun. Also können auch diese Dateien erst am Ende der Seite hinzugeladen werden.

Andere Dinge lassen sich aber auch ohne Einlieferung in die WordPress-Ambulanz lösen.

Bilder optimieren

Programm jpegminiBei der Zugspitzen-Seite empfiehlt Pagespeed die Optimierung der Bilder. Auch wenn bei den Werten oft Fantasiezahlen auftreten, eine Überprüfung lohnt sich auf jeden Fall. Die Sliderbilder der Zugspitzen-Seite lassen sich beispielsweise noch um bis zu 20 KB verkleinern – und das ohne sichtbaren Qualitätsverlust. Möglich macht das die Software http://www.jpegmini.com/. Die ist zwar kostenpflichtig, erlaubt in der kostenlosen Variante aber die Komprimierung von 20 Bildern täglich. Für die Nischenseite dürfte das genügen. Wer PNG-Grafiken komprimieren will, kann dies über den Onlinedienst https://tinypng.com/erledigen. Hier können 20 Bilder auf einen Schwung komprimiert und wieder heruntergeladen werden.
Bilder lassen sich aber auch kaputt komprimieren, ein gesundes Mittelmaß hilft oft.

Serverkomprimierung aktivieren

Auch wenn die Nischenseite auf einem Webhostingpaket liegt, hat man trotzdem ein wenig Zugriff auf die Funktionen des Servers. Das funktioniert über die Datei .htaccess, die von WordPress spätestens nach Aktivierung der Permalinks angelegt sein sollte.
Diese Datei kann einfach heruntergeladen und in einem Texteditor (Word, WordPad etc. ist kein Texteditor!) bearbeitet werden kann. Die Serverkomprimierung sorgt dafür, den Datenverkehr zwischen Server und Browser zu verringern und schnellere Ladegeschwindigkeiten zu erreichen.

Dazu gibt es zwei Möglichkeiten: Die GZIP-Komprimierung oder das Deflate-Modul. Welches beim jeweiligen Hoster läuft (vielleicht sogar beide) kann man durch ausprobieren herausfinden.

GZIP aktivieren:

Deflate Modul:

Mit diesen Tipps lässt sich beim Pagespeed der ein oder andere Punkt rauskitzeln, ohne gleich ans Eingemachte gehen zu müssen. Weitere gute Tipps gibt es beim „Pagespeed-Gott“ Torben Leuschner. Zu sehr überbewertet werden darf das Thema nicht. Es ist schon sinnvoll die Anzeigen des Pagespeed-Tools in den grünen Bereich zu bekommen. Ob es letztendlich entscheidend ist ob die Seite 88 Punkte oder 94 Punkte hat, darf wohl bezweifelt werden.

 

 




11 Comments Posted

  1. Danke für den Test (Kratzbaum-Seite). Erst Inhalte und Programmierung und dann Feinschliff ist bislang meine Devise (den der Feinschliff dauert immer am längsten und ist so öde). Das mobile Design kommt aber noch im März. Und auch, dank des Tests hier, werde ich mich dann dem Thema Pagespeed noch einmal sehr intensiv widmen. Vielen herzlichen Dank also,
    Grüße,
    Anabell

  2. Danke für die Erwähnung meiner Fitness Armbänder Seite und schön, dass es Dir gefällt. Jetzt muss es nur noch Google gefallen 🙂
    Du hast recht, in Sachen Performance geht noch was.
    Ich habe diesbezüglich, ausser Bilderoptimierung, auch noch nichts unternommen. Daher bin ich momentan mit den Werten zufrieden.
    Bevor ich mich mit der Verbesserung der Ladegeschwindigkeit auseinandersetze, wollte ich, dass das Design zu 100% steht. Dem ist nun so und in den nächsten 2 Wochen werde ich mich der Ladegeschwindigkeit annehmen.
    Ich hoffe ich sehe dann zwei grüne Werte.
    Grüße
    Roby

    • Den mobilen Wert auch noch in den grünen Bereich zu bringen, sollte für die Seite mit den in diesem Artikel erwähnten Handgriffen möglich sein.
      Der Rest ist halt abhängig vom WordPress-Theme und ob man da eingreifen möchte oder nicht.

  3. Bedanke mich auch für die Erwähnung meiner Espressomaschinen Seite. Mit der Page Speed Optimierung habe ich mich auch noch nicht wirklich befasst. Soll aber noch kommen. Habe diesbezüglich seit einiger Zeit den Test des Plugins „Autoptimize“ auf meiner To Do Liste stehen. Kennst Du das bzw. hast du das schon einmal getestet ? Gruß, Jens

  4. Hallo Steffen,
    Super Idee, Deine Analyse. Meine Nischenwebseite ist leider noch nicht online. Aber ich prüfe alle meine Seiten mit Google Pagespeed. Leider ist dann bei den Ratschlägen Schluss. Es ist unglaublich schwierig, im Netz Infos zur Optimierung zu bekommen, die Google vorschlägt. Vielleicht kannst Du mal einen Artikel schreiben, wie man die Optimierungsvorschläge durchführt? Das wäre toll.
    Ich hab diese Seite schon mal bei Feedly abonniert, damit ich nichts mehr verpasse.

  5. Übrigens, hast Du Empfehlungen, welche Themes für den Pagespeed günstig sind? Wie sieht es bei Themes von Elmastudio aus? Kann man Themes auf Speed testen, bevor man sie installiert? Oder muss man das installieren und online stellen, um zu sehen, ob es Probleme gibt?

    • Leider nein. Dieses hier ist auch nicht gerade der Bringer in Sachen Pagespeed. Die Demoseiten von Elmastudio könnte man sicher vorher durch das Pagespeed-Tool jagen. Da muss man bei der Bewertung aber alle Angaben zum Server außen vor lassen.
      Ich würde das auch nicht allzu wichtig nehmen. Das ist momentan so ein Hype-Thema. Grün sollte die Anzeige zwar vielleicht im Besten Fall schon sein. Ich bezweifele allerdings irgendwelche Auswirkungen zwischen 85 und 100 Punkten.

  6. Hallo zusammen,

    Ich würde es fair finden, wenn man schon Tests von anderen Seiten veröffentlicht auch seinen eigenen Test hier reinzustellen. Das müsste der Fairness halber schon drinnen sein.

    Danke und schönen Tag

6 Trackbacks & Pingbacks

  1. Nischenseiten-Challenge Woche #01 - es geht voran
  2. Eins auf die Nase bekommen | Traumjob Internet
  3. Woche im Zeichen von Nutzerfreundlichkeit und Pagespeed › Nischenseiten-Guide
  4. Schreibblockade und Theme Verständnisproblem mehrheitlich gelöst › Nischenseiten-Guide
  5. auf-die-zugspitze-wandern.info is rocking › Nischenseiten-Guide
  6. Abschlussbericht Kratzbaum Seite Ausblick, Rückblick – Was sonst noch war … › Nischenseiten-Guide

Kommentar hinterlassen

Deine E-Mail-Adresse wir nicht veröffentlicht


*