Wie ich es schaffte, dass meine Seite in 1.29 Sekunden geladen ist

Written by | 01 August 2013 | Published in 2013 August
Wir alle hören seit einiger Zeit, dass die Ladezeit einer Seite für die SEO-Bewertung je länger je wichtiger wird - also haben wir kürzlich in einer tiefgehenden Übung untersucht, wie wir die Ladezeiten unserer eigenen Seiten auf ein absolutes Minimum reduzieren können. Wir glauben, dass sich unsere Ergebnisse in GTMetrix durchaus sehen lassen können: 85% für die PageSpeed, 95% für YSlow sowie eine Ladezeit von 1.29 Sekunden. Wir möchten unsere Erfahrungen und unser Vorgehen an dieser Stelle gerne teilen. Einige der verwendeten Mechanismen sind Joomla! spezifisch, die generellen Konzepte sind aber für jedes CMS und jede Webseite gültig.
Wie ich es schaffte, dass meine Seite in 1.29 Sekunden geladen ist image by @Helvecio

Bevor man mit dem folgenden loslegt sollte man seine Seite mit GTMetrix. bewerten lassen. Man notiert sich die Ergebnisse und verfolgt später, wie sie sich nach und nach verbessern. Das Schöne daran ist, dass GTMetrix eine History über die seite führt, der Erfolg kann graphisch nachverfolgt werden!

SCHRITT 0: BACKUP ERSTELLEN - Einige der folgenden Schritte können die Seite beschädigen! Es ist wichtig, vor jeder der folgenden Schritte einen vollständigen Backup zu ziehen.

Schritt 1: Setze dir ein möglichst ambitiöses Ziel und gib die Mühe, es auch zu erreichen

Dies ist ein absolutes Muss. Ohne ein Ziel wird man irgendwann aufgeben und die Lust verlieren, weitere Verbesserungen zu versuchen. Man braucht schon bevor man mit den Arbeiten beginnt einen ambitiösen Zielwert, und dann muss man mit allen Mitteln daran arbeiten, ihn auch zu erreichen. Bei uns sah das so aus, dass wir anstreben wollten, die Ladezeit der Frontpage unter 1.5 Sekunden zu drücken UND ein Minimum von 85% sowohl bei Pagespeed als auch YSlow zu erreichen.

Das Endresultat war dann eine Ladezeit von 1.29 Sekunden für eine Seite, die noch 149kB auf die Waage brachte bei noch 28 Requests - nicht allzu übel :)

Aber jetzt geht es ans Eingemachte...

Schritt 2: Joomla Cache einschalten

Eine im Grunde genommen einfache Sache, aber SEHR effektiv. Anstelle jedes Mal von neuem die Datenbank abzuklappern um eine Seite ausliefern zu können, speichert der Cache eine Kopie der Seiten und liefert bei Anfragen die Kopien aus seinem temporären Verzeichnis heraus. Das entlastet nicht nur den Server, es verbessert auch die Ladezeiten. Der Cache wird wie folgt eingeschaltet:

System > Konfiguration  > System:  AN - Erweitertes Caching

Die Cachedauer setzt man auf etwa 60 Minuten (wenn der Inhalt der Seite nicht besonders häufig ändert).

Schritt 3: Einschalten des System Cache Plugin

Dieses Plugin speichert ganze Seiten und kann zusätzlich den Browser anweisen, Seiten einige Zeit lang vorrätig zu halten. Browser Caching macht durchaus Sinn, weil nicht dauernd Bilder und andere Elemente neu heruntergeladen werden müssen. Der Browser kann eine lokale Kopie vorlegen und somit müssen weniger Daten nachgeladen werden, was wiederum den Ladezeiten zugutekommt. Dies ist besonders sinnvoll für CSS-Dateien und Bilder. Das Plugin wird wie folgt eingeschaltet:

Erweiterungen > Plugins (suchen nach Cache) und Einschalten des System - Cache genannten Plugins. In den Basisoptionen sollte ebenfalls Browser-Cache benutzen eingeschaltet werden. 

Schritt 4: Austarieren des Serverseitigen Browser-Cachings

Dieser Schritt hat Ähnlichkeit mit Schritt 3, betrifft aber ausschliesslich das Caching im Browser, betrifft aber die Server-Seite. Prinzipiell geht es darum, dem Browser zu sagen, er solle gewisse Dateien für eine bestimmte Zeit cachen. Google PageSpeed schlägt eine minimale Zeit von einem Monat vor. Um dies zu erreichen, muss die .htaccess-Datei entsprechend angepasst werden (Zeitangaben werden in Sekunden gemacht, 2'592'000 Sekunden entsprechen einem Monat).

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>

Andere Werte, die infrage kommen können sind:

1 YAHR:

Header set Cache-Control "max-age=29030400, public"

1 WOCHE:

Header set Cache-Control "max-age=604800, public"

Es können auch andere Filetypen hinzugefügt (oder weggelassen) werden, aber die erwähnten sind meist statische Dateien und machen so Sinn.

Schritt 5: Einschalten der GZIP Kompression

Dieser Schritt stellt sicher, dass alle Inhalte vor dem Senden komprimiert werden. Die Logik dahinter ist einfach: es braucht weniger Zeit, Inhalte erst zu komprimieren und später wieder zu de-komprimieren, als das Senden unkomprimierter Inhalte. Im Joomla 3.x kann diese Funktion sehr einfach aktiviert werden:

System > Konfiguration  > Server

GZIP-Komprimierung auf Ja stellen.

Schritt 6: JCH_Optimizer installieren

Der JCH Optimizer enthält eine RIESEN Anzahl an von PageSpeed empfohlenen Funktionen die sich allesamt positiv auf die Wertung von PageSpeed auswirken können. Das Problem ist allerdings, dass einige dieser Funktionen eine Webseite massiv stören können. Es muss also mit Bedacht und Vorsicht vorgegangen werden. Bei unserer Seite war es so, dass wir fast alles aktivieren konnten - abgesehen von wenigen Ausnahmen - das mag allerdings bei andern Seiten völlig anders aussehen, man muss als etwas herumprobieren bis man die optimalen Einstellungen gefunden hat. Eine genaue Beschreibung des JCH Optimizer sprengt allerdings den Rahmen dieses Artikels, ich kann nur sagen: Installiert das Ding und schaltet es ein - Ihr werdet es nicht bereuen.

Hier ein kleiner Auszug aus den vielfältigen Funktionen des Plugins:

"das Plugin fasst alle externen JavaScript und CSS Files in einem zusammen, um kostbare http Requests zu minimieren. Die Files können minimiert und gezippt werden und damit Bandbreite sparen und Ladezeiten weiter zu verkürzen."

Schritt 7: MINIMIEREN der Inhalte - verschreib deiner Seite eine Crash-Diät

Dies ist wirklich GANZ wichtig. Die Seite soll schlank sein - und auch schlank bleiben. Damit, das zu erreichen, sollte man auch die meiste Zeit verbringen. Bei uns hat dieser Schritt allein Wochen gebraucht.

Eine kleine Warnung an dieser Stelle: Vorsicht! Und wiederum Backup, Backup - besonders wenn man sich daran macht (vermeintlich) nicht benötigte Kernkomponenten, Module, Plugins von Joomla zu löschen.

Dieser Schritt sollte wirklich bis zur Erschöpfung weitergeführt werden. ALLES was nicht benötigt wird, soll weg. Auch standardmässig mitgelieferte Dinge, die nicht unbedingt benötigt werden, wie Templates, News Komponente, Weblink Komponente und sämtliche nicht benötigten Plugins. Alles wird deinstalliert - nicht nur deaktiviert. Man fokussiere sich obsessiv auf alles Unnötige; alles nicht gebrauchte soll entfernt werden, wenn nötig werden Module und Plugins zusammengefasst. Beispielsweise kann für Social Buttons ein einziges Plugin eingesetzt werden.

Wird eigenes HTML verwendet, ist es sinnvoll, soviel wie möglich davon in ein einziges Modul zu packen. Bei Foren gilt es, unnötige Kategorien zu löschen, bei Menüs reduziere man die Anzahl Einträge auf das absolut notwendige Minimum. Überbleibsel von alten User Accounts werden entfernt, Kategorien wo immer möglich zusammengefasst. Alte Beiträge werden in den Papierkorb geschmissen, alle Papierkörbe werden geleert. Die Schritte werden iterativ wiederholt, bis alles schlank und rank ist und die Seite gerade noch läuft. Man soll sich für diesen Schritt Zeit nehmen und immer wieder versuchen, doch noch etwas wegzulassen, ohne aber irgendwelche Funktionen zu ruinieren.

Leider haben wir versäumt, darüber Buch zu führen, was wir alles weglassen konnten.

Schritt 8: MINIMIEREN der Anzahl und Grösse der Requests

Man entferne alle überflüssigen Bilder. Externe Bilder werden durch lokale Kopien ersetzt (dies reduziert die Anzahl DNS Lookups, die der Browser machen muss - und die Ladezeiten wiederum verlängern). Eine detaillierte Analyse der Requests in GTMetrix oder Pingdom kann hier hilfreich sein.

GTMetrix hat überdies ein cooles Feature: Bilder können skaliert und optimiert werden. Man kann sich die optimierten Versionen der Bilder herunterladen und auf der Webseite verwenden.

Schritt 9: Verwenden eines Content Delivery Networks

Unter CDN (Content Delivery Networks) versteht man Server, welche Kopien der statischen Elemente einer Seite vorrätig halten, und diese optimiert und schnell ausliefern können - viel schneller als der eigene Webserver. Solche Server sind normalerweise über die ganze Welt verteilt, sodass es wahrscheinlich ist, dass die Inhalte von einem in der Nähe befindlichen Server geliefert werden. Das bedeutet wiederum einen RIESIGEN Geschwindigkeitssprung. Wenn ein CDN aus finanziellen Gründen nicht infrage kommt, es gibt zum Beispiel von CloudFlare ein kostenloses Angebot, das sich schon recht gut für kleinere Seiten eignet.

Schritt 10: Befolge alle Vorschläge von PageSpeed und YSlow

Sowohl PageSpeed als auch YSlow machen detaillierte Verbesserungsvorschläge, wie zum Beispiel dass der verwendete Charaktersatz spezifiziert sein soll, oder dass Bildabmessungen angegeben werden sollen (width = / height = für sämtliche Bilder). All diese Empfehlungen sollten genau befolgt werden. Wenn man einmal mit einer Empfehlung nichts anfangen kann: Google ist dein Freund, hier kann man nachlesen, um was es bei einem Vorschlag genau geht, und wie man ein Problem lösen kann. 'Bad Requests' sind zu vermeiden, man achte darauf, dass es z.B. keine falsch verlinkten Bilder oder Dateien gibt. Das kann allerdings manchmal recht schwierig sein, wenn man nicht genau weiss, was man tut (Beispielsweise haben wir es nicht geschafft, ein Problem mit einem CSS Sprite zu lösen). Scripts von Drittherstellern wie Facebook, Twitter, AdSense und Google lädt man mit Vorteil asynchron - es gibt eine ganze Anzahl Methoden dafür.

PS: Es mag hier Empfehlungen geben, die man nicht befolgen kann, weil sie ausserhalb der eigenen Verantwortung oder der eigenen Seite liegen (z.B. Scripts wie AdSense, Facebook etc. verfügen über einiges an eigener Optimierung). Darüber hat man natürlich keine Kontrolle. Das positive ist, dass dein CDN wahrscheinlich auch solche Scripts optimieren kann. Wenn nicht, mache man sich aber keine grossen gedanken darüber.

Versucht man nun, dies alles in einem iterative Prozess durchzuexerzieren, muss man eigentlich schlussendlich an einem Punkt ankommen, wo man feststellen kann, dass die eigene Seite blitzschnell geworden ist.

Habt ihr gute Resultate erreichen können? Teilt eure Erfahrungen in den Kommentaren!

 

Das Original dieses Artikels wurde von David Attard geschrieben und erschien im Joomla! Community Magazine July 2013

Read 25931 times Tagged under German
Chris Hoefliger

Chris Hoefliger

Chris got involved in Joomla a few years ago (when 1.5.14 was the flavour of the day). But he stayed with Joomla! ever since, is eager and wants to learn the ropes...
«I have a small company and do web pages. I speak both German and English. I'd like to see a bit more content here in my native language and - oops got caught. Yep, I'm trying to do a bit translation work for the team»