Aby zoptymalizować obrazy w WordPressie, w pierwszej kolejności zadbaj o ich wymiary jeszcze przed wgraniem na serwer, następnie włącz konwersję do formatu WebP i automatyczną kompresję, a na końcu posprzątaj bibliotekę mediów ze zbędnych plików. Ciężkie zdjęcia to najczęstsza przyczyna wolno działających stron, dlatego przejdź przez poniższe kroki po kolei — każdy z nich realnie zmniejsza czas ładowania.
Wgrywaj obrazy we właściwych wymiarach
Zdjęcie prosto z telefonu ma często 4000–8000 pikseli szerokości i waży kilka megabajtów, a na stronie zostanie wyświetlone w szerokości najwyżej 1200–1600 pikseli. Przechowywanie takiego nadmiaru danych nie ma sensu.
1. Przed wgraniem przeskaluj obraz do docelowej szerokości — dla zdjęć w treści wpisu zwykle wystarczy 1600 pikseli, dla pełnoekranowych grafik w nagłówku 1920–2560 pikseli.
2. Użyj do tego darmowych narzędzi: Squoosh (działa w przeglądarce), IrfanView lub GIMP.
3. Zdjęcia zapisuj jako JPEG z jakością 70–80%, a grafiki z tekstem, wykresy i obrazy z przezroczystością — jako PNG.
WordPress od wersji 5.3 sam skaluje bardzo duże obrazy do 2560 pikseli (do nazwy pliku dodaje wtedy końcówkę „-scaled”), ale nieużywany oryginał i tak zostaje na serwerze. Dlatego lepiej skalować samodzielnie, zanim plik trafi do biblioteki mediów.
Włącz WebP i automatyczną kompresję
Format WebP daje pliki o około 25–35% mniejsze od JPEG przy tej samej jakości. WordPress obsługuje go natywnie od wersji 5.8 (a od 6.5 także nowocześniejszy AVIF), więc możesz wgrywać pliki WebP bezpośrednio. Wygodniej jednak zautomatyzować i konwersję, i kompresję jedną darmową wtyczką z katalogu wordpress.org.
1. Przejdź do Wtyczki → Dodaj nową wtyczkę i zainstaluj EWWW Image Optimizer (albo alternatywnie Smush lub Converter for Media).
2. W kreatorze konfiguracji EWWW zaznacz opcję konwersji do WebP i pozostaw domyślną, bezstratną kompresję.
3. Otwórz Media → Bulk Optimize i uruchom optymalizację zbiorczą, aby przetworzyć obrazy wgrane wcześniej.
4. W Smush analogicznie skorzystaj z funkcji Bulk Smush, która skompresuje całą bibliotekę za jednym razem.
Konfigurację robisz tylko raz — każdy kolejny obraz zostanie skompresowany i skonwertowany automatycznie w momencie wgrywania.
Lazy loading działa domyślnie
Od WordPressa 5.5 wszystkie obrazy w treści otrzymują automatycznie atrybut loading=”lazy”, dzięki czemu przeglądarka pobiera je dopiero wtedy, gdy użytkownik przewinie stronę w ich okolicę. Nie potrzebujesz do tego żadnej wtyczki. Możesz to sprawdzić, podglądając kod źródłowy strony:
<img src="zdjecie.webp" loading="lazy" width="1600" height="900" alt="Opis zdjęcia" />
Zwróć uwagę na atrybuty width i height — WordPress dodaje je sam, o ile wstawiasz obrazy przez bibliotekę mediów. Zapobiegają one „skakaniu” układu strony podczas ładowania. Jest jeden wyjątek: największy obraz widoczny od razu po wejściu na stronę (np. w nagłówku) nie powinien być ładowany leniwie — nowsze wersje WordPressa same wykluczają pierwszy obraz z lazy loadingu, więc nie musisz nic zmieniać.
Posprzątaj bibliotekę mediów
Z czasem w bibliotece zbierają się pliki, których nikt już nie używa: podmienione wersje grafik, obrazy z usuniętych wpisów, przypadkowe duplikaty. Zajmują miejsce na serwerze i niepotrzebnie powiększają każdą kopię zapasową.
1. Zanim cokolwiek usuniesz, wykonaj pełną kopię zapasową plików i bazy danych — np. darmową wtyczką UpdraftPlus. Usunięcia z biblioteki mediów są nieodwracalne.
2. Zainstaluj wtyczkę Media Cleaner, która przeskanuje wpisy, strony i widżety, a następnie wskaże pliki nieużywane nigdzie w treści.
3. Przenieś wskazane pliki do kosza wtyczki (nie kasuj ich od razu) i przeklikaj najważniejsze podstrony, aby upewnić się, że niczego nie brakuje.
4. Dopiero po kilku dniach bez problemów opróżnij kosz na stałe.
Uważaj na filtr „Niedołączone” we wbudowanej bibliotece mediów — obraz niedołączony do żadnego wpisu wciąż może być używany np. w szablonie albo widżecie, więc nie usuwaj plików tylko na tej podstawie.
Na koniec sprawdź efekty w darmowym narzędziu PageSpeed Insights. Jeśli przed optymalizacją strona główna ważyła kilka megabajtów, po przejściu powyższych kroków zejdziesz zwykle poniżej jednego megabajta — a to różnica, którą odwiedzający odczują od pierwszego kliknięcia.