Drupal: Effektive Pagespeed und Performance Optimierungen

Neben den Inhalten ist kaum etwas wichtiger für ein hohes Ranking bei Google als die Performance einer Seite. Drupal 8 ist out-of-the-box schon alles andere als langsam, dennoch kann man mit bestimmten Techniken und Tuning-Tricks noch einiges an Geschwindigkeit herausholen. Hier stellen wir die Wichtigsten vor:

Tailwind

Moderne CSS Frameworks wie Bootstrap oder Foundation nehmen einem viel Arbeit ab, können die Performance einer Seite aber auch negativ beeinflussen. Durch ihren “all-in-one”-Ansatz sind beide Lösungen relativ groß (Bootstrap ca. 120kb, Foundation ca. 65kb), zusätzlich kommt natürlich noch das für das Design der Seite notwendige selbstgeschriebene CSS, welches oft weitere 100 – 200kb schwer ist.

Abhilfe schafft Tailwind CSS: Durch einen neuen “utility first”-Ansatz ist meistens gar kein eigenes CSS mehr nötig, was sich natürlich in der übertragenen Datenmenge widerspiegelt: Stylesheets unter 10kb sind mit Tailwind keine Seltenheit. Gerade im mobile Bereich wirkt sich das direkt auf die Ladegeschwindigkeit der Seite aus.

Vanilla JavaScript

Ähnlich wie bei den CSS Frameworks verhält es sich mit den bekannten JavaScript Frameworks. Vor ein paar Jahren führte kein Weg an jQuery vorbei, mittlerweile ist das “reine” JavaScript (“vanilla”) aber usability- und featuretechnisch auf der gleichen Ebene. Verzichtet man auf jQuery, spart man sich etwa 30kb, aber auch die Laufzeitperformance von Vanilla JS ist deutlich besser.

Bilder

Ein Bild sagt mehr als tausend Worte: Auf modernen Webseiten sind viele Bilder unerlässlich. Das kann sich aber schnell auf die Ladegeschwindigkeit der Seite auswirken. Je höher die Auflösung eines Bildes, desto mehr Daten müssen übertragen werden. Hier helfen Techniken wie Lazy Loading und Responsive Image Styles. Ersteres sorgt dafür, dass Bilder nur dann geladen werden, wenn sie angezeigt werden sollen. Normalerweise lädt der Browser des Besuchers immer alle Bilder auf der Seite, egal ob diese sichtbar sind oder nicht. Mit Lazy Loading werden nur die Bilder im Sichtbereich geladen. Scrollt der Nutzer weiter, werden nach und nach die restlichen Bilder übertragen. Ein anderes Problem können verschiedene Endgeräte darstellen. Auf einem Mobiltelefon macht es keinen Sinn, Bilder in der gleichen Qualität auszuliefern wie auf einem Desktoprechner oder einem Tablet, da sie deutlich kleiner dargestellt werden und man hier viel Bandbreite sparen kann. Responsive Image Styles schaffen Abhilfe, indem für jedes Endgerät das passende Bild ausgeliefert wird. Hochgeladen werden muss trotzdem nur eine Version, um die Skalierung kümmert sich Drupal.

Drupal Caching

Damit dynamische Inhalte nicht bei jedem Seitenaufruf neu berechnet werden müssen, gibt es in Drupal mehrere Caching Mechanismen: Je nach Art des Inhalts greift entweder der Page Cache oder der Dynamic Page Cache. Für statische Inhalte, z.B. Landing Pages oder Artikel ist der Page Cache zuständig - hier wird die komplett berechnete Seite gecached, so dass eine Zugriffszeit von etwa 50ms möglich ist. Schwieriger gestaltet es sich bei dynamischen Elementen, wie etwa Kommentaren und Warenkörben. Dies übernimmt der Dynamic Page Cache, welcher dafür sorgt, dass alle statischen Elemente einer Seite gecached werden und die dynamischen Inhalte über ein Platzhaltersystem geladen werden. Im Vergleich zum Page Cache ist der Dynamic Page Cache mit Zugriffszeiten von ca. 250ms zwar langsamer, aber immer noch deutlich schneller als eine ungecachte Seite (etwa 2-3s).

Fastly

Am schnellsten ist Drupal dann, wenn es gar nichts machen muss. Mit Hilfe eines CDNs (Content Delivery Network) wie Fastly ist dies möglich: Drupal kümmert sich einmalig um das Berechnen der Seite, Fastly holt das Ergebnis ab und cached es auf ihren Servern. Der Seitenbesucher bekommt direkt von Fastly die fertig berechnete Seite ausgespielt. Fastly besitzt Server auf der ganzen Welt, und es wird automatisch der dem Besucher nächste ausgewählt. Die Integration von Drupal und Fastly funktioniert reibungslos, so dass die von Fastly gecachten Seiten automatisch aktualisiert werden, wenn sich an den Inhalten in Drupal etwas ändert.