Ladezeiten optimieren für Anfänger

Ladezeiten – diese 5 Basics machen deine Website sofort schneller

Ladezeiten sind ein furchtbar ungeliebtes Thema – ähnlich wie Altersvorsorge. Oder Aktien. Es wirkt einfach unglaublich kompliziert und technisch.

Die Lösung: Scheuklappen auf.

Klappt bisher ja auch ganz gut. Aber…könnte es nicht vielleicht noch viel besser laufen? Und was passiert in den nächsten Monaten und Jahren?

Warum sind Ladezeiten so wichtig?

Langsame Ladezeiten nerven vor allem deine Nutzer. Wenn sie erst noch ihren Nagellack trocknen lassen können bevor deine Seite geladen ist, sind sie wahrscheinlich schon wieder weg. Ein Todesurteil für deine User Experience.

Unsere Zeit ist uns kostbar und wir sind es gewohnt Websites sofort aufrufen zu können – auch wenn wir gerade kein LTE haben oder im WLAN sind.

Mir geht es zumindest so. Lädt eine Website zu lange schließe ich sie wieder und suche meine Informationen woanders. Wenn man sich die harten Fakten dazu anschaut, bin ich mit dieser Einstellung nicht allein:

Hohe Ladezeiten führen zu einer hohen Absprungrate
Der Zusammenhang zwischen Ladezeiten und Absprungrate

Die Grafik zeigt: wenn die Ladezeit steigt, steigt auch die Absprungraten. Aber was bedeutet das jetzt konkret?

Angenommen du hast pro Tag 100 Nutzer auf deiner Webseite. Du hast eine Conversion-Rate von 3% und kriegst so drei Anfragen pro Tag. Verschlechtert sich deine Ladezeit jetzt auf 3 Sekunden, springen über 30% direkt ab. Du hast also nur noch 30 Nutzer pro Tag, die sich deine Inhalte überhaupt angucken. Mit deiner Conversion-Rate von 3% macht das plötzlich nur noch eine Anfrage am Tag. Sind in der Woche 14 Anfragen weniger, im Monat 60 weniger und im Jahr… ich glaub, du hast es verstanden. Du verlierst bares Geld.

Da ist was noch was: Google. Die haben es sich zur Aufgabe gemacht Suchenden die besten Informationen zur Verfügung zu stellen. Lange Ladezeiten sind dafür absolut uncool. Das Ergebnis: Deine Seite rankt trotz allerbester Inhalte nicht ganz oben. Die Folge: Weniger Traffic für deine Website.

Klappe zu – Affe tot. Willst du weiterhin nach dem Motto „was ich nicht weiß, macht mich nicht heiß“ Kunden verlieren oder willst du endlich deine Ladezeiten in den Griff bekommen?

Blog-Fahrplan zum Herunterladen

Wie kann ich meine Ladezeit messen?

Bevor du anfangen kannst zu optimieren musst du erstmal wissen, wo du stehst und die Ladezeit deiner Website messen. Das kannst du auch verschiedene Arten machen.

Pingdom.com: Eine Alternative zu Google ist Pingdom. Der große Vorteil hier ist, dass du deine Daten feinsäuberlich in Diagrammen angezeigt bekommst und so direkt sehen kannst, bei welchen Punkten es am stärksten brennt. Das Wichtigste ist aber, dass dir direkt die Ladezeit angezeigt wird. Diese „Kleinigkeit“ fehlt leider vielen anderen Tools.

Gerade für internationale Seiten: Du kannst sogar die Performance für verschiedene Standorte analysieren.

Pingdom ist das einfachste Tool, um Ladezeiten zu messen
Pingdom zeigt dir alle Infos auf einen Blick

Google PageSpeed Insights: Mit den PageSpeed Insights liefert Google ein eigenes Tool zur Auswertung deiner Performance. Das Tolle ist: Es ist kostenlos. Du musst nur deine URL eingeben und die Magie geschehen lassen. Nach einer kurzen Analyse bekommst du dann eine Punktzahl von 0 bis 100. Die 100 tatsächlich zu knacken braucht aber gar nicht dein Ziel sein. Auch eine Website mit 60 Punkten kann gute Ladezeiten haben. Google liefert dir außerdem Verbesserungsmaßnahmen für deine Website. Als Nicht-Techniker wirken die aber oft eher wie Hieroglyphen.

Das große Problem der PageSpeed Insights ist, dass du keinerlei Informationen zur tatsächlichen Ladezeit gibt.

Die PageSpeed Insights geben dir wertvolle Hinweise zur Verbesserung der Ladezeit
Google bewertet deine Website auf einer Skala von 0 bis 100

Google Analytics: Wenn du eh schon Google Analytics nutzt, kannst du auch dort einen Blick auf deine Ladezeit werfen (Verhalten – Websitegeschwindigkeit). Der große Vorteil ist, dass du hier zwei Zeiträume gegeneinander vergleichen und dir so Veränderungen ansehen kannst. Analytics bietet dir auch Verbesserungsvorschläge, leitet die dafür aber wieder zu den PageSpeed Insights.

Webpagetest.org: Auch auf webpagetest.org kannst du kostenlos deine Performance analysieren lassen. Einfach URL eingeben und los – eine Registrierung ist nicht notwendig. Das Besondere ist, dass du in diesem Tool bei der Messung auch den Ort und den Browser einstellen kannst. Du bekommst sehr detaillierte Ergebnisse, für die man aber ein gewisses technisches Know-How braucht. Konkrete Handlungsempfehlungen bekommst du hier nicht.

SEO-Tools: Auch SEO-Tools wie Sistrix, SEMrush oder Ryte geben dir Aufschluss über deine Ladezeiten. Bei Ryte bekommst du z.B. eine sehr schöne Übersicht und weißt damit, bei welchen Seiten du dringend optimieren musst. Tipps, was genau so anpassen solltest, findest du aber nicht.

Ryte zeigt dir, ob du deine Ladezeiten verbessern musst
Ryte zeigt dir, du du deine Ladezeiten noch verbessern musst

Wie wird meine Website schneller?

Jetzt geht es ans Eingemachte: Schlechte Ladezeiten müssen nicht sein und um deine Website schneller zu machen musst du auch ganz sicher kein Technik-Experte sein. Das bin ich nämlich auch nicht. Und trotzdem hat mein Blog eine Ladezeit von ca. einer Sekunde. Deshalb gibt es jetzt fünf Tipps, mit denen auch du deine Website ruckzuck schneller machst. Wortwitz erkannt?

Bitte, bitte, lass dich nicht von den Fachwörtern abschrecken! Es ist nicht einmal halb so kompliziert wie es klingt.

Noch ein kleiner Hinweis: Meine Tipps sind alle auf das CMS WordPress ausgerichtet.

1. Entscheide dich für den richtigen Hoster

Hosting-Anbieter gibt es wie Sand am Meer – von wenigen Cent pro Monat bis hin zu vielen Euros ist bei Hosting-Anbietern so ziemlich alles dabei. Die Entscheidung solltest du aber nicht allein vom Preis abhängig machen.

Abgesehen davon, dass du bei günstigen Hostern wahrscheinlich öfter mal Probleme mit Server-Erreichbarkeit und Support hast, kann sich der falsche Hoster auch negativ auf deine Ladezeit auswirken. Du solltest dich nämlich nicht wundern, wenn sich neben deiner Website noch über 50 andere auf „deinem“ Server befinden. Wenn alle gleichzeitig aufgerufen werden, kommt der Server da gar nicht mehr hinterher.

Achte deshalb darauf, dass du dir deinen Webspace nicht mit zu vielen anderen teilst. Frag im Zweifel einfach am besten direkt beim Hoster nach. Wenn du ganz sicher gehen möchtest, dass andere dir nicht die Ladezeit versauen oder „deinem“ Server durch dubiose Machenschaften einen schlechten Ruf einbringen, musst du dich für einen dedizierten Server entscheiden.

Ich persönlich hoste meine Website aber auch auf einem Shared Webspace und bin damit vollkommen zufrieden. Der Anbieter meiner Wahl ist webgo (psst, die werben sogar mit schnellen Ladezeiten). Ich weiß aber auch, dass all-inkl und raidboxes gute Alternativen sind.

Last, but not least brauchst du genügend Speicherplatz, denn gerade mit vielen Bildern nimmst deine Website ordentlich Platz ein. Fang am besten erst einmal mit einem mittleren Paket an – hochstufen kannst du dann immer noch. Mein Webspace hat 100 GB und davon ist aktuell nur ein Bruchteil belegt.

2. Aktiviere das Caching

Caching? Schon wieder dieses olle Fachchinesisch…

Fangen wir mal ganz vorne an: Wenn du eine URL eingibst, werden die Inhalte, die dort gespeichert sind, von einem Server (meinem Webspace) abgerufen und zusammengesetzt. Deshalb bezeichnet man Websites oft auch als „dynamisch“. Je nachdem, wie viele Elemente geladen werden müssen, kann das natürlich ein bisschen dauern.

Um zu verhindern, dass Inhalte (die sich meistens eh nicht mehr verändern) jedes Mal neu geladen werden müssen, kannst du sie zwischenspeichern (lassen).

2.1. Browser-Caching

Beim Browser-Caching werden vom Browser Inhalte (Bilder, Texte, Videos) zwischengespeichert. Das hat den Vorteil, dass sie beim nächsten Aufruf der Seite nicht wieder vom Server, sondern nur lokal (also von deinem Computer) abgerufen werden müssen. Kurzer Weg = kurze Ladezeit.

Das einzige Problem, das es dabei gibt, ist (mal wieder) die Person vor dem PC oder Smartphone. Hat die nämlich ihren Browser-Cache lange nicht geleert, kann auch das Laden aus dem Zwischenspeicher lange dauern.

Wie richte ich das Browser-Caching ein?

Okay, jetzt wird es etwas technischer, aber versprochen, es wird nicht schwer. Du musst den „Caching-Code“ in deine ht.access-Datei einfügen. Dafür hast du zwei Möglichkeiten:

  1. Du öffnest die Datei über den FTP-Server.
  2. Du nutzt das Yoast SEO-Plugin (übrigens, meine wärmste Empfehlung). Da kannst du deine ht.access-Datei nämlich über Werkzeuge – Datei-Editor erweitern.

Wenn du diese Zeilen ergänzt, bleiben deine Website-Inhalte für ein Jahr bei deinem Nutzer gespeichert.

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg „access 1 year“
ExpiresByType image/jpeg „access 1 year“
ExpiresByType image/gif „access 1 year“
ExpiresByType image/png „access 1 year“
ExpiresByType text/css „access 1 month“
ExpiresByType text/html „access 1 month“
ExpiresByType application/pdf „access 1 month“
ExpiresByType text/x-javascript „access 1 month“
ExpiresByType application/x-shockwave-flash „access 1 month“
ExpiresByType image/x-icon „access 1 year“
ExpiresDefault „access 2 days“
</IfModule>
## EXPIRES CACHING ##

P.S.: den Code kannst du einfach kopieren und einfügen. Wenn du nicht etwas an der Speicherdauer ändern möchtest, brauchst du nichts am Code anpassen.

2.2. Page-Caching

Yeah, noch mehr Caching – also noch schnellere Websites!

Beim Page-Caching werden dynamische Webseiten zu statischen. Das bedeutet, dass deine Seite beim Aufruf nicht – wie üblich mit mehreren Datenbankabfragen – zusammengesetzt werden muss, sondern schon als fertiges Konstrukt aus einem Zwischenspeicher geladen werden.

Das Page Caching zu aktiveren ist sogar noch einfacher als das Browser-Caching, denn du brauchst nur das Plugin. Meine Empfehlung ist der Cache Enabler, weil er supereinfach ist: Nur herunterladen, aktivieren und fertig. Du muss keine individuellen Einstellungen vornehmen.

Der Cache Enabler erlaubt das Page Caching
Mit dem Cache Enabler werden deine Seiten zwischengespeichert

Du fragst dich jetzt, was passiert, wenn du an älteren Beiträgen etwas änderst? Keine Angst, das Plugin löscht den Cache immer wieder (z.B. nach der Veröffentlichung eines neuen Beitrags), sodass dann die aktuellere Version neu geladen wird.

3. Halte deine Website schlank

„Viel hilft viel“ gilt bei Websites nicht. Denn alles an HTML-Codes, externen Skripten (wie Sharing-Buttons) und Plugins kostet Ladezeit. Stelle dir deshalb immer die Frage, ob dir ein bestimmtes Feature den Ladezeit-Verlust wert ist. Manchmal muss man in den sauren Apfel beißen. Manchmal tut ein Feature weniger deiner Website auch keinen Abbruch.

Konkret gibt es vier Maßnahmen, die du hier umsetzen kannst:

  1. Lösche alle Plugins, die du nicht brauchst. Am besten löschst du sie direkt über den FTP-Server. Dann werden sie restlos beseitigt und produzieren nicht noch Code-Müll.
  2. Nutze nur Sharing-Buttons und andere externe Skripte (z.B. Tracking-Codes), die wirklich wichtig sind (z.B. kein Twitter-Button, wenn deine Zielgruppe da eh nicht aktiv ist)
  3. Nutze ein CSS-Stylesheet. Statt alle Design-Anpassungen direkt im HTML-Code zu beschreiben, solltest du sie einmal in der CSS-Datei definieren. Meist wird die CSS-Datei schon vom Theme mitgeliefert. Anpassungen kannst du entweder über den FTP-Server oder über das WordPress-Backend (Customizer -> zusätzliche CSS) machen.
  4. Minimiere HTML-Codes, CSS und Javascript.
    1. Lösche alle nicht benötigten Auskommentierungen.
    2. Entferne alle überflüssigen Leerzeichen und Zeilenumbrüche (entweder per Hand oder mit Plugins wie W3 Total Cache).
    3. Schmeiße alle leeren Formatierungen (z.B. <h1></h1>) raus.
    4. Kopiere nicht direkt aus deinem Office-Programm. Das erzeugt nur unnötigen Quellcode. Wenn du deinen Text schon in Word & Co. formatiert hast, füge ihn als Plain Text ein.

Ich empfehle dir hier das Plugin Autoptimize. Das fasst deine CSS und Javascript Codes zusammen und minimiert sie. Damit machst du deine WordPress-Website ganz einfach noch schneller. Auch hier brauchst du keine großen Kenntnisse haben, um das Plugin in Gang zu kriegen. Einfach installieren, aktivieren und bei „HTML Code optimieren“, „JavaScript Code optimieren und „CSS Code optimieren“ die Häkchen setzen.

Autoptimize macht deine Website schneller
Beim Autoptimize Plugin musst du nur drei Häkchen setzen

Übrigens, auch Visual Composer wie das beliebte Divi produzieren aufgrund der Drag & Drop-Funktion viel Code(-Müll). Hier musst du also zwischen Einfachheit und Schnelligkeit abwägen. Wenn du Divi & Co. nutzen möchtest (was ich gut nachvollziehen kann), solltest du dich aber umso mehr auf die anderen Optimierungsmöglichkeiten stürzen.

4. Optimiere deine Bilder

Auch wenn viele etwas anderes behaupten: Es kommt auf die Größe an. Nein, es geht hier jetzt nicht unter die Gürtellinie, sondern um die Bilder auf deiner Website.

Auf vielen Websites – und vor allem in Shops – nehmen Bilder einen Großteil des Speicherplatzes ein. Selbst auf meiner Website, auf der Bilder nur eine untergeordnete Rolle spielen, ist das so.

Bilder verhindern oft schnelle Ladezeiten
Anteil an Bildern auf meiner Website

Große Bilder bedeutet viel Speicherplatz und das bedeutet langsamere Websites. Damit Bilder auf deinen Seiten nicht zum Ladzeiten-Killer werden, solltest du jetzt gleich aufhören, deine Bilder wahllos hochzuladen. Die wenigsten Websites brauchen Bilder in höchster Auflösung.

Lade Bilder deshalb immer nur in der passenden Größe hoch, also der, die du auch wirklich brauchst. Ist der Content-Bereich deiner Website nicht breiter als 700 px, brauchen deine Bilder keine 1.600 px in der Breite haben. Da reichen dann auch 700 px. Die Größe anzupassen ist ganz einfach. Das kannst du im Zweifel sogar mit Paint machen.

Jetzt kommt aber noch die zweite Stufe: Die Bilder komprimieren. Das geht zum Beispiel mit Photoshop, indem du beim Speichern „für Web speichern“ auswählst. Alternativ kannst du aber auch Web-Anwendungen wie TinyPNG nutzen.

Du hast bisher deine Bilder einfach so hochgeladen? Keine Panik! Du musst jetzt nicht alle löschen. Wenn du nämlich zu faul bist deine Fotos zu komprimieren oder deine alten Fotos optimieren willst, um deine Website schneller zu machen, hilft dir wieder ein Plugin. Meine Empfehlung ist hier Compress JPEG & PNG images von TinyPNG. Es ist kostenlos (zumindest, wenn du nicht mehr als 500 Bilder / Monat komprimieren willst) und komprimiert sowohl deine alten Bilder (sogar alle auf einmal) also auch neu hochgeladene.

Um das Plugin nutzen zu können, musst du dir allerdings einen „Tinify account“ anlegen. Aber auch das dauert nur wenige Sekunden. Dabei bekommst du dann einen API-Schlüssel, den du nach der Aktivierung des Plugins eingibst.

Für schnellere Ladezeiten sollten Bilder komprimiert werden
Bilderoptimierung leicht gemacht dank Plugins

Eine spannende Frage gibt es noch: .jpg oder.png? Das kommt ein bisschen drauf an, was für Bilder du hast. Aber erst ein kurzer Satz zu den beiden Formaten: Der größte Unterschied zwischen den beiden ist, dass du bei der Komprimierung von jpg-Dateien Verluste in der Qualität hinnehmen musst, während png-Dateien sich verlustfrei komprimieren lassen.

  • Fotos: Für Fotos eignet sich .jpg am besten. Ab einer gewissen Komprimierungsstufe nimmt der Qualitätsverlust nicht mehr großartig zu, sodass du die Fotos oft stark komprimieren kannst.
  • Grafiken: Bei Grafiken sieht das Ganze etwas anders aus. Hier schafft .png die kleineren Dateigrößen. Das liegt an der unterschiedlichen Verarbeitung der Bilder.

Wenn du nicht ständig überlegen möchtest, kannst du auch immer jpg-Dateien verwenden.

5. Nutze PHP 7

Wenn du deine Website schon länger betreibst, könntest du noch in PHP 5 feststecken. Das solltest du schleunigst ändern, denn die 7er Variante ist bedeutend schneller (mind. 30%). Die Umstellung ist ganz einfach, muss aber von Hand gemacht werden.

Gehe dafür einfach ins die Server-Einstellungen bei deinem Hoster und ändere die Version. In der Regel gibt es dabei keine Probleme, da sich WordPress und die meisten Themes und Plugins schon lange auf die neue Version eingestellt haben.

PHP-Version 7 lässt deine Website sofort schneller werden
So aktivierst du bei webgo PHP 7

Sollte deine Website nach einem kurzen Test aber trotzdem Probleme machen, kannst du auch zu PHP 5 zurückgehen und erst einmal herausfinden, wo der Fehler liegt.

Noch ein kleiner Profi-Tipp

Einen Tipp hab ich noch. Der geht schon über das „normale“ Level hinaus, ist aber ganz leicht umzusetzen und dauert nur wenige Sekunden. Deshalb verrate ich ihn dir.

Wie du schon weißt nehmen Bilder viel Platz ein und können deshalb deine Website verlangsamen. Du kannst aber dafür sorgen, dass auf einer Seite nicht alle Bilder gleichzeitig geladen werden. Das nennt sich Lazy Loading (also faules Laden).

Dabei werden zunächst nur die Bilder geladen, die sichtbar sind. Der Rest wird erst beim Scrollen nachgeladen. Für den Nutzer ist das Nachladen kaum spürbar – es lässt ihn aber die ersten Inhalte schneller sehen.

Fürs Lazy Loading kannst du einfach ein Plugin nutzen. Das gehört auch zu meinem begrenzten Plugin-Repertoire. Ich habe mich für das kostenlose LazyLoad entschieden und bin damit bisher sehr zufrieden.

LazyLoad kann deine Website schneller machen
Das LazyLoad Plugin

Fazit

Jetzt mal ehrlich: Das war doch gar nicht so schlimm, oder? Jetzt am Anfang wirkt es noch sehr viel, aber die meisten Punkte sind innerhalb von Minuten umgesetzt (Plugin installieren, aktivieren, fertig). Und glaub mir, deine Nutzer und Google werden es dir danken.

Deine To-Do-Liste für schnellere Websites:

  • Ladezeit messen
  • Hosting-Anbieter überprüfen
  • Browser-Caching aktivieren
  • Caching-Plugin (z.B. Cache Enabler) installieren
  • Unnötige Plugins und andere Zeitfresser rausschmeißen
  • Bildoptimierungs-Plugin herunterladen und alle Bilder komprimieren
  • Ewig lange Weiterleitungsketten verkürzen
  • Nicht auffindbare Elemente (wie Bilder) reparieren
  • Lazy Loading nutzen

Viel Spaß beim Optimieren!

0 Kommentare

Hinterlasse einen Kommentar

An der Diskussion beteiligen?
Hinterlasse uns deinen Kommentar!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert