Wyeliminuj JavaScript blokujący renderowanie i CSS w treści widocznej na ekranie

30

Buduję witrynę Drupal 7. Oto niektóre z modułów, których używam: Adaptivetheme (motyw), widoki i panele zawartości, panele, mini panele, panele wszędzie, menedżer stron, Superfish dla menu, Addthis, Chosen (rozwijane).

W celu poprawy wydajności mojej strony i radzenia sobie z plikami CSS i JS korzystam z modułu Advagg .

Podczas uruchamiania testu Pagespeed Google pojawia się następujący błąd: „Powinien naprawić”:

Wyeliminuj blokujący renderowanie JavaScript i CSS w części strony widocznej na ekranie
Twoja strona ma 6 blokujących zasobów skryptowych i 8 blokujących zasoby CSS. Powoduje to opóźnienie renderowania strony.
Żadna z zawartości strony widocznej na ekranie nie może być renderowana bez oczekiwania na załadowanie następujących zasobów. Spróbuj odroczyć lub asynchronicznie załadować blokujące zasoby lub wstawić krytyczne części tych zasobów bezpośrednio w kodzie HTML.

Oto informacje dostarczane przez Google:

Czy istnieje sposób na zmianę ustawień modułu Advagg lub rdzenia Drupal i rozwiązanie tego problemu?

Czy istnieje inny sposób na osiągnięcie tego celu?

Aktualizacja - po wprowadzeniu zmian zgodnie z odpowiedzią mikeytown2 dostałem następujący komunikat w teście Pagespeed Google:

Wyeliminuj JavaScript blokujący renderowanie i CSS w części strony widocznej na ekranie
Twoja strona ma 6 blokujących zasobów skryptowych i 4 blokujące zasoby CSS. Powoduje to opóźnienie renderowania strony.
Żadna z zawartości strony widocznej na ekranie nie może być renderowana bez oczekiwania na załadowanie następujących zasobów. Spróbuj odroczyć lub asynchronicznie załadować blokujące zasoby lub wstawić krytyczne części tych zasobów bezpośrednio w kodzie HTML.

EB84
źródło
Nie jestem pewien co do advagg, ale dla rdzenia nie ma go, nie ma takich ustawień. Dla Advagga nie widziałem ich, ale i tak wkrótce przestałem z nich korzystać. Może teraz są takie ustawienia. Osobiście wysłałbym prośbę o wsparcie w kolejce problemów, pytając o to, a jeśli opiekun powie, że nie są dostępne, zmieniłbym się w prośbę o funkcję.
Mołot
Twoje pytanie jest zbyt ogólne. Twoja strona korzysta z CSS i JS - podobnie jak każda inna witryna w Internecie. Tak długo, jak zachowana jest kolejność kaskadowa CSS, nie ma powodu, aby nie agregować całego CSS w 1 plik. Tak długo, jak JS jest enkapsulowany ok, nie ma powodu, dla którego nie można go scalić w 1 plik (jako skrajny przykład). Jeśli możesz podać szczegółowe informacje na temat plików / zasobów CSS i JS wymaganych przez stronę; możesz uzyskać bardziej świadome odpowiedzi.
tenken
@tenken jak to jest zbyt szerokie? Ma CSS i JS połączone w sposób blokujący renderowanie i chce ich w sposób nieblokujący. Te sposoby są dość dokładnie wyjaśnione ( na przykład przez Google, ponieważ OP odnosi się do rekomendacji Google Pagespeed). Twój komentarz nie ma nic wspólnego z pytaniem OP.
Mołot
wszystkie połączone pliki css i js blokują, chyba że ich wbudowany kod lub użycie, asyncktóre nie jest obsługiwane przez stare przeglądarki. Np. Domyślna agregacja Drupala zawiera <link>tagi dla całego twojego css. Jeśli Twoja witryna CSS lub JS jest zbyt złożona, zawsze będziesz mieć ten problem. Jeśli poprawnie zbudujesz witrynę, możesz bezpiecznie agregować pliki. Bez informacji o zależnościach od pliku szczegóły pytania są zbyt ogólne - moduł nigdy nie może naprawić jego problemu; chodzi przede wszystkim o sposób pisania CSS i JS oraz o kolejność i złożoność włączenia. nigdy nie powiedział, że chce nie blokować, zakładając, że tego właśnie chce.
tenken
@tenken Zaktualizowałem swoje pytanie i podałem więcej informacji na temat modułów - mam nadzieję, że pomogą ci zrozumieć, z których CSS i JS korzystam.
EB84

Odpowiedzi:

42

Plik README zawiera przewodnik na temat tego, jak to zrobić przy użyciu aktualnej wersji AdvAgg 7.x-2.31 + . Zobacz także tę stronę wiki w grupie o wysokiej wydajności . Większość witryn może osiągnąć doskonały wynik 100/100 na https://developers.google.com/speed/pagespeed/insights/ . Wskazówki, jak to osiągnąć dla nowej instalacji AdvAgg poniżej.

Pamiętaj o sprawdzeniu witryny po każdej sekcji, aby upewnić się, że zmiana nie zepsuła Twojej witryny. Zmiany w Modyfikatorze AdvAgg są zwykle najbardziej problematyczne, ale oferują największe ulepszenia.

Zaawansowana agregacja CSS / JS

Iść do admin/config/development/performance/advagg

  • Wybierz „Użyj zalecanych (zoptymalizowanych) ustawień”
AdvAgg Kompresuj Javascript

Zainstaluj AdvAgg Compress Javascript, jeśli nie jest włączony, i przejdź do admin/config/development/performance/advagg/js-compress

  • Wybierz JSMin, jeśli jest dostępny; w przeciwnym razie wybierz JSMin +
  • Wybierz Usuń wszystko (najmniejsze pliki)
  • Kliknij link kompresji wsadowej, aby przetworzyć te pliki
AdvAgg Async Font Loader

Zainstaluj AdvAgg Async Font Loader, jeśli nie jest włączony, i przejdź do admin/config/development/performance/advagg/font

  • Wybierz Plik lokalny zawarty w agregacji (wersja: XXX). Jeśli ta opcja nie jest dostępna, postępuj zgodnie ze wskazówkami pod opcjami instalacji.
  • Zaznacz „Użyj localStorage, aby flashowanie niestylowanego tekstu (FOUT) miało miejsce tylko raz”.
  • Zaznacz „Ustaw plik cookie, aby flashowanie niestylowanego tekstu (FOUT) miało miejsce tylko raz”.
AdvAgg Bundler

Zainstaluj AdvAgg Bundler, jeśli nie jest włączony, i przejdź do admin/config/development/performance/advagg/bundler

Ustawienia HTTP / 2.0

  • W obszarze „Docelowa liczba pakietów CSS na stronę” wybierz 25
  • W obszarze „Docelowa liczba pakietów JS na stronę” wybierz 25
  • W „Logice grupowania” wybierz „Rozmiar pliku”

Ustawienia HTTP / 1.1 (domyślne)

  • W obszarze „Docelowa liczba pakietów CSS na stronę” wybierz 2
  • W obszarze „Docelowa liczba pakietów JS na stronę” wybierz 5
  • W „Logice grupowania” wybierz „Rozmiar pliku”

25 pakietów w porównaniu z 2 i 5 ma związek z buforowaniem przeglądarki. Im więcej plików, tym większa szansa, że ​​przeglądarka ma to połączenie w pamięci podręcznej, ale więcej plików oznacza, że ​​więcej połączeń jest ustanawianych i otwieranych w HTTP 1.1. Użyj 2 dla CSS, ponieważ ten numer nie czeka na żadne nowe połączenia; JS ma 5, ponieważ większość przeglądarek ma limit równoczesnych połączeń wynoszący 6. Ta liczba pakietów została wybrana po wielu testach. W HTTP 2.0 jest jedno połączenie strumieniowe, a kara za wiele plików CSS i JS prawie nie istnieje; dlatego optymalizacja pod kątem pamięci podręcznej przeglądarki jest najlepszym wyborem; dlatego do obsługi HTTP / 2.0 należy użyć 25 dla CSS i JS.

AdvAgg Relocate

Zainstaluj AdvAgg Relocate, jeśli nie jest włączony, i przejdź do admin/config/development/performance/advagg/relocate

  • Wybierz „Użyj zalecanych (zoptymalizowanych) ustawień”
AdvAgg Modifier

Zainstaluj AdvAgg Modifier, jeśli nie jest włączony, i przejdź do admin/config/development/performance/advagg/mod

  • Wybierz „Użyj zalecanych (zoptymalizowanych) ustawień”
Generowanie krytycznych plików CSS

Wejdź na https://www.sitelocity.com/critical-path-css-generator i wprowadź tyle stron docelowych, ile potrzeba do krytycznego css; pierwsza dziesiątka to zazwyczaj dobry początek. Jeśli masz Google Analytics, pokaże Ci to, jak znaleźć najlepsze strony docelowe https://developers.google.com/analytics/devguides/reporting/core/v3/common-queries#top-landing-pages lub w przypadku Piwik https: //piwik.org/faq/how-to/faq_160/ . Jeśli nie wiesz, od której strony zacząć, zrób stronę główną swojej witryny. Możesz nam to również wygenerować css https://chrome.google.com/webstore/detail/critical-style-snapshot/gkoeffcejdhhojognlonafnijfkcepob?hl=pl

Przykładowe nazwy plików i ścieżki poniżej dotyczą motywu „bootstrap”; wszystko zaczyna się od sites/all/themes/bootstrap/critical-css/; w swoim motywie utwórz critical-css/katalog. Następny katalog jest oparty na użytkowniku; anonymous/, all/lub authenticated/można użyć.

Następnym katalogiem może być urls/lub type/. Patrząc na urls/; front jest szczególnym przypadkiem dla strony głównej, wszystkie inne ścieżki używają current_path () jako katalogu i nazwy pliku z .cssdodanym na końcu; Zobacz https://api.drupal.org/api/drupal/include%21path.inc/function/current_path/7.x

Spojrzenie na type/to jest szczególny przypadek dla typów węzłów. Użyj nazwy komputera i dodaj .cssna końcu. Każdy węzeł tego typu będzie miał wówczas zastosowany i wstawiony ten krytyczny plik css. Poniżej znajduje się kilka przykładów pokazujących, jak to działa.

prawidłowe lokalizacje plików przykładowych dla strony „front”: sites/all/themes/bootstrap/critical-css/anonymous/urls/front.css

poprawne przykładowe lokalizacje plików dla strony „node / 1” current_path (): sites/all/themes/bootstrap/critical-css/anonymous/urls/node/1.css

poprawne przykładowe lokalizacje plików dla typu węzła „strona”: sites/all/themes/bootstrap/critical-css/anonymous/type/page.css

Jeśli chcesz jakiś zautomatyzowany sposób generowania tych plików css, fourkitchens ma doskonały artykuł na temat tego, jak to skonfigurować: https://fourword.fourkitchens.com/article/use-grunt-and-advagg-inline-critical-css -drupal-7-theme

mikeytown2
źródło
To świetny przegląd korzystania z AdvAgg! Dzięki. Może ten tekst może być początkiem połączonej strony „dokumentacji” dla strony twojego projektu :)
tenken
Już to zrobiłem :) drupal.org/node/2189523#comment-8594829
mikeytown2
@ mikeytown2 dzięki za świetną odpowiedź. Zaimplementowałem wszystkie zmiany i zaktualizowałem pytanie. Mam trochę wyższy wynik - dzięki!
EB84
Patrząc na dane wyjściowe, wydaje się, że nie zaznaczyłeś wszystkich pól w sekcji Optymalizuj porządkowanie JavaScript na advagg/modstronie ORAZ / LUB nie przeniosłeś wszystkich JS do stopki. Również gdybym mógł zobaczyć pełne źródło stron, które ogólnie pomaga w rekomendacjach (wystarczy link do Twojej witryny).
mikeytown2
Dziękujemy za podanie tych informacji. Jeśli chcesz mniej plików css na stronie, przejdź do advagg / bundler i zmień wartość css z 4 na 1. To da ci lepszy wynik, ale pamiętaj o komentarzach, które zrobiłem powyżej. Wygląda na to, że motyw adaptacyjny używa drupal_add_html_head () do dodania warunkowych plików przeglądarki, muszę sprawdzić, czy tak się dzieje; oznacza, że ​​więcej niż 1 motyw potrzebuje drupal.org/node/2217451 . Stworzyłem również ten problem, aby rozwiązać problem blokowania renderowania css drupal.org/node/2223267
mikeytown2
2

Nigdy nie uzyskasz naprawdę wysokich wyników dzięki wbudowanym modułom drupal, jedynym sposobem na osiągnięcie tego jest uczestnictwo i uważne analizowanie każdej sugestii narzędzia Google Speed , zajmowanie się każdym z nich niezależnie.

Niektóre rzeczy, które zrobiłem, aby osiągnąć 95 w bardzo aktywnej witrynie z wiadomościami , które do czasu, gdy to napisałem, osiągnęły lepsze wyniki niż nytimes (teraz tak nie jest):

  • [blokowanie skryptów] Opóźnij wykonywanie skryptów innych firm, takich jak sharethis, widżety Facebook, Google Plus itp., aby działały tylko po pełnym renderowaniu strony. Wymagało to kilku prostych zamian ciągów znaków na wyjściu pliku html.tpl.php, aby złapać te skrypty i ustawić je w kolejce do późniejszego wykonania.
  • [blokowanie skryptów] Przechowuj zmienną $ scripts html.tpl.php (z json_encode) w zmiennej javascript, aby umieścić je w kolejce do uruchomienia po pierwszym załadowaniu strony. To nienaturalne, ale konieczne. Niektóre problemy specyficzne dla przeglądarki musiały zostać rozwiązane.
  • [blocking css] Zaimplementowano coś podobnego do techniki Keitha Clarka , ale z rel = "prefetch". To wprowadza potrzebę rozwiązania FOUC .
  • [Minifikacja i kompresja] Zewnętrzna kompresja i minimalizacja do serwera dystrybucyjnego, na którym mogę użyć imagemagic, kompresora yui, pngoptim i innych rzeczy, aby pokonać te reguły, bez zmieniania instalacji drupala w niemożliwy do zarządzania bałagan.
jacmkno
źródło