CLS default theme settings

I have tried to replace the cloud template header and main-content-container with the default settings from the themepanel hopping that they wouldn’t cause a high layout shift. But it’s really disappointing using the default settings there are a lot more layout shifts and also the layout shift that happens at the first loading doesn’t disappear:

https://imgur.com/a/snTGc43 –> https://imgur.com/a/wcNyCWE –> https://imgur.com/a/234HrMp –> https://imgur.com/a/pHUW5nk –> https://imgur.com/a/T14QHux

1.) CLS is caused by the main-menu. At first the menu-tabs are closer together and when loading is done, the distance between the menu-tabs is bigger. You can see it on the screenshot.
2.) There is no space reserved for the featured image (screenshot). So all the text of the whole blog-post is shifted down. I’ve tried to add the featured image using the Gutenberg Editor and the Classic Editor but there is no change. The browser reserves no space.
3.) In the line for the breadcrumbs the text for the current blog-post causes a short layout shift.
4.) All the icons for Social Media and the search icon (magnifying glass) are causing a short layout shift (FOUT).
5.) The header container itself causes a layout shift. It is something that isn’t visible. Maybe something like a change in the code from starting rendering to finishing the rendering for the first time. It disappears after reloading the same site.
6.) The container for the blog-post-content causes a layout shift. Here happens the same as in the header. The change isn’t visible but there must change something in the code befor and after rendering. This layout shift disappears when the site is reloaded.

In the end there is a Cumulative Layout Shift about 0,160 and that’s too much to pass the Web Core Vitals.

Greetings Kathrin

No answer?

Has there been any progress on this?

Here is an issue.

I tried with min, max width and height but still the problem remains.

https://femmefatale.ecode.gr/product/wella-koleston-perfect-no-5-41-%CE%BA%CE%B1%CF%83%CF%84%CE%B1%CE%BD%CF%8C-%CE%B1%CE%BD%CE%BF%CE%B9%CF%87%CF%84%CF%8C-%CE%BA%CF%8C%CE%BA%CE%BA%CE%B9%CE%BD%CE%BF-%CE%B9%CF%81%CE%B9%CE%B4%CE%AF%CE%B6/

.tdi_42 > .td-element-style:after {
min-width: 100% !important;
max-width: 100% !important;
width: 100% !important;
height: 48px !important;
max-height:48px !important;
min-height:48px !important;

background: #e9188d !important;
// background-color:red !important;

}

Αnd this seems to be the bit that causes it:

The trouble is that I have enter min-max/width/height for this element as well to a dimension (1150px) that covers the length of the menu, but somehow the painting of the menu items seems to shift it.

And the issue seems to be corelated with shifts in the very top part of the menu, inspite of the fact that it has, too, has been fixed in height etc.

Moved fromLocation: [260,0], Size: [1400×164]
Moved toLocation: [252,0], Size: [1400×164]
Moved fromLocation: [278,0], Size: [1400×164]
Moved toLocation: [270,0], Size: [1400×164]
Moved fromLocation: [0,164], Size: [1903×48]
Moved toLocation: [0,164], Size: [1903×48]
Related Nodediv#tdi_29.tdc-row.stretch_row_1400.td-stretch-content
Related Nodediv.vc_row.tdi_30.wpb_row.td-pb-row
Related Nodediv.tdi_41_rand_style.td-element-style::after

• This reply was modified 4 years by dimitrisv.

Calin hi,

Look, asside from the metrics from google the case is that when you push the logo, the logo shakes to the right and then settles on the left. Then is the case of the menu – that again it tilts. We should have no such observable movement of location.

Please try your browser’s dev tools, performance and you will get something like this:

Thanks Calin.

Is there a suggested way to preload (part of) the custom.css to sort out the issue? Which files do I have to include?

I changed the menu completely (created it from scratch) and the issue still persists.

It is a huge issue this, as people tend to become anxious without even realising it, as various studies have shown. It is clear that you have included so much lovely functionality in the menus, but to have the logo or the menu to shake, makes injustice to your efforts.

I am preloading the fonts already. I tried preloading also the css e.g.
echo "<link href='https://femmefatale.ecode.gr/wp-content/plugins/td-standard-pack/Newspaper/assets/css/td_standard_pack_main.css?ver=79f8a1d02f05c15c98a62e68cd419e0b' rel='preload' as='style' crossorigin>";
echo "<link href='https://femmefatale.ecode.gr/wp-content/plugins/td-composer/legacy/Newspaper/assets/css/td_legacy_main.css?ver=381db5cebf26144e1b1ab5f0477be694' rel='preload' as='style' crossorigin>";
echo "<link href='https://femmefatale.ecode.gr/wp-content/plugins/td-standard-pack/Newspaper/assets/css/td_standard_pack_main.css?ver=79f8a1d02f05c15c98a62e68cd419e0b' rel='preload' as='style' crossorigin>";
echo "<link href='https://femmefatale.ecode.gr/wp-content/themes/Newspaper/style.css?ver=11.4' rel='preload' as='style' crossorigin>";

but still no improvement.