Ladezeit Webseite

Wie messe ich die Ladezeit meiner Webseite?

Eine schnelle Webseite mit geringer Ladezeit 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 Ladezeit 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.

Google Ladezeit messen

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 Messung it bienen web solutions Ladezeit messen

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 (Wasserfalldiagramm) 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

Mit Hilfe der Ergebnisse der Ladezeitentests kannst du nun gezielt Maßnahmen vornehmen, wie du die Ladezeit und die Nachhaltigkeit deiner Webseite verbessern kannst. Gerade das Thema Caching und Bilder / Videos werden dabei sicherlich eine große Rolle spielen.

Beiträge, die dich interessieren könnten

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.


verzweiflung-pur-banner

Wie du ShortPixel richtig anwendest

Immer wieder zeigen Webseitentest, dass die Hauptquelle von großen und langsamen Webseiten Bilder sind. Es werden zum Teil Bilder direkt vom Handy auf die Webseite geladen, ohne dass diese vorher optimiert werden. Und zack, ist deine Webseite plötzlich 10 MB groß und du bist dir überhaupt nicht darüber im Klaren. Fühlst du dich eventuell ertappt? Falls du dir unsicher bist, wie groß deine Webseite ist, analysiere diese bei DigitalBeacon – Füge deine URL ein und nach wenigen Minuten siehst du die Größe deiner Seite, deinen digitalen CO2-Fußabdruck und die Ursprünge deiner Webseitengröße.

ShortPixel

Tatsächlich lässt sich dieses Problem super easy in nur wenigen Minuten beseitigen. Ein dafür sehr nützliches Tool ist ShortPixel – meines Erachtens nach ist es eines der mächtigsten Tools auf dem Markt und bei einer Webseitenoptimierung unabdingbar. Aus diesem Grund erklären wir dir in diesem Artikel, wie du deine Bilder schnell auf deiner Webseite mit ShortPixel optimierst. Im Übrigen stellt dir ShortPixel jeden Monat 100 Credits kostenlos zur Verfügung – das entspricht der Optimierung von ca. 15-20 Bildern.

Bilderoptimierung mit ShortPixel

1. PlugIn installieren

Gehe dafür auf den PlugIn-Bereich deiner Seite und Suche nach dem PlugIn ShortPixel.

2. Account erstellen

Erstelle* dir als erstes einen ShortPixel Account. Der Vorteil der Verwendung des Links hier ist, dass du 100 Credits kostenlos geschenkt bekommst. Somit kannst du noch einfacher mit der Optimierung deiner Bilder loslegen.

3. Stelle die Optimierungsmethode ein

Gehe nun links auf Einstellungen, dort findest du dein ShortPixel PlugIn. Stelle nun als erstes die Optimierungsmethode für die Bilder ein. Du kannst zwischen 3 Optionen wählen: Lossy, Glossy und Loseless. Lossy ist dabei die kleinste und verlustbehaftetste Komprimierung. Nichtsdestotrotz ist sie für die meisten Fälle ausreichend und deswegen empfohlen. Glossy steht für glänzende Komprimierung, das heißt, es werden Bilder erzeugt, die auf Pixelebene nahezu identisch zu den Originalen sind. Das ist gerade für Fotografen geeignet. Als dritte Option gibt es Loseloss. Bei dieser Einstellung werden die Bilder pixelgleich zum Original erstellt. Das heißt automatisch aber auch, dass die Dateien größer bleiben. Wenn du dir unsicher bist, welche Komprimierungsmethode für dich die geeignetste ist, mache am besten vorher ein paar Tests und schaue, welches Verhältnis an Einsparung und Qualität für dich am besten erscheint. Ich nutze gern Lossy oder Glossy, abhängig vom Anwendungsfall und der vorherigen Optimierung der Bilder.

ShortPixel in WordPress finden

4. Sammelverarbeitung durchführen

Gehe nun auf Medien und starte die Sammelverarbeitung. Setze dort unbedingt auch den Haken, dass WebP-Versionen der Bilder erstellt werden sollen.

WebP ist ein Bildformat, dass speziell für das Internet entwickelt wurde, um Webseiten schlanker und schneller zu gestalten. Mittlerweile wird es von den meisten Browsern unterstützt, so dass eine Auslieferung dieses Formats absolut empfehlenswert ist.

Die Optimierung der Bilder wird nun abhängig von der Anzahl einige Zeit dauern. Du kannst das einfach laufen lassen und parallel dazu weiterarbeiten.

Erzeuge WebP Bilder mit ShortPixel

5. WebP Format ausliefern lassen

Da bei der Sammelverarbeitung auch die WebP-Version der Bilder erstellt wurde, kann diese nun im nächsten Schritt eingebunden werden. Abhängig von deinen verwendeten PlugIns gibt es dafür mehrere Möglichkeiten. Verwendest du dein PlugIn wie WP Rocket*, so kannst du dort einstellen, dass im Frontend die WebP Version der Bilder ausgeliefert wird.

Für den Fall, dass du kein solches PlugIn verwendest oder dein Caching-/OptimierungsplugIn diese Funktion nicht anbietet, kann dies auch ShortPixel für dich übernehmen. Gehe dafür unter Einstellungen auf dein ShortPixel-PlugIn und dort auf den Unterpunkt „Erweitert“. Setze dort den Haken bei der Auslieferung der Bilder der nächsten Generation: Deliver the next generation versions of the images in the front-end. Wähle nun eine der zwei Einbindungsmethoden. Wir nutzen gern die Methode über die htaccess-Datei. Achte aber darauf, ob diese in deinem Fall unterstützt wird. ShortPixel informiert dich darüber.

Liefere NextGen Bilder aus

6. Test

Überprüfe nun deine Webseite, ob die gelieferte Bilderqualität ausreichend ist. Checke deine Seite auch beim GooglePage Test, um zu sehen, welche Ergebnisse deine Seite nun erzielt. Dies funktioniert natürlich am besten, wenn du einen Vergleichswert der Seite hast, von vor der Bilderoptimierung.

Weitere Hinweise für die Verwendung von ShortPixel

Das coole an ShortPixel ist, dass es einmal eingestellt von nun an alle deine Bilder optimiert. Selbst wenn du neue Bilder auf deiner Webseite hinzufügst, werden diese automatisch verarbeitet. Da du pro Monat 100 Credits kostenlos zur Verfügung gestellt bekommst, könnte das im besten Fall bereits deinen Bedarf decken.

Die Optimierten Bilder werden als Sicherheitskopie gespeichert. So kannst du die durchgeführte Sammelverarbeitung auch wieder zurücksetzen, falls du unzufrieden bist. Achtung: Eine weitere Verarbeitung benötigt dann neue Credits.

Du kannst nach der Optimierung für einzelne Bilder auch noch die Komprimierung ändern. Gehe dazu auf das entsprechende Bild im Medien-Manager. Scrolle dort zur ShortPixel-Information. Klickst du dort nun auf das Untermenü, kannst du eine neue Komprimierung mit einer anderen Methode anstoßen.

Wir hier bei den it bienen lieben dieses PlugIn, da es für alle Anwendungsfälle die passenden Einstellmöglichkeiten gibt. Zudem sind die Credits erschwinglich und die Qualität überzeugend. ShortPixel ist eine absolute Empfehlung von uns und für uns, bei Webseitenoptimierung unabdingbar.

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.


Beiträge, die dich interessieren könnten


Schnelle Webseite erzielen

Tipps für eine schnelle Webseite – Übersicht

Zunächst ist es wichtig, die Ladezeit deiner Webseite zu ermitteln. Falls du dies noch nicht gemacht hast, schaue in den Artikel Wie messe ich die Ladezeit meiner Webseite?

Schritte zur Verbesserung der Webseitengeschwindigkeit

Für eine schnelle Webseite gibt es ein paar einfache Tipps. Die wichtigsten von diesen, sollen hier aufgezeigt werden. Für mehr Details gehe direkt in die Kategorien, wo du weiterführende Artikel finden wirst.

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

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.

der richtige Hostingprovider macht einen Unterschied

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


Beiträge, die dich interessieren könnten

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.