Odroczone ładowanie obrazów poza ekranem
Silktide sprawdza, czy strona pobiera obrazy, których odwiedzający jeszcze nie widzi — obrazy znajdujące się niżej na stronie, poniżej pierwszego ekranu. Ładowanie ich z góry opóźnia wyświetlenie treści, którą odwiedzający faktycznie ogląda.
Rozwiązaniem jest : przeglądarka pobiera każdy obraz tuż przed przewinięciem go do widoku, zamiast od razu pobierać wszystkie obrazy na stronie.
Dlaczego to jest ważne
Podczas ładowania strony przeglądarka ma ograniczoną przepustowość, a każdy pobierany obraz konkuruje z pozostałymi zasobami. Przeznaczenie tej przepustowości na obrazy znajdujące się trzy ekrany niżej oznacza, że obraz nagłówkowy, tekst i przyciski, na które czeka odwiedzający, pojawią się później.
Na długich stronach z dużą liczbą obrazów marnotrawstwo jest znaczne: odwiedzający, który przeczyta pierwszy ekran i opuści stronę, mógł zapłacić — czasem i transferem danych mobilnych — za dziesiątki obrazów, których nigdy nie zobaczył.
Jak to naprawić
- Dodaj
loading="lazy"do obrazów poniżej pierwszego ekranu. Przeglądarki obsługują to natywnie, bez potrzeby używania skryptów:
<!-- Niżej na stronie: nie ładuj, dopóki odwiedzający się do niego nie zbliży -->
<img src="team-photo.jpg" alt="Nasz zespół" loading="lazy" width="800" height="600">
- Nie stosuj leniwego ładowania obrazów na górze strony, zwłaszcza największego z nich — opóźnia to wyświetlenie tego, co odwiedzający widzą najpierw, i przynosi więcej szkody niż pożytku.
- Wiele systemów CMS i frameworków automatycznie stosuje obecnie leniwe ładowanie obrazów; jeśli Twój system tego nie robi, przed edycją szablonów sprawdź, czy dostępne jest odpowiednie ustawienie lub wtyczka.
- Zachowaj jawnie określone wymiary obrazów ładowanych leniwie, aby strona nie przeskakiwała po ich załadowaniu — zobacz Jawne rozmiary obrazów.
Jak Silktide to testuje
- Ładuje stronę w rzeczywistej przeglądarce, korzystając z typu urządzenia, szybkości połączenia i lokalizacji testowej skonfigurowanych dla testów szybkości.
- Identyfikuje obrazy pobrane podczas początkowego ładowania, które znajdują się całkowicie poniżej widocznego ekranu i nie są już odroczone.
- Raportuje każdy obraz poza ekranem wraz z rozmiarem pobierania, który można odroczyć.
- Ocenia stronę na podstawie łącznego rozmiaru, który można odroczyć: około 30 KB obniża ocenę, a 100 KB lub więcej jest oceniane jako słabe.
Rozwiązywanie problemów
Obraz jest widoczny na moim ekranie
To, co znajduje się „poza ekranem”, zależy od ekranu. Silktide testuje przy użyciu urządzenia skonfigurowanego dla testów szybkości, dlatego obraz znajdujący się obok granicy widocznego obszaru na komputerze stacjonarnym może znajdować się poniżej pierwszego ekranu w mniejszym . Leniwe ładowanie jest nadal bezpieczne: obraz ładuje się, gdy tylko odwiedzający się do niego zbliży.
Już stosujemy leniwe ładowanie za pomocą skryptu
Starsze rozwiązania oparte na skryptach czasami nadal uruchamiają pobieranie zbyt wcześnie albo skrypt może nie obejmować obrazów dodanych przez inne wtyczki. Zgłoszone obrazy pokazują dokładnie, co zostało pobrane poza ekranem; natywne loading="lazy" to najprostsze niezawodne rozwiązanie.