Jak przyspieszyć ładowanie obrazów na stronie
Pięć zmian, które zmniejszą wagę obrazów na każdej stronie, uporządkowanych według efektu.
Na większości stron obrazy to większość tego, co pobiera odwiedzający. Jedno niezoptymalizowane zdjęcie z telefonu może ważyć więcej niż cała reszta strony. Poprawa obrazów to zwykle największe i najtańsze przyspieszenie, a szybsze strony lepiej się pozycjonują, dłużej zatrzymują odwiedzających i lepiej konwertują.
1. Wgrywaj obrazy w rozmiarze, w jakim są wyświetlane
Zdjęcie prosto z telefonu ma 4000 pikseli szerokości lub więcej. Kolumna z treścią na stronie rzadko ma więcej niż 1200 pikseli, a karta czy miniatura znacznie mniej. Każdy dodatkowy piksel jest pobierany, a potem wyrzucany przez przeglądarkę. Zmień rozmiar przed wgraniem: około 2000 pikseli szerokości dla banerów na całą szerokość (żeby zostały ostre na ekranach o dużej gęstości), 1200 do 1600 dla obrazów w treści i 600 do 800 dla kart. Narzędzie do zmiany rozmiaru zrobi cały folder naraz.
2. Kompresuj
Przy właściwych wymiarach resztę załatwia kompresja. Zdjęcie zapisane z jakością 80 wygląda na stronie tak samo jak z jakością 100, a często ma jedną trzecią rozmiaru. Kompresor obrazów obsługuje całe partie i pokazuje oszczędność dla każdego pliku.
3. Używaj WebP
WebP obsługuje każda współczesna przeglądarka i przy tej samej widocznej jakości jest zwykle o 25 do 35 procent mniejszy od JPG, a dzięki obsłudze przezroczystości zastępuje też wiele plików PNG. Konwertuj narzędziem JPG na WebP albo PNG na WebP. AVIF jest jeszcze mniejszy, ale wolniej się koduje i rzadziej obsługują go systemy do wgrywania, więc praktycznym standardem jest WebP.
4. Dobierz format do treści
| Treść | Najlepszy format |
|---|---|
| Zdjęcia | WebP albo JPG tam, gdzie WebP nie jest akceptowany |
| Logo i ikony | SVG, jeśli go masz, w przeciwnym razie PNG lub WebP |
| Zrzuty ekranu z tekstem | PNG lub bezstratny WebP |
| Proste animacje | Krótkie wideo zamiast GIF |
5. Pomóż przeglądarce ładować je rozsądnie
- Leniwe ładowanie. Obrazy poniżej pierwszego ekranu powinny ładować się dopiero wtedy, gdy odwiedzający do nich przewinie. Większość platform robi to automatycznie; w czystym HTML dodaj loading="lazy" do znaczników img, które nie są widoczne na starcie.
- Wymiary. Podaj każdemu obrazowi szerokość i wysokość, żeby strona nie skakała, gdy obrazy się wczytują. Przesunięcia układu to jeden ze wskaźników Core Web Vitals Google.
- Główny obraz najpierw. Duży obraz na górze strony, zwykle ten liczony jako Largest Contentful Paint, nigdy nie powinien ładować się leniwie. Powinien wczytać się jak najwcześniej.
Ile to zmienia
Typowa strona z dziesięcioma zdjęciami prosto z telefonu może ważyć 30 MB. Po zmianie rozmiaru i kompresji ta sama strona waży zwykle około 2 MB. Po konwersji na WebP bliżej 1,4 MB. W sieci komórkowej to różnica między stroną, która pojawia się w sekundę, a taką, którą wielu odwiedzających porzuca.
Sprawdzanie wyników
PageSpeed Insights od Google i panel Lighthouse w narzędziach dla programistów Chrome wypisują za duże obrazy, obrazy, które powinny być w WebP, oraz element Largest Contentful Paint. Zmierz przed i po, a zacznij od stron z największym ruchem.