Kako da rešim CLS (layout shift) na Elementor stranici?
Šta je CLS (Cumulative Layout Shift) i zašto se javlja u Elementoru?
CLS meri neočekivane pomeraje elemenata na stranici tokom učitavanja, što utiče na Core Web Vitals i rangiranje u pretraživačima. U Elementoru se javlja zbog slika bez dimenzija, web fontova koji se kasno učitavaju, lazy loadinga ili animacija.
Koraci za rešavanje CLS-a na Elementor stranici:
- Postavite dimenzije na slike: U Elementoru, za svaku sliku dodajte width i height atribute u Advanced > Attributes. Ovo rezerviše prostor pre učitavanja.
- Optimizujte fontove: Uključite font-display: swap u CSS (@font-face). Koristite sistemski fontovi ili preload fontova preko Elementor Pro opcija.
- Isključite nepotrebne animacije: U Edit Mode, idite na sekciju/widget > Advanced > Motion Effects i onemogućite Entrance Animations ako pomeraju layout.
- Podesite lazy loading: U Elementor > Settings > Features, isključite lazy load za above-the-fold slike. Koristite native browser lazy loading (loading=”lazy”).
- Koristite optimizacione alate: Aktivirajte Elementor Pro Image Optimization ili Ultimate Addons for Elementor (dostupni besplatno uz WP Host pakete sa preko 350 premium pluginova i tema).
- Testirajte sa PageSpeed Insights: Proverite rezultate pre i posle izmena. Hosting je ključna karika u performansama – WP Host nudi najkvalitetniji i najbrži WordPress Hosting u Srbiji sa LiteSpeed serverima i NVMe SSD-ovima za do 40% brže učitavanje.
Ako problem persistira, pošaljite ticket podršci WP Host-a za detaljnu analizu vašeg sajta.
