CacheCacheCache, wir haben sogar ein Cache-Kässeli bei uns im Büro. Aber was heisst das genau und welcher Cache bringt welche Vorteile? Und was kann man sonst noch tun, um die Ladezeit einer Website zu optimieren? Um das geht es in diesem Beitrag.
Starten wir mit dem Pfad, was genau passiert, wenn eine Website aufgerufen wird. Dazu habe ich folgende Grafik erstellt.
Caches
Ein Cache speichert eine Information in einer Form, sodass diese Information zu einem späteren Zeitpunkt schneller wieder zur Verfügung steht. Ändert sich die Information, muss auch der Cache gelöscht, geleert oder neu erstellt werden. Zu Abstrakt? Ein Beispiel: Du fragst eine zufällige Person am Bahnhof, wann der nächste Zug nach Mailand fährt. Diese Person schaut in der SBB-App nach und gibt dir diese Information weiter. Wenn du die gleiche Person nun in 5min nochmals frägst, kann Sie dir diese Information (vermutlich 😉) direkt geben, ohne in der App nachzuschauen. Solange die Information (Abfahrtszeit) nicht ändert, stimmt die Information von der Person und es reicht dir, wenn du das von der Person erfährst und nicht von der App.
Bei Websites kann das bedeuten, dass gewisse Informationen aufwändiger gesammelt werden müssen, diese können dann in einem Cache zwischengespeichert werden. In den Webtechnologien gibt es viele verschiedene Stellen wo man einen Cache anwenden kann, jeder Cache hat seine Vor- und Nachteile und muss unter gewissen Umständen manuell geleert werden.
Wo wird gecached?
Ich beschränke mich hier auf die relevantesten Caches und die, die wir in unserem Alltag auch oft einsetzen.
DNS-Cache
Damit die Website im Internet nicht nur unter der IP-Adresse des Webservers erreichbar ist, sondern auch unter dem «schönen» Namen example.com muss die Domain aufgelöst werden. Das kann man sich mit der Analogie eines Telefonbuches vorstellen. Eine Person mit einem Namen hat eine Telefonnummer, diese merkt sich niemand, den Namen aber schon. Nun ändert – wie bei der Telefonnummer – die IP-Adresse aber selten und diese Information kann daher gut gecached werden. Wenn ich also die Website klubdergutenseiten.ch aufrufe, wird als erstes eine DNS abfrage an meinen DNS-Resolver gestellt: «wie lautet die IP Adresse für die Domain klubdergutenseiten.ch?». Wenn der DNS-Resolver die Antwort weiss, liefert er mir die IP-Adresse direkt. Wenn nicht, so leitet er die Frage an die nächste Stelle weiter. Das erklärt auch, warum es unter Umständen lange dauern kann, bis DNS Änderungen überall angekommen sind.
Bei den DNS-Einträgen kann man die «Lebzeit» einstellen, ich kann also beim erstellen eines DNS-Eintrages bestimmen, wie lange dieser gültig sein soll, bis der Cache gelöscht werden muss und die Information wieder beim Name-Server angefragt werden muss. Wenn also eine Änderung am DNS bevorsteht, lohnt es sich zuvor diese Zeit zu verkürzen (z.B. auf 5min), damit die DNS-Resolver dann schneller diese Änderung abfragen (müssen).
Cache-Headers oder «Browser Cache»
Wenn eine Datei von einem Webserver heruntergeladen wird, z.B. ein Bild oder eine JavaScript-Datei, kann diese mit einem Cache-Header versehen werden. Das bedeutet, ähnlich wie beim DNS, ein Ablaufzeitpunkt. Bis zu diesem Zeitpunkt muss der Browser diese Datei nicht mehr neu herunterladen. Das ist besonders bei Bildern, Videos oder nicht verändernden CSS- und JavaScript-Dateien sehr hilfreich, da beim zweiten Besuch der Website, diese dann viel schneller geladen wird.
Dazu eine kleine Demo: Links wird die Seite zum zweiten Mal geladen (resp. Cache-Headers aktiviert), rechts zum ersten Mal (resp. ohne Cache-Headers).
Site-Cache
Wenn der Webserver die Anfrage für eine Website erhält, sammelt er sämtliche benötigten Informationen aus der Datenbank und generiert aufgrund der PHP-Skripte das finale HTML-Markup. Dieses wird dann an den Browser gesendet. Das generierte HTML kann auch zwischengespeichert werden, dadurch erspart man sich die Datenbankabfragen.
Das funktioniert, solange der Inhalt der Seite nicht dynamisch oder user-abhängig ist. Wenn du beispielsweise ein Produkt in einem Onlineshop in den Warenkorb legst, ist der Warenkorb dann dein persönlicher Warenkorb. Wenn ich gleichzeitig meinen Warenkorb öffne, möchte ich nicht die gecachte Version deines Warenkorbes sehen. Der Site-Cache (oder Page-Cache) funktioniert also nur bei statischen Inhalten (z.B. Blog-Seiten, Impressum, etc.).
Und von hier an?
Die Cache-Reise geht noch weiter. Es gibt viele weitere Möglichkeiten auf der Server-Seite, um z.B. Objekte schneller verfügbar zu machen (Object-Cache) oder bereits aufgerufene PHP-Skripts bereits vorkompiliert im Zwischenspeicher zu behalten (OPCache). Diese Varianten werden in der Regel vom Hosting-Anbieter bereits vorkonfiguriert.
Und was gibt es abgesehen von Caches?
Die oben beschriebenen Massnahmen sind eher technischer Natur und werden bei unseren Projekten von uns empfohlen und eingerichtet. Die Ladezeit wird massgebend durch die Inhalte einer Website bestimmt. Das bedeutet das beliebte Full-Size-Video auf der Startseite lädt länger wie ein Text. Die fancy-pants Design-Schriftart braucht länger bis sie geladen ist, als eine System-Font. Ich finde, da muss ein guter Mittelweg gefunden werden, der für das Marketing und auch für die Website-Besucher:innen gleichermassen zufriedenstellend ist.
Unsere Erfahrung zeigt zudem, dass viele Plugins die Website verlangsamen. Besonders im Admin-Bereich, also da, wo die Inhalte erfasst und bearbeitet werden. Oft sind Plugins eine Ursache, wenn sich die Website langsam verhält. Es ist leider eher aufwändig herauszufinden, welches Plugin effektiv welchen Einfluss hat und meistens wurden die Plugins ja aus einem Grund installiert.
Mehr PS
Eine Möglichkeit bleibt immer. Mehr Power. Eine Standard-WordPress-Website kann im Normalfall gut auf einem Shared-Hosting betrieben werden (das ist ein Server, wo Ressourcen mit anderen Websites geteilt werden). Das ist eine kostengünstige Möglichkeit, die Website zu betreiben (Grössenordnung 10 CHF/Monat auf einem Schweizer Server). Ein eigener Server bringt den Vorteil, dass man die Ressource für sich reserviert und garantiert hat. Dazu gibt es Angebote von Schweizer Hostern, die bei ca. 40 CHF/Monat starten.
Fazit
Es gibt viele Schrauben, an denen man drehen kann, um die Performance zu verbessern. Je nach Projekt bieten sich Caches oder Anpassungen an der Konfiguration an. Oder als letztes Hilfsmittel kann mit mehr Server-Ressourcen gearbeitet werden.
Natürlich beraten wir dich gerne, wenn du konkrete Fragen zu deiner Website hast oder vor einem Performance-Problem stehst. Schreib mir doch einfach eine E-Mail an florian@kdgs.ch.
Solltest du dich ansonsten weiter für das Thema Website-Performance interessieren, könnte unserer neuster Blogbeitrag zum Thema WordPress Updates hilfreich für dich sein.