Since Google introduced the Cumulative Layout Shift (CLS) metric, my website, which uses the Hueman theme, does not pass the Core Web Vitals assessment (https://developers.google.com/speed/pagespeed/insights/) because the CLS is too high.
For the record: I don’t use any plugins, the software is up-to-date, and my site is very light-weight and loads quickly. Still, according to Google the CLS is too high.
PS: Testing Hueman’s demo site, https://demo-hueman.presscustomizr.com, on Google’s PageSpeed Insights yields a CLS score of 0.85 on Mobile and 1.5 on Desktop. Both are very poor.
Supposedly it’s possible to diagnose what elements are causing CLS. I did some googling a few weeks ago and found a tip on this site:
Performance panel in DevTools in Google Chrome illustrates layout changes in the Experience row. The “Layout Shift” summary view contains the total layout shift score as well as a rectangle overlay showing the affected regions.
@aducknamedjoe: Maybe you can do the test and report your findings?
When I did this on my site, Chrome indicated that the small area containing the Search button (<button class=”toggle-search”> etc.) in the upper right corner was the cause of the high CLS. I believe the code includes a reference to Font Awesome for displaying the search icon, so maybe there is something in the code or in the way Font Awesome is loaded that needs to be fixed by the theme author, @nikeo. By the way, enabling or disabling “Defer loading Font Awesome” in the settings apparently has no impact on CLS.
A final note: https://layoutstability.rocks has a free and easy-to-use CLS Calculator, though the results differ from that of PageSpeed Insights.
