Schnelle Webseite erzielen

Tipps für eine schnelle Webseite

Eine schnelle Webseite mit geringen Ladezeiten zu haben, ist in der heutigen Zeit sehr wichtig. Bereits 2012 errechnete Amazon, dass eine Ladezeit von mehr als 100 Millisekunden den Umsatz um etwa 1 % reduziert. Studien zufolge verlassen sogar mehr als 60 Prozent aller Nutzer eine Seite, wenn diese länger als drei Sekunden lädt. Gerade im mobilen Bereich ist eine lange Ladezeit um so dramatischer. Gleichzeitig werden jedoch mobile Webseiten immer wichtiger. Allein in Deutschland sind 74% der Webseitenbesucher auf mobilen Geräten unterwegs. Doch wer mit dem Smartphone surft, hat es meist eilig. Sei es, weil man schnell noch etwas zwischen Tür und Angel nachschauen möchte oder man sich in der Warteschlange an der Kasse kurz die Zeit vertreibt. Ist dann die mobile Internetverbindung auch noch etwas schwach, ist eine lange Ladezeit einer Webseite fatal. Doch neben der Nutzererfahrung -erwartung, spielt auch das Google Ranking eine wichtige Rolle bei der Dauer der Ladezeiten.  Mittlerweile hat Google die Ladegeschwindigkeit offiziell zu einem Ranking-Faktor erklärt. Dadurch finden sich schnell ladende Seiten nun viel höher im Ranking als langsam ladende Seiten. Zudem wirkt sich eine schnelle Webseite positiv auf die Absprungrate und die Verweildauer auf der Seite aus, was ebenso das Google-Ranking vorteilhaft beeinflusst.

WP Rocket - WordPress Caching Plugin

Wie die Geschwindigkeit einer Webseite gemessen werden kann?

Nachdem nun klar ist, warum eine schnelle Webseite so wichtig ist, stellt sich die nächste Frage: Wie kann die Geschwindigkeit gemessen werden? Dafür gibt es verschiedene Online-Tools. 

Google Pagespeed

Das wohl bekannteste Tool ist Google Pagespeed. Google Pagespeed gibt die gemessenen Werte für die mobile Webseite als auch die Desktopseite an. Neben Messwerten wie First Contenful Paint, was die Ladezeit ist, bis der vollständige Inhalt geladen wurde, sowie First Input Delay (die Verzögerung, wann die erste Interaktion mit der Webseite erfolgen kann), werden auch Möglichkeiten aufgezählt, wie der Geschwindigkeitswert verbessert werden kann.

GooglePageSpeed als Tool für schnelle Webseiten

GTMetrix

Ein weiteres nützliches Tool ist GTMetrix. Dort kann die Analyse mit verschiedenen Browsern sowie unterschiedlichen Lokalitäten erfolgen. Als Ergebnis bekommt jede Webseite zwei Scores, deren Prozentwert die Güte der Ladezeit angeben. Zudem werden die Anzahl der Serveranfragen, die Größe der Seite sowie die volle Ladezeit angezeigt. Unterhalb der Bewertung finden sich verschiedene Teilbewertungen einzelner Bereiche. Diese zeigen, in welchen Feldern eine Verbesserung der Seitengeschwindigkeit erzielt werden kann.

GTMetrix für schnellere Webseiten

Webpagetest

Ein wirklich hilfreiches Tool für eher fortgeschrittene Nutzer ist webpagetest. Zunächst lassen sich wieder verschiedene Geräte sowie Lokalitäten auswählen. Anschließend werden 3 Geschwindigkeitstest durchgeführt, um eine Übersicht der durchschnittlichen Ladezeiten zu erhalten. Das spannende an diesem Tool ist, dass anschließend die Ladezeit in Balkendiagrammen dargestellt wird: Mit Hilfe dieser lassen sich die Ladezeiten einzelner Ressourcen nachvollziehen. So bekommt man einen guten Überblick über zeitfressende Dateien bzw. Ressourcen, die sogar die Nutzung der Webseite blockieren können, bis sie geladen sind.

Webpagetest

Schritte zur Verbesserung der Webseitengeschwindigkeit

Für eine schnelle Webseite gibt es ein paar einfache Tipps. Die wichtigsten von diesen, sollen hier aufgezeigt werden.

Bilder optimieren

Die schnellste und effektivste Methode eine schnelle Webseite zu erhalten ist es, ein hohes Augenmerk auf verwendete Bilder zu legen. Bilder sollten generell in ihrer Dateigröße reduziert und nur in der Größe bereitgestellt werden, wie sie auch angezeigt werden. Ein Logo, was nur in 100×100 Pixel angezeigt wird, braucht nicht mit mehreren tausend Pixel geladen zu werden. Aus diesem Grund macht es Sinn, das Bild vorher mit einem Bildbearbeitungsprogramm an die gewünschte Größe anzupassen. So wird vermieden, dass mehrere MB große Datei hochgeladen werden. Ich nutze dafür gern Photoshop oder IrfanView. Als Richtwert lässt sich sagen, dass ein Bild im Regelfall nicht mehr als 150KB groß sein sollte, besser sogar weit unter 100KB. Eine Möglichkeit dies zu erreichen ist, die Dateigröße von vornherein auf diese maximale Größe zu reduzieren. Als zweite Möglichkeit können für Desktop und mobile Version auch unterschiedlich große Bilder zur Verfügung gestellt werden. Anschließend kann das Bild noch weiter komprimiert werden. Dank moderner Bildoptimierungensmöglichkeiten ist in der Qualität komprimierter Bilder je nach Komprimierung kein Unterschied mehr zwischen dem Original und dem komprimierten Bild zu erkennen. Für die Komprimierung gibt es verschiedene Online-Tools wie https://tinyjpg.com/. Wird die Seite mit WordPress betrieben, können für die Komprimierung auch PlugIns benutzt werden. Mein Favorit ist dabei ShortPixel – mit diesem PlugIn lassen sich nicht nur alte Bilder komprimieren, sondern auch alle neu hochgeladenen Bilder werden automatisch in der gewünschten Qualität verkleinert. Außerdem lässt sich für jedes einzelne Bild die Komprimierung auch noch anpassen, falls mehr oder weniger Qualität benötigt wird. Mit der Optimierung und der Bereitstellung größenangepasster Bilder lässt sich die Webseitenladegeschwindigkeit mit nur wenigen Griffen positiv beeinflussen.

Lazy Load

Ein weiterer Aspekt für eine schnelle Webseite ist das Nachladen von Inhalten. Dieser Punkt bezieht zwar auch Bilder mit ein, jedoch geht es über diese hinaus. Unter Lazy Load versteht man, dass Inhalte erst nachgeladen werden, wenn sie in das Sichtfeld des Nutzers gelangen. Du hast es sicherlich bereits schon mal in einem Onlineshop gesehen, dass Artikel, die weiter unten gelistet sind, erst langsam erscheinen, wenn du nach unten scrollst – genau das ist Lazy Load. Das Nachladen hat den Vorteil, dass anfangs nicht so viele Inhalte an den Nutzer übertragen werden müssen, bis dieser bereits mit der Webseite interagieren kann. Automatisch heißt das auch, dass weniger Daten übertragen werden müssen. Lazy Load kann dank verschiedener PlugIns in WordPress erzielt werden. Mein beliebtestes PlugIn ist WPRocket*, da es neben Lazy Load noch viele andere Funktionalitäten abdeckt. Zudem habe ich bisher kein anderes PlugIn gefunden, was in der Gesamtsumme ähnlich gute Resultate wie dieses erzielt. Alternativ lassen sich auch die kostenlosen PlugIns Autooptimize oder WP Fastest Cache installieren. In der Gesamtsumme auch auf die anderen Funktionalitäten bezogen, weisen diese beiden jedoch nicht so gute Ergebnisse auf wie WP Rocket.

Hostingprovider

der richtige Hostingprovider macht einen Unterschied

Ein sehr wichtiger Faktor für eine schnelle Webseite ist, wie schnell die Daten vom Server an den Nutzer gesendet werden. Dafür zuständig ist der Hostingprovider, der die Webseite im Internet erreichbar macht. In den Webseitentests ist die Übertragungsgeschwindigkeit des ersten Bytes an der First Byte Time – Kennzahl ersichtlich. Diese sollte im besten Fall bei max. 200ms liegen. Ist diese höher und/oder wird beim Google Pagespeed Test der Hinweis “First Byte Time verbessern” angezeigt, sollte unbedingt über einen Hostproviderwechsel nachdenken. Gerade Provider wie Strato oder 1&1 lassen in der Übertragungszeit mitunter sehr zu wünschen übrig. Da bei diesen Anbietern hauptsächlich shared Hoting, also geteiltes Hosting, angeboten wird, wird oftmals die Serverzeit negativ beeinflusst. Tests zeigen, dass einer der schnellsten und zuverlässigsten Hostingprovider webGo* ist – über diesen laufen auch unsere Webseiten. Das Positive an WebGo ist zudem, dass sich je nach Anforderungen zwischen verschiedene Hostingvarianten entschieden werden kann, wie shared Hosting, mit oder ohne SSD oder managed Hosting. Zudem erfolgt der Betrieb der Server mit Ökostrom, wodurch WebGo von uns eine klare (nachhaltige) Empfehlung ist.

Caching

Besucht ein Nutzer eine Webseite müssen zunächst die Daten der Seiten auf das Gerät des Nutzers geladen werden. Der Server muss dafür die Anfrage bearbeiten, was einige Zeit benötigt. Anschließend sendet er die Dateien an den Nutzer, der diese herunterlädt. Ohne Caching würde dies jedes Mal genauso erneut passieren, sobald der Nutzer ein weiteres Mal die Webseite besucht. Dank des Cachings kann dieser Prozess gleich an zwei Stellen optimiert werden. Zum einen wird der Server angewiesen statische Inhalte für einen bestimmten Zeitraum zwischenzuspeichern, so dass diese ohne nötige Verarbeitung direkt an den Nutzer gesendet werden können. Somit wird die Verarbeitungszeit des Servers gespart. Zum anderen können Dateien im Browser des Nutzers für eine bestimmte Zeit hinterlegt werden, so dass auf diese beim nächsten Besuch wieder zugegriffen werden können – dies wird Browser Caching genannt. (Browser) Caching ist somit ein wirksames Tool für eine schnelle Webseite. Das Caching kann in WordPress dank verschiedenster PlugIns erreicht werden. Erneut ist hier unser Favorit WPRocket* aufgrund des großen Funktionsumfanges und der überzeugenden Ergebnisse. Alternativ können stattdessen kostenlose PlugIns wie WP Fastest Cache oder W3 Total Cache verwendet werden.

Anzahl verwendeter PlugIns

Ein wichtiger Einflussfaktor für schnelle Webseiten ist die Anzahl verwendeter PlugIns. PlugIns bringen Dateien und Ressourcen in den Quellcode, die beim Start der Seite mit geladen werden. Da diese zum Teil Funktionalitäten abdecken, die nicht jeder benötigt oder mitunter auch so programmiert sind, dass sie einfach auf jeder Unterseite geladen werden, selbst wenn sie dort keine Verwendung finden, können sie den Quellcode und die Größe der Webseite mitunter ungewollt aufblähen. Als Goldene Regel kann daher gesagt werden: Weniger ist mehr. Es sollten wirklich nur die PlugIns installiert und aktiviert werden, die wirklich benötigt werden. Falls eine bestimmte Funktion verwendet wird, aber das genutzte PlugIn die Webseite negativ beeinträchtigt, kann auch geschaut werden, ob es eine schnellere Alternative gibt. Ein gutes Beispiel dafür ist zum Beispiel Contact Form 7. Dieses PlugIn wird selbst bei Nichtverwendung auf jeder Unterseite geladen und verlangsamt die Webseite merklich. Eine schnellere Alternative dazu ist WP Forms. Mitunter lassen sich PlugIns durch eigene Programmierung auch ganz ersetzen, falls die Kenntnisse dafür vorhanden sind. Oder es kann geschaut werden, ob auf eine bestimmte Funktion nicht einfach verzichtet werden kann. Unsere Webseite kommt zum Beispiel mit lediglich 8 PlugIns aus. Eine weitere Schwierigkeit, die durch PlugIns verursacht wird, ist, dass die zusätzlichen Dateien der PlugIns eine höhere Anzahl an Serverzugriffen verursacht. Aus diesem Grund ist es ratsam mittels eines PlugIns wie WPRocket* die zu übertragenden Dateien zusammenzufassen, um so die Anzahl an Serverzugriffen zu reduzieren. Kostenlose PlugIn-Alternativen sind an dieser Stelle zum Beispiel Autooptimize oder WP Fastest Cache. Für fortgeschrittenere Nutzer kann an dieser Stelle auch Hummingbird sehr empfehlenswert sein – dieses ermöglich das komplette ignorieren einzelner Dateien, um so nicht verwendete Files gar nicht erst zu laden. Doch Achtung, diese Funktion zu nutzen können wir wirklich nur erfahrenen Nutzern empfehlen, da dies die Funktionalität der Webseite beschädigen kann.

Theme & PageBuilder

Ein wichtiger Punkt in der Liste, der nicht vergessen werden sollte, ist das verwendete Theme. Vor allem wenn die Webseite erst erstellt werden soll, kann darauf ein großes Augenmerk gelegt werden. Viele Themes kommen mit einer umfangreichen Funktionalität, um auch wirklich alle Eventualitäten abzudecken. Meistens benötigt man jedoch nur einen Bruchteil davon. Zudem sind häufig PageBuilder enthalten, die die Ladezeit einer Webseite negativ beeinflussen. Aus diesem Grund ist es ratsam von vornherein auf ein leichtgewichtiges Theme zu achten. Zwei der schnellsten und kleinsten Themes mit dennoch viel Funktionalitäten sind Astra* sowie GeneratePress*. Falls eine bestehende Webseite ein neues Design erhalten soll, kann ebenso über ein Wechsel auf ein leichtgewichtiges Theme nachgedacht werden. 

Schnelle Webseite und Nachhaltigkeit

Nachdem hier nun die wichtigsten Tipps für eine schnelle Webseite aufgeführt worden sind, soll noch ein kurzer Bogen zu unserer Leidenschaft der Nachhaltigkeit gespannt werden. Denn es lässt sich die Frage stellen, was das ganze denn eigentlich damit zu tun haben soll. Um genau zu sein: extrem viel. Eine schnelle Webseite kann nur erreicht werden, wenn die zu übertragende Datenmenge als auch die Anzahl an Serverzugriffen bzw. die Bearbeitungszeit auf dem Server reduziert werden. Das hat automatisch zur Folge, dass weniger Strom und somit weniger CO2 verursacht wird. Eine Reduzierung der Ladegeschwindigkeit einer Webseite kommt also automatisch auch mit einer Verbesserung der CO2-Bilanz einher. Am Beispiel von easygoing.guide lässt sich dies sehr gut verdeutlichen. Vor der Optimierung war die Seite über 5 MB groß und verbrauchte 6,20g an CO2 pro Webseitenaufruf. Nachdem wir die Seite optimieren durften, verbraucht easygoing.guide dank einer Webseitengröße von lediglich 215KB nun gerade einmal 0.12g CO2 pro Aufruf. Vielen Dank an dieser Stelle noch einmal für das entgegengebrachte Vertrauen. Eine Optimierung der Geschwindigkeit einer Webseite leistet also ebenso einen Großen Beitrag zu mehr Nachhaltigkeit.

Schnelle Webseite easygong.guide nach Optimierung

Hinweis: Die angeführten Tipps können sehr viel dazu beitragen, eine schnelle Webseite zu erhalten. Dennoch ist uns bewusst, dass sie zum Teil einiges an Zeit und Expertise benötigen. Für die Umsetzung der Optimierung stehen wir deshalb sehr gern zur Verfügung. Auch eine beratende Funktion unsererseits ist möglich.

Eine unverbindliche Anfrage kann an info@it-bienen.de gesendet werden.

WP Rocket - WordPress Caching Plugin

Die mit Sternchen (*) gekennzeichneten Links sind sogenannte Affiliate-Links. Wenn du auf so einen Affiliate-Link klickst und über diesen Link einkaufst, bekomme ich von dem betreffenden Online-Shop oder Anbieter eine Provision. Für dich verändert sich der Preis nicht.


Infogespräch