Lazy loading obrazków: jedno słowo, duża różnica

Obrazki to zwykle najcięższa część strony. Przy galerii albo liście produktów łatwo o kilkanaście megabajtów, z czego użytkownik na starcie widzi ułamek. Przeglądarki mają na to wbudowane rozwiązanie i korzysta się z niego jednym atrybutem.

Cały mechanizm

<img src="zdjecie.jpg" alt="Opis" loading="lazy" width="800" height="600">

Tyle. Przeglądarka pobierze plik dopiero wtedy, gdy użytkownik zbliży się do niego przewijaniem. Działa we wszystkich aktualnych przeglądarkach, bez żadnej biblioteki.

Dwie pułapki

Nie oznaczaj tak zdjęcia w nagłówku strony. Obrazek widoczny od razu po wejściu będzie przez lazy loading wczytany później niż powinien — a to psuje wynik w pomiarach szybkości, bo Google mierzy właśnie moment pojawienia się największego elementu na pierwszym ekranie. Zdjęcia nad linią zgięcia zostaw bez tego atrybutu, a najważniejszemu dodaj fetchpriority="high".

Zawsze podawaj szerokość i wysokość. Bez nich przeglądarka nie wie, ile miejsca zarezerwować, i po wczytaniu obrazka treść pod nim przeskakuje. To osobny wskaźnik, który Google mierzy i za który obniża ocenę strony. Atrybuty width i height wystarczą — CSS i tak może potem zmienić rozmiar.

Reszta pracy przy obrazkach

Lazy loading opóźnia pobieranie, ale nie zmniejsza plików. Największe oszczędności są gdzie indziej:

• Format WebP daje przy tej samej jakości pliki zwykle o 25–35 procent mniejsze od JPEG. Serwer może podawać go automatycznie tym przeglądarkom, które go obsługują, bez zmiany adresów w kodzie.
• Realny rozmiar. Zdjęcie 4000 pikseli szerokości wyświetlane w kafelku 400 pikseli to marnowanie transferu. Przeskaluj przed wgraniem.
• Atrybut srcset pozwala podać kilka wersji tego samego zdjęcia — telefon pobierze małą, monitor dużą.
• Kompresja. Jakość 80 procent przy JPEG jest wzrokowo nie do odróżnienia od 100, a plik jest o połowę lżejszy.

Ile to daje

Typowa strona z galerią po takim zestawie zabiegów schodzi z kilkunastu megabajtów do jednego–dwóch przy pierwszym wczytaniu. Na telefonie w słabym zasięgu to różnica między stroną, która się otwiera, a taką, którą użytkownik zamyka przed pojawieniem się treści.

Najszybszy plik to ten, którego przeglądarka w ogóle nie musiała pobrać.