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


3 Schritte zu einer nachhaltigeren Webseite

3 Schritte, mit denen deine Webseite sofort nachhaltiger wird

Nachhaltiges Webdesign erscheint mitunter komplex und dass es eine Menge an Zeit und Wissen benötigt. Tatsache ist jedoch, dass deine Webseite mit nur 3 Handgriffen innerhalb von Minuten bereits ein ganzes Stück nachhaltiger wird. Mach am besten einen Vorher-Nachher-Vergleich deiner Webseitenwerte, damit du den Erfolg bereits sehen kannst. Nutze dafür den Google PageSpeed Test und messe deinen CO2-Fußabdruck deiner Webseite.

1. PlugIns

Gehe in den PlugIn-Bereich deiner Webseite. Sind dort PlugIns enthalten, die du nicht mehr benötigst? Brauchst du wirklich alle davon? Kannst du vielleicht zwei PlugIns durch ein kombiniertes PlugIn ersetzen? Prüfe, welche PlugIns du wirklich benötigst und auf welche PlugIns du verzichten kannst. Denn jedes PlugIn bringt Dateien in deine Webseite und erhöht somit deren Größe und Ladezeit. Halte deswegen die Anzahl an PlugIns so gering wie möglich. Außerdem minimierst du so das Risiko möglicher Angriffsflächen für Attacken, denn jedes PlugIn kann Fehler beinhalten und dich so angreifbar machen.

2. Bilder

Hat dir dein Google PageSpeed Test gezeigt, dass deine Bilder zu groß sind? Ist eines oder mehrere davon sogar mehrere MB groß, da sie unbearbeitet hochgeladen wurden? Überprüfe deine Bilder. Das geht übrigens auch im Media-Bereich deiner WordPress-Seite. Öffne das Bild und du siehst die Dateigröße. Ersetze alle Bilder, die mehrere MB oder größer 300 KB sind durch eine optimierte Variante. Nimm dir dafür das Originalbild und speichere es komprimiert (mit geringerer Qualität) und einer maximalen Breite von 1920 px. Lade anschließend das optimierte Bild erneut hoch und ersetze es auf deiner Webseite. Das PlugIn Enable Media Replace hilft dir dabei, einfach ein neues Bild hochzuladen. Der Rest erledigt das PlugIn.

Bilderoptimierung

Nachdem du deine Bilder initial optimiert hast, kannst du nun die finale Optimierung starten. Installiere dir dafür das PlugIn Shortpixel und erstelle dir einen Account*. ShortPixel optimiert deine Bilder in 3 Optimierungsstufen (du kannst die für dich passende Optimierung vorher durch Tests herausbekommen) und stellt gleichzeitig die Bilder auch in modernen Webformaten wie WebP zur Verfügung. Somit schlägst du gleich zwei Fliegen mit einer Klappe. Das tolle an ShortPixel ist auch, dass du jeden Monat 100 Credits kostenlos bekommst – das entspricht in etwa der Optimierung von 15-20 Bildern pro Monat. Du kannst also ohne weitere Kosten jeden Monat deine Webseite erweitern und die Bilder werden automatisch sofort nach dem Upload optimiert.

3. Optimierungs-PlugIn

Installiere ein Optimierungs-PlugIn. Ein Optimierungs-PlugIn hat mehrere Vorteile. Es bietet in der Regel Caching deiner Webseite an. Das hat den Vorteil, dass bei einem zweiten Webseitenbesuch des Besucher:in Dateien bereits im Browser vorgehalten werden und somit weniger Datentransfer stattfindet. Weiterhin bieten diese PlugIns das verzögerte Laden von Bildern, das sogenannte LazyLoad, an. Dies hat zur Folge, dass Bilder erst geladen werden, sobald sie ins Sichtfeld des Webseitenbesuchers kommen. Weiterhin finden oft Komprimierungen von Dateien statt, verzögertes Laden von Ressourcen und die Entfernung von ungenutztem Code. Je nach PlugIn können die Funktionen varieren.

Unser absolutes Lieblingsplugin für die Optimierung ist WP Rocket*. Tests haben gezeigt, dass es kein besseres PlugIn gibt – selbst die Kombination aus kostenlosen PlugIns kann kein so gutes Ergebnis erzielen, wie WP Rocket. Wenn du eine Lizenz gern vergünstigt haben möchtest, melde dich bei uns. Wir bieten die Lizenz für 29,- € / Jahr (exkl. Mwst) an. Unserer Meinung nach ist WP Rocket das Geld allemal wert und eine lohnende Investition. Für die Umwelt, für eine bessere Conversion deiner Webseite und glücklichere Webseitenbesucher:innen.

Falls du dennoch ein kostenloses PlugIn bevorzugst, können wir Autooptimize in Verbindung mit WP Fastest Cache empfehlen.

Mit diesen 3 Tipps kannst du deine Webseite bereits nachhaltiger gestalten. Lass uns gern deine Vorher-Nachher-Werte in den Kommentaren wissen.

Und, hast du dir bereits ein Timeslot für die Optimierung deiner Webseite in deinem Kalender geblockt?

Falls du Hilfe oder Unterstützung von uns benötigst, melde dich gern. Wir können die Optimierung entweder für dich durchführen oder wir nehmen dich dabei an die Hand, wie du die Verbesserung selbst in Angriff nehmen kannst.

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.


Artikel, die dich auch interessieren könnten


Webseite CO2 Ausstoß

Warum verursacht eine Webseite CO2?

Weltweit gibt es über 1.83 Milliarden Webseiten. Einige werden täglich 1000x besucht, andere liegen nur brach. Doch alle haben eines gemein – jede Webseite verursacht CO2. Im Schnitt ist dies 4g CO2 pro Webseitenaufruf. Doch woher kommt das überhaupt? Was sind die Quellen des CO2, das eine Webseite verursacht? Liegt es nur am Hosting, wie immer mal wieder behauptet wird? Dem gehen wir heute auf den Grund.

CO2 bei der Erstellung der Webseite

Alles beginnt mit der Erstellung einer Webseite. Bereits dort lassen sich die ersten Quellen für die CO2-Ausstoßung finden. Zunächst ist da der Entwickler:in selbst, der:die bei der Erstellung der Seite Strom benötigt. Eine umfangreiche nachhaltige Webentwicklung setzt bereits bei diesem Sachverhalt an – genau deswegen verwenden wir hier bei den it bienen Ökostrom und nachhaltige Software. Denn bereits hier gibt es eine große Stellschraube. Gerade „echte“ Stromanbieter wie Green Planet Energy (ehemals Greenpeace Energy) oder Naturstrom* sind da besonders empfehlenswert. Des Weiteren kann ein Augenmerk auf die verwendete Hardware gelegt werden. Ich persönlich kaufe gern gebraucht – mein liebster Ansprechpartner ist da Afb Shop*. Jedoch auch reBuy und andere Plattformen sind gute Quellen für gebrauchte Hardware. Diese spart Ressourcen und senkt somit den CO2-Verbrauch. Das gleiche gilt natürlich auch für alte Hardware, die als Second-Hand verkauft werden kann.

Kommunikation

Neben der Quellen direkt verursacht durch den:die Entwickler:in ist auch noch die Kommunikation mit dem:der Kund:in ein weiterer Faktor. Auch da kann bereits CO2 reduziert werden, in dem zum Beispiel Anhänge von Emails gelöscht werden oder auf ein Videotelefonat verzichtet wird. Zudem kannst du vermeiden, auf Emails mit einem einfachen „OK“ zu antworten. Es ist empfehlenswert nur zu Schreiben, wenn es auch nötig ist

Das Hosting

Das Hosting ist ein wichtiger Faktor beim Verursachen von CO2 von Webseiten. Als Nutzer:innen haben wir keinen Einfluss auf das Alter der Server, die verwendete Hardware und die Kühlung. Doch wir können beeinflussen, wo wir einen Hostingvertrag abschließen. Ein erster wichtiger Faktor bei der Wahl des richtigen Hosters, ist die Verwendung von Ökostrom. Achte darauf, dass dein Anbieter Ökostrom zum Betreiben der Server nutzt, am besten natürlich Ökostrom von „echten“ Ökostromanbietern. Achte des weiteren auf schnelle Ladezeiten und SSD-Festplatten. Eine gute Übersicht, über Ladezeiten kannst du hier finden. Halte dich von Anbietern wie Strato oder ionos fern. Diese sind leider bekannt für schlechte Erstreaktionszeiten. Dies ist die Zeit, die ein Server benötigt, um überhaupt auf eine Anfrage zu reagieren. Langsamere Verarbeitungszeiten heißt automatisch auch mehr Stromverbrauch und somit mehr CO2. Unser liebster Hostinganbieter ist webgo* – da diese durch schnelle Lade- und Reaktionszeiten überzeugen können und ihre Server mit Ökostrom betreiben. Empfehlenswerte Alternativen mit „echtem“ Ökostrom sind unter anderem Biohost, Greensta und Petricore.

CO2 durch Webseitenbesucher:innen

Sobald ein Besucher:in eine Webseite besucht, entsteht erneut CO2 aufgrund des Stromverbrauches. Dies hat zwei Gründe. Zum einen benötigt das Gerät des Nutzer:in Strom. Je nach verwendetem Gerät und Netz (ob mobil oder Wifi) kann dieser höher oder niedriger liegen. Gleichzeitig wird Strom durch die Übertragung der Daten verursacht. Auf der Nutzerseite durchs Wifi oder mobile Netz, zeitgleich aber auch auf der Serverseite durch die Übermittlung der Daten. Je länger nun eine Webseite lädt, um so größer ist auch der Stromverbrauch und ergo der CO2-Fußabdruck. Aus diesem Grund ist auch eine schlanke und nachhaltige Webseite so wichtig.

Es ist wichtig, dass alle drei großen Faktoren (Erstellung, Hosting, Webseite) im Zusammenhang betrachtet werden, um wirklich eine nachhaltige Webseite zu erstellen. Sich nur einen Bereich davon herauszunehmen, wie zum Beispiel das Hosting, ist zu einseitig gedacht. Aus diesem Grund versuchen nachhaltige Webentwickler:innen auch die Gesamtheit im Blick zu haben. Denn genau die, macht nachhaltige Webentwicklung wirklich aus.

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


nachhaltige webseite

5 Gründe für eine nachhaltige Webseite

Der Klimawandel ist in aller Munde. Das wir etwas ändern müssen an unserem Verhalten ist wohl (fast) allen klar. Nichtsdestotrotz stelle ich immer wieder fest, dass viele einen großen Beeinflusser des Klimawandels nicht auf dem Schirm haben: unsere digitale Welt. Egal ob Netflix, Instagram oder Co – alles verursacht einen digitalen CO2-Fußabdruck. Dazu zählt auch deine eigene Webseite. Doch welche Gründe sprechen konkret für nachhaltiges Webdesign und eine nachhaltige Webseite?

1. CO2-Fußabdruck

Fangen wir an bei dem offensichtlichen – dem CO2-Verbrauch. Das Internet verursacht jährlich so viel CO2 wie der Weltweite Flugverkehr. Und die Tendenz ist steigend. Im Schnitt verursacht dabei jede Webseite ca. 6.8g CO2 pro Aufruf. Hast du viele Webseitenbesucher kannst du mit einer nachhaltigen Webseite ganz einfach mehrere hundert sogar bis zu einige Tonnen an CO2 sparen. Stelle dir mal vor, das würde jede:r Webseitenbetreiber:in so machen…was wir da an CO2 einsparen könnten.

2. Schnellere Ladezeit

Ein wichtiger Aspekt bei der Erstellung einer nachhaltige Webseite ist die Optimierung hin zum Transfer einer geringen Datenmengen. Müssen wenige Daten übertragen werden, so reduziert sich automatisch auch die Ladezeit deiner Webseite. 

3. Weniger abspringende Besucher

Wer kennt es nicht: du stehst an der Bushaltestelle, wartest auf die U-Bahn oder einen Freund und willst schnell noch im Internet etwas suchen. Doch sie Seite lädt und lädt nicht, obwohl du besten Empfang hast. Sie ist einfach zu groß und somit passiert sage und schreibe nichts auf deinem Handy. Also gehst du zurück und öffnest eine andere Seite. So wie dir geht es auch vielen anderen Nutzer:innen. Studien zeigen, dass 53% der Webseitenbesucher eine Seite wieder verlassen, wenn diese länger als 3 Sekunden lädt, einige Studien sagen sogar es sind bis zu 75%. Die schnelle Ladezeit einer nachhaltigen Webseite führt somit automatisch dazu, dass weniger Besucher von deiner Seite abspringen. Jetzt muss nur noch dein Inhalt stimmen.

4. Besseres Google Ranking

Das Ziel eines jeden Webseitenbetreiber:in ist es wohl bei Google an erster Stelle zu stehen. Eine nachhaltige Webseite kann dir dabei helfen. Denn ein wichtiger Rankingfactor ist die Ladezeit deiner Webseite. Zudem bewertet Google die Verweildauer deiner Nutzer:innen. Zu nachhaltigem Webdesign gehört ebenso eine klare und einfache Menüführung. Und wenn deine Kund:innen auf Anhieb finden, was sie suchen, sind sie motivierter, länger auf deiner Seite zu bleiben. Übrigens gilt das auch für andere Suchmaschinen wie Bing – auch da ist die Ladezeit ein entscheidender Rankingfaktor.

5. Bessere Conversion

Verschiedene Studien zeigen, wie wichtig eine schnell ladende Webseite für die Conversion Rate ist. So kommen in 2,4 Sekunden geladene mobile Websites auf eine durchschnittliche Conversion-Rate von 1,9%. Lädt die Webseite lediglich 1 Sekunde langsamer, sinkt die Conversion Eate bereits um 0.4%. Das mag im ersten Moment nicht viel klingen, doch diese wenige Prozent können Umsatzeinbußen von mehreren 10-Tausend Euro pro Monat mit sich ziehen. Noch schlimmer wird es, wenn die Webseite noch langsamer lädt: bei einer Ladezeit von 4,2 Sekunden unterschreitet die Conversion Rate die 1%-Marke.

Wie die 5 Gründe zeigen, gehen viele Aspekte und Vorteile einer nachhaltigen Webseite Hand in Hand. Und neben dem guten Gewissen, dass man mit nachhaltigem Webdesign etwas Sinnvolles für die Umwelt und unser aller Leben getan hat, lassen sich die positiven Aspekte auch deutlich an den Besucherzahlen und Umsätzen spüren.

Hier findest du übrigens Tipps für eine schnelle Webseite.


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.