Reduce CLS

[travincult]

I would like to reduce the Cumulative Layout Shift (CLS) of my website since this is one of Google’s new Core Web Vitals.

I have for instance tested the pages: https://travelinculture.com/where-to-stay-in-tokyo/ (where I ‘manually’ insert an image above the fold and specified the width and height of the image) and the page https://travelinculture.com/magnetic-island/ where I display the featured image above the fold.

I have tested with different tools – and in several cases I get a CLS > 0.1 – which is subject to improvement.

I have also added the general CSS rule: ‘object-fit:contain’ to my single post pages (which as far as I have understood may reduce the CLS).

Will you please confirm that when a featured image is displayed on a post page, then you have by default included the width and height specifications?

What else can I do to the reduce the CLS (on the pages referred to above)? Any special theme-specific things I should know?

 

[scrambler]

I think you are going after insignificant tuning here, but featured image HTML do include width and height, as you can confirm by inspecting your site with your browser developer tools (F12)

 

[travincult]

Thanks a lot. That was just what I wanted to know. I will then have to look somewhere else to reduce the CLS (on some pages between 0.1 and 0.4).

[Weaver]

I just had a look at your page, and it is adding quite a bit of custom CSS.

I also did a very brief scan of what CLS is.

So, I can in fact see a bit of image shifting going on as the page loads that might increase whatever a CLS score is.

First, you have a plugin called add-to-any that uses different screen sizes than Weaver Xtreme, and that could cause unexpected screen writing.

But you also have a bunch of custom CSS, and I noticed you use .is-phone, is-mobile and other Weaver Xtreme .is-whatever rules.

These rules work, BUT they are dynamic – they are computed after the screen may be partially loaded, and that can cause a noticeable screen rewrite.

They can be very useful and convenient for simple fixes, but ideally they should be replaced by your own @media rules

For example, instead of

.is-phone h3 {font-size: 90%;}

use

@media ( max-width: 580px) { h3 { font-size: 90%; } }

 

[travincult]

All right, I see what you mean, Weaver. Apparently I have quite a lot of custom CSS rules which are read after the pages have loaded. This seems to cause the higher CLS values. Ideally, I should inline the critical CSS on all my HTML pages – but that is really a lot of ‘redundant’ information on maybe 150 ‘similarly structured’ pages! And some of the rules are not really obvious to inline.

I don’t know much about this – but maybe I can make a CSS stylesheet with the critical rules and read it before everything else?

When googling, I realize that a lot of people are now struggling with the CLS score since it has now become an important core web vital. It is definitely something to consider when working on the website.

Under all circumstances I will follow your advice and change the @media rules.

Could you please help me ‘translate’ the following rules (which I previously applied based on your advice – thank you!) :

.is-phone #container{width:92%;}

.is-phone .content-2-col, .is-phone .content-3-col {padding-right: 1%;  padding-left: 1%;}

.is-ipad #container{width:90%}

.is-phone .is-android .is-iphone #inject_header {display:none;}

.is-mobile.single .featured-image {width: 109%;max-width:none;position: relative;margin-left: -4.5%;}

 

– do I just swap .is-phone with @media (max-width: 580px) {}:

• Where do I put #container in the first rule – inside the bracket?
• And in the second rule – where do I put .content-2-col etc.?
• The third, fourth and fifth rule – what do I put instead of .is-ipad? And .is-android, .is-iphone, .is-mobile.single ….

I will really appreciate if you can help me write the five correct rules to be used!

Thank you very much, Weaver!

[scrambler]

The logic is that you remove the .is-mobile / is-phone selectorS, then place the remaining rule inside  an @media rule with the min and max matching.
Notes:
There will be two sets of curly brackets, the one from the original rule and the one from the @media container
Also the @media rule only replace the is-mobile, is-phone and is-tablet, not the is-ipad or is-android.

.is-phone #container{width:92%;}

becomes

@media (max-width:580px) { #container{width:92%;}}

 

.is-phone .content-2-col, .is-phone .content-3-col {padding-right: 1%;  padding-left: 1%;}

becomes

@media (max-width:580px) {.content-2-col, .content-3-col {padding-right: 1%;  padding-left: 1%;}}

 

.is-phone .is-android .is-iphone #inject_header {display:none;}

Was an invalid rule due to selector errors. There should be no space between .is-phone, .is-android and .is-iphone, because they are on the same html body tag. The rule should have been

.is-phone.is-android.is-iphone #inject_header {display:none;}

and it would become

@media (max-width:580px) {.is-android.is-iphone #inject_header {display:none;}}

 

.is-mobile.single .featured-image {width: 109%;max-width:none;position: relative;margin-left: -4.5%;}

becomes

@media (max-width:768px) {.single .featured-image {width: 109%;max-width:none;position: relative;margin-left: -4.5%;}}

[travincult]

I’ve implemented the rules – thank you very much!

Any idea why the text / titles beneath / overlaying images / featured image are ‘pushed down’ every time I load a page – before overlaying the image or ‘jumping’ into the right position? It happens both on desktop and in mobile view. Examples:

•  https://travelinculture.com where the overlaying text ‘Explore the World’ is ‘pushed down’ upon load (+ more text below is pushed down as well)
• https://travelinculture.com/gothenburg-goteborg-sweden/ where the title / text jumps quite a bit down upon load (this is also the case when displaying a featured image: https://travelinculture.com/fjallbacka/)

This doesn’t seem to happen on pages without an initial image, for instance: https://travelinculture.com/country-info/robbery-rate/ (here only the lower border of the orange band seems to move a bit. Not the rest of the page.

It would be awesome if you could help me a bit further on these issues!

 

[Weaver]

For the sweeden page, I think the issuse is with the site title “TC Travel in Culture”. It initially displays centered, and is then dynamically moved to the left. Same thing with the Sign Up button.

I didn’t try to follow exactly what you are doing to make the title/button move, but it is likely some late loaded CSS or JavaScript that is doing the move. It could be some Weaver Xtreme options you’ve checked, but I can’t really think of any that would do that.

I’d try a couple of things.

First, move all your custom CSS from where you’ve defined it in the WordPress Custom CSS box to the Weaver Xtreme Global Custom CSS box which gets loaded in a different order than the WP css.

And you have quite few custom CSS rules that could be set with standard Weaver Xtreme options rather than via custom CSS. Some of Weaver’s options actually stop generation of content rather than altering by CSS.

Second, try disabling your Lazy Load plugin.

[scrambler]

I assume you fixed it, because nothing is jumping for me on Edge and Chrome

[Weaver]

@scrambler – no, it is very briefly displaying the title/signup centered, an then moved to the edges. I just looked. Refreshing the page seems to be the best way to see the flash.

[travincult]

Removing the Lazy Load plugin solved a lot of the issues! (whereas moving the custom CSS rules to the Weaver Xtreme Global Custom CSS box didn’t really change much).

So basically I have very few CLS issues left. I though still have the logo/signup issue (in addition to minor movements of top bands and menu items on desktop). I inserted the logo/signup in the Preheader Injection Area (HTML Injection Area). Maybe this is not the obvious way to do it?

[scrambler]

For the signup button at the top right, I can see it, although very fast…

Now for the signup div, you are using an HTML attribute

align=”right”

Try removing that and adding the CSS property below to the style attribute

text-align:right;

But apart from the signup, I don’t see anything else moving

[travincult]

I just tried the ‘text-align:right;’ as you suggest – but it unfortunately doesn’t solve the issue…

[scrambler]

So I copied your HTML from your header top area and pasted it the header top area of my test site and there was no changing position there.

So I went and inspected your custom CSS, and the problem comes from the fact that you have a rule that first centers the text.

.maxbutton-16.maxbutton.maxbutton-sign-up .mb-text {
color: #333333;
font-size: 14px;
text-align: center;
font-style: normal;
font-weight: normal;
line-height: 1em;
box-sizing: border-box;
display: block;
background-color: unset;
padding: 9px 0px 5px 0px;
}

If you get rid of that, the text should not move anymore.

 

[travincult]

The issue is not the Sign Up box itself. The problem is that the Sign Up box – as well as the logo – are initially centered and displaying on the page (even if only shortly) before moving out and displaying in the top corners. You can see it when refreshing the page.

[Weaver]

I had posted the reason for the title/signup box issue, but it apparently didn’t post. Sorry.

The cause seems to be you’re using a somewhat outdated Weaver option to Expand header (vs. a full width option). This option adds the class wvrx-expand-full, which turns out is implemented in JavaScript.

If you can redesign the header using one of the full width options, the full width comes from CSS and not JavaScript.

Back in the the day, the Expand options were the best available, but with all browsers now supporting the CSS needed to create full width designs, that is the better way to go now.

In fact, the Expand options are being removed from Weaver Xtreme Version 5 (but will be automatically converted to the equvalent full width options).

I am having time issues with getting Version 5 released, partly due to a fairly serious skiing accident in March. I hope to get Version 5 out soon.

 

[Author]

Posts