Layout shift culprits
Pagespeed warns you about Layout shifts when elements change their position without user interaction while the page is still loading.
Layout shifts occur when elements move absent any user interaction. Investigate the causes of layout shifts, such as elements being added, removed, or their fonts changing as the page loads.
Understanding Layout Shifts
Pageedpeed flags this when already loaded elements change their position alone, because other elements are loaded or transformed. This causes a poor user experience, as elements are moving around while visitors try to interact with the page.
Some common causes: injected elements, unoptimized animations, unsized images, and slow webfonts.
How to Improve Layout Shifts With WP Rocket
- Delay JavaScript Execution: When JavaScript is used to inject or manipulate elements.
- Add missing image dimensions: Tells the browser to reserve the space needed by the images.
- Replace YouTube iframe with preview image: Stabilizes the preview image, reducing the movement caused by the video injection.
- Preload fonts: Slow-loading fonts can change appearance and size while the page is loading (FOUT)
- Remove Unused CSS: Can help reduce layout changes caused by slow-loading CSS.