Beseitigen Sie JavaScript und CSS, die das Rendern blockieren

Ich baue eine Drupal 7-Site. Dies sind einige der Module, die ich verwende: Adaptivetheme (Thema), Ansichten und Inhaltsfenster, Fenster, Mini-Fenster, Fenster überall, Seitenmanager, Superfish für Menüs, Addthis, Ausgewählt (Dropdown).

Zur Verbesserung der Leistung meiner Website und zum Umgang mit CSS- und JS-Dateien verwende ich das Advagg-Modul .

Beim Ausführen des Pagespeed-Tests von Google erhalte ich die Fehlermeldung "Should Fix":

Beseitigen Sie JavaScript und CSS, die das Rendering blockieren, in
Inhalten, die über dem Falz angezeigt werden. Ihre Seite enthält 6 blockierende Skript-Ressourcen und 8 blockierende CSS-Ressourcen. Dies führt zu einer Verzögerung beim Rendern Ihrer Seite.
Keiner der übergeordneten Inhalte auf Ihrer Seite konnte gerendert werden, ohne darauf zu warten, dass die folgenden Ressourcen geladen werden. Versuchen Sie, blockierende Ressourcen aufzuschieben oder asynchron zu laden oder die kritischen Teile dieser Ressourcen direkt in den HTML-Code einzufügen.

Dies ist die Information, die Google liefert:

• Entfernen Sie JavaScript, das das Rendern blockiert
• Optimieren Sie die CSS-Bereitstellung

Gibt es eine Möglichkeit, die Einstellungen des Advagg-Moduls oder des Drupal-Kerns zu ändern und dieses Problem zu beheben?

Gibt es einen anderen Weg, um dieses Ziel zu erreichen?

Update - nach der Umsetzung von Änderungen gemäß mikeytown2 Antwort habe ich folgende Meldung zum Pagespeed Test von Google erhalten:

Beseitigen Sie JavaScript und CSS, die das Rendering blockieren, in Inhalten, die über dem Falz angezeigt werden.
Ihre Seite enthält 6 blockierende Skript-Ressourcen und 4 blockierende CSS-Ressourcen. Dies führt zu einer Verzögerung beim Rendern Ihrer Seite.
Keiner der übergeordneten Inhalte auf Ihrer Seite konnte gerendert werden, ohne darauf zu warten, dass die folgenden Ressourcen geladen werden. Versuchen Sie, blockierende Ressourcen aufzuschieben oder asynchron zu laden oder die kritischen Teile dieser Ressourcen direkt in den HTML-Code einzufügen.

Die README-Datei enthält eine Anleitung, wie dies mit der aktuellen Version 7.x-2.31 + von AdvAgg durchgeführt werden kann . Siehe auch diese Wiki-Seite über die Hochleistungsgruppe . Die meisten Websites können unter https://developers.google.com/speed/pagespeed/insights/ eine 100/100 Bewertung erzielen . Anweisungen, wie Sie AdvAgg installieren können, finden Sie weiter unten.

Überprüfen Sie die Site nach jedem Abschnitt, um sicherzustellen, dass die Änderung Ihre Site nicht durcheinander gebracht hat. Die Änderungen unter AdvAgg Modifier sind normalerweise am problematischsten, bieten aber die größten Verbesserungen.

Gehe zu admin/config/development/performance/advagg

• Wählen Sie "Empfohlene (optimierte) Einstellungen verwenden"

Installieren Sie AdvAgg Compress Javascript, falls nicht aktiviert, und gehen Sie zu admin/config/development/performance/advagg/js-compress

• Wählen Sie JSMin, falls verfügbar. Andernfalls wählen Sie JSMin +
• Wählen Sie Alles entfernen (kleinste Dateien)
• Klicken Sie auf den Link für die Stapelkomprimierung, um diese Dateien zu verarbeiten

Installieren Sie AdvAgg Async Font Loader, falls nicht aktiviert, und gehen Sie zu admin/config/development/performance/advagg/font

• Wählen Sie Lokale Datei im Aggregat aus (Version: XXX). Wenn diese Option nicht verfügbar ist, befolgen Sie die Anweisungen direkt unter den Installationsoptionen.
• Aktivieren Sie "Verwenden Sie localStorage, damit das Aufblitzen von nicht formatiertem Text (FOUT) nur einmal auftritt."
• Aktivieren Sie "Setzen Sie ein Cookie, damit das Aufblitzen von nicht formatiertem Text (FOUT) nur einmal auftritt."

Installieren Sie AdvAgg Bundler, falls nicht aktiviert, und gehen Sie zu admin/config/development/performance/advagg/bundler

HTTP / 2.0-Einstellungen

• Wählen Sie unter "Zielanzahl der CSS-Bundles pro Seite" die Option 25 aus
• Wählen Sie unter "Zielanzahl von JS-Bundles pro Seite" die Option 25 aus
• Wählen Sie unter "Gruppierungslogik" "Dateigröße"

HTTP / 1.1-Einstellungen (Standard)

• Wählen Sie unter "Zielanzahl der CSS-Bundles pro Seite" 2 aus
• Wählen Sie unter "Zielanzahl von JS-Bundles pro Seite" die Option 5 aus
• Wählen Sie unter "Gruppierungslogik" "Dateigröße"

25 Bundles gegen 2 und 5 haben mit Browser-Caching zu tun. Je mehr Dateien vorhanden sind, desto höher ist die Wahrscheinlichkeit, dass der Browser diese Kombination im Cache hat. Je mehr Dateien vorhanden sind, desto mehr Verbindungen werden in HTTP 1.1 hergestellt und geöffnet. Verwenden Sie 2 für CSS, da diese Nummer nicht auf neue Verbindungen wartet. JS ist 5, da die meisten Browser ein gleichzeitiges Verbindungslimit von 6 haben. Diese Anzahl für Bundles wurde nach vielen Tests ausgewählt. In HTTP 2.0 gibt es eine Streaming-Verbindung und die Strafe für mehrere CSS- und JS-Dateien ist fast nicht vorhanden. Daher ist die Optimierung für den Browser-Cache die beste Wahl. Daher sollte 25 für CSS und JS verwendet werden, wenn HTTP / 2.0 bereitgestellt wird.

Installieren Sie AdvAgg Relocate, falls nicht aktiviert, und gehen Sie zu admin/config/development/performance/advagg/relocate

• Wählen Sie "Empfohlene (optimierte) Einstellungen verwenden"

Installieren Sie AdvAgg Modifier, falls nicht aktiviert, und gehen Sie zu admin/config/development/performance/advagg/mod

• Wählen Sie "Empfohlene (optimierte) Einstellungen verwenden"

Gehen Sie zu https://www.sitelocity.com/critical-path-css-generator und geben Sie so viele Zielseiten ein, wie für kritische CSS erforderlich sind. Die Top 10 sind normalerweise ein guter Anfang. Wenn Sie über Google Analytics verfügen, erfahren Sie, wie Sie Ihre wichtigsten Zielseiten finden: https://developers.google.com/analytics/devguides/reporting/core/v3/common-queries#top-landing-pages oder für Piwik https: //piwik.org/faq/how-to/faq_160/ . Wenn Sie nicht wissen, mit welcher Seite Sie beginnen sollen, führen Sie die Homepage Ihrer Website aus. Sie können dies auch verwenden, um css https://chrome.google.com/webstore/detail/critical-style-snapshot/gkoeffcejdhhojognlonafnijfkcepob?hl=de zu generieren

Die folgenden Beispieldateinamen und -pfade gelten für das Thema "Bootstrap". sie fangen alle an mit sites/all/themes/bootstrap/critical-css/; Erstellen Sie in Ihrem Thema das critical-css/Verzeichnis. Das nächste Verzeichnis basiert auf dem Benutzer. anonymous/,, all/oder authenticated/kann verwendet werden.

Das nächste Verzeichnis kann urls/oder sein type/. Anschauen urls/; front ist ein Sonderfall für die Titelseite. Alle anderen Pfade verwenden current_path () als Verzeichnis und Dateinamen .css, die am Ende hinzugefügt werden. Siehe https://api.drupal.org/api/drupal/includes%21path.inc/function/current_path/7.x

Mit Blick auf type/diese ist ein Sonderfall für Knotentypen. Verwenden Sie den Computernamen und fügen Sie ihn .cssam Ende hinzu. Auf jedem Knoten dieses Typs wird diese kritische CSS-Datei angewendet und eingezeichnet. Im Folgenden sind einige Beispiele aufgeführt, die zeigen, wie dies funktioniert.

gültige Beispielspeicherorte für die "Vorderseite": sites/all/themes/bootstrap/critical-css/anonymous/urls/front.css

gültige Beispielspeicherorte für die Seite "node / 1" current_path (): sites/all/themes/bootstrap/critical-css/anonymous/urls/node/1.css

gültige Beispielspeicherorte für den Knotentyp "Seite": sites/all/themes/bootstrap/critical-css/anonymous/type/page.css

Wenn Sie diese CSS-Dateien auf irgendeine Weise automatisiert generieren möchten, finden Sie in fourkitchens einen hervorragenden Artikel zum Einrichten: https://fourword.fourkitchens.com/article/use-grunt-and-advagg-inline-critical-css -drupal-7-theme

Mit vorgefertigten Drupal-Modulen werden Sie niemals wirklich hohe Punktzahlen erzielen. Der einzige Weg, dies zu erreichen, besteht darin, die Vorschläge des Google Speed-Tools zu prüfen und sorgfältig zu analysieren und diese jeweils unabhängig voneinander anzusprechen.

Einige Dinge, die ich getan habe, um 95 in einer sehr aktiven Nachrichtenseite zu erreichen , die zu dem Zeitpunkt, als ich dies schrieb, besser abschnitt als Nytimes (jetzt nicht):

• [Sperren von Skripten] Verzögern Sie die Ausführung von Skripten von Drittanbietern wie sharethis, Facebook-Widgets, Google Plus usw., um sie erst auszuführen, nachdem die Seite vollständig gerendert wurde. Dies erforderte einige einfache String-Ersetzungen in der Ausgabe von html.tpl.php, um diese Skripte abzufangen und für die spätere Ausführung in die Warteschlange zu stellen.
• [Scripts blockieren] Speichern Sie die Variable $ scripts von html.tpl.php (mit json_encode) in einer Javascript-Variablen, um sie für die Ausführung nach dem Laden der ersten Seite in eine Warteschlange zu stellen. Das ist unnatürlich, aber notwendig. Einige browserspezifische Probleme mussten behoben werden.
• [blockiert CSS] Es wurde etwas Ähnliches wie bei Keith Clark implementiert , jedoch mit rel = "prefetch". Dies bringt die Notwendigkeit mit sich, den FOUC zu lösen .
• [Minifizierung und Komprimierung] Veröffentlichen Sie die Komprimierung und Minifizierung auf einem Distributionsserver, auf dem ich imagemagic, yui-compressor, pngoptim und andere Tools verwenden kann, um diese Regeln zu umgehen, ohne die Drupal-Installation in ein unüberschaubares Chaos zu verwandeln.