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:

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.

7 theming javascript performance

— EB84
quelle

Ich bin mir nicht sicher, was advagg angeht, aber für Core gibt es keine derartigen Einstellungen. Für advagg habe ich sie nicht gesehen, aber ich hörte trotzdem ziemlich bald auf, sie zu benutzen. Vielleicht gibt es jetzt solche Einstellungen. Persönlich würde ich eine Support-Anfrage in die Problemwarteschlange stellen und danach fragen. Wenn der Betreuer sagt, dass sie nicht verfügbar sind, würde er zur Feature-Anfrage wechseln.

— Mołot

Ihre Frage ist zu weit gefasst. Ihre Site verwendet CSS und JS - genauso wie jede andere Site im Internet. Solange die Reihenfolge der CSS-Kaskaden beibehalten wird, gibt es kaum einen Grund, warum Sie nicht alle CSS-Dateien in einer Datei zusammenfassen können. Solange Ihr JS in Ordnung ist, gibt es keinen Grund, warum es nicht zu einer Datei zusammengeführt werden kann (als extremes Beispiel). Wenn Sie Einzelheiten dazu angeben können, welche CSS- und JS-Dateien / -Ressourcen von der Seite benötigt werden; Möglicherweise erhalten Sie fundiertere Antworten.

— Tenken

@tenken wie ist es zu breit? Er hat CSS und JS rendersperrend verknüpft und möchte, dass sie nicht blockieren. Diese Möglichkeiten werden ziemlich genau erklärt ( von Google beispielsweise, da OP auf Google Pagespeed-Empfehlungen verweist). Ihr Kommentar hat nichts mit der Frage zu tun, die OP gestellt hat.

— Mołot

Alle verknüpften CSS- und JS-Dateien werden blockiert, es sei denn, ihr Inline-Code oder ihre Verwendung werden asyncvon alten Browsern nicht unterstützt. ZB enthält die Standard-Drupal-Aggregation <link>Tags für alle Ihre CSS. Wenn Ihr Site-CSS oder JS zu komplex ist, tritt dieses Problem immer auf. Wenn Sie Ihre Site korrekt erstellen, können Sie Dateien sicher aggregieren. Da es keine Informationen zu den Dateiabhängigkeiten gibt, sind die Fragendetails zu umfangreich - ein Modul kann sein Problem niemals beheben . Es geht nur darum, wie CSS und JS geschrieben sind und in welcher Reihenfolge und Komplexität sie enthalten sind. Er hat nie gesagt, dass er nicht blocken will, wenn Sie davon ausgehen, dass es das ist, was er will.

— Tenken

@tenken Ich habe meine Frage aktualisiert und weitere Informationen zu den Modulen gegeben - hoffe, dass Sie verstehen, welches CSS und JS ich verwende.

— EB84,

Antworten:

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.

Erweiterte CSS / JS-Aggregation

Gehe zu admin/config/development/performance/advagg

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

AdvAgg Komprimieren Sie Javascript

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

AdvAgg Async Font Loader

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."

AdvAgg Bundler

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.

AdvAgg Umzug

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

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

AdvAgg Modifier

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

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

Kritische CSS-Dateien generieren

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

— mikeytown2
quelle

Dies ist eine großartige Übersicht über die Verwendung von AdvAgg! Vielen Dank. Vielleicht könnte dieser Text der Anfang einer verlinkten "Dokumentations" -Seite für Ihre Projektseite sein :)

— tenken

Schon getan :) drupal.org/node/2189523#comment-8594829

— mikeytown2

@mikeytown2 danke für die tolle antwort. Ich habe alle Änderungen implementiert und die Frage aktualisiert. Ich habe eine etwas höhere Punktzahl - danke!

— EB84

Wenn Sie sich die Ausgabe ansehen, haben Sie anscheinend nicht alle Kontrollkästchen unter "JavaScript-Reihenfolge optimieren" auf der advagg/modSeite aktiviert, UND / ODER Sie haben "Alle JS" nicht in die Fußzeile verschoben. Auch wenn ich den vollständigen Quellcode der Seiten sehen könnte, der im Allgemeinen mit Empfehlungen hilft (verlinken Sie einfach auf Ihre Site).

— mikeytown2

Vielen Dank für die Bereitstellung dieser Informationen. Wenn Sie weniger CSS-Dateien auf der Seite haben möchten, gehen Sie zu advagg / bundler und ändern Sie den CSS-Wert von 4 auf 1. Das gibt Ihnen eine bessere Punktzahl, aber denken Sie an die Kommentare, die ich oben dazu gemacht habe. Sieht so aus, als würde ein adaptives Design drupal_add_html_head () verwenden, um in einem Browser bedingte Js hinzuzufügen. Ich muss überprüfen, ob dies der Fall ist. Bedeutet, dass mehr als ein Thema benötigt wird. drupal.org/node/2217451 . Außerdem habe ich dieses Problem erstellt, um die Renderblockierung zu

— beheben. Css

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.

— jacmkno
quelle