Trying to fix my site's CLS. I put it through a CLS debugger and it found that these HTML elements contribute most to the Cumulative Layout Shifts of the page:
| CLS SCORE | HTML ELEMENT |
|---|---|
| 0.3972 | nav#site-nav |
| 0.3972 | div#content>section.cs-section.no-padding.parallax.cs-section-cover-bg.rocket-lazyload>div.container-fluid>div.row>div.col-md-12>section.cs-section |
| 0.3972 | div#content>section.cs-section.sm-padding |
| 0.3972 | div#content>section.cs-section.no-padding.parallax.rocket-lazyload |
| 0.3972 | div#content>section.cs-section.custom-padding.cs-text-white |
Now that I know these elements are causing the problem, what is the best course of action to make it so they don't shift around? Should I be targeting each one of these individually and specifying width/height? How do I target the cs.sections?
The key to fixing CLS issues normally lies in inlining the CSS for those elements.
So you would have something like
<html>
<head>
<title>title text</title>
<style>
nav#site-nav{
/* All your CSS for this element here */
}
/* The styles for the other elements causing a layout shift */
</style>
</head>
<body></body>
</html>
You do this for all of the items that appear above the fold (visible without scrolling).
That way once the HTML has loaded the browser has everything it needs to render the initial view of the page and it knows where to put everything.
This has an added benefit that your initial Paint will be lightning fast so you get no CLS and a faster render all from doing this.
If there are any images causing a layout shift then you need to add width and height to those elements so that the browser can allocate space for them before they have loaded.