Hey Penci,

Google recently introduced a new metric they take to measure the speed/quality of a Website called CLS (Cumulative Layout Shift): https://web.dev/vitals/

You can measure this using the PageSpeed Insights Tool of Google: https://developers.google.com/speed/pagespeed/insights/?hl=de&url=https%3A%2F%2Frieckpil.de%2Ftest-spring-applications-using-aws-with-testcontainers-and-localstack%2F&tab=desktop

Somehow the outcome for my page using Soledad is quite bad for this factor on Desktop. I already played with different header styles and now even removed the logo of the header via css using display: block.

I even had a more worse score when the header included a image as then the page shifts when the image of the header is loaded. 

Can you think of any other improvement (theme-wise) to work on a better CLS score?

Kind regards,

Philip

Hey,

I already ran a test with now cookie consent popup and also disabled my sidebar with no effect for the score.

Kind regards,

Philip

I disabled now every possible popup for the page (https://rieckpil.de/test-spring-applications-using-aws-with-testcontainers-and-localstack/) and the score is barely changing (still 0.407) for me.

From the official CLS page (https://web.dev/cls/)  I copied the following possible improvements:

For most websites, you can avoid all unexpected layout shifts by sticking to a few guiding principles:

• Always include size attributes on your images and video elements, or otherwise reserve the required space with something like CSS aspect ratio boxes. This approach ensures that the browser can allocate the correct amount of space in the document while the image is loading. Note that you can also use the unsized-media feature policy to force this behavior in browsers that support feature policies.
• Never insert content above existing content, except in response to a user interaction. This ensures any layout shifts that occur are expected.
• Prefer transform animations to animations of properties that trigger layout changes. Animate transitions in a way that provides context and continuity from state to state.

Thanks for your effort,

Philip

Hey,

The Google Page Speed now outputs information about large layout shifts (https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Frieckpil.de%2Fhowto-remote-debug-spring-boot-applications-intellij-idea-eclipse%2F&tab=desktop, scroll down to the gray indicators and unfold 'Avoid large layout shifts').

The main reason is the sticky-sidebar:

<div id="main" class="penci-main-sticky-sidebar" style="position: relative; overflow: visible; box-sizing: border-box; min-height: 1px;">

If I disable the Sidebar, the score drops from 0.49 to 0.135 which is quite okay

Is there a sidebar layout or CSS adjustments to make it more CLS friendly?

Kind regards,

Philip

Thanks for your fast reply.

Yes page speed is looking good but Google announced this Cumulative Layout Shift as a new Core Web Vital which will have SEO impact in the near-future and the Search Console already warns about it so I wanted to ensure that my blog is compliant. Isn't there a way to _hard-code_the position of the sidebar?

Kind regards,

Philip

Are there any other sidebar types in the Soledad Theme except the Sticky Sidebar?

Hey,
thanks for the tip with the sticky sidebar. When I remove it I still see the class theiaStickySidebar attached to the first div inside the sidebar element. Is this fine or am I missing another checkbox?

Kind regards,

Philip