Leitfaden 2019 zur Optimierung der Frontend-Performance in Drupal

 

In seinem Buch Frontend Architecture for Design Systems nennt Micah Godbolt von Microsoft vier Säulen der Frontend-Architektur. 

Diese vier Säulen sind:

1. Code – der Ansatz für HTML, CSS und JavaScript eines Design-Systems 
2. Prozess – Abläufe für einen effizienten und fehlerfreien Workflow
3. Testen – die Schaffung einer stabilen Grundlage, auf der Ihre Website aufgebaut ist, und
4. Dokumentation – Tools zur Erstellung von Dokumentationen während der Arbeit

Warum erwähne ich dieses Buch?

Nun, wir alle wissen, dass Drupal 8 mit der Einführung neuer Funktionen erstaunliche Konfigurationseinstellungen für die Performance mit sich gebracht hat. Hinzu kommt die Tatsache, dass, wenn ein Teil der Frontend-Architektur zusammenbricht, die gesamte Performance beeinträchtigt wird (jeder Entwickler würde dem zustimmen). 

Daher präsentiere ich hier vier verschiedene Ansätze und Wege, wie Frontend-Design und -Codierung durchweg erhebliche Verbesserungen erzielen. 

Aber warum ist Frontend-Performance wichtig?

Laut Google verlassen 40 % der Nutzer eine Website, die länger als drei Sekunden zum Laden braucht, was zum Verlust eines Großteils des Publikums, von Konversionen und potenziellen Einnahmen führt. 

Die Wahrheit ist: Es spielt keine Rolle, wie cool Ihre Website ist – wenn sie lange zum Laden braucht, wird sie letztendlich ihr Publikum verlieren.

Frontend-Optimierung ist die Modifikation von HTML, CSS und JavaScript und manchmal auch der Serverkonfiguration, um die Ladezeit der Seite zu verbessern. 

 Die Ziele der Frontend-Performance

Jeder Marketer würde einem Fakt zustimmen: Eine schlecht optimierte Website ist eine Plage für jeden Endnutzer. Mit einer Vielzahl von Problemen wie langsamen Ladezeiten, schlechtem Ranking, mangelnder Mobilfreundlichkeit, Browser-Inkompatibilitäten und so weiter, gibt uns eine unzureichend optimierte Website eine klarere Vorstellung davon, was das Ziel sein muss. Die Ziele umfassen:

1. Besseres Nutzererlebnis

Der aufrichtigste Weg, mit Ihren Kunden in Kontakt zu treten, ist, sich in ihre Umstände und Anforderungen hineinzuversetzen. Je mehr Sie den Kunden geben, desto zufriedener sind sie und desto eher kehren sie zurück. 

2. Zusätzliche SEO-Vorteile

Google bevorzugt schnell ladende Websites. Es betrachtet Links als Stimmen. Der PageRank ist Googles System zur Zählung dieser Stimmen und zur Bestimmung der wichtigsten Seiten.

Wie erreicht man Frontend-Performance-Ziele?

Performance ist eine der Säulen der Webentwicklung, die jeder Entwickler stark und aufrecht halten sollte. Dies kann die erste Reaktion der Nutzer beim Besuch Ihrer Website tiefgreifend beeinflussen. Um die Performance-Ziele zu erreichen, können daher einige der folgenden Faktoren genutzt werden:

1. Komponentenbasiertes Design

Ein komponentenbasiertes Design bietet ein grundlegendes Framework, das dem Trend der Modularisierung folgt und die Entwicklung von Benutzeroberflächen (UI) in inkrementellen Teilen angeht. 

Auf der DrupalCon New Orleans drehte sich alles um die Initiative für komponentenbasiertes Theming in Drupal 8. Atomic Design ist ein wichtiges Beispiel für Methoden, die sich selbst unterstützen können.

Atomic Design ist das Ineinandergreifen von Komponenten, von kleinen Einheiten wie Labels oder Atomen bis hin zu großen Systemen wie einer vollständigen Seitenvorlage.

Die primäre Idee war, Drupal-Themes besser auf der Grundlage von Tabs, Menüs, Formularen, Headern usw. zu strukturieren. 

Drupal bietet eine anständige Sammlung von Themes, die jedoch schwerer sein können als erwartet. Um die Verzögerung beim Laden der Website zu vermeiden, bietet Drupal Sass (Syntactically Awesome StyleSheets). Es macht den Code effizient, indem es ihn mit verschiedenen Komponenten strukturiert.

Einer der Hauptfaktoren hinter der komponentenbasierten Entwicklung ist jedoch das DRY-Prinzip (Don’t Repeat Yourself). Es reduziert das kompilierte CSS, was zu einer verbesserten Performance und weniger zu wartendem Code führt.

Diese Methodik schafft Konsistenz, indem Stile auf grundlegende HTML-Elemente verschoben werden, sodass sie in allen Komponenten wiederverwendet werden können, was wiederum zu einer konsistenteren Entwicklungsrate führt.

Das komponentenbasiertes Design hat eine Evolution in der Frontend-Entwicklung mit sich gebracht. Zusätzlich zur CSS-Kompilierung mit Sass können allgemeine Aufgaben und Tests mit Tools wie Gulp oder Grunt automatisiert werden. Komponentenbasiertes Design für agile Entwicklung kann bedauerlicherweise auch zu Dingen wie aufgeblähtem CSS oder übermäßig spezifischen Selektoren führen.

Im folgenden Beispiel hat das Verschachteln der zweiten Klasse „views-row“ zu doppelt so viel gerendertem CSS geführt, was sich negativ auf die Performance auswirken kann. 

 .block-custom,.views-row{

 width:98.5%;

 display:block;

 border-radius:5px;

 span{

 font-weight:blod;

 font-weight:500;

 }

}

Die Verwendung fortgeschrittener verschachtelter Selektoren in Sass ist großartig, sie kann dazu führen, dass Ihr Code erweiterbar oder sogar leicht wartbar wird.

Nehmen wir ein weiteres Beispiel:

Wir können Image Sprites für den Hintergrund in CSS verwenden. Ein Image Sprite ist eine Sammlung von Bildern, die zu einem einzigen Bild zusammengefasst werden. Dies geschieht, weil eine Webseite mit vielen Bildern viel Zeit zum Laden benötigt und mehrere Serveranfragen generiert. Die Verwendung des Sprites würde diese Serveranfragen reduzieren und Bandbreite sparen. 

Anstatt beispielsweise diese drei separaten Bilder zu verwenden, können wir ein einziges Bild („img_navsprites.gif“) nutzen:

Im folgenden Code gibt das CSS an, welcher Abschnitt des Bildes „img_navsprites.gif“ angezeigt werden soll:

#home {
 width:46px
 height:44px;
 background:
url(img_navsprites.gif) 0 0;

}

2.   Konkatenierung

Konkatenierung ist das Zusammenführen von zwei oder mehr Dateien zu einer einzigen Datei, um den Inhalt schneller zu laden. Konkatenierung wird im Wesentlichen durchgeführt, um die HTTP-Anfragen zu reduzieren und das Caching zu erleichtern. 

Drupal 8 besteht aus einem Konkatenierungs-Plugin, das zum Zusammenführen einzelner Zeichenketten verwendet wird. Der im Plugin verfügbare Schlüssel ist:

• Trennzeichen 

Es wird zwischen die Zeichenketten eingefügt, wie zum Beispiel:

Process:
 new_text_field:
  plugin: concat
  source:
    - foo
    - bar

 

Sie können auch ein Trennzeichen angeben.

process:
 new_text_field:
  plugin: concat
  source:
   - foo
- bar
  delimiter: 

3.   Minifizierung

Minifizierung ist der Prozess des Entfernens unnötiger Zeichen aus dem Quellcode, ohne die Funktionalität zu beeinträchtigen. 

Das Drupal Minify-Modul bietet einen Mechanismus, um die Seite mit der minifizierten Version von HTML- und JavaScript-Dateien zu rendern. Minify eliminiert Kommentare und Leerzeichen, was zur Reduzierung der Dateigröße beiträgt. Je kleiner die HTML- und Dateigröße, desto besser die Seitenladezeit und die Website-Performance.

• HTML Minify

HTML Minify entfernt alle Leerzeichen vor und nach HTML-Tags sowie unnötige Zeilenumbrüche.

• JavaScript Minify

Es eliminiert alle Leerzeichen vor und nach den HTML-Tags. Zum Beispiel:

Vor der Minifizierung

function hello(name){
 alert('Hello, ' + name);
}
hello('New user');

Nach der Minifizierung

function hello(a){alert("Hello, "+a)}hello("New user");

Originalgröße: 100 Bytes gzipped (90 Bytes unkomprimiert)
Kompilierte Größe: 68 Bytes gzipped (55 Bytes unkomprimiert) 

4.   Aggregation

Aggregation konkateniert und minifiziert Assets zu kleineren Dateien. Sie kombiniert idealerweise alles zu einer CSS-Datei und einer JavaScript-Datei, um die Anzahl der zu verwaltenden Dateien zu reduzieren. Die besten Praktiken für die Frontend-Performance ist die Kombination von Seitenressourcen zu wenigen Anfragen.

Der Drupal-Core bietet eine Out-of-the-Box-Alternative, um genau dies mit CSS und JavaScript zu tun, die von Drupal-Core zu Seiten hinzugefügt werden können. Standardmäßig werden die Dateien einzeln im HTML-Markup zur Seite hinzugefügt, was Dutzende von HTTP-Anfragen auf jeder Seite bedeutet, da jede Datei einzeln vom Browser angefordert wird. 

Wenn Assets zur Seite hinzugefügt werden, werden sie daher mit bestimmten Metadaten und Informationen darüber hinzugefügt, ob sie Teil der Basisanwendung, eines Moduls oder des Themes sind.

Das Advagg-Modul ist eine der besten Funktionen von Drupal. Es unterstützt die Aggregation von CSS- und JavaScript-Dateien. Viele kleine Dateien werden zu einer Handvoll größerer Dateien zusammengefasst, um TCP-Verbindungen zu sparen, Leerzeichen zu entfernen, die Dateigröße zu reduzieren usw. 

Die CSS-Dateien werden von Leerzeichen und Kommentaren befreit. Für die JavaScript-Dateien wird keine Vorverarbeitung durchgeführt, aber verschiedene JavaScript-Core-Dateien werden minifiziert, und das Speedy-Modul hilft, indem es diejenigen, die nicht minifiziert sind, durch minifizierte Versionen ersetzt.

Das Drupal-Aggregationsmodul führt die folgenden Aufgaben aus:

• Beim Erstellen von HTML-Seiten, Modulen und Themes können Sie CSS und JavaScript hinzufügen, die als Teil der gesamten Anfrage bereitgestellt werden.
   
• Beim Rendern von CSS und JS im HTML-<head> und im Footer werden Dateien in Gruppen zusammengefasst (z. B. um verschiedene Gruppen für verschiedene Media Queries zu ermöglichen). Die Gruppen werden gehasht, um einen eindeutigen Dateinamen zu erstellen. Wenn die Datei nicht existiert, wird sie innerhalb der Hauptseitenanfrage erstellt und auf der Festplatte gespeichert, sodass der Browser die aggregierten Dateien von der Festplatte lesen kann.

Anstatt Dateien in der Hauptseitenanfrage zu erstellen, werden URLs zu den Dateien generiert. Ein Seiten-Controller am Dateipfad fängt alle Anfragen für fehlende Dateien ab und erstellt sie verzögert, wobei er sie auf die Festplatte schreibt, damit die nächste Anfrage die Datei direkt von der Festplatte abrufen kann. Drupal 8 erfordert, dass alle Assets über eine Bibliothek registriert werden, was bedeutet, dass anstelle vieler einzelner Dateien pro Seite meist nur eine Handvoll Bibliotheken (die Hunderte von Dateien enthalten können) hinzugefügt werden. 

Diese Methode hilft, die Dateigröße auf ein Niveau zu reduzieren, bei dem nicht nur die Performance der Website steigt, sondern auch die Ladezeit der Seite positiv beeinflusst wird.

5.   Asset-Bibliothekssystem

Sobald das Sass-Refactoring abgeschlossen ist und die CSS-Dateien schlank sind, können Sie Ihre eigenen Bibliotheken in Drupal 8 definieren. Dies geschieht alles mithilfe einer Asset-Bibliothek. Basisstile, Layouts und die Komponenten haben alle Kategorien, die das mit der Website geladene Gewicht verwalten. Das Gruppieren von JavaScript und CSS für eine Komponente in einer Bibliothek und das Definieren von Abhängigkeiten zum Core (oder sogar zu einer anderen Bibliothek in Ihrem Theme) führt zu weniger Ladeaufwand. 

Dieser Abhängigkeitsteil stellt sicher, dass alles Notwendige für die Komponente vorhanden ist. Er umfasst Komponenten wie Navigation und Header, was es den Teammitgliedern oder zukünftigen Code-Maintainern erleichtert.

nav:
 version: 1.x
css:
 component:
  css/components/nav/nav.css:{}
header:
 version: 1.x
css:
 component:
  css/components/header/header.css:{}
js:
 src/components/header/header.js:{}
dependencies:
 - core/jquery
 - my_theme/nav

Dann können Sie die Komponentenbibliothek an die entsprechenden Komponenten wie Twig-Dateien anhängen, vorverarbeiten oder eine bestehende Bibliothek überschreiben (oder sie einfach überall laden).

/**
 *@file
 *Theme override to display the header region.
 */
{{ 
attach_library('my_theme/header') 
}}
<header class="header">...</header>

6. Serverseitige Konfiguration

Die meisten beliebten Drupal-Websites verwenden den Apache HTTP-Server, der seine eigenen Performance-Einschränkungen mit sich bringt. Doch diese Einschränkungen können umgangen werden, was Ihre Drupal-basierte Website zu einem Hochleistungs-System machen kann. Um Performance-Probleme zu beheben, können Sie mehrere Schritte unternehmen. Dazu gehören:

• Ersetzen des Apache-Servers durch NGINX als Webserver für die Drupal-Website. Dies würde die Performance der Website verbessern und die Speichernutzung drastisch reduzieren, wenn Tausende von Verbindungen gleichzeitig laufen.
   
• Implementierung eines Reverse-Proxy-Servers. NGINX ist einer der bekanntesten Reverse-Proxy-Server für Drupal-Websites. Er implementiert einen Reverse-Proxy-Server, entlastet Ihren Anwendungsserver von der Kontrolle des massiven Datenverkehrs und ermöglicht eine Leistungssteigerung. 
   
• Implementierung eines Reverse-Proxy-Servers. Sie können einen physischen Server hinzufügen, einen Server in der Cloud integrieren oder eine Mischung aus Ressourcen nutzen, um das gesamte Wachstum und den Anstieg der Nachfrage zu unterstützen.
   
• Beim Betrieb mehrerer Server benötigen Sie nun die Möglichkeit, die Performance über diese hinweg zu überwachen. Dies würde Ihnen ermöglichen, die Performance der Website zu verwalten. 

7.  Bildoptimierung 

Die Optimierung der Bildgröße spielt eine wichtige Rolle für die Performance; sie hilft, die Verarbeitungszeit der Webseite zu reduzieren, indem Bilder im Frontend-Workflow komprimiert werden. 

Das Drupal-Modul ImageAPI Optimize hilft bei dieser Aufgabe. Dieses Modul ermöglicht es Ihnen nicht nur, Optimierungspipelines zu erstellen und an Bildstile anzuhängen, sondern auch sowohl websiteweite als auch bildstilbezogene Optimierungen einzustellen.

Wie überwacht man die Performance?

Dies kann mithilfe von Frontend-Tests erfolgen. Frontend-Tests werden im Wesentlichen als Tests der grafischen Benutzeroberfläche (GUI), der Funktionalität und der Benutzerfreundlichkeit der Website oder Anwendung bezeichnet. Sie können verschiedene Tools zur Performance-Überwachung verwenden, wie zum Beispiel:

• Yslow

Yslow wird verwendet, um die Seite zu analysieren und die Gründe für ihre Langsamkeit aufzuzeigen. Die Seitenladezeiten können erheblich reduziert und das Nutzererlebnis verbessert werden, indem das Tool ausgeführt und seine Checklisten-ähnlichen Vorschläge umgesetzt werden.

• Chrome DevTools

Chrome DevTools sind eine Reihe von Webentwickler-Tools, die direkt in den Google Chrome-Browser integriert sind. DevTools werden verwendet, um Seiten spontan zu bearbeiten und Probleme schnell zu diagnostizieren, was Ihnen letztendlich hilft, bessere Websites zu erstellen.

• WebPageTest

Webpagetest ist eines der beliebtesten und kostenlosen Tools zur Messung der Webseiten-Performance. Es ermöglicht Ihnen, Web-Performance-Tests auf Ihrer Website von verschiedenen Standorten weltweit und in verschiedenen Browsern durchzuführen.

Fallstudie: Verbesserung der Performance von oxfamireland.org

Die Website von Oxfam Ireland war ästhetisch ansprechend, aber nie wirklich schnell. Basierend auf Drupal wurde ihre Performance wie folgt verbessert: 

Strategien zur Verbesserung der Website

Ein vollständiges Redesign oder eine Neuentwicklung war nicht im Rahmen, daher war das einfachste Tool, das uns zur Verfügung stand, das Advanced Aggregation Modul. Dieses Modul war ein unkompliziertes „Set-and-Forget“-Modul, das jedoch eine sorgfältige Konfiguration und Tests erforderte, um die entscheidenden Ergebnisse zu liefern.

Das Hauptziel war es, so viel render-blockierendes JavaScript wie möglich aus dem Header des HTML-Dokuments in den Footer zu verschieben. Die Optimierung der „Bundles“ der CSS- und JavaScript-Aggregation wurde durchgeführt, die das JavaScript als Teil des Aggregationsprozesses generierte und minifizierte.

Ergebnisse

Mit der Verbesserung der Seitengeschwindigkeit verbesserte sich auch die Nutzerbindung. Die Ergebnisse sprachen für sich.

Die Aufrufe auf der Startseite stiegen von 7268 auf 8373, eine Verbesserung von 12,98 %. 

Die wiederholten Aufrufe sanken von 5487 auf 4702.

Die Seite „Mitmachen“ verzeichnete einen Anstieg von 10 % bei neuen Nutzern und 3 % bei wiederkehrenden Nutzern.

Fazit

Performance spielte und wird immer eine entscheidende Rolle für den Erfolg jedes Online-Vorhabens spielen. So viel Drupal auch zur Verbesserung der Performance Ihrer Website bietet, der richtige Anbieter kann Ihnen helfen, diese Tools und Funktionen effektiv zu nutzen. 

Bei OpenSense Labs verstehen wir, wie wichtig Ihre Website für Sie ist. Kontaktieren Sie uns unter [email protected], um eine ganzheitliche Perspektive zur Verbesserung der Frontend-Performance Ihrer Website zu erhalten.