Authoring Critical Above-the-Fold CSS

Hi guys,

I’m using Cloudflare for years now. Always been recommending CF’ services at work.

However, there something in order to speed up page loading time to even less. Cloudflare is already doing great work with combining JS scripts (Rocket Loader™) and Auto Minify so that automatically generating Critical CSS is somewhat missing.

I was wondering if Cloudflare could add an options in the Speed tab for generating the Critical CSS of cached pages? This would improve the PageSpeed score to over 90 percentile on Google’s PageSpeed.

This would be an incredibly beneficial option to speed up websites and confirming the SEO benefits of using Cloudflare. Technical SEO and Webmasters will recognise and use Cloudflare even more.

1 Like

This would be a nice addition though you would need to be able to fine tune it as it can break some styles/themes for sites. I use critical css above fold via Google’s ngx_pagespeed for some sites and themes that lend well to it’s use and benefits of ngx_pagespeed for nginx or mod_pagespeed for apache are real https://community.centminmod.com/threads/benefits-of-ngx_pagespeed.1032/.

Having the CSS critical render path supported on Cloudflare would be nice though :slight_smile:

FYI, though you don’t need CSS critical render path implementation to hit 90% or higher in Google PageSpeed score.

2 Likes

Thank you @eva2000 for your answer!

So yes, it would be a very nice addition to the Speed tab. Mod_PageSpeed is good but not every host (especially Shared) offers it. This is the reason I propose this idea.

It would make Cloudflare so much appealing to the SEO Community if it works like the very good Rocket Loader™.

Edit: adding @ryan

2 Likes

Bump?

1 Like

I would like to see this feature added too. Contemplated adding pagespeed just for this feature. Cloudflare already parses the data and can easily implement this feature on their end.

3 Likes

Hi @mike,

Thank you for supporting this idea. Could you upvote? Dunno if it’s gonna help…

1 Like

Just did, did not notice the vote button before.

3 Likes

Sorry for the delay in response.

It’s not a guarantee, but it helps us give us an indication of what customers are clamoring for. Can you also provide more detail on the type of sites or business you are in? Are you managing sites for others or is this your own? Plan type? Etc.? You don’t need to provide anything that personally identifies you. Just trying to get an idea.

1 Like

Hi Ryan,

I have many websites using Cloudflare services such the free plan and seven websites have Railgun™ activated. I’m the webmaster for all of them, some are for personal stuff and the rest are for my work. I’m managing websites between 200 visitors to more than 25,000 a day.

Cloudflare is doing a great job with for the speed and loading time; the minification, the CDN, Railgun™ and the recently added Argo™ are awesome but the performance tab still lacking from CSS optimization. As Mike said: “I would like to see this feature added too. Contemplated adding pagespeed just for this feature. Cloudflare already parses the data and can easily implement this feature on their end.” I agree. Cloudflare could do much more for PageSpeed score (it would also be a big marketing point in your favor!).

3 Likes

Having gone through the critical path css optimization myself manually, I don’t see why it could not be handled autonomously. And since the full css is loaded afterwards, I don’t see how a page could be broken by it.
I recently built a one-page site and optimized the critical path css. Along with rocket loader and caching the html, the speed is astounding.

4 Likes

Thank you Jules for your support!

If you could add a vote to the first thread, that’d be awesome :slight_smile:

1 Like

Done. You might want to check out Rocket Loader for CSS as well, a related topic.

3 Likes

Came here to propose the same idea, glad I’m not the only one interested in it. Upvoted!

2 Likes

Thanks! The most, the better.

1 Like

Hi @ryan, still no news about this?

1 Like

Yes we want this too! We could basically roll out a plain nginx box with Cloudflare on top and have all our optimization and compression applied instantly. That would be awesome!

3 Likes

I am just going to bump this thread I think that this would help optimize CSS on pages which seems to be one of the last main elements that is missing out as both JS and Images are being optimized properly.

JS through minify / rocket loader
Images through Mirage / Polish

2 Likes

Thanks Scott! Did you up vote the first post? (you know, for whatever it can help).

1 Like

Critical CSS generator on the fly would be amazing!

2 Likes

Any news on this topic? Many services are offering great speed optimization using critical css, like ezoic and nitropack.

It would be nice to have it on cloudflare instead of migrating to another webpage speed service.

1 Like