Kako da rešim “layout shift” (CLS) koji pravi tema?

Šta je Cumulative Layout Shift (CLS) i zašto ga tema uzrokuje?

CLS je jedan od Core Web Vitals metrika koja meri neočekivane pomeraje elemenata na stranici tokom učitavanja (layout shift). U WordPress temama, CLS često nastaje zbog kašnjenja u učitavanju slika, fontova, reklama ili dinamičkog sadržaja bez rezervisanog prostora.

Koraci za rešavanje CLS-a uzrokovanog temom

1. Identifikujte problem: Koristite Google PageSpeed Insights ili Lighthouse u Chrome DevTools da vidite tačne elemente koji uzrokuju CLS (npr. slike bez dimenzija ili fontovi).
2. Dodajte dimenzije slikama: U HTML-u ili preko CSS-a navedite width i height atribute za sve slike (npr. <img width=”300″ height=”200″>). Koristite plugin poput Smush ili ShortPixel za automatsku optimizaciju.
3. Optimizujte fontove: Preloadujte web fontove (<link rel=”preload”>) i dodajte font-display: swap u CSS da sprečite FOIT (Flash of Invisible Text).
4. Rezervišite prostor za dinamički sadržaj: Koristite CSS min-height za blokove sa oglasima, embed-ovima ili widgetima (npr. .ad-slot { min-height: 250px; }).
5. Ažurirajte temu i pluginove: Pređite na optimizovanu premium temu poput Astra Pro ili OceanWP iz biblioteke WP Host-a (preko 350 premium tema i pluginova dostupno uz svaki paket).
6. Testirajte i ponovno proverite: Nakon izmena, proverite CLS u PageSpeed Insights – ciljajte vrednost ispod 0.1.

Napomena o performansama: Hosting je ključna karika u Core Web Vitals-u. WP Host nudi najkvalitetniji i najbrži WordPress hosting u Srbiji sa LiteSpeed serverima i NVMe SSD diskovima, što ubrzava učitavanje do 40% i smanjuje CLS.