Looking for more information about CLS (Cumulative Layout Shift) and how I can improve my Magento site to fix these CLS issues? Basically Google is saying my PAGES rate low due to a poor CLS reporting.
I can’t find any step by step Magneto guides on fixing CLS problems but what I’ve read causes this includes:
- Always include size attributes on your images and video elements, or otherwise reserve the required space with something like CSS aspect ratio boxes. This approach ensures that the browser can allocate the correct amount of space in the document while the image is loading. Note that you can also use the unsized-media feature policy to force this behavior in browsers that support feature policies.
- Never insert content above existing content, except in response to a user interaction. This ensures any layout shifts that occur are expected.
- Prefer transform animations to animations of properties that trigger layout changes. Animate transitions in a way that provides context and continuity from state to state.
Is most of this resolved via css changes? I do have the Porto Theme; if that matters. Just wondering if there is a module that can help with these or some sort of guide I could use?
submitted by /u/kassius79
[link] [comments]