In diesem Beitrag geht es um ganz konkrete Tipps, was du tun kannst um die Ladezeit deiner Website zu optimieren.

Du lernst alles über die Priorität von Optimierungs-Massnahmen, was du vermeiden solltest und was das wichtigste ist. Ganz einfach erklärt:

Du weisst nicht, ob du ein Ladezeit-Problem hast? Im ersten Teil des Pagespeed-Beitrags kannst du erfahren, was bei der Ladezeit der Website eine Rolle spielt, wie du die Ladezeit deiner Website prüfen kannst und welche Tools dir dabei helfen.

Was du auf gar keinen Fall tun solltest, weil es deine Website langsam macht

Hier kommen ein paar einfache Tipps, was du dringend vermeiden solltest, um deine Seite nicht zur Schnecke zu machen:

• Du willst unbedingt Geld sparen und verwendest einen Billighoster (das sind Tarife von 0€ bis 5€ im Monat). Ich kann dir hier vorher sagen: das wird zu keiner guten Ladezeit führen. Gutes Hosting beginnt bei 8€ im Monat – mehr im nächsten Abschnitt.
• Du lädst riesige Bilder auf die Website. Am besten direkt von der Kamera, so um die 3.000 bis 5.000 Pixel breit und jedes Bild 1-10MB groß. Das ist ehrlich gesagt absoluter Irrsinn in punkto Ladezeit, und dennoch der aktuell häufigste Fehler. Weil wir alle riesige Festplatten und Handy-Speicher haben, sind wir nicht mehr gewohnt, dass wir am Speicherplatz der Bilder sparen müssen. Unbedingt.
• Viele Animationen (und damit Skripte), todschickes Design, Effekte überall. Du stehst auf Design und alles soll top aussehen. Deine Seite quillt über mit bewegten Elementen, Farbeffekten und viel Tralala. Leider in Punkto Speed ein No-Go. Wenn du unbedingt eine solche Seite möchtest, dann nur auf den Seiten die nicht SEO-relevant sind (also nicht bei Google unbedingt gefunden werde müssen).
• Du lädst 15+ Plugins (kleine Zusatzprogramme z. B. bei WordPress) auf deine Seite, weil das so einfach geht und es so viele tolle Erweiterungen gibt. Ja, es ist einfach und die Flut an Möglichkeiten reißt manchen mit sich. Immer wieder habe ich Installationen mit 30 oder 40 aktiven Plugins gesehen. Ein Wahnsinn. Bitte überleg dir genau, was du brauchst, und was nicht. Jedes Plugin stopft ein Stück mehr Programmierung auf deine Seite. Das ist nicht nur langsam, damit beschwörst du auch Inkompatibilität, Update-Probleme und Sicherheitslücken herauf. Verwende immer nur solche mit großer Community (= vielen Sternen, laufend Updates) und lösche alle Plugins, die du nicht mehr brauchst.
• Du bindest ganz viel externes Zeug ein, diverse Videos, Werbung, Karten, Social Media Sharing… all das kostet Warte- und damit Ladezeit.

Maßnahmen für schnelle Website, die du sofort ergreifen kannst

Jetzt kommen wir zu den konkreten Schritten, die du der Reihe nach – und zwar in dieser Reihenfolge – unternehmen solltest:

Gutes Hosting

Wenn du wirklich eine schnelle Seite willst, kommst du an einem guten Hoster nicht vorbei. Ich selbst bevorzuge All-Inkl., den zweitgünstigsten Tarif für 7,95€. Der ist ok schnell, und noch bezahlbar. Es gibt aber auch wirklich flotte Hoster, auch welche, die auf WordPress optimiert sind (falls du das verwendest), und die das Caching (s. unten) sowie Sicherungskopien auch gleich noch für dich übernehmen. Die kosten ab 15€ im Monat. Ein solcher ist z.B. Raidboxes aus Deutschland: https://raidboxes.de/

Kleine Bilder

Damit sind wir beim allerwichtigsten Optimierungsfaktor überhaupt. Jedes – und ich meine JEDES – Bild, das du auf deine Seite lädst, solltest du VORHER klein machen. Das ist eine explizite Forderung von Googles Tool PageSpeedInsights („Bilder richtig dimensionieren“). Das bedeutet einerseits erstmal kleiner skalieren. Auf die passende Größe zuschneiden. Hast du ein seitenbreites Hintergrundbild, muss es größer sein. Aber andere Bilder können oft kleiner sein.

Je kleiner du ein Bild skalierst, desto weniger Speicherplatz – und damit hinterher Ladezeit – braucht es auch.

Hier ein paar Angaben, an denen du dich orientieren kannst:

Seitenbreite Hintergrundbilder (oder Bannerbilder): auf max. 2000 Pixel Breite skalieren, evtl. reichen dir auch 1.200 Pixel. Testen, ob sie verpixelt aussehen, wenn du sie eingesetzt hast. Gib sie in reduzierter Qualität (z.B. jpeg mit 70% bis hin zu nur noch 30%) aus. Hier ist es je Bild unterschiedlich, wann es pixelig wird – abhängig von Ausgangsqualität und Aufnahme. Am Ende sollte dein Breitbild maximal 150KB haben, wann immer es geht noch weniger!

Andere Bilder: so klein skalieren, wie es geht. Sie reichen oft mit 600 Pixeln Breite, oder bei kleinen Bildchen für Testimonials genügen durchaus 150×150 Pixel. Das ergibt nach Kompression (70% jpeg oder weniger) Größen von gerade mal 10-50KB.

Denke immer daran: sobald du mehrere Bilder auf einer Seite hast, schießt die Ladezeit ganz schnell nach oben! Bildbearbeitung und Kompression gehört zum Webdesign zwangsläufig inzwischen dazu. Hier findest du ein Tutorial von mir zur Bildbearbeitung, falls du nicht weißt, wie das geht: https://anja-teuner.de/bildbearbeitung-mit-gimp-fuer-anfaenger-wie-du-gut-aussiehst/

Verwende moderne Bildformate wie WebP. Das Format, von Google selbst entwickelt, hat sich inzwischen weiter entwickelt und ist auch in der Bildbearbeitung angekommen. Die meisten neueren Browser unterstützen es inzwischen.

Wie du das neue Bildformat WebP anwendest, kannst du hier nachlesen:
Inzwischen beherrschen auch gratis Bildbearbeitungs-Programme dieses Ausgabeformat:https://www.gimp.org/ (in der neuen Version ist webP als Exportformat schon dabei).

Zusätzlich oder alternativ kannst du deine Bilder nach Bearbeitung (immer zuerst skalieren!) auch durch Online-Kompressionstools schicken: https://www.iloveimg.com/de/bild-komprimieren

Nicht so viel Design, Effekte und Animationen

Halte deine Artikel und deinen SEO-Content inhaltlich gut und einfach im Design. Und – das habe ich oben schon gesagt – nur die nötigen Plugins/Funktionserweiterungen deines Websystems verwenden.

Tipp für WordPress-Nutzer: Nutze den ganz normalen Standard-WordPress-Editor für Blog-Artikel. Keine PageBuilder (wie Elementor, BeaverBuilder, etc.). Bei manchen Anbietern wie DIVI geht das leider nicht, denn die zwingen dich, für wirklich alles den DIVI-Builder nehmen zu müssen (doch leider gehört DIVI nicht zu den super schnellen, daher hier keine Empfehlung von mir).

Keine Slider

Das sind diese Design-Elemente, wo Bilder nacheinander erscheinen oder herein fahren. Besonders Slider sind bei Website-Besitzern total beliebt und häufig für die eigene Seite gewollt, jeder denkt: „Die sind aber schick“. Mag sein – aber

Mehr als 95% der Website-Besucher schauen KEINE Slider an.

Niemand wartet, bis der durchblättert, kaum jemand nutzt ihn aktiv. Deine Inhalte sind völlig umsonst vorhanden, aber es müssen jede Menge große Bilder trotzdem geladen werden. Ergo unnütz in jeder Hinsicht und inzwischen viel (negativ) diskutiert im Netz.

Verzichte auf die Einbettung der interaktiven GoogleMap

Auf deiner Kontaktseite ist das kein Problem, aber auf gar keinen Fall unten im Footer (der auf jeder Seite geladen wird…) oder dergleichen.

Die Wartezeiten auf den GoogleMaps Server sind lang. Und somit stört der eine Google Dienst (Maps) den anderen (PageSpeed Insights).

Alternativ kannst du dir auch einen Screenshot von der OpenStreetMap machen und auf deine Seite legen (Achtung: Screenshots von GoogleMaps sind urheberrechtlich nicht erlaubt!): https://www.openstreetmap.de/

Wo ich gerade dabei bin: gleiches gilt für YouTube-Videos, auch ein Google-Dienst. Wird statt eines Vorschaubildes das Video vor-geladen, dauert es leider lange. Mit einer „LazyLoad“ Funktion kann man hier abhelfen, s. unten.

Nutze keine ShareCounts (Anzeigen, wie oft deine Beiträge schon geteilt wurden), und binde so wenig externe Dienste wie möglich ein (Like-Buttons von Facebook et. al. sind übrigens datenschutzrechtlich ohnehin nicht mehr erlaubt, abgesehen davon langsam).

Prüfe den Speed deiner Newsletter-Anbindung (mit der Pingdom-Liste, s. Teil 1).

Manche Plugins wie ThriveLeads für WordPress (https://thrivethemes.com/leads/) sind hier leistungsstärker und schneller. Prüfe ebenso, ob Statistik-Tools und Sicherheitsplugins wie Firewalls (z.B. WordFence im Falle von WordPress) langsam sind.

Wie gesagt sind auch eingebettete YouTube-Videos langsam. Notfalls lass das weg.

Teste zuerst deine Seite, ob Plugins/Funktionen langsam sind. Wenn du auf diese verzichten kannst, schalte sie ab und lösche sie am besten ganz. Zu guter Letzt installierst du dir Caching-Plugins, LazyLoad und Code-Optimizer für bestehende Skripte, dazu komme ich jetzt.

Warum Caching deine letzte und nicht die erste Maßnahme sein sollte (und was das eigentlich ist)

Wenn du andere Artikel zum Thema Speed-Optimierung liest, dann wird Caching als eine Art Generalmaßnahme empfohlen.

Verstehe mich richtig: du solltest diesen Mechanismus nutzen, aber zuerst musst du dich um die Dinge oben kümmern! Caching kommt zuletzt, nicht zuerst.

Caching (sprich „Käsching“) bedeutet so viel wie „Zwischenspeichern“. Stell es dir so vor: Dein Content-Management-System (WordPress, Contao, Wix, etc.) hat eine angebundene Datenbank, wo alle Texte, Bilder und Inhalte gespeichert sind.

Und jedes Mal, wenn du eine Seite aufrufst, muss es erst los laufen, alle Inhalte aus der Datenbank abholen, und deine Seite komplett zusammen bauen aus den Einzelteilen. Wie in einem großen Lager, wo erstmal der Gabelstapler diverse Kisten einsammeln muss.

Caching vermeidet diesen Umweg. Hier wird quasi abgespeichert, was alles auf deine Seite muss, ohne, dass nochmal jemand ins „Lager“ (in die Datenbank, etc.) muss.

Das ist super, denn es geht viel schneller! Aber: große Kisten bleiben große Kisten, sprich: wenn deine Bilder groß sind, müssen sie trotzdem durch die Leitung hoppeln.

Einfach nur Caching anschalten ist kein Allheilmittel, Bilder reduzieren bleibt immer Maßnahme No. 1. Und dann wirst du das Caching-Plugin noch ein wenig konfigurieren müssen.

Folgende Probleme sind möglich: Da das Caching alles fix speichert und anzeigt, werden ggf. neue Blog-Artikel nicht auf deiner Übersichtsseite eingeblendet.

Nach Erstellung neuer Blog-Artikel oder anderer Inhalte, die irgendwo eingeblendet werden sollen, lösche daher immer den Cache (alle Plugins/Cach-Tools bieten dafür irgendwo eine Schaltfläche an).

Außerdem willst du die Speicherzeit für den Cache daher ggf. nur auf 24h oder 72h einstellen. Je nachdem, wie oft du etwas änderst.

Manchmal kommt sich Caching auch mit JavaScripts in die Quere – ganz konkret kann ich dir nur empfehlen, unbedingt deine Newsletter-Anbindungen (ggf. mit Plugin realisiert) alle erneut zu testen, nachdem du ein Caching angeschaltet hast.

Zum Schluss sei angemerkt: Caching ist nicht ganz trivial, und greift durchaus in dein System ein. Wenn du dich damit nicht herum schlagen willst, kannst du wie oben erwähnt einen etwas teureren Profi-Hoster nehmen, der das schon für dich von selbst erledigt, ganz ohne Plugins.

Elemente erst bei Bedarf laden (LazyLoad) und Skripte ans Ende schieben – kurz erklärt

Was Caching ist, habe ich gerade schon erklärt. Für viele Bilder und JavaSkripte gibt es noch einen anderen Mechanismus: und zwar lädt man diese einfach erst zuletzt.

Keine Sorge – du musst nichts selbst umprogrammieren. Das wurde alles schon von anderen gemacht. Im nächsten Abschnitt komme ich zu den konkreten Tools für dich.

Lass mich aber noch kurz einen 2. Mechanismus erklären:

Deine Besucher kommen also auf die Website, und die einfachen Dinge, z.B. dein Text, wird sofort geladen, bzw. die erste Ansicht dargestellt.

Und Bilder weiter unten sowie Skripte für Interaktives etc. werden einfach erst geladen, wenn die ersten Inhalte schon da sind. Oder erst dann, wenn der Besucher dorthin scrollt.

Bei Bildern spricht man hier von „LazyLoad“ (faules oder auch verzögertes Laden, eben erst dann, wenn man sie erreicht und nicht gleich am Anfang). PageSpeed Insights nennt es „nicht sichtbare Bilder aufschieben“.

Für die länger laufenden Skripte, die die Darstellung anderer Elemente blockieren, kann man der Website befehlen, diese nach allem anderen erst auszuführen.Dies nennt man „defer JavaScript“. Bzw. PageSpeed Insights sagt dazu „Ressourcen beseitigen, die das Rendering blockieren“.

Entweder also man löscht die zugehörigen Plugins oder Programme, oder man lässt sie zuletzt laufen.

Und das machen wir nicht selbst, sondern dafür gibt es fertige und ziemlich gute Plugins oder Funktionserweiterungen.

Welche Tools für Ladezeit-Optimierung empfehlenswert sind

(anzuwenden z. T. auch ohne Programmierkenntnisse)

Speed-Tools für WordPress-Webseiten

Alle nachfolgenden Plugins findest du direkt im Dashboard von WordPress unter Plugins à Installieren und kannst sie dort mit wenigen Klicks laden.

Hier sind konkret 2 gratis Caching-Plugins, die du ausprobieren kannst (nimm nur EINES davon):

https://de.wordpress.org/plugins/wp-fastest-cache/

https://wordpress.org/plugins/hummingbird-performance/

Hier sind 2 weitere Plugins, die dir LazyLoad sowie automatisierte Bild-Komprimierung ermöglichen und deinen Code umstellen, damit er kleiner wird und Skripte ans Ende kommen (diese kannst du ggf. zusätzlich zu obigen Plugins verwenden, aber teste deine Seite und all ihre Funktionen nach Installation gründlich, notfalls schalte die Plugins wieder ab):

https://wordpress.org/plugins/wp-smushit/

https://wordpress.org/plugins/autoptimize/

SPEED-Tools für Joomla-Webseiten

Google einfach mal nach „joomla caching und lazy load“. Du bekommst viele Hinweise angezeigt.

Z.B. gibt es die Joomla-Erweiterung „Speed Cache“, die auch ein „Lazy loading“ bereit hält.

SPEED-Tools für WIX-Webseiten

Hier findest du die Support-Seiten von WIS, die dir genaue Anweisungen für das Aktivieren von Caching geben:
https://support.wix.com/de/article/caching-von-seiten-auf-deiner-website

…und hier gibt es Infos zur Geschwindigkeit bei Wix:
https://support.wix.com/de/article/leistung-und-ladezeit-der-live-website

Sprich auch mit dem Wix-Support, wenn du Fragen hast. Dafür sind sie da.

SPEED-Tools für alle anderen Website-Systeme

Google am besten nach dem Namen deines Web-Systems zusammen mit den Begriffen caching und lazy load. Da wirst du sicher fündig.

Miss die Ladezeit deiner Website Seite nach der Optimierung

Zu guter Letzt: wenn du deine Bilder klein gemacht hast, unnötigen und langsamen Inhalt beseitigt und eine Caching-Erweiterung ausprobiert hast, begebe dich noch einmal auf eine Speedtest-Seite und auf die Google PageSpeed Insights Website. Gib die Links zu deiner Website nochmal ein und schau, wo du jetzt stehst. (Du weisst nicht wie, in diesem Artikel findest du eine einfache Anleitung)

FAZIT – WEBSITE LADEZEIT OPTIMIEREN

Als wichtigste Maßnahme sei dir empfohlen, alle Bilder auf die sinnvoll benötigte Größe herunter zu skalieren und danach zu komprimieren (entweder als .jpg einer niedrigeren Qualitätsstufe, als webP oder mit dem Webtool wie oben verlinkt).

Hier nochmal mein gimp-Tutorial dazu (GIMP ist ein gratis Bildbearbeitungs-Tool): https://anja-teuner.de/bildbearbeitung-mit-gimp-fuer-anfaenger-wie-du-gut-aussiehst/

Dann prüfe, ob du nicht auf Design-Effekte, Videos oder die GoogleMap und andere langsame Elemente verzichten kannst. Das musst du letztendlich selbst entscheiden, was weg kann – verteile nötige, langsame Elemente eventuell auf verschiedene Einzelseiten, falls möglich. Eine GoogleMap z.B. reicht allein auf der Kontakt-Seite völlig aus.

Grundsätzlich gilt für Blogger: für SEO ist dein Blog am Wichtigsten. Die Artikel kannst du in aller Regel – mit kleinen Bildern – auch klein halten, denn hier brauchst du keinerlei Design-Effekte. Verzichte hier lieber darauf. Designtechnisch kannst du dich ja immer noch auf deiner Startseite austoben, so lange du auf diese nicht direkt Werbung schaltest (denn auch die GoogleAds wollen kurze Ladezeiten…).

Zuletzt kannst du – mit schon fertigen Website-Erweiterungen – noch einen Cache und eine LazyLoad Funktion anschalten. Oder eine, die deine Bilder weiter automatisch komprimiert.