Artykuł

Optymalizacja mediów strony pod szybkość i Core Web Vitals

Obrazy i wideo zwykle odpowiadają za 60 do 80 procent całkowitej wagi strony. Zadbanie o nie to pojedyncze działanie o najwyższej dźwigni, jakie możesz podjąć dla szybkości ładowania, wyników Core Web Vitals i pozycji w wyszukiwarce. Dobra wiadomość: nic z tego nie wymaga specjalistycznego oprogramowania ani serwera, a twoje pliki nigdy nie muszą opuszczać urządzenia.

Wybierz właściwy format przed wszystkim innym

Wybór formatu liczy się bardziej niż jakikolwiek suwak jakości. Dla zdjęć na stronie WebP to właściwy wybór domyślny: jest o 25 do 35 procent mniejszy niż JPEG przy tej samej jakości wizualnej i obsługuje go każda nowoczesna przeglądarka. AVIF kompresuje jeszcze mocniej, nawet o 50 procent lepiej niż JPEG, kosztem wolniejszego kodowania. Używaj AVIF do obrazów hero i zdjęć produktów, które kompresujesz raz, a WebP do wszystkiego, co przetwarzasz wsadowo lub potrzebujesz szybko. PNG ma rację bytu tylko tam, gdzie potrzebujesz bezstratnej dokładności lub przezroczystego tła. SVG to jedyny sensowny wybór dla logo, ikon i ilustracji: skaluje się do dowolnego rozmiaru i często waży kilka kilobajtów wobec setek dla rasteryzowanego odpowiednika.

Kompresuj obrazy bez widocznej utraty jakości

Zacznij od zmiany rozmiaru do rzeczywistych wymiarów wyświetlania: obraz hero wyświetlany przy 1280 pikselach szerokości nie potrzebuje 4000 pikseli danych. Najpierw zmień rozmiar, potem kompresuj. Dla zdjęć jakość 80 w WebP lub JPEG to praktyczna granica, poniżej której zwykli oglądający zaczynają zauważać różnicę, więc celuj w 75 do 85 i obejrzyj wynik w pełnym powiększeniu przed publikacją. Dla grafik z tekstem i jednolitymi obszarami bezstratny PNG lub SVG zachowuje ostrość, którą formaty stratne rozmazują. Kompresor obrazów na tej stronie obsługuje wszystkie te formaty, działa w całości w twojej przeglądarce i stosuje te same algorytmy co dedykowane narzędzia desktopowe.

Konwertuj wideo na potrzeby sieci bez przesyłania go

Pętle tła i osadzone wideo to miejsca, w których optymalizacja mediów na stronie często zawodzi. MP4 z H.264 odtwarza się wszędzie, ale WebM z VP9 jest o 20 do 40 procent mniejszy przy tej samej jakości, co ma znaczenie dla użytkowników mobilnych na ograniczonych łączach. Praktyczne podejście to przekonwertować raz do WebM, serwować go jako preferowane źródło w elemencie wideo i zachować MP4 jako rozwiązanie awaryjne. Konwerter wideo tutaj używa FFmpeg skompilowanego do WebAssembly: konwersja działa wewnątrz twojej przeglądarki, nic nie jest przesyłane, a pliki dowolnego rozmiaru działają, dopóki twoje urządzenie ma wystarczająco pamięci. Dla wbudowanego wideo tła rozważ też przycinarkę wideo, by wyciąć martwe sekundy przed kodowaniem: czas trwania to największy czynnik wpływający na rozmiar pliku.

Zasoby wbudowane: base64 i SVG

Bardzo małe obrazy, ikony i favicony osadzone bezpośrednio w HTML lub CSS jako ciągi base64 eliminują jedną podróż sieciową na zasób. Ma to sens dla zasobów poniżej około 2 KB, które pojawiają się na każdej stronie, takich jak sprite logo czy wskaźnik ładowania. Większe zasoby powinny pozostać osobnymi plikami, bo base64 koduje o 33 procent ciężej niż dane binarne, a przeglądarki buforują odwołania do plików, ale nie buforują niezależnie danych wbudowanych. Optymalizator SVG usuwa z wyeksportowanych SVG śmieci pozostawione przez edytor, nie naruszając wyglądu wizualnego. Konwerter obrazu na base64 generuje gotowy do wklejenia identyfikator URI data w twojej przeglądarce.

Narzędzia w tym artykule

Najczęściej zadawane pytania

Czy kompresja obrazów wpływa na moją pozycję w wyszukiwarce?

Google używa Core Web Vitals jako sygnału rankingowego, a Largest Contentful Paint to niemal zawsze obraz lub plansza wideo. Strona, której obraz hero ładuje się w mniej niż sekundę, wypada lepiej niż taka, gdzie trwa to trzy sekundy. Kompresja i właściwy format bezpośrednio wpływają na tę metrykę, więc tak, optymalizacja obrazów ma mierzalny wpływ na SEO. Efekt jest najsilniejszy na urządzeniach mobilnych, gdzie łącza są wolniejsze, a kara za ciężkie obrazy większa.

Dlaczego przetwarzać media lokalnie zamiast korzystać z usługi internetowej?

Większość internetowych narzędzi do mediów wymaga przesłania plików na zdalny serwer, co zajmuje czas, zużywa transfer i oznacza, że kopia twojego pliku istnieje w infrastrukturze, której nie kontrolujesz. Narzędzia na tej stronie działają w całości w twojej przeglądarce: twoje obrazy i wideo są przetwarzane na urządzeniu, a wynik pobierany bezpośrednio. Nie ma konta, nie ma czekania na przesłanie i nic z twoich plików nigdy nie trafia na serwer.