Optimieren Sie Ihre Website mit fortschrittlicher CSS-JS-Aggregation

Sie haben eine Highspeed-Internetverbindung und sehr leistungsfähige Hardware, aber die Seiten einer Website brauchen zu lange zum Laden. Sie versuchen alles Mögliche, um die Ursache des Problems zu finden, aber ohne Erfolg. Was ist also das Problem? Warum ist Ihre Website so langsam?

Werfen wir einen Blick darauf, was wahrscheinlich die Ursache für die langsame Ladezeit Ihrer Website ist. 

Die Ladezeit einer typischen Webseite hängt hauptsächlich von der Anzahl der CSS-Stylesheets, Skripte, HTML, Größe und Anzahl der Bilder, dem Seiten-Caching, CDN, DNS-Lookup usw. ab. Daraus können Sie ableiten, dass Sie für eine schnellere Ladezeit zumindest die oben genannten Attribute optimieren müssen.

Die Performance Ihrer Website ist entscheidend für das Wohlbefinden, tatsächlich beeinflusst die Performance Ihrer Website Ihr Geschäftsergebnis.  

Core Drupal enthält zwar ein Performance-Menü, aber die Optionen bieten nur Bandbreitenoptimierung und Cache-Verwaltung, was meiner Meinung nach sehr begrenzt ist. Um die Performance besser in den Griff zu bekommen, können Sie das Modul Advanced CSS/JS aggregation verwenden. Dieses beinhaltet Cache-Verwaltungs- und Bandbreitenoptimierungsoptionen zusammen mit anderen Anpassungsoptionen wie DNS-Prefetch, .gz/.br-Komprimierungsoptionen, CDN, CSS-Minifizierung usw.

Lassen Sie uns tiefer eintauchen und die verschiedenen Anpassungsoptionen dieses Moduls untersuchen.

So funktioniert es

• Navigieren Sie zu Home > Administration > Konfiguration > Entwicklung > Performance 
   
• Sehen Sie sich die angebotenen Anpassungsoptionen an:

Konfigurations-Tab:
Dieser Tab enthält globale Optionen, Komprimierungsoptionen, CSS-Optionen, JS-Optionen, CRON-Optionen und obskure Optionen (kein Witz). 

1. Deaktivieren Sie vorübergehend die Adavgg-Funktionalität, indem Sie das allererste Kontrollkästchen aktivieren.
    
2. Diese Option aktiviert DNS-Prefetching für externes CSS/JS.
   
   DNS-Prefetch versucht, Domainnamen für Links aufzulösen, bevor ein Benutzer darauf klickt. Dies spart im Durchschnitt etwa 200 Millisekunden Navigationszeit.
    
3. Auf einigen Websites, hauptsächlich Social-Media-Plattformen, sind die URLs konsistent und werden nicht aktualisiert, wenn ein Benutzer auf "Neu laden" klickt. Die einzige Aktualisierung erfolgt an der Sub-Resource-URL, wenn sich der Inhalt ändert. Dies bedeutet, dass Bandbreite verschwendet wird, indem die gesamte Website neu geladen wird, da traditionelle Caching-Mechanismen den statischen Teil ignorieren. Cache-Control: Immutable hilft, dieses Problem zu lösen, indem nur der dynamische Teil neu geladen wird.
    
4. Die Komprimierungsoption definiert die Methode, die zum Komprimieren von CSS- und Javascript-Assets verwendet werden soll. Die gzip-Komprimierungsmethode ist schneller, aber die komprimierten Dateien sind größer als bei Brotli. Komprimierte Dateien helfen, die Bandbreite zu verringern und somit die Performance zu steigern.

   

CSS-Optionen ermöglichen uns

1. Das Kombinieren von CSS-Dateien mithilfe von Media Queries hilft, die Anzahl der CSS-Dateien zu reduzieren, was wiederum die Effizienz der Website verbessert.
    
2. Fix improperly set type ist im Grunde eine automatische Korrektur für Codes.
    
3. Wenn sich die externen Stylesheets auf demselben Host befinden, werden diese Stylesheets nicht in Dateien konvertiert, wenn dieses Kontrollkästchen aktiviert ist.

JS-Optionen

1. In diesem Abschnitt können wir mit JS auf die gleiche Weise herumspielen wie mit CSS.

   

CRON-Optionen:

1. Eine Mindestzeit zwischen den advagg_cron()-Ausführungen:
   Die Zeitspanne, die zwischen jeder erneuten Ausführung von advagg_cron() liegen muss.
    
2. Aggregate löschen, die vor mehr als einer bestimmten Zeit geändert wurden.
   Löscht ältere Aggregate, wenn der eingestellte Wert überschritten wurde.

   

Obskure Optionen
Diese Optionen können auf ihren Standardwerten belassen werden und das Modul funktioniert einwandfrei.

Die Tabs "Informationen" und "Operationen" enthalten keine konfigurierbaren Optionen. 

Bundler-Tab:

Die Bündelungstechnik wird verwendet, um CSS- oder JS-Dateien zusammenzubündeln, was zu weniger Anfragen und schnelleren Ladezeiten führt. 
Dieser Tab hat zwei Abschnitte, d. h. einen für CSS-Bündelung und den anderen für Javascript-Bündelung, die beide die gleichen Einstellungen haben.

1. Zielanzahl der CSS/JS-Bundles pro Seite:
   CSS- oder JS-Bundles, die mit jeder Seite gesendet werden sollen. Wenn Sie diesen Wert auf Null setzen, wird der Bundler deaktiviert.
    
2. Gruppierungslogik:
   Dies gibt an, ob sie nach Dateianzahl oder nach Dateigröße aggregiert werden.

CDN-Tab:

Content Delivery Network oder CDN wird verwendet, um die Dienste für verschiedene Benutzer bereitzustellen, die sich geografisch mithilfe von Proxy-Servern und Rechenzentren befinden. Da diese verteilt sind, antworten die Server, die den Anfragenden am nächsten sind, am schnellsten, wodurch die Latenz reduziert und eine schnellere Ladezeit erzielt wird.

1. Zu verwendendes CDN
   Überprüfen Sie das Servernetzwerk eines Anbieters und wählen Sie mit Bedacht zwischen Google und Microsoft. 
    
2. Minimierte Ressourcen verwenden
   Minimierte oder komprimierte Ressourcen würden den Bandbreitenbedarf aufgrund der geringeren Größe als die Originale reduzieren.

Dieser Tab ist weiter in zwei Tabs unterteilt. Der erste Abschnitt wird verwendet, um jQuery zusammen mit der erforderlichen Versionsnummer zu implementieren, während sich der zweite Teil auf die Benutzeroberfläche konzentriert, die verwendet werden soll, wenn jQuery vom CDN zusammen mit der Versionsnummer bereitgestellt wird.

CSS-Minifizierung:

Einfach ausgedrückt ist die Minifizierung der Prozess des Entfernens jeglicher Formatierung, die ansonsten vom Programmierer verwendet worden wäre, um die Lesbarkeit des Codes zu verbessern. Dies impliziert das Entfernen von Leerzeichen, Kommentaren, Absätzen, die Reduzierung von Variablennamen usw..

1.  Minifizierung: Wählen Sie einen Minifizierer aus
   
   Benutzer können zwischen dem Core-Minifizierer oder dem YUI Compressor wählen 
   
   Externe Minifizierung:
   Dies hilft einem Administrator, externe Minifizierer einzurichten, wenn er dies möchte. Einige Beispiele dafür sind wie folgt. 
   
   Microsoft Ajax Minifier:
   AjaxMinifier <Pfad und Name der Quelldatei> -o <Pfad und Name der Zieldatei>
   
   YUI Compressor:
   java -jar yuicompressor-x.y.z.jar --type css--line-break 4096 <Stammordner>/<Pfad und Name der Quelldatei> -o <Pfad und Name der Zieldatei>

   

   JavaScript-Minifizierung:
   Auf diesem Tab können wir den Minifizierer für die JS-Minifizierung auswählen. Die Auswahl eines schnelleren Minifizierers ist immer besser.

   

2. Änderungen:

• Vorverarbeitung für alle JS aktivieren:
  Wenn Sie diese Option aktivieren, werden alle Javascript-Dateien aggregiert.
   
• Konsolenprotokollierung aus JS-Dateien entfernen.
  Die Reduzierung der Zeit, die der Server mit sich selbst verbringt, führt zu einem besseren Durchsatz.
  
  Javascript-Reihenfolge optimieren:
   
• Das Verschieben aller externen Skripte an den Anfang der Ausführungsreihenfolge würde bedeuten, dass die Ausführung externer Skripte priorisiert wird, da diese nicht optional sind und ohnehin geladen werden müssen.
   
• Das Verschieben aller browserbedingten JavaScript-Dateien an das Ende der Gruppe würde bedeuten, dass die Javascript-Dateien, die von den Anforderungen des Browsers abhängen, am Ende geladen werden sollen.

  

  JavaScript-Speicherort und -Ausführung anpassen

• Verzögerte JavaScript-Ausführung: 
  
  Bei der verzögerten Ausführung werden die Skripte nach dem Parsen von HTML-Codes ausgeführt. Der Administrator kann die verzögerte Analyse deaktivieren, alle Skripte oder nur externe Skripte auswählen.
  
  Der nächste Abschnitt enthält die gleichen Einstellungen, jedoch für CSS, und es ist besser, experimentelle Einstellungen nicht zu optimieren, da dies zu Problemen führen kann.

• Alte IE-Kompatibilität:

  

  IE9, IE8, IE7 und IE6 begrenzen die maximale Anzahl von CSS-Selektoren in einer einzelnen Datei auf 4095. Um ältere Versionen von IE zu unterstützen, kann eine Obergrenze festgelegt werden, indem ein Wert in das Textfeld eingefügt wird. 

Wie aus der obigen Diskussion hervorgeht, bietet dieses Modul endlose Möglichkeiten, die Performance unserer Websites zu optimieren, von der grundlegenden Zwischenspeicherung bis hin zur Prioritätsreihenfolge der Verarbeitung von Javascript-Dateien. 

Zusammenfassend lässt sich sagen, dass wir in Bezug auf die Website-Optimierung eine sehr hohe Punktzahl erzielen können, aber unsere Priorität sollte die Benutzerfreundlichkeit sein. Denn wenn eine Seite zwar sehr schnell geladen wird, der Benutzer aber Schwierigkeiten hat, durch die Seiten zu navigieren, hätte dies negative Auswirkungen auf den Benutzer. Daher ist es für die ordnungsgemäße Implementierung einer Website von entscheidender Bedeutung, ein Gleichgewicht zwischen diesen beiden Aspekten zu finden.