Co możemy zrobić z obrazkami? | Cykl 100 punktów w PageSpeed

Ładowanie obrazów na stronie zajmuje najwięcej czasu i najwięcej punktów można właśnie tutaj odzyskać, bo obrazki wpływają m.in na FCP czy CLS.
Cała sztuka optymalizacji obrazków na stronie ogranicza się głównie do poprawnie dobranego obrazka i prawidłowego użycia tagu IMG.

Odłóż ładowanie obrazów poza ekranem

Inaczej Lazy Loading (leniwe ładowanie) polega to na tym, że obrazki ładuje się dopiero w momencie, kiedy zachodzi taka potrzeba, czyli jeśli użytkownik do niej „zescrolluje”.

<img src="obrazek.png" loading="lazy" />

Jednak pamiętaj, aby dodawać ten atrybut tylko dla obrazków, które nie są widoczne poza pierwszym ekranem, w innym przypadku wydłużysz czas oczekiwania na treści.

Atrybut loading przyjmuje następujące wartości:

• lazy – ładowanie przy scrollowaniu
• eager – domyślne zachowanie. Obrazek ładuje się od razu przy ładowaniu strony

Użyj efektywnego kodowania obrazów oraz wyświetlaj obrazy w formatach nowej generacji

Chodzi tutaj o wielkość obrazków. Pierwsze to optymalizacja obrazków png – możesz tutaj wykorzystać narzędzie https://tinypng.com. Dzięki czemu zaoszczędzisz około 50-70% wielkości obrazka (czyli też i czasu ładowania). Ograniczysz dzięki temu transfer oraz zasoby serwera.

Kwestia kolejna to wykorzystanie nowych formatów. Najlepszym moim zdaniem aktualnie formatem jest webp. Zaletą tego formatu jest to, że jest on jeszcze mniejszy niż zoptymalizowany obrazek png i nie traci nia jakości.

Konwersje można wykonać w locie dla każdego obrazka, aby nie pobierać każdej grafiki z strony konwertować i zapisywać. Pomoże Ci tutaj funkcja PHP https://www.php.net/manual/en/function.imagewebp.php. Dla małych stronek gdzie jest kilka obrazków na krzyż wykorzystuje natomiast https://image.online-convert.com/convert-to-webp. Jednak konwerter ma jeden wielki minus – można na raz tylko dwa obrazki przerabiać.

Elementy graficzne nie mają bezpośrednio określonych atrybutów width ani height

Kolejna drobna zmiana na stronie dająca dużo punktów. Tylko dlaczego to jest ważne?

Podczas renderowania drzewka DOM strony wyświetlane są wszystkie elementy teksty, divy, obrazki czy filmiki. Wykorzystujemy to leniwe ładowanie. Także przeglądarka nie czeka na obrazki i od razu renderuje stronę. Obrazek się załadował (ale nie ma tych atrybutów) i co się dzieje? Następuje przesunięcie układu strony co wpływa negatywnie na odbiór strony… no i oczywiście punktacje, a w końcu to cykl 100punktów w Google PageSpeed.

Po dodaniu tych dwóch atrybutów przeglądarka wie, że w danym miejscu będzie obrazek i o jakich wymiarach więc rezerwuje mu to miejsce.

Jednak co zrobić gdy obrazek w zależności od rozdzielczości ma inne atrybuty width oraz hight? Wykorzystujemy inny obrazek 😉

Zmień rozmiar obrazów

Wykorzystujemy inny obrazek, bo w zależności od wielkości strony potrzebujemy małych i obrazów. Możemy oczywiście manipulować atrybutami, ale doprowadzimy do sytuacji gdzie PageSpeed rzuci nam błąd: Zmień rozmiar obrazów. W końcu po co mamy ładować obrazek z szerokością 1900px na czy tablecie co ma maksymalną szerokość 900px.

Z tego powodu najpierw dopasowujemy obrazek do największej szerokości/wysokości jaką potrzebujemy na stronie i następnie wykorzystujemy tag picture, dzięki któremu podstawimy w miejsce src odpowiedni obrazek.

 <picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg">
</picture> 

No i tyle na dzisiaj 😉 Moim zdaniem zajęcie się obrazkami na stronie jest najłatwiejszym i najszybszym sposobem na podbicie punktacji i całościowe przyśpieszenie strony. Dlatego warto zająć się najpierw właśnie tymi najłatwiejszymi tematami i dopiero wtedy przechodzić do kolejnych punktów przy przyśpieszaniu strony