“Performance-Boost für Blogs und Webseiten”

performantes web

Performance weit vorne

Heute gibt es ausnahms­weise mal einen Beitrag, der so gar nichts mit den üblichen Themen zu tun hat, aber eventuell dem ein oder anderen helfen wird. Vielleicht ist auch dem ein oder anderen aufgefallen, dass mein Blog seit Kurzem ein neues Design hat? Wie es dazu kam und was ich bei der Umsetzung beachtet habe, werde ich nun ausführen: Heute geht es um Webseiten-Performance, Mobile First, Responsive Web Design, Such­maschi­nen­opti­mierung und Server (speziell 1&1).

Google möchte seinen Nutzern (den Suchenden) eine möglichst optimale Erfahrung bescheren und hat daher ein mehr oder weniger undurchsichtiges Regelwerk geschaffen, mit dem Inhalte und Seiten im Ranking der Suchergebnisse gewertet werden. Da ein gutes Ranking auf der Ergebnisseite für Unternehmen oft bares Geld bedeutet, versucht jeder und sein Hund, die eigene Seite mit dem Brecheisen nach vorne zu bringen. Das wiederum veranlasst Google dazu, sein Regelwerk weiter zu verfeinern, um die plumperen Methoden halbseidener Agenturen auszuhebeln. Wir Hobby-Blogger stehen jetzt also da.

hauptsache aufmerksamkeit

Aufmerksamkeit

Ich gehe mal davon aus, dass die meisten Hobbyisten ihr Blog nicht wegen finanzieller Interessen betreiben, daher spar ich mir die Abhandlungen über relevante Inhalte und ihre Bedeutung für bzw. Auswirkungen auf das Ranking. Da nun aber Google immer stärker darauf schaut, welche Seiten für Mobilgeräte optimiert sind, hat das maßgeblichen Einfluss auf das Suchergebnis für Nutzer mit Mobilgeräten. Das habe ich mir nun zu Herzen genommen und mein Blog dementsprechend umgestaltet.

Performance messen

Die Bewertung der eigenen Webseite durch verschiedene Werkzeuge hilft sehr dabei, die notwendigen Maßnahmen zur Verbesserung der Performance zu identifizieren. Hier haben sich verschiedene Online-Werkzeuge etabliert, die man sinnvollerweise alle nutzt:

PageSpeed Insights von Google bewertet die Performance und Best-Practice für mobile Geräte und Desktop-Displays getrennt. Ein Speed Score von über 90 ist erstrebenswert.

WebPagetest bewertet verschiedene Faktoren etwas anders als das Google-Tool und gibt auch sehr detaillierte Informationen aus. Unter anderem wird ein Speedscore ausgegeben, der wie man hört unter 1000 liegen sollte. Da die First Byte Time einen recht großen Einfluss hat und mein 1&1-Server gern mal schnarchig unterwegs ist, habe ich es wirklich schwer, hier gut abzuschneiden. Da lässt sich soweit ich weiß leider auch nichts machen, als das Paket oder den Anbieter zu wechseln.

YSlow von Yahoo! als Browser-Plugin gibt wieder etwas andere Informationen zu Performance und nützlichen Maßnahmen aus.

Responsive bzw. Mobile First

Responsive Web Design (RWD) ist seit wenigen Jahren der große Renner im Webdesign. Responsive Web Design sorgt dafür, dass unabhängig vom Display eine optimale Darstellung der Seite ausgeliefert wird. Das bezieht sich einerseits auf die Gestaltung der Seite und die Anordnung von Elementen sowie andererseits auf die Daten, die vom Server an den Browser ausgeliefert werden, denn Bandbreite kostet gerade bei Mobilgeräten Zeit und damit auch Leserschaft bzw. Geld, etwa weil Shopkunden genervt abspringen, bevor die Seite fertig geladen ist.

Ein Lösungsansatz ist Mobile First, man beginnt mit der Konzeption einer Seite für Mobilgeräte und arbeitet dann mit Ausnahmen für wachsende Bildschirmgrößen. So kann man recht gut von vornherein sicherstellen, dass Nutzer mit Mobilgeräten eine ordentliche Seite angezeigt bekommen. Eine reichlich umfassende Sammlung von Artikeln und Ressourcen rund um Responsive Web Design gibt es hier: Responsive Resources

Ich halte viel von dem CSS-Framework Bootstrap, das mir einen Großteil der Arbeit abnimmt. Mit ein wenig zusätzlichem CSS kann man hinreichend individuelle, vom Bootstrap-Design abweichende Seiten erstellen, ohne sich allzu lange um das responsive Verhalten kümmern zu müssen. Außerdem sorgt Bootstrap für eine für Mobilgeräte optimierte Anzeige von Schaltflächen (für die ganz dicken Daumen), was von Google ebenfalls berücksichtigt wird. Hier wird schon sehr viel UX-Design vorweggenommen.

Bootstrap hat aber den Nachteil, dass es als Framework sehr viele Elemente abdeckt und damit sehr wahrscheinlich viel zu überladen ist für gewöhnliche Hobbyisten-Blogs. Zum Glück kann man sich auf den Seiten von Bootstrap eine abgespeckte Version mit den gewünschten Bestandteilen selbst zusammenstellen und damit die Größe der CSS-Datei wesentlich verringern.

Dateien minifizieren

Entwickler sind stets angehalten, sauberen und gut lesbaren Code zu schreiben. Allerdings benötigen die vielen Umbrüche, Leerzeichen und Tabs Speicherplatz, obwohl sie für Server und Browser unnötig sind. Daher ist es ratsam, die fertigen CSS-, und JavaScript-Dateien zu minifizieren, also von überflüssigen Zeichen zu befreien. Dazu gibt es zum Beispiel hier gute Werkzeuge:
CSS Minifier
JavaScript Minifier

Dateien komprimieren (Gzip)

Eine weitere Möglichkeit, Dateien zu verkleinern, ist die Komprimierung mit Gzip, die in der Regel vom Server durchgeführt wird. Außer man ist 1&1-Kunde mit einem Normalo-Hosting-Paket und einem zurechtgestutzten Apache, der die entsprechenden Module nicht hat oder wasweißich. Einige Stunden meines Lebens habe ich damit verbracht, herauszufinden, warum meine CSS- und JavaScript-Dateien ums Verrecken nicht komprimiert ausgeliefert werden. Tja, 1&1 hat’s deaktiviert. Allerdings gibt es die Möglichkeit, die Dateien selbst zu komprimieren und dann mit einem entsprechenden Eintrag in der .htaccess dafür zusorgen, dass Browser, die komprimierte Dateien verarbeiten können, diese statt den normalen Dateien erhalten. CSS und JavaScript selbst komprimieren: Gold wert!

Browser-Caching

Für diejenigen, die sich mit den ganz schmutzigen Themen herumschlagen wollen, sei kurz auf das Caching von Ressourcen verwiesen, das dafür sorgt, dass einmal heruntergeladene Dateien vom Browser behalten und später wiederverwendet statt erneut heruntergeladen werden. Das erfordert gegebenenfalls einen Eintrag in der .htaccess-Datei (für Apache-Server). Caching ist für ein gutes Ranking maßgeblich, der Interessierte möge dazu Google bemühen, hier ist ein beispielhaftes Suchergebnis: Browser-Caching aktivieren

Seiten-Caching

WordPress macht einige Datenbankabfragen, bevor es das fertige HTML an den Browser ausliefert. Obwohl eine einzelne Datenbankabfrage in der Regel wenige Millisekunden dauert, kann eine Häufung von Anfragen wegen vieler Plugins und eine alte, große Datenbank zu längeren Wartezeiten führen. Abhilfe schafft das Caching von Seiten, also die Speicherung des HTMLs, wie es nach allen Abfragen an den Nutzer ausgeliefert würde. Das übernimmt zum Beispiel das kostenfreie WordPress-Plugin Cachify von Sergej Müller, der neben diesem noch einige weitere großartige Plugins entwickelt hat. Cachify kann sogar das im Cache gespeicherte HTML noch minifizieren, so dass hier weitere Bytes gespart werden können.

CSS Above the fold

Vor allem Pagespeed Insights mault rum, wenn es beim Laden der Seite auf JavaScript- und CSS-Ressourcen stößt, die das Rendering blockieren. Also eigentlich alle extern verlinkten .js- und .css-Dateien (außer die asynchron geladenen, aber die sind noch nicht die Regel). Allerdings ist es gängige Praxis, CSS und JavaScript auszulagern. Da JavaScript in der Regel nicht wichtig ist für die erste Anzeige der Seite, kann man das am Ende des HTML-Dokuments laden und hat das Problem für JavaScript aus der Welt.

Bei CSS ist das aber etwas schwieriger, denn wenn der Browser schon HTML ausgibt, bevor es mit CSS formatiert wurde, sieht der Nutzer erst Kraut und Rüben, bis das CSS geladen ist. Ein Lösung ist, dass man das für den initial sichtbaren Bereich (Above the fold) relevante CSS in das HTML-Dokument einbettet und das restliche CSS erst am Ende der Seite lädt. Bei externen Quellen wie einem Webfont wie dem in meinem Seitentitel verwendeten gibt es auch Lösungen, aber hier nehme ich die kurze Anzeige einer anderen Schriftart in Kauf.

Interessant wird es, wenn man ein Responsive Design hat, bei dem manche Inhalte entweder bei großen Bildschirmen in der Marginalspalte oder bei kleinen Bildschirmen unter dem eigentlichen Inhalt platziert werden, wie das bei meinem Blog der Fall ist. Was ist dann Above the fold?

Da Bootstrap zuerst kleine Auflösungen berücksichtigt, habe ich nun das CSS in die Seite eingebettet, das für eine saubere Formatierung auf Mobilgeräten sorgt, da Desktop-Rechner in der Regel eine ausreichend schnelle Verbindung haben und der Nutzer von dem Nachladen des CSS gar nichts bemerkt.

Das CSS habe ich ermittelt, indem ich

  1. den Browser horizontal zusammengeschoben habe, bis die Seite wie für ein Mobilgerät angezeigt wurde und
  2. und dann der Anleitung auf dieser Seite gefolgt bin: Above the fold CSS
  3. und zwar für eine repräsentative Auswahl an Seiten, wonach ich
  4. das ermittelte CSS mit dem Editor Notepad++ in separaten Dateien gespeichert habe und
  5. dann die Dateien mit dem Plugin Compare für Notepad++ verglichen habe, um alle notwendigen Stile in einer finalen Datei zu sammeln.

Das Ergebnis habe ich dann minifiziert und in den Kopf der Datei eingefügt. Jetzt werden zwar für manche Seiten wieder unnötige Stile geladen, aber hier reden wir von einigen Byte mehr oder weniger, ganz so Pro muss das jetzt auch nicht.

Fazit

performantes web

Läuft!

Durch ein konti­nu­ier­liches Um­setzen der beschrie­benen Maß­nahmen (Mobile First mit Bootstrap, dann Dateien minifizieren und komprimieren, dann CSS above the fold einbetten und blockierende Ressourcen nach unten) habe ich meinen Google PageSpeed-Rank für Mobilgeräte von 70 auf über 90 heben können. Was Google jetzt noch an meiner Seite auszusetzen hat, ist zum Großteil ein Problem von eingebetteten YouTube- und Vimeo-Videos. Den Speed Index kann ich dank lahmer 1&1-Server nicht nachhaltig verbessern, aber das Problem gehe ich ein andermal an.

Und jetzt: Fröhliches Optimieren!

Nachtrag: Mir ist erst nach dem Veröffentlichen eingefallen, dass ggf. das Cachen der Seiten für eine schnellere First Byte Time sorgen könnte, da ja evtl. auch die Datenbanken bei 1&1 nicht die schnellsten sind. Es hilft bei meinem Blog leider nicht viel, ist aber trotzdem sinnvoll. Ich habe oben den Abschnitt Seiten-Caching ergänzt.

Veröffentlicht am 15. April 2015, 2 Kommentare

Kommentare:

  • ghoul sagt:

    Hm, Danke für diesen Hinweis.
    Jetzt bin ich hin- und hergerissen, entweder den Ghoultunnel zu optimieren oder einfach weiterhin auf die Leute zu scheißen, die das WWWeb mit offensichtlich ungeeigneten Ausgabevorrichtungen (z.B. mit Telefonen) abrufen.