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.
źródło
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.Odpowiedzi:
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 / JSIść do
admin/config/development/performance/advagg- Wybierz „Użyj zalecanych (zoptymalizowanych) ustawień”
AdvAgg Kompresuj JavascriptZainstaluj 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 LoaderZainstaluj 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 BundlerZainstaluj AdvAgg Bundler, jeśli nie jest włączony, i przejdź do
admin/config/development/performance/advagg/bundlerUstawienia HTTP / 2.0
Ustawienia HTTP / 1.1 (domyślne)
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 RelocateZainstaluj AdvAgg Relocate, jeśli nie jest włączony, i przejdź do
admin/config/development/performance/advagg/relocate- Wybierz „Użyj zalecanych (zoptymalizowanych) ustawień”
AdvAgg ModifierZainstaluj 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 CSSWejdź 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órzcritical-css/katalog. Następny katalog jest oparty na użytkowniku;anonymous/,all/lubauthenticated/można użyć.Następnym katalogiem może być
urls/lubtype/. Patrząc naurls/; 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.xSpojrzenie 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.csspoprawne przykładowe lokalizacje plików dla strony „node / 1” current_path ():
sites/all/themes/bootstrap/critical-css/anonymous/urls/node/1.csspoprawne przykładowe lokalizacje plików dla typu węzła „strona”:
sites/all/themes/bootstrap/critical-css/anonymous/type/page.cssJeś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
źródło
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).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):
źródło