Najcz\u0119\u015bciej problem z LCP wychodzi przy pierwszym ekranie strony. Du\u017ce zdj\u0119cie w nag\u0142\u00f3wku, slider, t\u0142o z pe\u0142noklatkowym obrazem albo ci\u0119\u017ckie zdj\u0119cia produkt\u00f3w. Efekt to wolne pierwsze wra\u017cenie, a do tego s\u0142abe Core Web Vitals i gorsza widoczno\u015b\u0107 przy por\u00f3wnywalnej tre\u015bci. W\u0142a\u015bciciele stron skupiaj\u0105 si\u0119 na s\u0142owach kluczowych, a blokuje ich techniczny ba\u0142agan obraz\u00f3w. Na szcz\u0119\u015bcie da si\u0119 to pouk\u0142ada\u0107 bez wielkiej rewolucji.<\/p>\n
Warto pami\u0119ta\u0107 \u017ce SEO to nie tylko tekst. Google bierze pod uwag\u0119 szybko\u015b\u0107, stabilno\u015b\u0107 uk\u0142adu, struktur\u0119 i sensown\u0105 architektur\u0119. Je\u015bli obraz LCP jest za ci\u0119\u017cki, \u017ale \u0142adowany albo ma z\u0142y rozmiar, to ca\u0142a reszta prac traci moc. Poni\u017cej najwa\u017cniejsze kroki kt\u00f3re realnie porz\u0105dkuj\u0105 obrazy w WordPressie i WooCommerce i pomagaj\u0105 skr\u00f3ci\u0107 LCP.<\/p>\n
Otw\u00f3rz raporty Core Web Vitals i test w PageSpeed Insights dla kluczowych podstron. Zobacz co przegl\u0105darka rozpoznaje jako najwi\u0119kszy element widoczny na starcie. Cz\u0119sto jest to du\u017cy obraz w nag\u0142\u00f3wku, czasem zdj\u0119cie produktu albo spory blok z t\u0142em. Zdarza si\u0119 te\u017c \u017ce to nag\u0142\u00f3wek tekstowy, co oznacza \u017ce obrazy wcale nie s\u0105 g\u0142\u00f3wnym winowajc\u0105 i warto zacz\u0105\u0107 od innych element\u00f3w.<\/p>\n
Sprawd\u017a r\u00f3\u017cne szablony stron. Strona g\u0142\u00f3wna, kategoria produkt\u00f3w, karta produktu, wpis blogowy. LCP potrafi si\u0119 zmienia\u0107 mi\u0119dzy nimi, wi\u0119c rozwi\u0105zanie musi pasowa\u0107 do konkretnego widoku, nie tylko do jednego testu.<\/p>\n
Je\u015bli na g\u00f3rze masz du\u017ce zdj\u0119cie, ustaw je w rozmiarze zbli\u017conym do realnej szeroko\u015bci wy\u015bwietlania. W praktyce oznacza to wgranie pliku dopasowanego do maksymalnej szeroko\u015bci kontenera i u\u017cycie w\u0142a\u015bciwej miniatury zamiast pe\u0142nego orygina\u0142u. W edytorze blokowym wybierz rozmiar obrazu, a nie Pe\u0142ny rozmiar. Ka\u017cdy piksel ponad to to niepotrzebny transfer i d\u0142u\u017csze LCP.<\/p>\n
Zastan\u00f3w si\u0119 czy potrzebujesz slidera. Jeden dopracowany kadr dzia\u0142a lepiej ni\u017c kilka przeci\u0119tnych zdj\u0119\u0107 kt\u00f3re tylko op\u00f3\u017aniaj\u0105 start. Je\u015bli zostajesz przy suwaku, ogranicz liczb\u0119 slajd\u00f3w na starcie, a reszt\u0119 \u0142aduj po interakcji lub po pierwszym renderze.<\/p>\n
Dbaj te\u017c o prostot\u0119 warstw. Tekst na\u0142o\u017cony na obraz bywa mniej wymagaj\u0105cy ni\u017c osobny blok z dodatkowym t\u0142em i filtrami. Im mniej kombinacji na pierwszym ekranie tym szybciej strona poka\u017ce sensown\u0105 tre\u015b\u0107.<\/p>\n
Fotografie zapisuj w WebP, a je\u015bli masz wsparcie po stronie serwera lub CDN tak\u017ce w AVIF. Te formaty zwykle daj\u0105 lepsz\u0105 kompresj\u0119 ni\u017c JPEG przy podobnej jako\u015bci. WordPress wspiera WebP, wiele wtyczek konwertuje obrazy automatycznie i serwuje odpowiedni format zale\u017cnie od przegl\u0105darki.<\/p>\n
PNG zostaw dla grafik z przezroczysto\u015bci\u0105 i ikon. Proste ikony wektorowe jako SVG s\u0105 lekkie i ostre na ekranach o du\u017cej g\u0119sto\u015bci. Pami\u0119taj o bezpiecznej obs\u0142udze SVG, najlepiej przez wtyczk\u0119 kt\u00f3ra czy\u015bci pliki z niepotrzebnych element\u00f3w.<\/p>\n
WordPress generuje zestaw miniatur i potrafi poda\u0107 przegl\u0105darce r\u00f3\u017cne warianty obrazu w zale\u017cno\u015bci od szeroko\u015bci ekranu. To tak zwane srcset i sizes. Upewnij si\u0119 \u017ce motyw lub konstruktor stron korzysta z tych atrybut\u00f3w, a nie wymusza zawsze jednego pliku. Je\u015bli widzisz \u017ce w kodzie \u0142aduje si\u0119 ogromny obraz na ma\u0142y ekran, zmie\u0144 ustawienia bloku lub szablonu.<\/p>\n
W WooCommerce dopilnuj rozmiar\u00f3w miniatur produkt\u00f3w w Ustawieniach i w Personalizacji. Zbyt du\u017ce miniatury w siatce kategorii szybko podbijaj\u0105 rozmiar strony. Zbyt ma\u0142e wymuszaj\u0105 powi\u0119kszanie w przegl\u0105darce i wygl\u0105daj\u0105 \u017ale. Szukaj z\u0142otego \u015brodka dla widoku listy oraz dla karty produktu.<\/p>\n
Unikaj r\u0119cznego skalowania w edytorze tre\u015bci. Je\u015bli wgrywasz zdj\u0119cie o szeroko\u015bci kilku tysi\u0119cy pikseli i zmniejszasz je suwakiem do po\u0142owy, przegl\u0105darka i tak pobierze du\u017cy plik. Zamiast tego wybierz odpowiedni rozmiar obrazu wygenerowany przez WordPress.<\/p>\n