Zu Höchstleistungen auflaufen: Der Drupal-Effekt auf Hochleistungs-Websites

Bei seinem letzten Auftritt bei den Leichtathletik-Weltmeisterschaften 2017 belegte Usain Bolt im 100-Meter-Lauf mit einer knappen Niederlage den dritten Platz und hinterließ dabei eine spürbare Lücke. Bolt beendete das Rennen nur eine Hundertstelsekunde hinter seinen Konkurrenten.

Jede (Nano-)Sekunde zählt!

So wichtig ist Geschwindigkeit, dass selbst ein dreifacher Olympiasieger, Usain Bolt, den Preis für diese Nanosekunden zahlen musste. Jemand könnte fragen: „Wie fange ich an, etwas über Web-Performance zu lernen?“

Stellen Sie sich vor, es ist Mega-Buchverkaufstag und die Bücherwürmer strömen zu den leistungsstärksten Online-Shops, die Bücher renommierter Autoren verkaufen. Um mit einem solch enormen Andrang fertigzuwerden, würde eine Website mit deutlich schnellerer Ladezeit den etwas trägeren vorgezogen werden. Drupal bietet eine hervorragende Plattform für eine effektive Website-Performance-Optimierung, die sie schneller und benutzerfreundlicher macht.

Die Bedeutung der Website-Performance-Optimierung

Web-Performance-Optimierung umfasst die Überwachung, Analyse und Bewertung der Leistung von Webanwendungen sowie die Identifizierung von Best Practices zu deren Verbesserung.

Webanwendungen sind eine Kombination aus serverseitigem und clientseitigem Code. Um die Web-Performance zu verbessern, müssen beide Seiten optimiert werden.

Die clientseitige Optimierung bezieht sich auf die anfängliche Seitenladezeit, im Browser ausgeführten JavaScript-Code, das Herunterladen aller im Webbrowser sichtbaren Ressourcen usw.

Die serverseitige Optimierung bezieht sich auf Datenbankabfragen und andere Anwendungsabhängigkeiten, um zu prüfen, wie lange die Ausführung von Anfragen auf dem Server dauert.

Performance-Optimierung ist aufgrund der folgenden Faktoren von Bedeutung:

Nutzerbindung

Die BBC stellte fest, dass sie 10 % der Nutzer verlieren, für jede zusätzliche Sekunde, die ihre Website zum Laden benötigt. Auch DoubleClick by Google fand heraus, dass, wenn die Webseite länger als 3 Sekunden zum Laden brauchte, 53 % der mobilen Website-Besucher dazu neigen, die Seite zu verlassen.

 

Wir alle streben danach, dass unsere Nutzer eine sinnvolle Interaktion mit dem, was wir für das Web entwickelt haben, eingehen.

Wenn es sich also um einen Online-Shop handelt, möchten Sie, dass potenzielle Besucher zu Käufern werden. Oder wenn es sich um eine soziale Netzwerk-Webanwendung handelt, möchten Sie, dass Ihre Online-Besucher sich in einer fesselnden Interaktion miteinander vertiefen. Leistungsstarke Websites spielen eine entscheidende Rolle bei der Gewinnung und Bindung von Nutzern.

Eine Steigerung der Nutzerbindung um 5 % kann zu einer Gewinnsteigerung von bis zu 95 % führen.

Es kostet 5- bis 25-mal mehr, neue Kunden zu gewinnen. Eine 5%ige Verbesserung der Kundenbindung kann daher zu einer Gewinnsteigerung von 25-95% führen.

Durch die Neugestaltung ihrer Webseiten konnte Pinterest eine 40%ige Reduzierung der wahrgenommenen Wartezeiten erreichen und verzeichnete einen Anstieg des Suchmaschinen-Traffics und der Anmeldungen um 15 %.

COOK, ein Anbieter hochwertiger Tiefkühlgerichte, konnte die durchschnittliche Seitenladezeit um 850 Millisekunden reduzieren, was zu einer Steigerung der Konversionen um 7 %, einem Anstieg der Seiten pro Sitzung um 10 % und einer Verringerung der Absprungrate um 7 % führte.

Verbesserte Konversionen

Nutzerbindung führt letztendlich zu besseren Konversionsraten. Langsame Websites können enorme Auswirkungen auf die Geschäftseinnahmen haben. Eine bessere Performance von Websites kann äußerst profitabel sein, um die Einnahmen zu steigern.

Laut dem 2016 Q2 Mobile Insights Report von Mobify wurde eine Steigerung der sitzungsbasierten Konversion um 1,11 % für jede 100 ms Verringerung der Ladezeit der Startseite festgestellt. Zudem wurde eine Steigerung der sitzungsbasierten Konversion um 1,55 % für jede 100 ms Verringerung der Ladezeit der Checkout-Seite beobachtet. Das Ergebnis war eine Steigerung des durchschnittlichen Jahresumsatzes um etwa 530.000 US-Dollar.

Auch AutoAnything steigerte seine Umsätze um 12-13 %, nachdem die Seitenladezeit halbiert wurde.

Nutzererlebnis

Wenn Websites Unmengen an Code ausliefern, bleibt die Leistung unzureichend, da Browser auf langsamen Netzwerken Megabytes davon verarbeiten müssen. 

Selbst Geräte mit begrenzter Rechenleistung und Speicher können Schwierigkeiten haben, mit einer geringen Menge unoptimierten Codes zurechtzukommen. Wenn schlechte Performance im Mittelpunkt steht, nehmen die Anwendungsreaktionsfähigkeit und -verfügbarkeit ab.

Besser optimierter Code führt zu hochfunktionellen und leistungsstärkeren Websites, die wiederum das digitale Nutzererlebnis verbessern.

Strategien für die Web-Performance

Die Formulierung von Strategien zur Verbesserung der Web-Performance kann auf zwei Arten erfolgen:

Bottom-up-Strategie

Auch bekannt als Performance-by-Design, ist die Bottom-up-Strategie der bevorzugte Ansatz, um Performance als zentrales Entwicklungsprinzip zu integrieren. Bei dieser Strategie werden die Prinzipien der Performance-Optimierung festgelegt, angewendet und gepflegt. Dies geschieht direkt ab der Anwendungsdesignphase. 

Die wichtigsten Phasen dieses Ansatzes sind unten aufgeführt:

• Performance-Prinzipien werden festgelegt.
• Die wichtigsten Seiten/Transaktionen werden identifiziert, entsprechend optimiert und anschließend die Performance-Prinzipien umgesetzt.
• Performance-SLAs (Service Level Agreements) werden überwacht und gepflegt.

Eine Grafik von Infosys erklärt dies am besten: 

Top-down-Strategie

Wenn eine bestehende Anwendung für die Performance optimiert werden muss, kommt die Top-down-Strategie ins Spiel. Dies ist eine bevorzugte Option nur, wenn Legacy-Anwendungen für hohe Performance optimiert werden. Zudem ist dies nicht kosteneffizient und die Optimierungsoptionen sind begrenzt.

Die Schritte dieser Strategie sind wie folgt:

1. Faktoren, die zur Seiten-Performance beitragen, werden mithilfe von Tools wie PageSpeed Insights, WebPageTest usw. bewertet.
2. Aktivitäten, die zu maximalen Performance-Verbesserungen führen würden, werden optimiert.
3. Weitere Optimierungen werden mit nachfolgenden Releases iterativ implementiert.

Zusätzlich zu diesen Strategien muss eine wichtige Methodik namens „Performance Budgeting“ berücksichtigt werden. Dies bedeutet, einen Performance-Schwellenwert festzulegen, den Sie einhalten möchten. Sie können die Geschwindigkeit Ihrer Website schützen und Leistungsrückgänge erkennen, indem Sie ein Performance-Budget festlegen, um die Performance kontinuierlich im Auge zu behalten.

So machen wir es!

Die erwartete Ladezeit und der Google Page Speed Score, wie unten dargestellt, bilden den Kern unseres kontinuierlichen und iterativen Entwicklungsprozesses.

Die obige Grafik zeigt, dass wir bei der Anwendung der Performance-Budgeting-Methodik Folgendes beachten:

1. Durchschnittliche Ladezeit von 2 Sekunden oder weniger
2. Definierte maximale Begrenzung der Seitengröße und Anzahl der HTTP-Anfragen
3. Überprüfung aller serverseitigen Optimierungen für eine effiziente und reaktionsschnelle Website
4. Google Page Speed Performance-Bewertung von über 90
5. Implementierung der Performance-Optimierung

Implementierung der Performance-Optimierung

Wie beschleunige ich die Performance meiner Drupal-Website? Drupal ist mit einer enormen Menge an Funktionen ausgestattet, die, wenn sie intelligent implementiert werden, zu superschnellen Seitenladezeiten führen können. Es gibt verschiedene Techniken, um Ihre Website durch die Nutzung der erstaunlichen Funktionen von Drupal schneller zu machen.

Ihre Website und Module aktuell halten

Veraltete Module können Ihre Bemühungen zur Beschleunigung Ihrer Website behindern. Daher ist es wichtig, jedes auf Ihrer Drupal-Website aktivierte Modul zu aktualisieren.

Nicht verwendete Module deinstallieren

Wie bei veralteten Modulen ist es wichtig, Module im Auge zu behalten, die selten oder gar nicht mehr verwendet werden. Die Anzahl der auf der Website installierten Drupal-Module ist direkt proportional zur Zeit, die für die Code-Ausführung benötigt wird, was die Seitenladezeit beeinflusst. Das Deinstallieren unerwünschter Module kann die Ausführungszeit verkürzen.

Darüber hinaus trägt das Deaktivieren von Modulen ebenfalls zur Ausführungszeit des Codes bei. Eine vollständige Entfernung durch Deinstallation ungenutzter Module kann die Drupal-Website daher beschleunigen.

Cache optimieren

Die Optimierung des nativen Caching-Systems stellt sicher, dass alle Webseitenkomponenten an einem leicht zugänglichen Ort gespeichert werden, nachdem ein Nutzer Ihre Website zum allerersten Mal besucht hat. Wenn der Nutzer Ihre Website also erneut besucht, werden die Seitenelemente aus dem Cache geladen, was zu einer erhöhten Seitenladezeit führt.

Drupal bietet erweiterte Caching-Möglichkeiten mit einer Reihe großartiger Module:

• Das Internal Page Cache Modul hilft beim Caching von Webseiten für anonyme Nutzer, um die Geschwindigkeit für nachfolgende Nutzer zu erhöhen.
   
• Das Dynamic Page Cache Modul speichert Webseiten für anonyme und authentifizierte Nutzer im Cache und wird für Websites aller Bildschirmgrößen empfohlen.
   
• Das BigPipe Modul ermöglicht es Ihren Nutzern, die unveränderten, cachefähigen Seitenelemente schnell zu sehen, während der personalisierte Inhalt anschließend angezeigt wird. Diese Technologie wurde von Facebook inspiriert. Die stark verbesserte Render-Pipeline und Render-API von Drupal 8 sind dabei eine große Hilfe.
   
• Das Redis Modul hilft bei der Integration von Drupal mit dem Redis Key-Value-Store und bietet so ein robustes Caching-System für statische Seiten.
   
• Das Varnish Modul ermöglicht die Integration von Drupal-Websites mit einem fortschrittlichen und schnellen Reverse-Proxy-System – Varnish Cache –, um statische Dateien und unbekannte Seitenaufrufe schneller und in großen Mengen bereitzustellen.

Datenbank optimieren

Website-Programmierung ist nicht das Einzige, was optimiert werden kann. Optimierung der Datenbank durch regelmäßiges Bereinigen der Daten und Entfernen unerwünschter Informationen.

Das Memcache API and Integration Modul hilft bei der Integration von Drupal und Memcached. Es speichert Ihre Daten für eine begrenzte Zeit im aktiven Speicher, wodurch der Zugriff beschleunigt wird. 

Anstatt ständig Abfragen an die Datenbank zu senden, sind die Informationen sofort verfügbar. Ein solches System funktioniert auch bei Shared-Webhosting-Paketen.

Ein Content Delivery Network (CDN) integrieren

Komponenten wie CSS, JavaScript und Medien werden von einem CDN gehostet und den Online-Besuchern vom nächstgelegenen Standort aus bereitgestellt. Dies kann dazu beitragen, die Seitenladezeit zu verkürzen, indem Webseitenkomponenten schnell ausgeliefert werden.

Das Drupal-Modul CDN hilft bei der Integration eines Content Delivery Networks für Drupal-Websites. Es ändert die Datei-URLs, sodass Dateien wie CSS, JavaScripts, Bilder, Videos und Schriftarten vom CDN anstatt von Ihrem Webserver heruntergeladen werden.

Bandbreite optimieren

Die Aggregation aller CSS- und JavaScript-Dateien, damit sie zusammen geladen werden, ist das, was Bandbreitenoptimierung bedeutet. Eine solche Parallelverarbeitung stellt sicher, dass alle Seitenelemente von den Nutzern nahezu sofort gesehen werden können.

Bilder optimieren

Der Drupal 8-Core ist mit einer Bildoptimierungsfunktion ausgestattet, um das Kompressionsverhältnis der Bilder einzustellen und die Seiten-Performance zu optimieren.

Darüber hinaus kann die Größe der Bilder für verschiedene Bildschirmgrößen in Drupal 8 optimiert werden, um die Seitenladezeit zu verbessern.

Umgang mit 404-Fehlern

Immer wenn etwas auf der Website kaputtgeht und einen 404-Fehler verursacht, kann dies zu Trägheit führen. Zum Beispiel kann ein fehlgeschlagenes Bild die Performance der Website beeinträchtigen. Drupal 8 bietet ein Modul namens Fast 404, das Ressourcen besser nutzt, Dateien auf eine Whitelist setzt und Problem-Pfade überprüft.

Verwaltung der Nutzung von CSS und JavaScript

CSS und JavaScript bieten wunderbare Methoden für Anpassung und Flexibilität. Doch zu viel des Guten kann für Ihre Websites problematisch sein. Die Vermeidung übermäßiger Verwendung von CSS-Dateien und JavaScript sowie die Minimierung des Codes können die Performance verbessern.

Advanced CSS/JS Aggregation, ein Drupal-Modul, kann helfen, Ihre Frontend-Performance im Auge zu behalten, indem es CSS- und JavaScript-Dateien aggregiert, um die Geschwindigkeit zu verbessern.

Lazy Loading verwenden

Lazy Loading oder On-Demand-Laden ist eine perfekte Methode, um die Performance Ihrer Website zu optimieren. Bei dieser Methode teilen Sie Ihren Code an logischen Bruchstellen auf und laden ihn dann, sobald der Nutzer etwas getan hat, das einen neuen Codeblock erfordert.

Grundsätzlich werden bei traditionellen Websites alle Bilder und Inhalte in den Webbrowser vorgeladen, wenn jemand die Website aufruft. Lazy Loading lädt diese Elemente, sobald ein Nutzer scrollt, um Inhalte anzuzeigen.

Blazy, ein Drupal-Modul, bietet die Funktionen des Lazy Loadings und des Multi-Serving von Bildern, um Bandbreite und Serveranfragen zu sparen.

Besseres Webhosting

Es ist von größter Bedeutung, dass Sie bei der Umsetzung aller möglichen Tipps und Tricks und der Nutzung der erstaunlichen Funktionen von Drupal den besten Webhosting-Anbieter wählen, der die ultimative Geschwindigkeit, Stabilität und Sicherheit Ihrer Website bestimmt.

Server-Hardware aufrüsten

Serverskalierung ist von größter Bedeutung, um die Website zu optimieren. Dazu können Sie die Server-Hardware entweder vertikal oder horizontal skalieren. Beim vertikalen Skalieren werden mehr Ressourcen auf denselben Server gelegt, was als der einfachste Ansatz zur Hardware-Skalierung gilt. Beim horizontalen Skalieren werden weitere Server hinzugefügt, um die Last zu verteilen. Dieser Ansatz kann, wenn er gut umgesetzt wird, die Last minimieren, die ein einzelner Server erhält. Falls Sie mehrere App-Server für Drupal haben, benötigen Sie eine Methode, um Code gleichzeitig auf jedem Server bereitzustellen. Zum Beispiel können platform.sh und pantheon.io das gesamte Hosting-Setup für Sie verwalten, aber wenn Sie es selbst handhaben, benötigen Sie ein rsync-Setup oder Git-Push auf jeden Ihrer Server usw.

Fallstudie

Die Drupal-Website von Farm Journal’s MILK wurde mithilfe eines sorgfältig erstellten Audit-Berichts von Opensense Labs für hohe Performance und bessere Suchmaschinenrankings optimiert.

In diesem Abschnitt konzentrieren wir uns darauf, wie wir unsere Drupal-Expertise zur Lösung der Performance-Probleme eingesetzt haben.

Projekthighlights

Zuvor getrennte CSS- und JS-Dateien wurden separat gecacht, was die Seitenladezeit erhöhte. Wir haben all diese Dateien aggregiert und an einem Ort zusammengeführt, was die Seitenladezeit verkürzte.

Darüber hinaus haben wir das Drupal-Modul Advanced CSS/JS Aggregation verwendet, um CSS, JS und HTML zu minifizieren und die Ladezeit zu reduzieren.

Zusätzlich dazu haben wir Redis aktiviert, das als Datenbank, Cache und Message Broker verwendet wird, sodass es als Backend anstelle von MySQL genutzt werden kann. Dies ermöglichte ein schnelles Abrufen von gecachten Elementen und verbesserte die Performance.

Projektergebnis

Beim Testen der Performance-Metriken mit Tools wie PageSpeed Insights und Pingdom stellten wir eine signifikante Verbesserung fest.

PageSpeed Insights

• Ergebnis auf Mobilgeräten

 

 

• Ergebnis auf dem Desktop

 

 

Pingdom

 

 

Fazit

Geschwindigkeit kann der entscheidende Faktor dafür sein, wie viel Zeit ein Online-Nutzer auf Ihrer Website verbringt. Es ist wichtig, dass Sie die Trägheit von Ihrer Website beseitigen und Verbesserungen in deren Performance einleiten. Drupal 8 kann dabei helfen, indem es wunderbare Funktionen integriert, um Ihre Website zu einem leistungsstarken Raum zu machen.

Kontaktieren Sie uns gerne unter [email protected] für die Entwicklung einer hochperformanten Drupal-Website