Webseitenoptimierung mit Google Page Speed Insights

Um Euch als Lesern die Wartezeit auf die neusten Blogposts zu verkürzen, habe ich mich heute mal mit Google Page Speed Insights beschäftigt. Das Webtool zeigt für den schnellen Seitenaufbau hinderliche CSS- und Javascript-Elemente innerhalb des Quellcodes auf und bewertet unter Anderem auch die Antwortzeiten der Server, die HTML-Optimierung und und und auf. Für mich mit geringen Webdesign-Kenntnissen schon viel zu tiefgreifende Informationen.

PageSpeed Insights für mobilen Content: 99/100
Punkten zur perfekt optimierten Webansicht
Leider bekam ich bei der Auswertung der Desktop-Version des Blogs nur einen Fehler ausgegeben. Nach erfolgloser Recherche habe ich einen Beitrag im Support-Forum von Google gepostet – da bin ich mal gespannt, ob und wann der Post beantwortet und das Problem erfolgreich gelöst wird. Leider bietet Google keine aufschlussreichen Fehlercodes oder eine informative Auflistung von FAQ´s an, die dieses Thema betreffen. 

PageSpeed Insights für Desktop-Content: Fehler beim Aufruf
Von daher heißt es nun: Geduldig warten – nicht nur beim Webseitenaufbau des Blogs über den Desktopbrowser, sondern leider auch auf die Antwort des hoffentlich schnellen Supports von Google. Bis dahin würde ich mich freuen, wenn ihr auf die Millisekunden-Optimierung vorerst hinwegseht und den Blog dennoch besucht, auch wenn ihr vielleicht insgesamt 1-2 Sekunden länger für den Seitenaufbau im Desktopbrowsing warten müsst. Kennt Ihr die Thematik? Habt ihr bereits Erfahrung im Bereich Webseitenoptimierung sammeln können und habt vielleicht den ein oder anderen Tip? Dann schreibt´s gerne in die Kommentare! Bis die Tage.

– nugaxstruxi

Update vom 02.12.2013 um 18:30 Uhr

Seit einigen Tagen ist das neue Design des Blogs online gegangen: Nicht ohne Grund. Achso – die Auswertung mit Google PageSpeed-Insights war nun problemlos möglich. Eine vernünftige, logische Antwort von Google habe ich zu diesem Thema leider nie erhalten. Es hieß nur immer wieder sinngemäß „Überprüfen Sie Ihren HTML-Code auf Schwachstellen und optimieren Sie den Seitenaufbau.“. Das habe ich nun getan – nicht mehr mit dem alten Design, beim neuen Design habe ich allerdings besonders drauf geachtet.

Auswertung der Messergebnisse: Die Messkriterien

Nach einigen Anpassungs-Versuchen hat sich das alte Design als überladen erwiesen, weshalb ich mich für ein einfacheres Design und ein paar designtechnische Anpassungen entschieden habe. Der Blog hat mit dem alten Design bis zu 8,4s gebraucht, um vollständig alle HTML-Inhalte darzustellen. Mit dem neuen Design sind es je nach Browser und Blogpost zwischen 2,59s und 5,4s geworden. Die Optimierungsvorschläge von Pagespeedinsights sind zum Teil sinnvoll, zum Teil aber auch nur umsetzbar, wenn man auf einen gewissen Qualitätsstandard verzichten kann und möchte. In Zeiten von FullHD, 4k-Displays und Ähnlichem habe ich mich dagegen entschieden, die vorhandenen Grafiken, Banner etc. weiter in ihrer Auflösung zu reduzieren.

Desktop: Caching & Komprimieren der Bilder


Zu 97% erfüllt die Desktop-Version des Blogs die Prüfkriterien von Googles Developer-Tool pagespeed-insights. Google empfiehlt, das Browser-Caching für die Blogroll-Elemente zu aktivieren und die verwendeten Bilder & Banner zu komprimieren, um die Website erneut zu verbessern. Das ist ohne Qualitätseinbußen nicht möglich, weshalb diese Optimierungsmaßnahmen vorerst nicht eingeplant wurden.

Mobil: 100/100 Kriterien erfolgreich bestanden

Die Mobil-Ansicht des Blogs ist momentan zu 100% an die Nutzung mit Mobilgeräten (Smartphones, Tablets bis 7“) angepasst. Die Ladezeit ist nicht mehr durch Optimierungsmaßnahmen bezüglich CSS-Elementen zu verkürzen. Lediglich der HTML-Anteil kann reduziert werden. Dies würde 2,1 KB einsparen. Da darunter allerdings das Design der mobilen Ansicht leiden würde, habe ich diese Optimierungsmaßnahme bisher nicht durchgeführt oder geplant.

Fazit: Viel hilft nicht immer viel

Viele Bilder, Videos und bunte Farbanpassungen in HTML-Elementen sind zwar hübsch, trendy und „state-of-art“, für die Ladezeiten der Website und die Geschwindigkeit zwischen Seitenwechseln ist dieses „over-designing“ allerdings nicht zuträglich. Der Grat zwischen Design und Performance ist im Bereich des Webdesigns sehr schmal. Um den Blog nicht wie eine Baukasten-Homepage von 1995 aussehen zu lassen, aber dennoch auf lange Ladezeiten zu verzeichten, habe ich mich für das jetzige Design entschieden. Die Bilder sollten nicht weiter verkleinert werden, da die Auflösungen der anzeigenden Geräte (mobil und statisch) stetig steigen. Schließlich haben wir uns von dem 8-Bit-Farbschema und dem Kästchen-Design aus den 80ern und 90ern bereits etwas länger verabschiedet (abgesehen vom Retro-Look). Ach ne…Microsoft bringt uns die Kästchen mit Windows 8 ja wieder zurück…naja, die meisten haben davon abgelassen, solche Designs zu nutzen.

Nähere Infos zum Blog-Design, den Nutzerzahlen etc. findet Ihr im aktuellen Blog-Report. Den gesamten Blog-Report findet Ihr im Download-Bereich.
– nugaxstruxi

Schreibe einen Kommentar

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