Lazy loading obrazków: jedno słowo, duża różnica
Strona z galerią potrafi ważyć kilkanaście megabajtów, choć użytkownik widzi na starcie trzy zdjęcia. Jeden atrybut w kodzie sprawia, że reszta wczytuje się dopiero wtedy, gdy jest potrzebna.
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ć.
Komentarze (9)
-
Renata
Dodanie width i height do zdjęć podniosło nam wynik w PageSpeed o kilkanaście punktów. Dosłownie pół godziny pracy.
Odpowiedz -
Renata
Dodanie width i height do zdjęć podniosło nam wynik w PageSpeed o kilkanaście punktów. Dosłownie pół godziny pracy.
Odpowiedz -
Zbyszek
Ostrzeżenie o nieoznaczaniu zdjęcia w nagłówku jest kluczowe. Sam popełniłem ten błąd i wyniki mi spadły zamiast wzrosnąć.
Odpowiedz -
Zbyszek
Ostrzeżenie o nieoznaczaniu zdjęcia w nagłówku jest kluczowe. Sam popełniłem ten błąd i wyniki mi spadły zamiast wzrosnąć.
Odpowiedz -
- Administrator autor bloga
WebP obsługują dziś wszystkie aktualne przeglądarki, więc zapasowe pliki JPEG nie są konieczne. My i tak zostawiamy je na serwerze i podmieniamy w locie po nagłówku Accept — kosztuje trzy linijki w konfiguracji, a działa nawet w bardzo starych przeglądarkach.
Odpowiedz - Administrator autor bloga
WebP obsługują dziś wszystkie aktualne przeglądarki, więc zapasowe pliki JPEG nie są konieczne. My i tak zostawiamy je na serwerze i podmieniamy w locie po nagłówku Accept — kosztuje trzy linijki w konfiguracji, a działa nawet w bardzo starych przeglądarkach.
Odpowiedz
-
-
- Administrator autor bloga
WebP obsługują dziś wszystkie aktualne przeglądarki, więc zapasowe pliki JPEG nie są konieczne. My i tak zostawiamy je na serwerze i podmieniamy w locie po nagłówku Accept — kosztuje trzy linijki w konfiguracji, a działa nawet w bardzo starych przeglądarkach.
Odpowiedz
-
Przeczytaj też
Cache procesora w pigułce: dlaczego kolejność ma znaczenie
Dwa programy robiące dokładnie to samo potrafią różnić się czasem działania kilkukrotnie. Często nie chodzi o liczbę operacji, tylko o to, w jakiej kolejności program sięga po dane.
WebSocket w Node: kiedy strona ma odzywać się sama
Zwykły HTTP działa jak wysyłanie listów: klient pyta, serwer odpowiada. Przy czacie czy powiadomieniach to za mało — potrzebna jest linia telefoniczna, którą obie strony mogą się odezwać w dowolnym momencie. Od tego jest WebSocket.
Pięć wyrażeń regularnych, które warto mieć pod ręką
Wyrażenia regularne wyglądają jak przypadkowy zbiór znaków, dopóki nie rozłoży się ich na części. Oto pięć wzorców z codziennej pracy, rozebranych po kawałku.
Robimy strony, które są szybkie nie tylko na papierze.
Poproś o darmową wycenę