Die Ladezeit einer Website wird immer wichtiger und hat direkten Einfluss auf den finanziellen Erfolg.
Deshalb habe ich in diesem Artikel 11 praktische Tipps für Einsteiger zusammengetragen, mit deren Hilfe sie schnell und einfach die Website-Performance verbessern können.
Dabei gebe ich viele Tipps für nützliche Tools und Plugins. Zudem schildere ich natürlich auch meine eigenen Erfahrungen.
Über die Bedeutung der Ladezeit habe ich hier im Blog schon häufiger etwas geschrieben. So hat Google unter anderem nun endlich das Speed Update offiziell in ihre Ranking-Berechnung einbezogen, was durch den stetig steigenden Anteil der mobilen Nutzer auch wirklich sinnvoll ist.
Andere Analysen zeigen ebenfalls sehr gut, dass die Top-Rankings in Google ohne gute Ladezeiten nicht möglich sind. Natürlich sind dafür auch noch viele andere Ranking-Faktoren wichtig, aber ohne eine gute Ladezeit hat man bei Google mittlerweile schlechte Karten.
Immer wieder sehe ich die positiven Auswirkungen einer guten Ladezeit auch an meinen eigenen Blogs und Websites. So versuche ich regelmäßig die Ladezeit meiner Blogs zu optimieren, was gute Ergebnisse bringt. Aber auch auf meinen Nischenwebsites achte ich auf eine gute Website-Performance, denn die Conversion-Rate hängt unter anderem stark von der Ladezeit ab.
Da die Ladezeit so wichtig ist, gebe ich euch heute 10 praktische Tipps, wie ihr diese verbessern könnt. Dabei habe ich vor allem auf praktische Tipps geachtet, die auch Laien durchführen können. Natürlich könnte ich hier auch umfangreiche Code-Beispiele und Profi-Tipps auflisten, aber die meisten Einsteiger wären damit wohl überfordert oder machen Fehler bei der Umsetzung. Deshalb verlinke ich hier auch viele Plugins, die dabei helfen.
Zudem bringen solche Profi-Tipps zwar sicher noch etwas mehr bei der Optimierung der Ladezeit, aber frei nach dem 80/20 Prinzip erreicht man mit den einfachen und schnell umzusetzenden Tipps in diesem Artikel fast genauso gute Ergebnisse.
Los gehts.
Schlechter Server-Antwortzeiten bzw. generell eine schlechte Performance kann natürlich viele Gründe haben, aber gerade das Hosting hat hier oft großen Anteil daran. Wer für sehr wenig Geld einen miesen Shared Hosting Tarif nutzt, muss sich nicht wundern, dass die Ladezeit schlecht ist.
Deshalb solltest du mal prüfen, ob auch normale HTML-Dateien nicht so gute Ladezeiten aufweisen und ob es möglich ist auf einen leistungsstärkeren Tarif zu wechseln. Ist das nicht möglich, sollte ein Umzug zu einem anderen Hoster in Betracht gezogen werden.
Eine Website oder einen Blogs zu betreiben ist heute im Grunde ohne Ausgaben möglich. Nur beim Hosting sollte man meiner Meinung nach nicht zu sehr sparen. Es muss sicher nicht gleich ein eigener Server sein, aber einen leistungsstarken Managed Hosting Tarif oder einen vServer kann sich eigentlich jeder leisten.
In Betracht ziehen sollte man auch ggf. einen CDN-Anbieter. Hat man viele externe Scripte, Grafiken oder andere Elemente, kann man diese über ein performancestarkes CDN einbinden und entlastet damit den eigenen Webspace. Dabei sollte man jedoch auf den Datenschutz achten und einen europäischen Anbieter bevorzugen.
Generell auf externes Hosting sollte bei bei Podcasts und Videos setzen. Diese Dateien bitte nicht auf dem eigenen Webspace ablegen, da dies einfach zu viel Bandbreite kostet und damit die Ladezeit negativ beeinflusst.
Bezüglich des eigenen Webspace habe ich noch den Tipp, möglichst auf die aktuelle PHP 7 Version zu setzen. Diese wird unter anderem von WordPress unterstützt und bietet einen nicht unbeträchtlichen Performance-Vorteil.
Zudem sollte man, wenn möglich, FastCGI für PHP nutzen. In dieser Konfiguration sind ebenfalls deutliche Performance-Verbesserungen möglich.
Am häufigsten treffe ich wohl auf dieses Problem, wenn es um die Ladezeit von Websites und Blogs geht. Laut Studien gehen rund 80% der Ladezeit einer Website auf das tatsächliche Herunterladen von Daten drauf. Das ist auch irgendwie logisch. Umso schlimmer ist es dann, wenn zu große Bilder bzw. schlecht optimierte Fotos in einer Website genutzt werden.
Zum einen nutzen viele keine Bildkomprimierung für die Fotos und Bilder, die sie auf der Website einbauen. Das kann man sowohl auf dem eigenen PC mit einem entsprechenden Bildbearbeitungs-Tool (wie Photoshop oder einem Online-Tool wie compressor.io) machen oder auch nachträglich auf dem Webserver.
Es gibt z.B. diverse WordPress-Plugins, die eine Bildoptimierung ermöglichen. So ist z.B. das Imagify Image Optimizer Plugin ein sehr nützliches Tool, um noch die letzten Kilobytes auf den Bildern herauszuquetschen.
Ein anderes Problem ist in diesem Zusammenhang, dass Einsteiger immer wieder Fotos einbinden und dann mittels HTML Angaben kleiner machen. Da wird also z.B. ein Bild, welches 800×800 Pixel groß ist, per HTML in der Größe 400×400 Pixel angezeigt. Geladen werden muss dennoch das große Bild.
Deshalb solltet ihr nicht per HTML die Bildgröße anpassen, sondern die kleinere Bildversion einbinden. WordPress erzeugt ja z.B. automatisch verschiedene Bildgrößen beim Upload eines Bildes.
Zu guter Letzt könnt ihr noch dafür sorgen, dass Bilder erst geladen werden, wenn sie wirklich gebraucht werden. Hat man z.B. einen langen Artikel, bei dem am Ende ein paar Fotos kommen, muss mann diese nicht schon beim Öffnen des Artikels laden. Plugins wie Lazy Load Plugin sorgen dafür, dass solche Fotos (und auch andere Elemente) erst geladen werden, wenn der Nutzer dorthin scrollt.
Der Begriff HTTP-Requests bezeichnet die Anzahl der Zugriffe, die notwendig sind, um alle Elemente einer Website in den Browser zu laden. Hier kann man einiges tun, um diese Anzahl der HTTP-Requests zu reduzieren und damit Zeit zu sparen.
Scripte, wie z.B. JavaScript, CSS, Facebook-Widgets, Flash, Videos und so weiter sorgen für solche HTTP-Requests. Je mehr davon notwendig sind, um so länger dauert die Kommunikation mit dem Server (bzw. auch Dritt-Servern). Deshalb ist es sinnvoll z.B. mit entsprechenden Plugins die JavaScript- und die CSS-Dateien zu kombinieren. Aus mehreren einzelnen Dateien werden dann nur noch eine.
Ebenfalls interessant ist die Lösung, externe Scripte und Elemente lokal zu speichern und vom eigenen Server zu laden. Auch dass senkt oft die Zahl der HTTP-Requests.
Plugins, wie z.B. Autoptimize, bieten Optionen an, um diverse Scripte und CSS-Dateien zu kombinieren. Externe Scripte und Elemente sollte man zudem dahingehend prüfen, ob diese wirklich notwendig sind.
Eng mit dem vorherigen Tipp hängt die Minimierung von Scripten und CSS-Dateien zusammen. Das gerade erwähnte Plugin bietet auch die Möglichkeit diese Dateien zusätzlich zu minimieren. Dabei werden Zeilenumbrüche, Kommentare, Leerzeichen etc. entfernt, um noch mehr Datenvolumen zu sparen.
Zudem sollte man darauf achten, CSS-Code in Header zu laden, während JavaScript-Dateien in der Regel in den Footer gehören. Das ist zum Beispiel mit dem Plugin Scripts To Footer möglich.
Allerdings sollte man hier auch immer prüfen, ob die Funktionalität der Website noch so ist, wie sie sein sollte.
Ich empfehle in diesem Artikel einige Plugins, die bei der Optimierung der Ladezeit helfen. Klar ist aber auch, dass jedes Plugin mehr oder weniger stark die Ladezeit negativ beeinflusst. Natürlich hängt das stark von der Qualität des Plugins ab und manche Plugins, wie die von mir empfohlenen, bringen mehr Vorteile, als Nachteile.
Allerdings installieren viele Einsteiger jedes Plugin, was irgendwie interessant klingt. Dass sich das negativ auf die Ladezeit auswirkt, sollte klar sein. Deshalb prüft bitte, welche Plugins ihr wirklich benötigt und deinstalliert die anderen.
Zudem solltet ihr testen, ob es besonders langsame Plugins gibt. Dafür könnt ihr zum Beispiel das Plugin Query Monitor nutzen. Dieses zeigt an, welche Datenbankaufrufe durch welche Plugins erzeugt werden. Damit kann man problematische Plugins finden.
Auch das manuelle Deaktivieren einzelner Plugins, mit anschließendem Ladezeiten-Check, kann dafür sorgen, dass man problematische Plugins entdeckt.
Das Layout einer Website kann ebenfalls großen Anteil an den schlechten Ladezeiten haben. Von schlechter Programmierungen, über richtige Fehler, bis hin zu unnötigen Funktionen kann vieles die Performance negativ beeinflussen.
Zudem solltet ihr euch genau überlegen, wie viele Grafiken/Fotos ihr nutzen wollt. Natürlich sind sogenannte Magazin-Themes optisch schön und wenn man selbst viele Fotos bereitstellen kann, mag das eine gute Lösung sein. Aber je mehr Fotos und Bilder man einbindet, um so mehr leidet die Ladezeit.
Unnötige Funktionen können in guten WordPress-Themes deaktiviert werden und dann werden auch die dazugehörigen Scripte und andere Dateien nicht mehr geladen. Probiert also unbedingt ausführlich Themes und Layouts aus, bevor ihr viel Arbeit in deren Anpassung steckt.
Ich stehe ja eher auf einfache Themes, wie z.B. das Standard Theme Twenty Thirteen. Da kann ich später sehr einfach weitere Features hinzufügen, anstatt zu versuchen Funktionen zu entfernen, die ich nicht benötige.
Eine sehr einfache Möglichkeit die Ladezeit zu optimieren ist die GZIP-Kompression. Damit komprimiert der Server selbst den Code einer Website (HTML, CSS, JavaScript) nochmal, was eine Einsparung bei der Dateigröße von bis zu 80% bringen kann.
Verschiedene Plugins habe diese Option integriert, wie z.B. WP Fastest Cache. Natürlich kann man das auch von Hand in der htaccess-Datei einstellen, aber das ist für Einsteiger oft etwas zu schwer.
Auf der Website checkgzipcompression.com kann man dann anschließend testen, ob die eigenen Website wirklich mit der GZIP-Kompression optimiert wurde.
Eher unbekannt ist die Tatsache, dass HTML-Fehler die Ladezeit ebenfalls negativ beeinflussen können. Dabei geht es vor allem um die Einbindung von Elementen, die gar nicht vorhanden sind. Ist z.B. ein Bilder per HTML eingebunden worden, welches aber gar nicht mehr vorhanden ist, dann sucht der Browser danach, was dauern kann. Ähnlich sieht es z.B. mit CSS- und JavaScript-Dateien aus.
Solche Fehler sieht man in den Webmaster-Tools von Firefox und Chrome. Dort einfach auf “Web-Entwickler > Web-Konsole” (im Firefox) bzw. auf “Weitere Tools > Entwicklertools > Console” (im Chrome) gehen. Beim Laden der Seite sieht man nun, wenn ein 404 Fehler gefunden wurde, also ein Element der Seite nicht mehr vorhanden ist.
Im Idealfall entfernt ihr diesen Aufruf aus der Website, was aber manchmal gar nicht so einfach ist. Ein Workaround wäre, einfach alternativ die fehlende Datei bereitzustellen. Also z.B. eine leere CSS-Datei mit dem betreffenden Namen ins richtige Verzeichnis hochzuladen oder eine 1×1 Pixel kleine Bild-Datei auf den Server zu laden, die ebenfalls natürlich den richtigen Namen tragen muss.
Mit der Zeit müllt die Datenbank einer Website zu. Das ist auch bei WordPress so, wo viele Datenbank-Einträge nicht wirklich notwendig sind und die Performance der Datenbank verringern. Das wirkt sich negativ auf die Ladezeit der Website aus.
Zum Glück gibt es auch hierfür nützliche Plugins. WP-Sweep oder auch die Pro-Version von WP Fastest Cache bieten die Möglichkeit an, die Datenbank aufzuräumen. Das bringt durchaus Vorteile mit.
Allerdings solltet ihr vorher ein Backup eurer Datenbank machen, nur zur Sicherheit. Ich hatte hier aber noch nie Probleme.
Zu guter Letzt solltet ihr euch noch um das Caching kümmern. Es gibt serverseitiges und browserseitiges Caching.
Mit serverseitigem Caching ist gemeint, dass man nicht bei jedem Seitenaufruf alle dynamischen Inhalte von neuem aus der Datenbank lädt. Ein Artikel verändert sich ja in der Regel nicht ständig. Deshalb kann man mit einem Caching-Plugin, wie z.B. WP Super Cache, einzelne Seiten als statische HTML-Dateien zwischenspeichern. In einem bestimmten Zeitraum wird den Besuchern diese HTML-Seite angezeigt und die Datenbank dadurch nicht belastet.
Aber auch browserseitig sollte man das Caching aktivieren. Viele Caching Plugins fügen automatisch die notwendigen Befehle in die htaccess-Datei ein. Damit wird dem Browser z.B. gesagt, dass er CSS-Dateien, Scripte und Bilder nicht jedes mal neu vom Server laden muss, sondern für eine gewisse Zeit zwischenspeichern soll.
Die notwendigen htaccess-Angaben kann man natürlich auch manuell vornehmen. Diese Vorlage hilft dabei.
Die genannten Tipps helfen dabei die Ladezeit der eigenen Website deutlich zu verbessern, aber natürlich solltet ihr das auch prüfen.
Das solltet ihr regelmäßig machen, um neue Probleme schnell zu erkennen.
Das waren meine Ladezeit-Tipps für eine bessere Website-Performance.
Ich würde mich aber auch über eure Tipps und Erfahrungen freuen.
Hinterlasst einfach einen Kommentar und schildert, wie ihr bei der Ladezeit-Optimierung vorgeht.