Delaying style.min.css - Is this ok?

Hi there,

Doing this could result in a layout shift, as your HTML would load without styling for those 3 seconds.

It's worth a shot, but it may end up causing more issues than it solves.

Thanks Tom. Delaying it actually benefited pagespeed scores. 1 section of Beaver Builder did break however and I was not able to determine if this is related as it's intermittent. I have been able to pass all CWV items except LCP on mobile. It's difficult as suggestions from Google a little cryptic and some elements are not easily controlled. The struggle continues.

Hi there,

LCP is pretty tricky as it can be anything within the content.

In case you've yet to read this. Here's the general guideline on tackling LCP related things.
https://web.dev/optimize-lcp/

Hey Elvin,

Tricky is a nice way of putting it. I am working with some very experienced folks on this issue and sometimes, we are all scratching our heads. Nuts how any small business owner can even pass CWV.

Tricky is a nice way of putting it. I am working with some very experienced folks on this issue and sometimes, we are all scratching our heads. Nuts how any small business owner can even pass CWV.

From personal experience, I've addressed this by making sure images are optimized and fonts preloaded. We also try to make sure the CSS and JS are as small as possible(minified and combined with exclusions if necessary). This is actually why devs prefer less plugins. Mostly to avoid bloat but not necessarily. It's also so CSS and scripts are more manageable.

That's mostly it but it also helps a lot to collaborate and plan what contents appear on what page with the client to avoid clumping most contents in one page or serve it in AJAX-like manner in specific design cases so it doesn't all load at once and load only when specifically requested.

Those are very good tips. But having worked on CWV for the last 6 months intimately, it can get complicated even on simpler built sites. Can't believe design also affects CWV now. This LCP for mobile is difficult to pass for sure.

And to add(elaobrate) on Tom answer:

You'll risk getting CLS flags if you do this. That 3 seconds of non-styled state while waiting for style.css to load may cause FOUT(flash of unstyled text) because the font-family propery from style.min.css fires in 3 seconds late.

Also, some layouts that rely on CSS (flexbox) will shift once the style.min.css is loaded if there are property overlaps because of CSS precedence. Some elements that are supposed to be hidden with display: none; will be visible on the first 3 seconds as well. This may look jarring.

I'd recommend sticking with minifying CSS and aggregating(merging) the stylesheets instead. :D

I see. Thanks very much. At this point, I can give up some CLS score if I can trade up LCP. I have tried CloduFlare APO, installed KeyCDN and nothing seems to be helping as much as manually setting things up with nginx + redis and Autoptimize. Totally appreciate everyone's help here. WCV is definitely an uphill battle.

No problem. Let us know if you have further specific questions.

Actually, instead of delaying style.min.css as this might cause layout issues, is there an option to async or defer it? This will definitely help with render blocking issues. If so, what is the proper syntax?

Hi there,

can you share a link to your site so we can see whats loading and when - maybe some other improvements that can be made.

Thanks for the kind gesture David. Know that I don’t expect anyone to find a fix, just hoping we can put our collective brains together to pass CWV LCP on mobile.

Both sites are running nginx with Redis page caching and object caching. Both sites running GPP with the official child theme. Delaying and preloading things with Pre Party and Flying scripts. Autoptomize controls lazy loading, aggregation and minification. Even have a cache warming script that runs every few hours to make sure pages, posts and categories are all cached and ready. Not sure what else we can try to pass LCP for mobile. Testing using PageSpeed tool from Google’s own site.

Any tips and advice would be greatly appreciated. Btw, I was able preload the original css in this thread and it’s no longer render blocking. Any tips?

Just some practices I follow:

1. I first compare FCP and LCP times.
If there is a large difference between the two then generally the issue is related to the LCP element itself.

If that Element happens to be an Image then: Make sure its not being lazyloaded OR move it below the fold on mobile.

If the element is some Text then make sure its not reliant on 3rd party font to be loaded. If need be preload the fonts or host them locally with a system stack font for fallback.

2. If there is little difference between the two times eg. FCP 2.3s and LCP 2.7s then the issue is upstream. Ultimately the best improvement comes from improving server response time, check if theres a slow Initial Request time. GT Metrix or other network testers are better at showing you if the sever times could be improved.

If the server response times are good ( or as good as they can be ). Then its time to look at the page itself.

3. Check the DOM Entities - if they are high or excessive then this will first incur a slower initial request, and then compound any CSS render blocking issues. The more DOM elements the more parses the browser has to make to generate the CSSOM. So cutting back unnecessary HTML, such as those generated by a Page Builder will make significant improvements.

4. Render Blocking resources, if your server is running HTTP 2.0 ( which is most common ) you may find that minimising CSS files BUT NOT combining them will yield better results. Its not a given - but synchronous loading of multiple small files is better then 1 large file.

Aside of this you're into the murky world of Critical CSS. Unfortunately none of the one click automated work that well - and you would need to be able to generate your own critical CSS.

Finally Google PSI scores are all simulated using Lantern technology. Whereas your GT Metrix and other network testing sites use real hardware to do performance tests. As you can choose the origin Server ( unlike Google ) its always best to test on server that is nearest to your target audience.

Its better to optimize your site to your user base and not google. As google collects Field Data you will actually begin to see the real scores - which could be considerably better then the Lab Data especially if your audience is using more modern devices on faster networks then googles simulations ( a Moto 3g on throttled network that simulates the lowest common denominator ).

Hey David,

I wanted to say a huge thank you for taking the time to document all of this and for sharing your expertise! having been optimizing websites for SEO for over 20 years, I always knew good people who know what they are doing are not afraid to share as the pie is big enough for everyone to be successful and you clearly embody this. I have read and re-read your reply and it makes a ton of sense. So to test everything (for the 1000th time), I am going to use just the homepage to test. Making good headway.

1. Removed Hero Background image and replaced with a gradient background.
2. Replaced Beaver Builder Posts module with WP Showposts Pro
3. Pagespeed is now showing a drastic improvement. See below.
4. After optimization, I have even deleted the delay script for Google tags as I no longer need it.
5. Using Edge or Chrome Dev Tools > I am getting a Lighthouse Mobile score of 99 with:
FCP = 1.4s
LCP = 1.7s
6. GTmetrix free version passes with flying colours as it's desktop only.
7. Webpagetest LCP is even better at 0.682 sec for mobile
8. For Lab Data in Pagespeed insight (Google's actual tool), the best score I can get is a 98 for mobile with:
FCP: 1.8s
LCP: 2.0s
9. What I am finding is that Time to Interactive is still a little high at 3.7 secs on all tests but it's now green. The VPS is mid sized, beefy enough and at a large provider so hardware should not be a problem.

So, after all of that, since LCP is just text, I have gone into Customizer and selected System Stack. I am still going to keep testing and your comments have been most helpful in making me come from this in a different manner.

Before
Pagepseed Mobile Score: 79
Pagepseed Desktop Score: 97
First Contentful Paint - 2.2 s
Speed Index -3.9 s
Largest Contentful Paint -4.2 s
Time to Interactive- 4.6 s
Total Blocking Time- 190 ms
Cumulative Layout Shift -0

After
Pagepseed Mobile Score: 98
Pagepseed Desktop Score: 99
First Contentful Paint - 1.8 s
Speed Index - 1.8 s
Largest Contentful Paint - 2.0 s
Time to Interactive - 3.7 s
Total Blocking Time - 40 ms
Cumulative Layout Shift - 0

What really surprised me was the even a padding of 30px affected LCP significantly. Something surely needs to be tweaked at Google's part. It's ridiculous actually. But this is not a complaint post. I am actually very thankful for your advice.

This is for the homepage, I am going to do a complete overhaul of Posts after this. Thank you again for your guidance! Now we need GPP to have more control of Posts and Archive templates. Now I just have to find a way to replace Beaver Themer posts layout with GPP. I hope (actually, I am pretty sure) something is coming down the pipe for GB Pro to do just this in Blocks!

Happy Chinese New Year and thank you once again David! Most appreciated.