"98/100" bei Google PageSpeed Insights: mit hardcore Vereinfachung zur super-schnellen Website

(Thomas Müller, 21.12.2014)

Das Google-Werkzeug "PageSpeed Insights" ist eine tolle Sache: Hier kann man einfach & schnell messen wie tauglich eine Website für den Google-Bot ist - klar, mit dem Ziel in den Google-Suchergebnissen möglichst weit vorne zu landen. Und mich treibt schon lange die Frage um wie ich meine Website "Smartphone-freundlicher" machen kann. Bisher hatte ich mich nie darum gekümmert da ich selbst meistens am PC/Mac gesurft habe mit einem großen Bildschirm und DSL. Doch inzwischen surfe ich mindestens 50% der Zeit am iPhone - weil es praktisch ist und vor allem auch unterwegs möglich. Und der Trend geht zu "mobile first" - sprich, daß Websites und Web-Apps zuerst einmal für die Nutzung auf Smartphones optimiert werden. Zu recht, wenn man die Wachstumsraten/Statistiken der mobilen Web-Nutzung ansieht. Stichprobe bei meinen eigenen Sites: 57% Desktop, 30% mobile user, 13% tablet.

Ich wußte daß ich für meine Websites ein neues Template brauche welches "responsive" ist, also die Darstellung je nach Endgerät (Bildschirm-Auflösung) anpasst. Doch alles was ich gefunden habe und durch den o.g. PageSpeed-Test gejagt habe war auch nicht schneller als meine bisherigen Sites - auch wenn zugegebenermaßen die "mobile"-Darstellung deutlich besser war.

Die Lösung brachte mir dann ein wenig Ausprobieren mit meiner einfachsten Website thomas-mueller.com: Diese entstand aus einer Serverplatzhalterseite, ohne JavaScript, ohne CSS-Datei mit nur ein paar CSS-Anweisungen innerhalb des HTML-Dokuments. Doch Google-PageSpeed meckerte trotzdem daß die mobile Ansicht nicht passte. Und das stimmte tatsächlich. Doch was tun wenn man den Aufwand minimal halten will?

Der erste Schritt ist supereasy: man ergänzt zuerst einmal im HTML-Code das nötige Metatag "viewport content". Sobald man das eingefügt hat wird die Website vorr. sofort komplett anders auf einem Smartphone dargestellt. Und jetzt gilt es das CSS so anzupassen daß "alles passst". Normalerweise verwendet man jetzt "media queries" wie sie hier bei MarcTV in einem sehr praxisorientierten Artikel sehr gut beschrieben sind. Doch das wollte ich wenn irgend möglich vermeiden - ich gebe zu zuerst einmal aus Faulheit. Und jetzt kommt das Verrückte: Ich habe nur die font-size im body auf 100% gesetzt und auf der Impressums-Seite statt der h1 eine h2 verwendet - und voilá, das Ergebnis ist perfekt! Die Site ist super auf dem iPhone lesbar und Google bewertet das mit 98/100 für die Ansicht "Mobil" und sehr guten 92/100 bei "Desktop". Zugegeben: das ist eine sehr kleine Website. Für große Sites ist wohl immer noch selbstaendig-im-netz.de das Vorbild mit 70/100 (Mobil) bzw. 84/100 (Desktop) - schneller kann man *große* Sites wohl nicht mehr machen.

Die "Server-Antwortzeit" ist übrigens angeblich 28,20ms (was phantastisch wäre wenn man Google's Referenz von 200ms betrachtet), die Seitenladezeit lt. pingdom.com ist 594ms. Und jetzt habe ich endlich die Grundlage für alle künftigen Websites die ich schon lange gesucht habe.

Ein unglaublich wichtiger Grund seine mobile Webansicht zu verbessern: dadurch daß auf mobilen Geräten weniger Suchtreffer als auf einem großen Monitor angezeigt werden können wird es noch wichtiger möglichst auf Platz 1 zu kommen. Details hierzu gibt es auf onlinemarketing.de

Nachtrag: Eine richtig gute Zusammenfassung was SEO-Basics angeht gibt es auf deutsche-startups.de - ich würde nur noch "strukturierter Content" (Aufzählungen, Listen, Textblöcke mit Unterüberschriften) ergänzen. Hier ist der SEO-Artikel auf ds.
Ausblick: Jetzt ist wohl langsam mal Youtube-Marketing dran, hier gibt's vorab einige Infos darüber wie effektiv das sein soll vom SEO Day 2014: YouTube Wunderwaffen die kaum einer kennt