Myślę, że powinniśmy zacząć od faktu, że Drupal początkowo daje nam pewien zestaw narzędzi do zarządzania optymalizacją frontendu, który nie jest początkowo obecny w innych systemach zarządzania treścią. Niektóre rzeczy są natychmiast widoczne w admin, a dla niektórych są funkcje i haki, które mogą być używane zarówno na poziomie modułu, jak i na poziomie motywu Drupala. W tym przeglądzie przyjrzymy się podstawowym funkcjom optymalizacji frontend witryny na Drupalu, a także specjalnym modułom, które rozszerzą dostępny standardowy arsenał.
Fundusze własne
Pierwszą rzeczą, którą możemy zrobić, aby poprawić wydajność naszej strony na Drupalu, jest przejście do panelu administracyjnego i włączenie agregacji CSS i JavaScript w sekcji ustawień wydajności (admin / config / development / performance).
To oczywiście nie tyle, ale coś jeszcze. Następnie, zgodnie z podstawowymi zasadami działania frontentu, chcemy przenieść wszystkie JavaScript na dół strony, przed tagiem zamykającym „body” lub jak najbliżej niego.
Zaawansowana agregacja CSS / JS
Moduł, który znacznie zwiększa możliwości optymalizacji wydajności interfejsu Drupala. Więc co on robi?
- Agregacja CSS / JS na żądanie.
- Ochrona przed powtarzającą się agregacją CSS / JS. Użycie blokowania, aby zatrzymać wiele żądań do tego samego pliku.
- Możesz dodać JS do dowolnego regionu tematu, a pliki w regionie również zostaną zagregowane.
- Kombinacje plików CSS przy użyciu zapytań o media.
- Ogranicza gromadzenie plików CSS do mniej niż 4095 selektorów CSS (uniemożliwia ograniczenie IE 6-9).
- Obsługa Gzip. Wszystkie zagregowane pliki można wstępnie skompresować do plików .gz i przekazać do Apache. Jest szybszy niż kompresowanie każdego pliku dla każdego żądania.
- Submoduł Bundlera . Umożliwia grupowanie plików według ich przynależności do siebie.
- Podmoduł modyfikatora . Dodaje pyszne „bułeczki”.
- Przetwarzanie wstępne dla wszystkich CSS / JS;
- Umieść JS na stronie;
- dodaj atrybut odroczenia dla wszystkich js;
- Osadzaj CSS / JS w linii dla określonych ścieżek;
- usuń nieużywane tagi JavaScript, jeśli to możliwe, w tym przypadku wszystkie dołączone pliki JS zostaną przeskanowane pod kątem użycia jQuery i Drupala, jeśli nie zostaną znalezione, JavaScript zostanie usunięty ze strony domyślnej;
- natywna obsługa asynchronicznego pobierania javascript;
- Składniki kompresji CSS / JS . Może zminimalizować pliki i wbudowany CSS / JS.
- Podmoduł walidatora CSS / JS . Sprawdza poprawność wszystkich plików CSS za pomocą jigsaw.w3.org. Sprawdza wszystkie pliki CSS za pomocą CSSLint. Sprawdza wszystkie pliki JS za pomocą JSHint.
Magiczny moduł
Moduł ten, oprócz podstawowej optymalizacji frontendu, pozwala także na dodawanie przydatnych funkcji programisty do motywów, dlatego warto opisać go w tej recenzji.
Wiele popularnych podstawowych motywów dostarcza przydatnych narzędzi, które pomogą Ci zoptymalizować frontend.
Moduł ten łączy szereg tych przydatnych narzędzi w jednym miejscu.
Zamiast zaimplementować przydatne funkcje front-end dla każdego w każdym temacie, Magic pozwala ci zachować wszystko w jednym module i wygodnie nim zarządzać.
Oto, co mamy dzisiaj:
- Ulepszenia agregacji CSS
- Możliwość jawnego wykluczenia plików CSS i JS
- Przenieś javascript na dół strony
- Przebuduj temat rejestru na stronie Przeładuj
- Wskaźnik szerokości wyświetlacza dla Viewport
- Bezpieczne przenoszenie JavaScript do Drupala 8 w obiegu (Obejrzyj prezentację Theodore'a Biadali w DrupalCon Praga na temat aktualizacji JS w Drupal 8 do podglądu)
Moduł umożliwi również eksportowanie zestawu własnych ustawień dla każdego z motywów. Odwiedź stronę Ustawienia swojego motywu, aby zobaczyć przykład (na przykład / admin / appearance / settings / bartik).
Więc co on robi?