Kiedy strona ładuje się wolno, rzadko trzeba szukać daleko - najcięższym elementem jest prawie zawsze to, co na niej najładniejsze, czyli zdjęcia. Cały tekst strony, style i większość kodu ważą razem niewiele, a jedno zdjęcie prosto z telefonu potrafi ważyć więcej niż to wszystko razem wzięte. Scenariusz, który widzę najczęściej: właściciel wgrywa do galerii realizacji zdjęcia wprost z aparatu albo telefonu, po kilkanaście naraz, i strona z miesiąca na miesiąc robi się coraz cięższa.
Dobra wiadomość: to jest ten rodzaj problemu, który da się rozwiązać raz, systemowo - bez ręcznego przerabiania każdego pliku i bez rezygnowania z ładnych zdjęć. Pokażę po kolei, na czym polega optymalizacja zdjęć i jak ją ustawić na WordPressie tak, żeby dalej działała sama.
Dlaczego zdjęcia spowalniają stronę
Przeglądarka, zanim pokaże stronę, musi pobrać wszystko, co na niej jest. Zdjęcia to w większości stron największy bajtowo składnik - i dlatego są najczęstszym pojedynczym powodem wolnego ładowania. Zdjęcie z telefonu jest szersze niż jakikolwiek ekran, na którym ktoś tę stronę kiedykolwiek obejrzy, a mimo to często ląduje w małym kafelku galerii w pełnym rozmiarze. Przeglądarka pobiera całość, a potem zmniejsza obraz do rozmiaru kafelka - cała ta nadwyżka to czysta strata czasu Twojego klienta.
Trzy zasady: wymiar, format, kompresja
Cała optymalizacja zdjęć sprowadza się do trzech rzeczy:
- Właściwy wymiar - zdjęcie nie powinno być większe niż miejsce, w którym faktycznie występuje. Do małego kafelka wystarczy mała wersja, pełny rozmiar ma sens najwyżej po kliknięciu w powiększenie
- Właściwy format - WebP lub AVIF zamiast klasycznych JPG i PNG (o tym niżej)
- Kompresja - obraz da się zapisać oszczędniej kosztem jakości, której ludzkie oko i tak nie odróżnia; dopiero mocno przesadzona kompresja daje widoczny „rozmyty” efekt
Każda z tych trzech rzeczy z osobna odchudza stronę, a razem potrafią zmienić ociężałą galerię w coś, co otwiera się bez czekania.
WebP - co to właściwie jest
WebP to po prostu nowocześniejszy sposób zapisu obrazu. Ten sam widok, ta sama jakość dla oka - ale plik zapisany na tyle sprytniej, że wychodzi kilkukrotnie lżejszy niż JPG czy PNG. Nie ma tu żadnej magii ani utraty treści: to jak zapisanie tego samego dokumentu w lepszym archiwum. Wszystkie popularne przeglądarki od dawna WebP obsługują, więc nie ma ryzyka, że komuś zdjęcia się nie wyświetlą.
AVIF czy WebP - który wybrać
AVIF to jeszcze nowszy format - zwykle jeszcze lżejszy od WebP przy tej samej jakości, za to wolniejszy w samym procesie konwersji. W praktyce nie musisz wybierać: dobrze ustawione narzędzia przygotowują obie wersje i serwują AVIF tam, gdzie przeglądarka go przyjmie, a WebP jako zapas. Oryginał zostaje nietknięty w bibliotece mediów. To decyzja, którą podejmuje automat, nie człowiek - i tak jest dobrze.
Lazy loading - co to jest
Lazy loading, po polsku leniwe ładowanie, to prosta zasada: zdjęcia, które są niżej na stronie, doładowują się dopiero wtedy, gdy ktoś zaczyna przewijać. Dzięki temu na start przeglądarka pobiera tylko to, co widać od razu. WordPress robi to dziś sam, bez żadnej wtyczki - ale motywy i buildery potrafią to zepsuć: slidery ładujące wszystkie slajdy naraz, zdjęcia wstawiane jako tło przez CSS (te wbudowany mechanizm omija) albo dodatkowa wtyczka „leniwego ładowania” gryząca się z tym, co WordPress ma fabrycznie. Jeśli po instalacji motywu lub buildera strona nagle zwolniła, to jedno z pierwszych miejsc, w które zaglądam.
Jak zmniejszyć zdjęcia na stronę - bez przerabiania każdej po kolei
Ręczne otwieranie setek plików w edytorze graficznym to droga donikąd. Na WordPressie układam to zwykle w trzech warstwach:
- Optymalizacja przy wgrywaniu - wtyczka z rodziny narzędzi optymalizujących media, która każde nowo wgrane zdjęcie automatycznie skaluje, kompresuje i zapisuje w WebP/AVIF. Raz ustawiona, pilnuje porządku za Ciebie
- Konwersja istniejącej biblioteki - te same narzędzia potrafią jednym procesem przejść przez wszystko, co już jest na stronie, i odchudzić zaległości z lat
- Cache i CDN - warstwa, która lekkie wersje serwuje szybko i z serwera bliżej odwiedzającego; niektóre usługi tego typu potrafią też konwertować obrazy w locie
Celowo nie polecam tu konkretnej wtyczki z nazwy - wybór zależy od hostingu, motywu i tego, co już na stronie siedzi. Typ narzędzia jest ważniejszy niż logo na opakowaniu.
Co pomaga: zanim cokolwiek zainstalujesz, sprawdź swoją stronę w bezpłatnym narzędziu PageSpeed Insights. W sekcji o obrazach wypisze konkretne pliki, które ważą za dużo - będziesz wiedzieć, czy problemem jest wymiar, format czy kompresja, zamiast zgadywać.
Zdjęcia a LCP - jedno zdjęcie ważniejsze niż wszystkie inne
Największy element widoczny na górze strony to zwykle właśnie zdjęcie - baner, hero, packshot produktu. To od niego Google mierzy LCP, czyli moment, w którym strona „naprawdę się pokazała” - pisałem o tym szerzej w tekście o Core Web Vitals. Wniosek praktyczny: to jedno zdjęcie musi być dopieszczone najbardziej - lekkie, we właściwym wymiarze i ładowane od razu, bez lazy loadingu. Leniwe ładowanie głównego zdjęcia to częsty błąd, który zamiast przyspieszać, opóźnia to, na co wszyscy czekają.
Czego optymalizacja zdjęć nie naprawi
Tu uczciwie: odchudzenie zdjęć nie uratuje strony, która stoi na przeciążonym hostingu albo dźwiga kilkadziesiąt wtyczek. Zdjęcia to najczęstszy winowajca, ale nie jedyny - jeśli po ich optymalizacji strona dalej muli, winowajcy trzeba szukać głębiej, a jak to robić krok po kroku, opisałem w przewodniku jak przyspieszyć stronę WordPress. Takie porządki - od diagnozy po wdrożenie i pilnowanie efektu - robię u klientów w ramach rozwoju i optymalizacji. Zaczynam zawsze od bezpłatnej diagnozy: najpierw sprawdzam, co realnie ciąży Twojej stronie, dopiero potem rozmawiamy o pracy.
Najczęstsze pytania
Co to jest WebP i czym różni się od JPG? To nowocześniejszy format zapisu obrazu - ten sam widok i ta sama jakość dla oka, ale plik wyraźnie lżejszy. Obsługują go wszystkie popularne przeglądarki.
AVIF czy WebP - który format wybrać? Oba - dobrze ustawione narzędzie samo poda AVIF tam, gdzie przeglądarka go przyjmie, i WebP jako zapas. To wybór, którego nie musisz robić ręcznie.
Jak zmniejszyć zdjęcia na stronę, żeby nie straciły jakości? Skalować do wymiaru, w którym faktycznie są wyświetlane, i kompresować z umiarem - dobrze dobrana kompresja jest dla oka niewidoczna. Na WordPressie zrobi to za Ciebie wtyczka optymalizująca media przy wgrywaniu.
Czy lazy loading jest w WordPressie domyślnie włączony? Tak, WordPress od dawna sam leniwie doładowuje zdjęcia położone niżej na stronie. Problem pojawia się, gdy motyw, builder albo dodatkowa wtyczka ten mechanizm psują - wtedy trzeba to sprawdzić i odkręcić.
Masz to u siebie i nie wiesz, od czego zacząć? Przyspieszam i naprawiam istniejące strony i sklepy - Core Web Vitals, awarie, rozbudowa o funkcje, których brakuje. Napisz, co się dzieje, a dostaniesz konkretną wycenę z terminem.