Der SEO-Faktor Seitenladegeschwindigkeit

Need for Speed – das ist nicht nur eine beliebte Actionrennsportserie für PC und Konsole, sondern auch das Motto wenn es um die Seitenladegeschwindigkeit von Webseiten und Webshops geht. Denn es gibt nichts, was beim ungetrübten Surfen mit dem Smartphone im WWW mehr nervt, als eine Seite welche langsam oder gar nicht lädt. Google hat dazu vor wenigen Wochen auch eine Umfrage unter knapp 3.000 Personen durchgeführt und dabei die folgende Frage gestellt:

Websitegeschwinditkeit Google

46% aller Nutzer, also fast jeder Zweite, hält somit langsame Ladezeiten als das größte Problem im Bezug auf Surfen am Smartphone. Nachdem bereits über 55% aller Suchanfragen bei Google über Smartphones eingehen, ist dies für viele ältere oder schlecht programmiere Websites mittlerweile zu einem großen Problem geworden. 

Bilder komprimieren und optimieren

Bilder machen im Durchschnitt etwa 63% der so genannten page load aus, also dem Anteil der Bilder an der Gesamtdatengröße einer Website. Bis vor wenigen Jahren war es im Webdesign äußerst modern, mit riesigen Bildern, (selbstladenden) Videos oder vielen Effekten (z.B. Parallax) zu agieren. Diese Dinge schauen im Jahr 2017 zwar noch immer schön aus, sind aber für die Ladegeschwindigkeit einer Website – gerade auf mobilen Devices – zumeist tödlich.

Geht man nach den Empfehlungen von Google, dann soll eine Startseite maximal 1.600KB groß sein. Dieses Limit ist bei einer Verwendung von vielen Bildern schnell erreicht. Geht es nicht anders und man muss oder will viele Bilder verwenden, dann sollte man zumindest stets darauf achten, dass diese Bilder für die Verwendung im Web optimiert sind. In allen gängigen Bildbearbeitungsprogrammen (wie etwa Adobe Photoshop) findet sich hierfür eine eigene Einstellung beim Abspeichern eines Bildes namens „Für Web speichern“.

Aber auch ohne Bildbearbeitungsprogramme kann man Bildmaterial wirksam komprimieren, etwa dank TinyPNG, einem Onlineservice welcher Bilder in Windeseile optimiert und komprimiert. Verwendet man für seine Website das WordPress CMS, dann gibt es hier auch viele (zumeist kostenpflichtige) Extensions, welche die Komprimierung von Bildern automatisch beim Upload in die Bilddatenbank übernehmen. Stellvertretend sind hier an dieser WP Smush Pro sowie Imagify genannt, mit denen wir in der Onlineagentur pro! über die Jahre hinweg gute Erfahrungen gemacht haben. 

Above the fold vs. Below the fold

Auf einer Website unterscheidet man bei der Platzierung von Bildern, Texten und allen anderen Elementen zwischen above the fold und below the fold. Diese Bezeichnungen kann man folgendermaßen ganz einfach erklären: nimmt man ein Blatt Papier und knickt es bei der Hälfe ab, dann wird alles was auf der sichtbaren Seite aufscheint, als above the fold bezeichnet. Alles was hingegen auf der nicht sichtbaren Seite aufscheint, wird als below the fold bezeichnet. 

Bei der Optimierung der Seitenladegeschwindigkeit einer Website sollte man sich also darauf konzentrieren, dass alle Elemente im Sichtbereich above the fold so gut wie möglich komprimiert sind, da diese beim Aufruf einer Seite unmittelbar geladen werden (sollen). Für alle Elemente, welche nicht auf den ersten Blick ersichtlich sind – also z.B. erst ab dem Scrollen – kann man zur Optimierung ein Skript namens Lazy Loading (bzw. auch als lazyload bekannt) aktivieren. Dadurch werden die Elemente below the fold erst dann vom Server geladen, sobald sie auch wirklich für die richtige Darstellung für den User benötigt werden. Dadurch wird auch die Anzahl der initialen Serverrequests reduziert. 

Custom Fonts

Custom fonts („maßgeschneiderte Schriftarten“) sehen schön aus, müssen womöglich auf die Unternehmens-CI abgestimmt sein und heben die eigene Website dadurch vom Rest des WWW ab. Jedoch bringen sie auch ein Problem mit sich. Sobald auf einer Website nämlich keine gebräuchliche Webfont (= optimiert für die Verwendung in Chrome, Firefox usw.) eingebunden ist, muss diese vom Browser erst on-the-fly heruntergeladen werden. Dadurch wird ebenfalls eine längere Ladezeit beim Seitenrendering erzeugt. Daher ist es empfehlenswert, eine Schriftart beispielsweise über Google Web Fonts in eine Website einzubinden. Ein weiterer Vorteil dieser Methode ist, dass diese Schriftarten lizenzfrei verwenden werden können.  

Google Chrome Standardschriftarten

Wie messe ich Seitenladegeschwindigkeit?

Einige von euch haben sich mittlerweile sicher schon gedacht: wie messe ich denn eigentlich die Seitenladegeschwindigkeit meiner Website? Dazu gibt es viele Tools, die meisten davon sind auch kostenfrei. Die bekannteste Seite ist vermutlich PageSpeed Insights von Google. Dieses Onlinetool crawlt eine Seite nach den wichtigsten Geschwindigkeitsfaktoren (z.B. Antwortzeit des Servers, Bildoptimierung, Browser-Caching, CSS/HTML/JavaScript) und zeigt anschließend Noten von 0 bis 100 getrennt für Desktop und Mobile an. Keine Angst: ein Wert knapp bei 100 ist nahezu unerreichbar. Selbst Google erreicht bei seinem eigenen Test auf der Mobilversion nur 79/100 Punkte und liegt damit nicht einmal im grünen Bereich!

PageSpeed Insights

Abgesehen von PageSpeed Insights hat Google auch direkt in seinen Chrome Browser eine mächtige Funktion integriert: die so genannten Chrome Developer Tools. Habt ihr auf einer Seite schon einmal die rechte Maustaste gedrückt und dann auf „Untersuchen“ geklickt? Nein? Damit öffnet ihr das Tor zu den Entwicklertools. Entwickler, Webdesigner und Suchmaschinenoptimierer verbringen einen großen Teil ihrer Arbeitszeit in dieser Oberfläche. 

Chrome Developer Tools

So werden beispielsweise im Reiter „Network“ die page load und die Ladezeit angezeigt. Außerdem findet man ein Wasserfalldiagramm welches aussagt, in welcher Reihenfolge die Elemente einer Webseite geladen werden. Je flüssiger dieses Diagramm aussieht (im wahrsten Sinne des Wortes), desto schneller lädt im Normalfall auch eine Website. Unter „Audits“ findet man seit wenigen Wochen standardmäßig ein Tool namens Google Lighthouse. Wie der Name („Leuchtturm“) schon aussagt, ist dies ein Audit-Tool welches sämtliche Informationen hinsichtlich Performance, Zugänglichkeit, Usability und Nutzererfahrung sammelt und in einer Notenskala (ebenfalls 0 bis 100) widergibt. 

Nicht-Google-Tools

Für einen schnellen (und leichter verständlichen) Überblick über die Key Facts einer Website gibt es auch Allround-Tools wie etwa Varvy.com. Dieses bei Suchmaschinenoptimierern beliebte Tool überprüft schnell und unkompliziert die Schlüssel-Komponenten einer Website (u.a. Seitenladegeschwindigkeit, Zugänglichkeit, Sicherheit) und zeigt die Erkenntnisse anschließend in Ampelform an. Dadurch kann man beispielsweise auch gut erkennen, ob man nach dem Go-Live einer Website vergessen hat, dem Google Bot wieder den Zutritt zur Website zu gestatten.

Ein anderes empfehlenswertes Tool (mit dem Google selber arbeitet, obwohl es nicht von Google kommt) ist der WebPageTest. Dort kann man verschiedenste Testumgebungen (z.B. Browser, Browserversion, Internetverbindung, Land, Kontinent) simulieren und damit wichtige Aufschlüsse erhalten, falls es mit der eigenen Website Probleme auf bestimmten Devices oder ISPs (Internet Service Provider – z.B. A1, UPC) gibt. 

Speed kills – aber keine Webseiten

Bei der Erstellung von Webshops oder Websites achten die pro!fis aus der Onlineagentur pro! stets darauf, dass die vorher genannten Maßnahmen umgesetzt werden und das Endprodukt einen Speedtest so gut wie möglich durchsteht. So arbeiten wir im WordPress CMS beispielsweise mit Premium-Tools wie etwa dem Caching-Plugin WP Rocket oder dem WordPress-Toolkit von WPMUDEV. Diese Plugins werden jedoch nicht einfach installiert und aktiviert. Ganz im Gegenteil – jede Website wird vor dem Go-Live ausgehend getestet, damit die Einstellungen keine Darstellungs- oder Ladeprobleme verursachen und der Content optimal geladen wird.

Auch bei Magento (M1 & M2) arbeiten wir mit Premium-Tools von Anowave, Mageworx, Mirasvit oder Amasty, um nur einige unserer bevorzugten Technologiepartner zu nennen. Mit diesen Tools und Extensions, die ständig gewartet und auf neue Versionen aktualisiert werden, werden Optimierungen geschaffen, welche mit einer einfachen Installation der Magento-Instanz nicht möglich wären. 

Die Seitenladegeschwindigkeit deiner Website ähnelt einem ausrangierten Gefährt und keinem modernen Sportwagen? Dann ist es an der Zeit um etwas zu tun. Kontaktiere die pro!fis aus der Onlineagentur pro! noch heute und wir beraten dich hinsichtlich eines Website-Relaunchs oder der Optimierung der Seitenladegeschwindigkeit der Website.

0 Kommentare

Dein Kommentar

Want to join the discussion?
Feel free to contribute!

Schreibe einen Kommentar

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