Je\u015bli u\u017cytkownik klika w przycisk, a ten nagle ucieka, to zwykle nie chodzi o z\u0142y projekt, tylko o CLS. Na WordPressie cz\u0119sto dzieje si\u0119 to przez obrazy bez wymiar\u00f3w, skacz\u0105ce czcionki, slidery o zmiennej wysoko\u015bci albo wstawki \u0142adowane z op\u00f3\u017anieniem. Efekt to pomy\u0142kowe klikni\u0119cia, gorsze do\u015bwiadczenie i stracone konwersje.<\/p>\n
Dobra wiadomo\u015b\u0107 jest taka, \u017ce da si\u0119 to ogarn\u0105\u0107 bez przebudowy motywu. Wystarczy uporz\u0105dkowa\u0107 kilka newralgicznych element\u00f3w, zarezerwowa\u0107 miejsce na tre\u015bci, uspokoi\u0107 czcionki i zadba\u0107 o sta\u0142\u0105 wysoko\u015b\u0107 kluczowych sekcji. Poni\u017cej konkretne kroki i decyzje, kt\u00f3re realnie zmniejszaj\u0105 skoki uk\u0142adu.<\/p>\n
Najpierw pomiar. PageSpeed Insights poka\u017ce warto\u015b\u0107 CLS oraz zrzut ekranu z momentami skoku. W Search Console w raporcie Podstawowe wska\u017aniki internetowe zobaczysz adresy z problemem w danych z realnych wizyt. W przegl\u0105darce w\u0142\u0105cz narz\u0119dzia dla deweloper\u00f3w i \u015bled\u017a nak\u0142adk\u0119 metryk, a przede wszystkim obserwuj filmstrip czyli podgl\u0105d klatek \u0142adowania.<\/p>\n
Je\u015bli skok pojawia si\u0119 tylko w laboratorium, to zwykle kwestia ci\u0119\u017ckich element\u00f3w nad pierwszym ekranem. Je\u015bli skoki wida\u0107 w danych z realnych u\u017cytkownik\u00f3w, szukaj \u017ar\u00f3de\u0142, kt\u00f3re dzia\u0142aj\u0105 r\u00f3\u017cnie dla r\u00f3\u017cnych os\u00f3b, na przyk\u0142ad czcionki, reklamy, widgety lub dynamiczne paski.<\/p>\n
Obraz, kt\u00f3ry nie ma wpisanych atrybut\u00f3w width i height, powoduje zmian\u0119 wysoko\u015bci kontenera, gdy grafika si\u0119 doczyta. W edytorze blokowym obrazy maj\u0105 te wymiary domy\u015blnie, ale wiele motyw\u00f3w i builder\u00f3w usuwa je lub nadpisuje stylem wysoko\u015bci. Sprawd\u017a widok \u017ar\u00f3d\u0142a strony i upewnij si\u0119, \u017ce ka\u017cdy tag img ma komplet wymiar\u00f3w oraz \u017ce styl nie ustawia wysoko\u015bci na auto bez zachowania proporcji.<\/p>\n
Je\u015bli layout wymaga elastycznej szeroko\u015bci, nadal podawaj rzeczywiste wymiary pliku, a przegl\u0105darka sama przeskaluje obraz w d\u00f3\u0142. Dodatkowo mo\u017cesz wymusi\u0107 zachowanie proporcji w CSS przez w\u0142a\u015bciwo\u015b\u0107 aspect ratio albo przez klasyczn\u0105 technik\u0119 z kontenerem, kt\u00f3ry ma wysoko\u015b\u0107 wyliczon\u0105 z procent\u00f3w. Wa\u017cne, aby miejsce na grafik\u0119 by\u0142o zarezerwowane przed wczytaniem pliku.<\/p>\n
W WooCommerce zwr\u00f3\u0107 uwag\u0119 na miniatury produkt\u00f3w. Ustaw sp\u00f3jny format w Ustawieniach obraz\u00f3w, przebuduj miniatury i sprawd\u017a, czy siatka ma sta\u0142\u0105 wysoko\u015b\u0107 wierszy. Dzi\u0119ki temu koszyk i przyciski nie b\u0119d\u0105 skaka\u0107, kiedy grafiki produkt\u00f3w si\u0119 doczytuj\u0105.<\/p>\n
Lazy loading jest w porz\u0105dku, o ile kontener ma z g\u00f3ry nadany rozmiar. Kluczowe grafiki nad pierwszym ekranem warto \u0142adowa\u0107 normalnie oraz doda\u0107 im atrybut fetchpriority, aby pojawi\u0142y si\u0119 szybko bez przetasowania reszty. Reszt\u0119 obraz\u00f3w zostaw na lazy, ale z pilnowaniem szeroko\u015bci i proporcji.<\/p>\n
U\u017cywaj srcset i sizes, aby przegl\u0105darka wybra\u0142a odpowiedni rozmiar pliku do szeroko\u015bci kontenera. Nie wymuszaj dynamicznych zmian wysoko\u015bci po wczytaniu obraz\u00f3w przez skrypty wyr\u00f3wnuj\u0105ce, bo to cz\u0119sto generuje dodatkowe skoki.<\/p>\n
Gdy po chwili \u0142adowania tekst zmienia font, wiersze zmieniaj\u0105 wysoko\u015b\u0107 i ca\u0142y blok potrafi zepchn\u0105\u0107 elementy ni\u017cej. Ustaw font display swap lub fallback o podobnych metrykach, aby tekst by\u0142 od razu widoczny, a podmiana by\u0142a mo\u017cliwie neutralna. Je\u015bli motyw pozwala, pre\u0142aduj g\u0142\u00f3wne kroje u\u017cywane nad pierwszym ekranem.<\/p>\n
Dobierz font zast\u0119pczy o zbli\u017conej szeroko\u015bci znak\u00f3w i wysoko\u015bci linii. W nowszych przegl\u0105darkach dzia\u0142a descriptor size adjust w deklaracji fonta, kt\u00f3ry pozwala dopasowa\u0107 fallback tak, aby r\u00f3\u017cnice w rozmiarze by\u0142y minimalne. Dzi\u0119ki temu po podmianie litery nie rozpychaj\u0105 akapit\u00f3w.<\/p>\n
Unikaj sytuacji, w kt\u00f3rej g\u0142\u00f3wny arkusz CSS deklaruje jedne parametry linii, a po doci\u0105gni\u0119ciu dodatkowych styl\u00f3w zmienia si\u0119 line height lub marginesy dla nag\u0142\u00f3wk\u00f3w. Zadbaj, aby krytyczne style typografii by\u0142y dost\u0119pne od pierwszego malowania.<\/p>\n
Najwi\u0119cej skok\u00f3w daje hero z rotuj\u0105cymi slajdami o r\u00f3\u017cnych proporcjach. Ustaw sta\u0142\u0105 wysoko\u015b\u0107 wrappera na podstawie najwy\u017cszego slajdu lub proporcji, kt\u00f3rych u\u017cywasz, i nie pozwalaj skryptom dopasowywa\u0107 jej po ka\u017cdym przej\u015bciu. Teksty i przyciski powinny znajdowa\u0107 si\u0119 w warstwie o sta\u0142ej pozycji wzgl\u0119dem kontenera.<\/p>\n
Je\u015bli slider \u0142aduje obrazy leniwie, zarezerwuj dla nich przestrze\u0144 przez sta\u0142y wymiar lub aspect ratio. Rozwa\u017c zamian\u0119 karuzeli na jedn\u0105 statyczn\u0105 grafik\u0119 lub wersj\u0119 z jedn\u0105 zmian\u0105 nawigacji po klikni\u0119ciu, a nie automatyczne przewijanie. To spokojniejszy uk\u0142ad i mniej ryzyka przypadkowych klikni\u0119\u0107.<\/p>\n
Sprawd\u017a te\u017c paginacj\u0119 i strza\u0142ki. Cz\u0119sto s\u0105 doskakiwane przez skrypt ju\u017c po inicjalizacji, co potrafi przesun\u0105\u0107 ca\u0142y blok. Wczytaj ich style i w\u0119z\u0142y od razu w HTML, a skrypt niech tylko je aktywuje.<\/p>\n
Iframe bez zadanej proporcji to gotowy przepis na CLS. Owi\u0144 osadzenie w kontener z ustalonym stosunkiem bok\u00f3w, na przyk\u0142ad szesna\u015bcie do dziewi\u0119ciu, albo u\u017cyj CSS aspect ratio. Zamiast pe\u0142nego osadzenia od razu mo\u017cna wy\u015bwietli\u0107 lekk\u0105 miniatur\u0119 z przyciskiem odtwarzania, a w\u0142a\u015bciwy iframe do\u0142adowa\u0107 po klikni\u0119ciu.<\/p>\n