Archived topic
CLS with block element generate_before_header
7 replies · Started by Rostyslav on June 14, 2022
Hello,
I added a block element with a gutenberg row block and 2 paragraphs inside https://ibb.co/n0s3rPk. In page PageSpeed Insights I get a very high Cumulative Layout Shift.
This is what hapens:
1) https://ibb.co/qMqwXn8
2) https://ibb.co/DKGD5VR
How can I solve this problem?
Thanks
Hi Rostyslav,
How are you adding this CSS?:
.wp-container-1 {
display: flex;
gap: 0.5em;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
}
.wp-container-1 > * {
margin: 0;
}
It’s used in your Block Element and it seems to be loaded late. It maybe loading late because of Autoptimize.
How are you setting up Autoptimize? Can you try the settings here?: https://docs.generatepress.com/article/configuring-autoptimize/
Kindly let us know.
I added a gutenberg row block :https://wordpress.com/support/wordpress-editor/blocks/row-block/ with 2 paragraps inside.
I didnt add that code (CSS) you mentioned before.
If I desactivate autoptimize, nothig changes.
Hi there,
see this report:
https://www.webpagetest.org/video/compare.php?tests=220614_AiDc95_4K7-r:2-c:0&highlightCLS=1
The issue is the late loading styles for the core Social Icons block.
The issue with core blocks is the loading order of their CSS. Some CSS is inline, some is in the footer, some is in a stylesheet.
The issue here is the alignment CSS those icons uses is loaded by core in the Footer.
Personally i would replace the blocks with a GenerateBlocks Buttons block. Its CSS is dynamic and loaded in the head.
Hi,
So, you dont recomend me using any of the ´wordpress gutenberg blocks at all? So how can I add an Image block with generateblocks? (not a backround image)
Thank!
So, you dont recomend me using any of the ´wordpress gutenberg blocks at all?
No, thats not what i meant.
You can use any of the core blocks.
But for some designs i would recommend using GenerateBlocks instead, especially for above the fold content.
As a side note: GB 1.5 will introduce an Image Block. We don't recommend it as a replacement for the core image block, but when you need more styling controls.
Thank!
Are you planing to introduce a GB list block and table block?
Tables are a tricky one, so i doubt it.
Lists are something we are looking into :)