Optymalizacja zdjęć to czynność, którą wykonać może każdy i od razu poprawi się wynik w testach szybkości ładowania strony o kilka punktów lub procent.
Od czego zacząć?
Przede wszystkim zastanów się czy wszystkie zdjęcia są potrzebne, może są takie, których możesz się pozbyć? Jeżeli tak, to usuń je ze strony. Jeżeli wszystkie są potrzebne to pozostaje ich optymalizacja.
Jak to zrobić?
Jeszcze nie tak dawno zaleciłbym dokładne zastanowienie się jakiego formatu zdjęcia użyć w danym miejscu, sekcji, podstronie itp. Dzisiaj myślę, że jest to już zbędne. Ponieważ wpis dotyczy WordPressa, a ten kilka wersji temu umożliwił wgrywanie plików .webp do biblioteki mediów, to zalecam korzystanie właśnie z tego rodzaju, ze względu na rozmiar, który potrafi być kilkukrotnie mniejszy.
Stosowanie plików .webp to pójście na kompromis. Na pewno pojawi się róznica w jakości.
Ważnym parametrem zdjęcia jest również jego rozdzielczość w pionie i poziomie. Nie umieszczaj na stronie zdjęć bezpośrednio z aparatu, poddaj je wcześniej skalowaniu w programie graficznym do szerokości bądź wysokości optymalnej dla obszaru strony gdzie zdjęcie będzie się znajdować. Mam tutaj na myśli przeskalowanie zdjęcia np. 4000x3000px do maksymalnie 1920x1080px (jeżeli potrzeba to kadrujemy). Przykład jest bardzo ogólny, ale obrazuje zasadę. Często jest potrzeba przeskalowania i wykadrowania zdjęcia do kontenera, który ma określoną maksymalną szerokość. I tutaj możemy zyskać najwięcej.
Obrazki produktowe
W przypadku grafik produktów należy zrobić dokładnie to o czym napisałem powyżej. I trzeba o tym pamiętać konfigurując już pierwszy produkt. Mając kilkadziesiąt lub kilkaset produktów, rzeczą prawie niemożliwą będzie wymienić każdą grafikę na odpowiednio przeskalowaną i wykardowaną. W takiej sytuacji pozostaje tylko użycie wtyczki do konwersji plików do formatu .webp. Może to być WebP Converter for Media. Większość dobrych motywów posiada opcję ustawienia rozmiaru zdjęcia produktowego w Wygląd -> Dostosuj -> Woocommerce -> Obrazki praduktu.
Lazy-loading
Lazy-loading to technika, dzięki której obrazki zaczytywane są w momencie przewinięcia strony do sekcji z danym obrazkiem. Inaczej mówiąc jak otwieramy stronę najpierw pobierane są wszystkie pliki potrzebne do wyświetlenia treści w tzw. „above the fold”. Grafiki, które znajdują się poniżej, pobrane zostaną dopiero jak przewiniemy stronę w dół. Dzięki temu oszczędzamy przy pierwszym załadowaniu strony przynajmniej kilkadziesiąt kB transferu i przynajmniej kilka żądań. Wtyczka do lazy-loadingu to np. Lazy Load – Optimize Images.
Podsumowanie
Stosowanie się do powyższych wytycznych pozwoli zaoszczędzić kilka punktów / procent w testach szybkości. Jednak obrazki to można powiedzieć przysłowiowa „kropla w morzu”. Jest jeszcze wiele aspektów, na które trzeba zwrócić uwagę aby nasza strona / sklep ładowały się na „zielono”.
Dodaj komentarz