Authoring Critical Above-the-Fold CSS


#1

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.


#2

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.


#3

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


#4

Bump?


#5

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.


#6

Hi @mike,

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


#7

Just did, did not notice the vote button before.


#8

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.


#9

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!).


#10

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.


#11

Thank you Jules for your support!

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


#12

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


#13

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


#14

Thanks! The most, the better.


#15

Hi @ryan, still no news about this?


#16

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!


#17

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


#18

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