it-swarm-eu.dev

Odstraňte JavaScript a CSS blokující vykreslení v obsahu nad záhybem stránky

Stavím web Drupal 7). Jsou to některé z modulů, které používám: Adaptivetheme (téma), Pohledy a Panely obsahu, Panely, Mini panely, Panely všude, Správce stránek, Superfish pro nabídky , Addthis, Chosen (drop down).

Pro zlepšení výkonu mého webu a zacházení se soubory CSS a JS používám Advagg modul .

Když spustím Pagespeed test Google , dostávám následující chybu jako „Měl by se opravit“:

Odstraňte JavaScript a CSS blokující vykreslení nad záhybem stránky
obsah Vaše stránka obsahuje 6 zdrojů skriptů a 8 zdrojů CSS. To způsobí zpoždění při vykreslování stránky.
Žádný z obsahu nad záhybem stránky se nemohl vykreslit bez čekání na načtení následujících zdrojů. Pokuste se odložit nebo asynchronně načíst blokovací prostředky nebo vložit kritické části těchto zdrojů přímo do HTML.

Toto jsou informace, které Google dodává:

Existuje způsob, jak změnit nastavení modulu Advagg nebo jádra Drupal jádro) a vyřešit tento problém?

Existuje jiný způsob, jak tohoto cíle dosáhnout?

Aktualizace - po implementaci změn podle mikeytown2 odpověď Dostal jsem následující test na Pagespeedově testu Google:

Odstraňte JavaScript a CSS blokující vykreslení v obsahu nad záhybem
Vaše stránka obsahuje 6 zdrojů skriptů a 4 zdroje CSS. To způsobí zpoždění při vykreslování stránky.
Žádný z obsahu nad záhybem stránky se nemohl vykreslit bez čekání na načtení následujících zdrojů. Pokuste se odložit nebo asynchronně načíst blokovací prostředky nebo vložit kritické části těchto zdrojů přímo do HTML.

30
EB84

README obsahuje návod, jak to provést pomocí aktuální 7.x-2.31 + verze AdvAgg . Viz také tato stránka wiki ve skupině High performance . Většina webů může dosáhnout dokonalého skóre 100/100 na https://developers.google.com/speed/pagespeed/insights/ . Pokyny, jak toho dosáhnout, pro novou instalaci AdvAgg níže.

Nezapomeňte zkontrolovat web po každé sekci, abyste se ujistili, že změna nepostihla váš web. Změny v AdvAgg Modifier jsou obvykle nejproblematičtější, ale nabízejí největší vylepšení.

Jít do admin/config/development/performance/advagg

  • Vyberte možnost „Použít doporučená (optimalizovaná) nastavení“

Nainstalujte AdvAgg Compress Javascript, pokud není povolen, a přejděte na admin/config/development/performance/advagg/js-compress

  • Vyberte JSMin, pokud je k dispozici; jinak vyberte JSMin +
  • Vyberte možnost Odříznout vše (nejmenší soubory)
  • Chcete-li tyto soubory zpracovat, klikněte na odkaz dávkové komprese

Nainstalujte AdvAgg Async Font Loader, pokud není povolen, a přejděte na admin/config/development/performance/advagg/font

  • Vyberte Místní soubor zahrnutý do agregátu (verze: X.X.X). Pokud tato možnost není k dispozici, postupujte podle pokynů přímo pod možnostmi, jak ji nainstalovat.
  • Zaškrtněte „Použít localStorage, takže k záblesku nepoškozeného textu (FOUT) dojde pouze jednou.“
  • Zaškrtněte políčko „Nastavit soubor cookie, aby k záblesku nepoškozeného textu (FOUT) došlo pouze jednou.“

Nainstalujte AdvAgg Bundler, pokud není povoleno, a přejděte na admin/config/development/performance/advagg/bundler

Nastavení HTTP/2.0

  • V části „Cílový počet balíků CSS na stránku“ vyberte 25
  • V části „Cílový počet svazků JS na stránku“ vyberte 25
  • V části „Logika seskupení“ vyberte „Velikost souboru“

Nastavení HTTP/1.1 (výchozí)

  • V části „Cílový počet balíků CSS na stránku“ vyberte 2
  • V části „Cílový počet svazků JS na stránku“ vyberte 5
  • V části „Logika seskupení“ vyberte „Velikost souboru“

25 balíčků vs 2 a 5 má co do činění s mezipamětí prohlížeče. Více souborů znamená větší šanci, že prohlížeč bude mít kombo ve své mezipaměti, ale více souborů znamená, že se v HTTP 1.1 vytvoří a otevře více připojení. Použijte 2 pro CSS, protože toto číslo nečeká na žádná nová připojení; JS je 5, protože většina prohlížečů má limit souběžných připojení 6. Toto číslo pro svazky bylo vybráno po mnoha testech. V HTTP 2.0 existuje jedno streamingové připojení a penalizace za více souborů CSS a JS téměř neexistuje; optimalizace pro mezipaměť prohlížeče je tedy nejlepší volbou; 25 by tedy mělo být použito pro CSS a JS při poskytování HTTP/2.0.

Nainstalujte AdvAgg Relocate, pokud není povoleno, a přejděte na admin/config/development/performance/advagg/relocate

  • Vyberte možnost „Použít doporučená (optimalizovaná) nastavení“

Nainstalujte AdvAgg Modifier, pokud není povolen, a přejděte na admin/config/development/performance/advagg/mod

  • Vyberte možnost „Použít doporučená (optimalizovaná) nastavení“

Přejděte na https://www.sitelocity.com/critical-path-css-generator a zadejte tolik vstupních stránek, kolik je potřeba pro kritické css; 10 nejlepších je obvykle dobrý začátek. Pokud máte Google Analytics, ukáže se vám, jak najít nejlepší vstupní stránky https://developers.google.com/analytics/devguides/reporting/core/v3/common-queries#top-landing-pages nebo pro Piwik https://piwik.org/faq/how-to/faq_160/ . Pokud nevíte, na které stránce začít, udělejte domovskou stránku svého webu. Můžete nám také vygenerovat CSS https://chrome.google.com/webstore/detail/critical-style-snapshot/gkoeffcejdhhojognlonafnijfkcepob?hl=cs

Příklady názvů souborů a cest níže jsou pro téma „bootstrap“; všichni začínají sites/all/themes/bootstrap/critical-css/; ve svém motivu vytvořte critical-css/ adresář. Následující adresář je založen na uživateli; anonymous/, all/ nebo authenticated/ může být použito.

Další adresář může být urls/ nebo type/. Při pohledu na urls/; front je zvláštní případ pro titulní stránku, všechny ostatní cesty používají jako adresář a název_souboru aktuální_path () s .css přidáno na konec; Viz https://api.drupal.org/api/drupal/includes%21path.inc/function/current_path/7.x

Při pohledu na type/ Toto je zvláštní případ pro typy uzlů. Použijte název počítače a přidejte .css do konce. Každý uzel tohoto typu bude mít tento kritický soubor css použit a inline. Níže uvádíme několik příkladů, jak to funguje.

platná umístění příkladů souboru pro „přední“ stránku: sites/all/themes/bootstrap/critical-css/anonymous/urls/front.css

platné umístění příkladů souborů pro stránku "node/1" current_path (): sites/all/themes/bootstrap/critical-css/anonymous/urls/node/1.css

platná umístění příkladů souborů pro typ uzlu „page“: sites/all/themes/bootstrap/critical-css/anonymous/type/page.css

Pokud chcete nějaký automatizovaný způsob, jak tyto soubory CSS generovat, má fourkitchens vynikající článek o tom, jak to nastavit: https://fourword.fourkitchens.com/article/use-grunt-and-advagg-inline -critical-css-drupal-7-theme

42
mikeytown2

S předem vytvořenými moduly drupal moduly) nikdy nezískáte opravdu vysoké skóre. Jediným způsobem, jak toho dosáhnout, je účastnit se a pečlivě analyzovat každý z návrhů nástroj pro rychlost google , oslovení každého z nich samostatně.

Některé věci, které jsem udělal, abych dosáhl 95 na velmi aktivním zpravodajském server , který v době, kdy jsem to napsal, skóroval lépe než nytimes (Teď to tak není):

  • [blokující skripty] Zpoždění provádění skriptů třetích stran, jako jsou sharethis, facebookové widgety, google plus atd., se spustí až po úplném vykreslení stránky. To vyžadovalo několik jednoduchých nahrazení řetězců na výstupu html.tpl.php, aby byly tyto skripty zachyceny a zařazeny do fronty pro pozdější spuštění.
  • [blokující skripty] Proměnnou $ scripts z html.tpl.php (s json_encode) uložte do proměnné javascript, abyste je mohli spustit po prvním načtení stránky. To je nepřirozené, ale nezbytné. Některé problémy specifické pro prohlížeč musely být vyřešeny.
  • [blokování css] Implementováno něco podobného technika Keitha Clarka , ale s rel = "prefetch". To představuje potřebu vyřešit FAUC .
  • [Minifikace a komprese] Externalizujte kompresi a minifikaci na distribuční server, kde mohu použít imagemagický, yui-kompresor, pngoptim a další věci k překonání těchto pravidel, aniž by se z instalace drupal) stala neovládatelná nepořádek. .
2
jacmkno