Testerr

No shortcuts huh

Ok, what I would like to do then is exclude the home page and other pages from being affected by inline and defer. I know how to exclude pages from Autoptimize entirely but how do I exclude pages from being affected only by inline and defer?

In other words, I’d like only future posts to be inlined and deferred, the rest should be disabled.

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

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.

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

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?

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.

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.

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.