CLS Optimization
My answer addresses the second part of your question, regarding techniques that can be used to optimize CLS.
In broad terms, my solution hides the problematic elements in CSS, and makes them visible again in javascript. Layout shift is a problem - and contributes to the CLS score - only if if it is visible to the user; when it is invisible, it does not contribute to the CLS score. The detailed implementation is as follows.
First, create a class "antiCls" and add it to your custom CSS (in the HEAD element) as follows:
.antiCls {
visibility: hidden;
}
Next, add the following code to the end of your custom JS file (at the bottom of the BODY element). First, the JQUERY version:
$(document).ready(function(){
...
existing jquery code
...
$(window).on("load", function()
$('.antiCls').css("visibility", "visible");
});
});
Here is the vanilla javascript version, without jquery:
var cls = document.getElementsByClassName('antiCls'),
i = cls.length;
for (i = 0; i < cls.length; i++) {
cls[i].style.visibility = "visible";
}
Next, you need to identify the elements to which you will apply your new "antiCls" class. Under the Google "PageSpeed Insights" for the page, look under the section "Diagnostics", and expand the sub-heading "Avoid large layout shifts". There, you will find the offending (non-zero) DOM elements listed: these will probably be images, but other elements (including whole divs) may be listed there as well.
For images, apply the new antiCls class to the parent div, not to the image itself. For elements grouped together under one parent div, apply the new antiCls class to the parent div. Some experimentation will be required, but a CLS score of zero can usually be achieved easily using this technique.
Whether a CLS score of zero should be achieved is another question. To be effective, the antiCls class needs to be applied "above the fold" - that is, to elements that appear in the viewport without scrolling. It is important that at least some elements remain at the top to the page to which the antiCls class has not been applied: these elements will usually include a logo, and possibly some navigation. That way, the speed with which the user is presented with some critical content ("First Contentful Paint") won't be negatively effected.
In my own tests I have discovered that this CLS optimization technique makes no perceptible difference to the speed with which the page is displayed; meaning that a low or zero CLS score can be achieved at nearly zero performance cost.
