Cumulative layout shift question

  • Resolved Testerr

    (@raphaelkoning)


    3 years, 9 months ago

    Hello,

    I’m not sure how to fix this, I’m using the option “inline and defer CSS” as a sitewide default for posts and it works well and causes no problems with CLS.

    My homepage uses a different layout and so the same critical CSS doesn’t work for it.
    And so I’ve put this code in the functions.php with the homepage critical CSS inside it.

    add_filter(‘autoptimize_filter_css_defer_inline’,’my_ao_css_defer_inline’,10,1);
    function my_ao_css_defer_inline($inlined) {
    if (is_front_page()) {
    return “your-home-page-css-goes-here”; // overwrite default a-t-f CSS
    } else {
    return $inlined; // use default a-t-f CSS for all other types
    }
    }

    Now this works pretty well, except for an increase in CLS. I’ve noticed that if two codes are running simultaneously (one in autoptimize inline and defer, and the other in functions.php) then it causes an increase in CLS for the homepage. And as I’m not experienced, I have no idea how to fix this.

    Thanks

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

    (@optimizingmatters)

    as the code you’re using overrides the default a-t-f CSS for the homepage and as the CLS is higher on the homepage, the conclusion would be the “your-home-page-css-goes-here” needs tinkering?

    Thread Starter Testerr

    (@raphaelkoning)

    As I’ve said, the problem occurs when multiple codes are used simultaneously (one in autoptimize for posts and the other in functions.php for the homepage. Both codes work perfectly on their own.

    If the problem is simply that the homepage critical CSS is wrong, then tell me, why does the exact same code for the homepage work perfectly when used by itself? (either in Autoptimize or functions.php) And as soon as I put the posts CSS in Autoptimize (when the homepage CSS is in functions.php), the homepage CLS increases by not much but still something I would want to avoid if possible (about 0.1 on page speed analytics) Isn’t the functions.php CSS for the homepage supposed to completely override the posts one in Autoptimize? The rest of the stats like speed are perfect, and are clearly being improved by the homepage’s code.

    The functions.php CSS for the homepage clearly overrides the Autoptimize set CSS. it’s obvious as there’s a clear improvement in speed and drastically reduced CLS on the homepage when used. Though it seems there’s another factor involved, don’t you think?

    So how exactly does the CSS that works perfectly by itself need tinkering?
    Could you rather check if the Autoptimize filter above is correct?

    • This reply was modified 3 years, 9 months ago by Testerr.
    Plugin Author Optimizing Matters

    (@optimizingmatters)

    yes, the code snippet looks correct. when checking the homepage HTML source, can you confirm you only see the homepage-specific above-the-fold CSS (and not the generic one)?

    Thread Starter Testerr

    (@raphaelkoning)

    I only see one per page when checking the head using inspect, if i’m looking at the correct thing: <style id=”aoatfcss” media=”all”>

    I’m not sure how to spot potential problems.
    Maybe you can spot an obvious problem on the homepage?

    The site homepage: thecncexpert.com
    Other page that uses default posts CSS: thecncexpert.com/industry-resources/

    I’ve also tried disabling plugins that could interfere.

    • This reply was modified 3 years, 9 months ago by Testerr.
    • This reply was modified 3 years, 9 months ago by Testerr.
    Thread Starter Testerr

    (@raphaelkoning)

    Just noticed the homepage CSS shown in the header is far longer compared to the code inserted in functions.php, seems there is more code put in there by something.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    OK, my findings:
    * homepage critical CSS = 1381 lines (pretty-printed by Firefox), 247 rules vs default critical CSS = 2325 lines (again, pretty-printed), 402 rules
    * pagespeed insight mainly complains about the images on the homepage (go down to “diagnostics” and click on “avoid large layout shifts” to see;

    
CNC machine information and services The CNC Expert is dedicated to evaluating…
<div class="e2798-1 x-section"> 0.086

    so you might want to check the critical CSS for those + make sure they are not lazyloaded

    * when disabling the full CSS in firefox developer tools, I can see a small change in the header, see screenshot below, confirming something is not 100% right with the homepage critical CSS.

    hope this helps,
    frank

    Thread Starter Testerr

    (@raphaelkoning)

    Thanks for that, as i’m not experienced, i’m not sure how to identify problematic code. I’ve generated the critical CSS using about 3 different tools which all result in layout shifting. Can there sometimes be something in the code that can only be fixed manually? A limitation of their algorithm?

    Autoptimize does have lazy loading turned on, but I noticed that if I turn it off, the indicated CLS value doubles on mobile, and slightly worsens on desktop. How can this be?

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    Afraid I don’t know Raphael, getting this under control requires making changing and observing Pagespeed diagnostics as those indicate which DOM elements contribute to to the CLS and yes sometimes that will mean manual fixing .. :-/

    Thread Starter Testerr

    (@raphaelkoning)

    Ok well thanks for the help, I suppose i’ll keep playing around until I find something that works better.

    Thread Starter Testerr

    (@raphaelkoning)

    Quick update: turns out it was a stupidly simple thing, the logo didn’t have a height attribute. Although Google reported that things down the page are problematic, all of their CLS was caused by the logo not having a set height attribute. I’ve learned the lesson to not take any shortcuts and optimize any critical CSS until the site’s foundation is solid.

    Love Autoptimize by the way, very effective plugin.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    That is very interesting Raphael, thanks for sharing! CLS can be a pain, even more so if GPSI is giving the wrong info .. :-/

    frank

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Cumulative layout shift question’ is closed to new replies.