Cumulative Layout Shift in one language but not all :s

  • Resolved Ced

    (@cedriccharles)


    2 years, 7 months ago

    Hello there ??

    First of all, thank you for your plugin!
    I’m using Polylang to have a multilingual website. I don’t know why, but when I’m testing all my homepages in GTMetrix, I have Cumulative Layout Shift = 0 for the homepage in FR, but Cumulative Layout Shift = 0.2s in NL and EN.
    Visually, I see this shift but not in FR.

    How is this possible?

    I can give you the URL, but privately if it’s possible.

    Thank you in advance,
    Cedric

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    CLS can be a pain, I don’t always find the solution myself, but I’d be happy to take a look. You can send the URL to futtta-at-gmail-dot-com ??

    Thread Starter Ced

    (@cedriccharles)

    I’ve sent you the email, thank you ??

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    confirmed received, I’ll have a look later today/ tomorrow and will get back to you on the topic here Cédric.

    groeten uit Lokeren ??
    frank

    Thread Starter Ced

    (@cedriccharles)

    Perfect, thank you ?? !

    groeten uit Lokeren ??

    Groeten uit Luik ??

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    Ah, la cité ardente! Je crains que je doit t’avouer de ne la pas encore avoir visité. Honteux, non? ??

    But concerning the CLS; when I compare the 3 languages, there are minor-ish differences between the 3, so it is likely the issue is related to those differences (e.g. 2 call-to-action buttons in EN, NL main text in content__section--white much shorter which changes the above-the-fold layout, …). That content__section--white is what Pagespeed Insights indeed points out as generating most CLS in the NL version, so I *think* that is where you’ll have to start?

    Thread Starter Ced

    (@cedriccharles)

    Don’t be ashamed ?? ! It’s a nice really city, but it is far from being the most beautiful in Belgium :p !
    Bovendien heb ik Lokeren nog nooit bezocht…

    Thank you for your answer. In fact, I’m not sure I’m talking about CLS, sorry if I misunderstood this. What I’m talking about is that when I “force” reload (with ctrl + shift + R) the 3 pages, I can see a quick change in fonts/colors/size of the menu/logo/buttons in NL and EN, not in FR. And I don’t understand why. I’m sending you a screen record. If I disable Autoptimize, the issue disappears…

    Thank you,
    Cedric

    Thread Starter Ced

    (@cedriccharles)

    After multiple tests, I’ve seen that if I activate this one: https://snipboard.io/Qe20TN.jpg, the issue is resolved. But why :p ?

    Without activating this option, it seems that when I force reload the NL/EN versions, the <html> tag has at first only the “no-js” class, then after a few miliseconds the other classes are added and it seem to make the “jump” in fonts/colors/sizes.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    Although I can’t explain why this would not be the case for the FR site, but by default the CSS is render-blocking and that does impact performance. Re. inline all CSS; my hunch is that you have some styling requires JS to be loaded (adding classes left and right) and that when CSS is inlined the browser can download & execute the JS a bit earlier (hence the no-js disappearing).

    I would however advice against inlining all CSS, as that makes the HTML bulkier and the CSS can’t be re-used accross different pages. A better alternative would be to look into the “remove render-blocking CSS” option, for which you would have to either (a) generate & add the “above the fold CSS” or (b) on the critical CSS tab add manual rules (generating the CCS for that) or (c) add the criticalcss.com (premium service) API key?

    frank

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Cumulative Layout Shift in one language but not all :s’ is closed to new replies.