Wpływ zbyt długiego wczytywania na wydajność

Porady oparte na danych dotyczące wolnego wczytywania obrazów z uwzględnieniem podstawowych wskaźników internetowych.

Łagodne wczytywanie to technika, która opóźnia pobieranie zasobu do momentu, aż będzie on potrzebny, aby oszczędzać dane i zmniejszać liczbę kolizji w sieci dotyczących kluczowych komponentów. W 2019 roku stał się standardem internetowym, a obecnie loading="lazy" dla obrazów jest obsługiwany przez większość popularnych przeglądarek.

W tym przewodniku opisano, jak za pomocą publicznie dostępnych danych o przejrzystości w internecie i eksperymentów A/B analizowano wdrażanie i charakterystykę wydajności leniwego wczytywania obrazów na poziomie przeglądarki. Wśród naszych ustaleń znalazło się to, że ładowanie opóźnione może być niesamowicie skutecznym narzędziem do zmniejszania liczby niepotrzebnych bajtów obrazów, ale nadmierne korzystanie z tego rozwiązania może negatywnie wpływać na wydajność. Konkretnie ta analiza pokazuje, że szybsze wczytywanie obrazów w pierwszym widocznym obszarze, podczas gdy leniwe ładowanie reszty, może przynieść korzyści obu stronom: mniejsza liczba wczytywanych bajtów i lepsze podstawowe wskaźniki internetowe.

Rozpowszechnienie

Według najnowszych danych z archiwum HTTP wbudowane leniwe ładowanie obrazów jest wykorzystywane w 29% witryn, a ich popularność gwałtownie rośnie.

Wykres kołowy przedstawiający 84,1% wprowadzenia leniwego ładowania w 84,1%, w przypadku innych systemów CMS – 2,3%, a w przypadku systemów innych niż CMS – 13,5%.
Podział typów witryn, które korzystają z opóźnionego wczytywania obrazów na poziomie przeglądarki. (źródło).

Wysyłanie zapytań do nieprzetworzonych danych w projekcie HTTP Archive pozwala nam lepiej zorientować się, jakie strony internetowe zyskują popularność: 84% witryn, które wykorzystują leniwe ładowanie obrazów na poziomie przeglądarki, korzysta z WordPressa, 2% innego CMS, a pozostałe 14% nie używa znanego systemu CMS. Wyniki wyraźnie pokazują, że WordPress jest liderem w tym zakresie.

Wykres czasowy przedstawiający stosowanie leniwego wczytywania. WordPress jest dominującym systemem w porównaniu z innymi systemami CMS i systemami bez CMS, a proporcje są podobne do tych z poprzedniego wykresu. Wykazuje się, że w okresie od lipca do czerwca 2021 r. całkowite rozpowszechnienie wzrasta z 1% do 17%.
Podział typów witryn, które korzystają z opóźnionego wczytywania obrazów na poziomie przeglądarki. (źródło).

Warto też zwrócić uwagę na tempo wdrażania. Rok temu w lipcu 2020 roku witryny WordPress, które wykorzystują leniwe ładowanie, stanowiły dziesiątki tysięcy stron w jednym korpusie liczącym około 6 milionów użytkowników (1% wszystkich). Od tego czasu leniwy sposób ładowania został zaimplementowany w ponad milionie witryn korzystających z WordPressa (14% ogółem).

Skuteczność korelacyjna

Więcej informacji znajdziesz w archiwum HTTP. Możesz porównać, jak działają strony z łatwym wczytywaniem obrazu na poziomie przeglądarki i bez niego za pomocą wskaźnika największego wyrenderowania treści (LCP). Dane LCP pochodzą z Raportu na temat użytkowania Chrome (CrUX), który zawiera dane o wrażeniach prawdziwych użytkowników, a nie z testów syntetycznych w laboratorium. Na wykresie poniżej zastosowano wykres pudełkowy i oświadowczy, aby zilustrować rozkłady wartości LCP w 75. percentylu dla poszczególnych stron: linie reprezentują 10. i 90. percentyl, a pudła – 25. i 75. percentyl.

Wykres pudełkowy pokazujący 10., 25., 75. i 90. percentyl strony, która korzysta z opóźnionego wczytywania obrazów na poziomie przeglądarki lub nie korzysta z tego mechanizmu. W porównaniu z tym czas LCP stron, które nie korzystają z AMP, jest krótszy niż w przypadku stron, które z niego korzystają.
Rozkład 75. percentyla LCP wszystkich stron z podziałem na to, czy korzystają one z opóźnionego wczytywania obrazów na poziomie przeglądarki. (źródło).

Średnia strona bez leniwego wczytywania ma wartość LCP w 75. percentylu wynoszącą 2922 ms, a z leniwym wczytywaniem – 3546 ms. Ogólnie rzecz biorąc, witryny korzystające z leniwego ładowania mają gorsze wyniki LCP.

Należy pamiętać, że są to wyniki korelacyjne i niekoniecznie wskazują, że wczytywanie opóźnione jest przyczyną wolniejszego działania. Teoretycznie, jeśli witryny WordPress są nieco wolniejsze i biorą udział w większym stopniu w grupie użytkowników korzystających z opóźnionego wczytywania, może to tłumaczyć różnicę. Aby wyeliminować tę zmienność, możesz skupić się na witrynach WordPress.

Wykres typu Box i whisker pokazujący 10, 25, 75 i 90 centyl dla stron WordPress, które korzystają z leniwego ładowania obrazów na poziomie przeglądarki lub nie korzystają z nich. W porównaniu z poprzednim wykresem rozkład LCP stron, które go nie wykorzystują, jest szybszy niż tych, które go wykorzystują.
Rozkład wartości LCP na poziomie 75 procentyla dla stron WordPressa, z podziałem na strony, które używają leniwego ładowania obrazów na poziomie przeglądarki. (źródło).

Niestety ten sam wzorzec może pojawić się przy analizie stron WordPress – te z leniwym ładowaniem mają zwykle wolniejszą wydajność LCP. Średnia strona WordPress bez opóźnionego wczytywania ma wartość LCP na poziomie 75. percentyla wynoszącą 3495 ms, w porównaniu z 3768 ms dla średniej strony z opóźnionym wczytywaniem.

Nie dowodzi to jednak, że opóźnione wczytywanie powoduje spowolnienie stron, ale jego użycie wiąże się z mniejszymi osiągami. Aby spróbować odpowiedzieć na pytanie o przyczynowość, przeprowadzono test A/B w laboratorium.

Skuteczność przyczynowa

Celem testu A/B było potwierdzenie lub obalenie hipotezy, że wbudowane leniwe ładowanie obrazów (zaimplementowane w rdzeniu WordPressa) powoduje zmniejszenie wydajności LCP i zmniejszenie liczby bajtów obrazu. W ramach testu wykorzystano witrynę demonstracyjną WordPressa z motywem twentytwentyone. Testowaliśmy zarówno strony z archiwum, jak i pojedyncze strony, które są podobne do stron głównych i artykułów, na komputerach oraz na emulowanych urządzeniach mobilnych za pomocą narzędzia WebPageTest. Przetestowano wszystkie kombinacje stron z włączonym i wyłączonym ładowaniem opóźnionym. Każdy test został przeprowadzony 9 razy, aby uzyskać medianę wartości LCP i liczbę bajtów obrazu.

Serie domyślna wyłączone Różnica w stosunku do wartości domyślnej
twentytwentyone-archive-desktop 2029 1759 –13%
twentytwentyone-archive-mobile 1657 1403 –15%
twentytwentyone-single-desktop 1655 1726 4%
twentytwentyone-single-mobile 1352 1384 2%
Zmiana LCP (ms) po wyłączeniu leniwego ładowania obrazów na poziomie przeglądarki na przykładowych stronach WordPress.

Te wyniki porównują średnie wartości LCP w milisekundach w przypadku testów na archiwum i pojedynczych stronach na komputery i urządzenia mobilne. Po wyłączeniu ładowania opóźnionego na stronach archiwalnych wskaźnik LCP poprawił się znacznie. W przypadku pojedynczych stron różnica była jednak mniejsza.

Wyłączenie leniwego ładowania powoduje, że poszczególne strony wczytują się nieco szybciej. Różnica w LCP jest jednak mniejsza niż jedno odchylenie standardowe zarówno w przypadku testów na komputery, jak i na urządzenia mobilne, więc można ją przypisać odchyleniu i uznać za neutralną. W przypadku stron archiwalnych różnica jest zbliżona do 2–3 odchyleń standardowych.

Serie domyślna wyłączone Różnica w stosunku do wartości domyślnej
twentytwentyone-archive-desktop 577 1173 103%
twentytwentyone-archive-mobile 172 378 120%
twentytwentyone-single-desktop 301 850 183%
twentytwentyone-single-mobile 114 378 O 233%
Zmiana liczby bajtów obrazu (KB) po wyłączeniu leniwego wczytywania obrazu na poziomie przeglądarki na przykładowych stronach WordPressa.

Te wyniki porównują średnią liczbę bajtów obrazu (w KB) w przypadku każdego testu. Zgodnie z oczekiwaniami opóźnione wczytywanie ma bardzo wyraźny pozytywny wpływ na zmniejszenie liczby bajtów obrazu. Gdyby prawdziwy użytkownik przewinął całą stronę, wszystkie obrazy i tak zostałyby wczytane, gdy pojawią się w widocznym obszarze. Wyniki pokazują jednak, że przy początkowym wczytywaniu strony poprawiła się jej wydajność.

Podsumowując wyniki testu A/B, należy stwierdzić, że technika ładowania opóźnionego stosowana przez WordPressa wyraźnie pomaga zmniejszyć liczbę bajtów obrazów kosztem opóźnienia LCP.

Testowanie poprawki

Najważniejszym aspektem obecnego wdrożenia leniwego ładowania w WordPressie jest to, że ta funkcja leniwie wczytuje obrazy w widocznym obszarze (w części strony widocznej na ekranie). W poście na blogu CMS zaznaczamy, że należy unikać tego wzorca, ale dane z eksperymentu wskazywały wówczas, że wpływ na LCP był minimalny i warto uprościć implementację w rdzenia WordPress.

Na podstawie tych nowych danych stworzono eksperymentalne rozwiązanie, które zapobiega wczytywaniu leniwie obrazów znajdujących się powyżej paska przewijania. Rozwiązanie zostało przetestowane w tych samych warunkach co pierwszy test A/B.

Serie domyślna wyłączone Napraw Różnica w stosunku do wartości domyślnej Różnica w stosunku do funkcji wyłączonej
twentytwentyone-archive-desktop 2029 1759 1749 -14% –1%
twentytwentyone-archive-mobile 1657 1403 1352 –18% -4%
twentytwentyone-single-desktop 1655 1726 1676 1% -3%
twentytwentyone-single-mobile 1352 1384 1342 -1% -3%
Zmiana LCP (ms) spowodowana przez proponowaną poprawkę leniwego ładowania obrazów na poziomie przeglądarki na przykładowych stronach WordPress.

Te wyniki są znacznie bardziej obiecujące. Lazy loading tylko obrazów poniżej linii zagięcia powoduje całkowite odwrócenie regresji LCP i być może nawet niewielkie polepszenie w porównaniu z całkowitym wyłączeniem lazy loadingu. Co może być szybsze niż bez leniwego ładowania? Jednym z wyjaśnień jest to, że brak ładowania obrazów w części strony widocznej po przewinięciu zmniejsza ryzyko rywalizacji z obrazem LCP w sieci, co sprzyja szybszemu ładowaniu.

Serie domyślna wyłączone Napraw Różnica w stosunku do wartości domyślnej Różnica w stosunku do funkcji wyłączonej
twentytwentyone-archive-desktop 577 1173 577 0% -51%
twentytwentyone-archive-mobile 172 378 172 0% –54%
twentytwentyone-single-desktop 301 850 301 0% -65%
twentytwentyone-single-mobile 114 378 114 0% –70%
Zmiana liczby bajtów obrazu (KB) w wyniku proponowanej poprawki dotyczącej leniwego ładowania obrazów na poziomie przeglądarki na przykładowych stronach WordPress.

W przypadku bajtów obrazu poprawka nie wprowadza żadnych zmian w porównaniu z działaniem domyślnym. To świetna wiadomość, ponieważ była to jedna z zalet obecnego podejścia.

Ta poprawka ma pewne ograniczenia. WordPress określa, które obrazy mają być wczytywane z opóźnieniem po stronie serwera, co oznacza, że nie wie nic o rozmiarze widocznego obszaru użytkownika ani o tym, czy obrazy są wczytywane w ramach tego obszaru. Aby to zrobić, używa heurystyki dotyczącej względnej lokalizacji obrazów w znacznikach, aby określić, czy obraz wczytuje się w obszarze widoku. Jeśli obraz jest pierwszym wyróżnionym obrazem na stronie lub pierwszym obrazem w głównej treści, zakłada się, że znajduje się w części strony widocznej na ekranie lub w jej pobliżu i nie będzie ładowany z opóźnieniem.

Na to, czy obraz znajduje się w widocznym obszarze, mogą mieć wpływ warunki na poziomie strony, takie jak liczba słów w nagłówku czy ilość tekstu akapitu na początku głównej treści. Istnieją też warunki na poziomie użytkownika, które mogą wpływać na dokładność heurystyki, zwłaszcza rozmiar widocznego obszaru i używanie linków kotwicy, które zmieniają pozycję przewijania strony.

Z tego powodu ważne jest, aby pamiętać, że ta poprawka jest skalibrowana tylko pod kątem zapewnienia dobrej skuteczności w ogólnym przypadku. Aby wyniki były odpowiednie do wszystkich rzeczywistych scenariuszy, może być konieczne dostosowanie ich.

Implementacja

Teraz, gdy znaleźliśmy lepszy sposób na opóźnione wczytywanie obrazów, jak strony mogą zacząć z niego korzystać? Zmiana o najwyższym priorytecie to przesłanie poprawki do rdzenia WordPressa w celu wdrożenia eksperymentalnej poprawki. W poście na blogu na temat nieaktywowanego wczytywania na poziomie przeglądarki w przypadku systemów CMS zostaną też wprowadzone zmiany, aby wyjaśnić negatywne skutki wczytywania nieaktywnych zasobów w wielokrotności i pokazać, jak systemy CMS mogą używać heurystyki, aby tego uniknąć.

Te sprawdzone metody są przydatne dla wszystkich webmasterów, dlatego warto też oznaczyć w narzędziach takich jak Lighthouse nieprawidłowe wzorce ładowania opóźnionego. Jeśli chcesz śledzić postępy kontroli, zapoznaj się z prośbą o dodanie funkcji w GitHubie. Do tego czasu deweloperzy mogą dodać do danych polowych bardziej szczegółowe logi, aby znaleźć elementy LCP wczytywane z opóźnieniem.

new PerformanceObserver((list) => {
 
const latestEntry = list.getEntries().at(-1);

 
if (latestEntry?.element?.getAttribute('loading') == 'lazy') {
    console
.warn('Warning: LCP element was lazy loaded', latestEntry);
 
}
}).observe({type: 'largest-contentful-paint', buffered: true});

Powyższy fragment kodu JavaScript sprawdzi ostatni element LCP i w razie potrzeby wygeneruje ostrzeżenie, jeśli element został załadowany z opóźnieniem.

Pokazuje to też słabą stronę techniki leniwego ładowania i potencjał do ulepszenia interfejsu API na poziomie platformy. Na przykład w Chromium jest otwarty problem dotyczący eksperymentowania z domyślnym wczytywaniem kilku pierwszych obrazów, podobnie jak w przypadku poprawki, mimo atrybutu loading.

Podsumowanie

Jeśli Twoja witryna korzysta z opóźnionego wczytywania obrazów na poziomie przeglądarki, sprawdź, jak jest ono zaimplementowane, i przeprowadź testy A/B, aby lepiej poznać koszty związane z tym rozwiązaniem. Może to być korzystne w przypadku szybszego wczytywania obrazów powyżej zagięcia. Jeśli masz witrynę WordPress, wkrótce powinna pojawić się łatka do głównego kodu WordPress. Jeśli używasz innego systemu CMS, upewnij się, że jego twórcy są świadomi potencjalnych problemów z wydajnością opisanych w tym artykule.

Wypróbowywanie stosunkowo nowych interfejsów API platform internetowych może wiązać się z zaryskiem ryzyka i możliwościami. Nie bez powodu nazywamy je zaawansowanymi funkcjami. Zaczynamy już rozumieć, jak trudne jest opóźnione wczytywanie obrazów na poziomie przeglądarki, ale widzimy też zalety takiego rozwiązania, które pozwala uzyskać lepszą wydajność.

Zdjęcie autorstwa Frankie LopezUnsplash