Web­site Lade­zeit verbessern

Wir lie­ben schnelle Web­sites. Kennst du das, wenn du unter­wegs bist und schnell etwas nach­se­hen willst? Wenn du nur ein biss­chen so wie ich bist, dann ver­lässt du eine Web­site sofort, wenn sie nicht schnell genug lädt. Das kann oft am Netz lie­gen, noch öfter an der Per­for­mance der Web­site. Damit die Absprung­rate also nicht in die Höhe schnellt, ist es sinn­voll die Lade­zeit der eige­nen Web­site zu über­prü­fen und ver­bes­sern. Und klei­ner Tipp: Auch Google fin­det schnelle Web­sites sehr schön.

Wie schnell ist deine Web­site wirklich?

Du willst deine Web­site Lade­zeit ver­bes­sern? Wie gut, dass es hier schon­mal Tools gibt, die wir direkt nut­zen kön­nen. Um zu prü­fen, wie schnell deine Web­site lädt und wel­che Feh­ler sie aus­spielt, kannst du ver­schie­dene Tools im Brow­ser ver­wen­den. Diese zei­gen dir auch, mit wel­chen Ein­stel­lun­gen die Lade­zeit ver­bes­sert wer­den kann. Meine Liebs­ten sind diese:

page­s­peed
Was ich an die­sem Tool mag, ist dass es sowohl die Lade­zeit auf dem Desk­top, als auch auf dem Handy anzeigt. Das tool ver­gibt dabei für beide Geräte bis zu 100 Punkte. Ab 90 Punk­ten liegst du im grü­nen Bereich.

Page­s­peed zeigt dir an, wie lange ver­schie­dene Inhalte laden müs­sen. Zum Bei­spiel liegt mein “First Con­tent­ful Paint”, als ich den Bei­trag schreibe, bei 1,5 s. Mein Speed Index sieht mit 5,3 s nicht so gut aus. Der Rest ist im grü­nen Bereich.

GTMetrics
Auch GTmetrics berei­tet viele schöne Kenn­zah­len auf, die wich­tig für die Ana­lyse sind. Neben der Per­for­mance bewer­tet die­ses Tool auch die Struk­tur. Neben den Kenn­zah­len hast du hier auch die Mög­lich­keit, zwei Sei­ten mit­ein­an­der zu ver­glei­chen. Das ist sinn­voll, wenn du Vari­an­ten von Sei­ten erstellst und her­aus­fin­den möch­test, wie sich die Per­for­mance unterscheidet.

Ping­dom
Das letzte Tool, das ich regel­mä­ßig ver­wende, ist der Ping­dom Web­site Speed Test. Natür­lich kann ich auch hier viele Kenn­zah­len aus­le­sen und mir ver­schie­dene Tipps geben lassen.

Teste am Bes­ten alle Tools und ent­scheide dich dann für das, mit dem du am bes­ten zurecht kommst. Natür­lich sind alle drei kostenfrei.

Neben den Tools ist es auch sinn­voll, deine Web­site selbst­stän­dig auf ver­schie­de­nen Gerä­ten und in ver­schie­de­nen Netz­wer­ken zu tes­ten. Wie schnell lädt deine Web­site im Han­dy­netz? Wie schnell wird sie am PC ange­zeigt? Lasse nicht nur Tools arbei­ten, son­dern nutze auch deine eigene Einschätzung.

Web­site Lade­zeit ver­bes­sern mit die­sen 3 Tipps

Alle Web­sites sind indi­vi­du­ell und die non­plus­ul­tra-fits-ever­ything Lösung gibts hier eher nicht. Die letz­ten paar Punkte nach oben sind ein­fach Fein­jus­tie­rung, die man nicht pau­schal als Anlei­tung bereit­stel­len kann. Jedoch gibt es grund­le­gende Tipps und Ein­stel­lun­gen, die deine Web­site von Grund auf schnel­ler machen können.

Bil­der ganz­heit­lich optimieren

Mit Bil­dern im Web ist das so eine Sache. Wenn man sich wenig Gedan­ken dar­über macht, kann es schnell pas­sie­ren, dass man eine 2,5 mb Datei hoch­lädt. Und das diese Bild­grö­ßen die Lade­zeit dras­tisch nach oben schnel­len las­sen, ist unaus­weich­lich. Des­halb soll­test du deine Bil­der so gut wie mög­lich und so klein wie mög­lich expor­tie­ren. Ein guter Richt­wert bei nor­ma­len Bil­dern auf der Web­site (keine gro­ßen Hea­der-Eye-Cat­cher) sind ca. 150 kb.

Wie stellst du das am bes­ten an? Als Ers­tes siehst du dir an, wel­che Maße die Stelle hat, in die du dein Bild ein­fü­gen möch­test. Hat sie 300x600 px? Dann schneide dein Bild direkt auf diese Größe zu. Möch­test du für Retina Dis­plays opti­mie­ren: Dann expor­tiere die dop­pelte Größe. Wenn du kei­nen trans­pa­ren­ten Hin­ter­grund benö­tigst, dann spei­chere dein Bild außer­dem als JPG. Für den Zuschnitt kannst du zum Bei­spiel Canva verwenden.

In dei­ner Datei sind jetzt ver­mut­lich noch einige Daten ent­hal­ten, die etwas Bal­last ver­ur­sa­chen. Nutze tinypng, um die Datei­größe noch­mal zu opti­mie­ren. Damit sparst du dir noch­mal einige Kilobyte.

Ich fasse noch­mal zusammen:

  1. Maße aus­le­gen
  2. Bild in die­ser Größe anlegen
  3. Als JPG exportieren
  4. In tiny PNG laden

Mitt­ler­weile gibt es im Web beson­dere Bild­for­mate, die Datei­grö­ßen noch­mal ver­rin­gern. In Wor­d­Press kannst du ver­schie­dene Plugins ver­wen­den, die deine Bil­der im WebP oder auch schon im Avif For­mat aus­ge­ben. Ich nutze aktu­ell Ima­gnify. Hier gibt es einen kos­ten­lo­sen Plan, der für einige Bil­der ausreicht.

Code der Web­site optimieren

Schon beim Auf­bau einer Web­site lässt sich im Bezug auf die Schnel­lig­keit eini­ges tun. Denn schon hier kannst du dar­auf ach­ten, dass die Lade­zeit gering bleibt. Ani­ma­tio­nen sind zum Bei­spiel cool, kön­nen deine Web­site jedoch auch ver­lang­sa­men. Hier ist also der spar­same Ein­satz gefragt. Und das hat am Ende nicht nur einen Nut­zen für die Schnel­lig­keit, son­dern sorgt auch dafür, dass zum Laden dei­ner Seite weni­ger Ener­gie benö­tigt wird. Denn auch deine Web­site liegt auf irgend­ei­ner Ser­ver­farm und nutzt dort wert­volle Energie.

Mit Plugins kannst du den Code von Con­tent-Manage­ment Sys­teme wie Wor­d­Press ver­klei­nern. The­mes, Plugins und alle Dateien, die in einem CMS ent­hal­ten sind, kön­nen wahn­sin­nig viel Spei­cher­platz benö­ti­gen. Des­halb gibts auch hier Tools, die dei­nen Code in der Aus­gabe schlan­ker und schnel­ler machen. Hier sollte man nicht ein­fach wild drauf­los instal­lie­ren, son­dern alle Ein­stel­lun­gen nach und nach beob­ach­ten. Man­che Ein­stel­lun­gen kön­nen die Web­site plötz­lich ganz anders aus­se­hen las­sen. Hier ist also Vor­sicht gefragt.

Meine Lieb­lings­plugins für Wor­d­Press sind diese:

  1. Aut­op­ti­mize
  2. WP Fas­test Cache
  3. Smush

Hier gilt wie gesagt tes­ten und nicht blind vertrauen.

Ser­ver verbessern

Wo wir gerade von Ser­vern gere­det haben. Natür­lich nimmt auch dein Ser­ver maß­geb­lich Ein­fluss auf die Schnel­lig­keit dei­ner Web­site. Des­halb soll­test du von Anfang an dar­auf ach­ten, dass dein zuge­teil­ter Ser­ver leis­tungs­stark arbei­ten kann. Ent­scheide dich für einen leis­tungs­star­ken Anbie­ter, gerne auch mit grü­nem Strom. Wenn du bereits einen Hos­ter hast, siehe nach, ob du die Per­for­mance anpas­sen oder dein Paket upgraden kannst. Ansons­ten, ent­scheide dich zum Bei­spiel für Raid­bo­xes oder Mittwald. 

Mach deine Web­site schnell

Und jetzt du: Mit die­sen drei Tipps kannst du die Web­site Lade­zeit ver­bes­sern. Diese Tipps sind für die grund­le­gende Geschwin­dig­keit dei­ner Web­site aus­schlag­ge­bend. Nimm dir so bald wie mög­lich etwas Zeit und prüfe zuerst die wich­tigs­ten Sei­ten dei­ner Web­site. Da ist Luft nach oben? Dann gehts los. Setze die drei Tipps um und staune dar­über, wie sich deine Web­site Geschwin­dig­keit verändert.

Kunden gewinnen als Selbstständiger

Ich liebe Web­sites, Design und Technik

und mit die­sem Blog ist mein Anlie­gen, meine Begeis­te­rung dafür mit dir zu tei­len. Nimm wert­vol­les Wis­sen für dich und dein Busi­ness mit und starte damit durch. Noch mehr Liebe? Dann melde dich zu mei­nem News­let­ter an.


©Junghans Mediengestaltung 2022