Jak przyspieszyć stronę na Drupalu? Moduł Lazy-load i jego możliwości

Prędkość ładowania strony jest bardzo istotnym aspektem w odbiorze portalu przez użytkownika. Jak zatem można przyspieszyć ładowanie strony internetowej posiadającej dużą ilość mediów czy iframe’ów? Jednym z lepszych rozwiązań jest wykorzystanie leniwego ładowania. Natomiast najprostszym sposobem na użycie tej metody w Drupalu jest korzystanie z modułu Lazy-load.

Czym jest szybkość ładowania strony?

Jest to czas wymagany do wyświetlenia strony internetowej użytkownikowi, liczony od momentu kliknięcia linku. Jest zależny od ilości tekstu, osadzonych elementów (jak np. iframe’y), skryptów oraz mediów (obrazów, filmów), w przypadku których liczy się również rozmiar. Często najdłużej ładowane są media oraz elementy osadzone. Na dużych stronach wiele elementów jest niewidocznych dla użytkownika, dopóki nie przewinie strony, a mimo to są one ładowane przed wyświetleniem części mieszczącej się na wyświetlaczu.

Google wprowadziło wytyczne dotyczące SEO, w których szybkość ładowania jest uwzględniana przy pozycjonowaniu serwisu. Dlatego warto dbać o sprawne wyświetlanie stron. Dwoma znaczącymi miarami w kwestii prędkości ładowania stron są TBT (Total Blocking Time) oraz LCP (Largest Contentful Paint). TBT wskazuje czas wykonywania długich zadań, a LCP wyznacza, po jakim czasie zawartość strony jest prawdopodobnie użyteczna. Na obie miary w dużym stopniu wpływa ilość oraz wielkość ładowanych elementów.

Ładowanie strony na Drupalu - moduł Lazy-load

Nowsze wersje Drupala (od v9.1.0), wraz z powszechnie używanymi przeglądarkami (Chrome od v76, Firefox od v75), obsługują leniwe ładowanie (lazy-loading) od razu po instalacji. Jednak trzeba liczyć się z faktem, że wiele stron korzysta ze starszych wersji Drupala. Najczęściej są to strony rozwijane latami, a więc często posiadające dużo danych (w tym media i elementy osadzone), których długie ładowanie pogarsza odbiór portalu. W takich przypadkach warto sprawdzić, czy nie można zastosować leniwego ładowania w celu zredukowania czasu ładowania serwisu oraz transferu potrzebnego do wczytania widocznych elementów.

Wydany 10 kwietnia 2018 roku moduł Drupala Lazy-load umożliwia ograniczenie ładowania wspomnianych elementów do jedynie tych wymaganych w danym momencie. Dzięki czemu skraca się czas ładowania strony, a przede wszystkim oszczędza zużycie transmisji. Ze względu na jego użyteczność, z modułu korzysta ponad 10 tysięcy stron. Posiada on wersje zarówno na Drupala 8+ (najnowsza wersja 8.x-3.11 z 31 stycznia 2022 roku) jak i Drupala 7 (najnowsza wersja 7.x-1.4 z 22 kwietnia 2019 roku).

Godnym pochwały jest fakt, że Osman Gormus jest jedynym opiekunem projektu, a mimo to moduł nie utracił wsparcia od początku swego istnienia.

W celu zobrazowania skuteczności modułu Lazy-load, poniżej przedstawiamy wyniki testów na stronie zawierającej 36 iframe’ów (z czego widocznych w obszarze ładowanym jest 6) oraz 116 obrazów będących poza widokiem.

W powyższym przykładzie użytkownik jest w stanie zobaczyć stronę prawie o połowę szybciej w przypadku użycia modułu. Co więcej, oszczędność łącza wynosi ponad 98%. Oczywiście wyniki dla każdej strony będą mocno uzależnione od wielkości oraz ilości elementów poza obszarem ładowania. Przykład wprawdzie jest groteskowy (raczej nie spotkamy strony z tak dużą liczbą zdjęć czy elementów osadzonych), ale ma to na celu zobrazowanie, jak ważne w odbiorze strony może się okazać wykorzystanie strategii lazy loading.

Instalacja

Moduł korzysta z dodatkowych bibliotek, a więc instalacja wymaga ich uwzględnienie. Najprostszym i najszybszym sposobem jest wykorzystanie do tego pliku composer.json. W kilku krokach można przeprowadzić pełną instalację modułu wraz z zależnościami.

1. W sekcji repositories należy dodać:

   { 
     "type": "composer", "url": "https://asset-packagist.org" 
   }

2. Następnie trzeba uruchomić komendę (w razie potrzeby dodać opcję -W na końcu):

   composer require drupal/lazy:^3.0 bower-asset/lazysizes:^5.1 oomphinc/composer-installers-extender:^2.0 --no-update

3. Musimy zedytować w composer.json sekcję extra, aby zawierała:

   "installer-types": ["bower-asset", "npm-asset"],
   "installer-paths": {
     …
     "web/libraries/{$name}": ["type:drupal-library", "type:bower-asset", "type:npm-asset"],
     …
   }

4. Teraz możemy uruchomić komendę composer update.

Pełna instrukcja znajduje się w oficjalnej dokumentacji.

W przypadku gdy potrzebna jest instalacja manualna, należy ściągnąć pliki modułu z jego strony na Drupal.org oraz bibliotekę dostępną na GitHubie i wypakować kolejno do folderów modules/contrib/lazy oraz libraries/lazysizes. Pełna instrukcja znajduje się na stronie modułu.

Jak używać moduł Lazy-load?

Ważne: Moduł posiada własną konfigurację znajdującą się pod ścieżką admin/config/content/lazy. Podzielona jest na 3 zakładki.

1. Ustawienia ogólne

1. Prefer native lazy-loading - zaznaczenie opcji spowoduje wymuszenie używania leniwego ładowania wbudowanego w przeglądarkę.
2. skipClass - elementy posiadające wpisaną klasę nie będą korzystały z leniwego ładowania.
3. Placeholder image URL - obraz wstawiany w miejsce ładowanych obiektów.
4. Enable default CSS effect - włączenie domyślnych przejść podczas ładowania obiektów, wykorzystując CSS z adekwatnymi klasami.
5. Use minified versions - zaznaczenie opcji spowoduje używanie skryptów w wersjach zminifikowanych.
6. Lazysizes library path, or URL - ścieżka lub adres wskazujący bibliotekę Lazysizes (wymaganą przez moduł).

2. Widoczność

1. Pages - ścieżki stron, które mają wykorzystywać lub mieć wyłączone leniwe ładowanie, uzależnione od checkboxa z punktu 2.
2. Enable lazy-loading ONLY on specified pages - opcja decydująca czy ścieżki wpisane w punkcie 1. mają mieć wyłączony lazy-loading (opcja odznaczona), czy tylko na wskazanych stronach ma być on aktywny (opcja zaznaczona).
3. Disable lazy-loading for administration pages - blokuje wykonywanie skryptu modułu na stronach administracyjnych.

3. Konfiguracja Lazysizes

1. lazyClass - klasa oznaczająca elementy, które powinny być brane pod uwagę przy leniwym ładowaniu.
2. loadedClass - klasa nadawana po załadowaniu elementu.
3. loadingClass - klasa nadawana podczas ładowania elementu.
4. preloadClass - klasa oznaczająca elementy, które powinny być ładowane po “onload”.
5. errorClass - klasa nadawana elementom, których ładowanie nie zakończyło się poprawnie.
6. autosizesClass - klasa oznaczająca elementy, które będą automatycznie skalowane.
7. srcAttr - atrybut src
8. srcsetAttr - atrybut srcset
9. sizesAttr - atrybut sizes
10. minSize - do użytku z data-sizes=”auto”. Minimalna wielkość obrazu do obliczenia atrybutu sizes.
11. customMedia - obiekt będący aliasem mapowania różnych zapytań o media. Może być używany do oddzielania/scentralizowania implementacji (układu) wielu konkretnych zapytań o media, od atrybutu source[media] (treść/struktura) poprzez tworzenie oznaczonych zapytań o media.
12. init - decyduje o inicjalizacji biblioteki Lazysizes. W niektórych przypadkach wymagane może być wyłączenie automatycznej inicjalizacji. Wymagane wtedy jest ręczne uruchomienie przez użycie lazySizes.init();.
13. expFactor - współczynnik wskazujący ile assetów powinno być załadowanych, gdy nie zostaje wykonana żadna ważna akcja.
14. hFac - współczynnik analogiczny do expFactor, ale w orientacji poziomej.
15. loadMode - tryb ładowania. 0 - brak ładowania, 1 - ładowanie tylko widocznych elementów, 2 - ładowanie elementów widocznych i bliskich, 3 - ładowanie elementów widocznych, bliskich i łapiących się w zasięgu poszerzenia o expFactor. W trakcie onload opcja jest autoamtycznie ustawiana na 3.
16. loadHidden - decyduje, czy ukryte elementy powinny być również ładowane. LazySizes ładuje takie elementy z opóźnieniem.
17. rlcTimeout - opcja opóźnienia dla requestIdleCallback.
18. throttleDelay - opóźnienie używane dla listeners.
19. Plugins - wybór pluginów, które powinny być załączone. Pełna specyfikacja i opis pluginów znajduje się na Githubie.

W celu załączenia leniwego ładowania wymagana jest edycja wyświetlania pól, dla których potrzebne jest jego zastosowanie. Dla przykładu, chcemy umożliwić dodanie zdjęć obsługujących leniwe ładowanie na stronach typu page. W tym celu należy wykonać następujące kroki:

1. Wybrać w panelu administracyjnym Struktura -> Rodzaje zawartości -> Prosta strona -> Zarządzaj polami (admin/structure/types/manage/page/fields).

2. Dodać nowe pole (np. typu Image).

3. Przejść do zarządzania wyświetlaniem.

4. Rozwinąć opcje pola (kliknięcie symbolu trybika po prawej stronie).

5. W rozwiniętych ustawieniach zaznaczyć pole Enable lazy-loading.

Od tego momentu wszystkie obrazy dodane w tym polu będą korzystały z leniwego ładowania. Co więcej będą dodawane klasy, ustawiane w konfiguracji modułu (admin/config/content/lazy) w zakładce Lazysizes configuration, omówionej przez nas wcześniej, w części Konfiguracja Lazysizes.

Dzięki powyższym ustawieniom, możemy dodać efekty dla elementów z leniwym ładowaniem, w zależności od ich statusu, wykorzystując stylowanie w plikach CSS (np. blurowanie obrazów, które nadal się ładują czy też dodanie czerwonej ramki do elementów, których nie udało się załadować). Poniżej przykład z dwoma obrazami - w pełni załadowanym (górny) oraz w trakcie ładowania (dolny):

W przypadku treści osadzonych, dodawanych w treści, należy pamiętać, aby dodać atrybut loading=”lazy”, jak w przypadku iframe:

<iframe loading="lazy" src="example-page">

Moduł dodaje hook hook_lazy_field_formatters_alter, który umożliwia dopisanie nieobsługiwanych jeszcze formaterów do pól bazujących na obrazach.

Przykład:

function hook_lazy_field_formatters_alter(array &$formatters) {
  $formatters[] = 'xyz_module_field_formatter';

  return $formatters;
}

Moduł Drupal Lazy-load - podsumowanie

Używanie modułu Drupala Lazy-load znacząco redukuje czas ładowania stron posiadających wiele mediów, znajdujących się poza obszarem widocznym bezpośrednio po ich załadowaniu, a także oszczędza transmisję danych użytkownika. Lazy-load jest przydatny dla starszych wersji Drupala, gdyż nowsze posiadają wbudowaną obsługę leniwego ładowania. Jednak nawet i dla nich ten moduł jest godny uwagi ze względu na konfigurowalność stylizowania elementów, w zależności od ich aktualnego statusu ładowania.

Zastanawiasz się, czy moduł Lazy-load jest odpowiedni dla Twojej strony? Utrzymujemy i tworzymy wiele stron internetowych na Drupalu, więc korzystając z naszego doświadczenia, chętnie sprawdzimy, które rozwiązanie będzie najlepsze dla Twojego serwisu.