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