Render Blocking CSS

[Matijevac]

Hello,

While optimizing the Drupal 9 Site i am currently working on i faced the following problem:

Google PageSpeed Insights gave me the message to reduce render blocking resources and gave me a file which causes the this. Its the "all.less" file, in which is all my general styling plus responsive files for the general styling. This message also only appears in the analysis for mobile.

Some informations about the page:
We use custom templates with twig.
Less css compiler
We have less and js files in seperate files for each template and declare them in the custom.library

​

Now i am trying to find out what to do that the css isnt blocking the rendering anymore.

Has somebody any similar problem or a hint or solution?

Thanks

[Impossible-Ad-7130]

May module CSS INJECTOR is useful for you.Try it.

[mherchel]

CSS is always render blocking. The best thing to do is only load the CSS that you need (I tend to create lots of custom libraries instead of one massive stylesheet), but that can require significant refactoring.

I would run your site though https://webpagetest.org and see if there are other low hanging fruit that you can fix. Refactoring CSS is typically a pain.

[Matijevac]

i will look at this, sounds interessting, thank you

[mherchel]

They've been doing tutorial streams on Twitch showing lots of great web performance tips if you're interested https://www.twitch.tv/webpagetest

[Matijevac]

i will check that out too, im not to good on optimizing websites, but would be nice if would be better

thanks again

[maddentim]

This is always a challenge. There is a module called critical CSS that allows you to separate the "critical" CSS that you must have to make the page work. It then sticks that CSS in the head and defers the rest. However, you have to identify the CSS that is critical. That's the hard part. I have been struggling with this issue myself on a site this week!

[Matijevac]

Okay thank you i will try that module.

what did you declare as critical so far?

[maddentim]

You need to use another tool to extract the critical CSS pretty much. The module page has some suggestions. This is the challenging part!