WEBFLOW WEB VITALS: Eliminate Render Blocking Resources & Reduce Unused CSS

Hey everyone! In this video, we'll talk how to fix two of the most challenging Web Vitals/Page Speed issues related to Webflow (and not only of course). These are:
- Eliminate render-blocking resources.
- Reduce unused CSS.
The main reason why Web Vitals metrics are impacted by this issues is because different assets like JS scripts or CSS files (ie. your site styleguide) affect the initial render/paint of your web page. Users that are on slow 3G network might wait a couple of seconds until they could fully see your page.
In this tutorial, we'll dive into using Cloudflare CDN and Workers to fix these two issues. I highly recommend you watch the video till the end and if anything, please leave your comments/questions below.
📄 Written tutorial + Worker code:
thelumious.not...
This episode is part of 'Page Speed Insights' course which goes through all the Web Vitals issues and show how to fix them.

[@marinastativko6252]

I've been looking for solutions to these problems for YEARS. Massive thank you, Chris!

[@lumiousmedia]

Glad it helped and thanks for your support

[@pedroortiz4506]

Keep doing your videos just like this. Don'worry about how long they are. I undestood everything and I follow everyone on this topic, and you explain things very well.

[@lumiousmedia]

Thanks man, I appreciate it. Yeah, some stuff needs to be explained on a long run. That's the idea of 'understanding a topic' vs 'just getting a fix'.

[@zoranrnjakovic88]

Thank you so much, I really need this help. I can't tell you how many hairs I've pulled out over these problems. I'm very, very grateful to you!. THX again😃

[@mateusvidal3187]

The best video I've been looking for! Thanks, for sharing, bro!

[@lumiousmedia]

Thanks

[@DakasQ]

Have i done everyting correctly if after all steps from the video i still se in the pagespeed insights the website-file next to my home-purified file? Should there be still file from webflow?

[@dusandjordjevic701]

This one is gold, bravo!

[@lumiousmedia]

Thanks man

[@SourooshNazari]

hey so i tried this followed the steps on the notion and changed the dns settings and now it says that the site can't be reached. i wanted to purify the css as the next step stated but when i enter my url it says the page isn't working.

[@user-pf7pt3tt6z]

Amazing work man!

[@lumiousmedia]

Thanks

[@conzepsolutions]

Do you need to do css clean up everytime you are updating your website?

[@umpvideo4246]

Thank you. That was work.

[@konstantinonikin617]

Thank you for the tutorial Chris. I have been going through the tutorial step by step, but run into an issue when setting up the Worker. After adding the worker routes, I load up my web page but end up with a blank black page that says "Hello World".

[@lumiousmedia]

Really strange. I did not applied any changes. Can you send me a link or screenshot here: [e-mail]

[@konstantinonikin617]

@@lumiousmedia Hey Chris, appreciate your response. I have reset everything for now, because I had to launch a google ads campaign to the landing page I mentioned. I will try setting everything up again this weekend. Ill go through the tutorial once more and will email you in case I get the same problem. Thanks again!

[@faithrock6981]

This is what my site says right now

[@faithrock6981]

You have to remove the default code that the worker comes with before you paste the other code.

[@indi_indi_indi]

So i'm not sure whats happened on my site. Sometimes the site loads fine. Sometimes I get javascript errors. Sometimes it fails to load the purified.css. Then I reload again and it works. Then I check an hour later, and it isn't working again. Also I do still get that "eliminate render blocking resources" and "reduced unused CSS" in my google pagespeed tests/lighthouse. Maybe i've missed something, but I have gone back and fourth and everything seems to be fine on my end. However, I think I will just delete the purified CSS and revert back to just using cloudflare alone without the other changes. I've noticed improvements just by using cloudflare alone. This seems to be more stable for my end. Thanks though.

[@lumiousmedia]

Can you send a link? Might happen because you don't have the full cache enabled in CF. So, sometimes, your browser hit a cached version that do have the purified CSS, and sometimes it doesn't hit. But I'll need your site link to tell you for sure.

[@JesseShauffer]

Ok so this is gold….even with large websites and 20 custom pages (10 static / 10 cms) this is manageable but it’s also so important to update the custom css files every time you make a sweet change. Also how does this work with the global css styles embed?

[@lumiousmedia]

Good question. The site that minifies and purifies your CSS is already counting any CSS variable or global style. And spit back just the CSS classes/styles for that particular page only. I'll have to agree here - it might get challenging to re-purify every time you make a small change. I as thinking to create a worker that automatically purifies but it would take too long to process the page when someone loads it. Workers usually pre-compile on cached pages, which means that these workers will do the job and give back the new page. And then also cache it. But sometimes caching work, sometimes it doesn't work which means that for one user the page could load in 10 seconds, and for other user - in 1 second. I really hope webflow will change their plans on how the CSS get created

[@techbyusman]

How to create a subdomain in r2 bucket? Also, If we changes styles on homepage or any other page, do we also need to add purified css again ?

[@lumiousmedia]

The tool that purifies the CSS can do multiple pages, but usually I keep a CSS file per page. To create a subdomain for R2, first create the bucket, then go to the bucket settings and link it to a new subdomain. CF will create a new subdomain for you and link the r2: developers.cloudflare.com/r2/buckets/public-buckets/

[@techbyusman]

@@lumiousmedia Thanks Man!

[@nicolaboccuto3669]

I saw that your playlist of tutorials are closely related to Webflow. Is it possible to adapt the solutions you propose to other CMS (wordpress,prestashop,...)? It's probably a trivial question 🙃 Thanks in advance!!!

[@lumiousmedia]

Yep, most of the solutions could be easily adapted to any CMS. What's the solution you're interested in and the CMS?

[@nicolaboccuto3669]

@@lumiousmedia so... I work for an agency that creates websites with wordpress and prestashop. But sometimes we have clients with sites built in Magento. Also, I'm not a developer, but I do SEO. Therefore my goal is to provide as detailed information as possible. In particular, I very often encounter render blocking resources, unused CSS and third-party scripts that burden the main thread.

[@lumiousmedia]

@@nicolaboccuto3669 got you. You won't be able to use the code I've provided in the video for anything outside Webflow. You can change the code to make it work. However, witha little bit of work - it's possible to fix the 'unused CSS' and 'render-blocking' issues in WP, PS, or Magento. Webflow does not allow to edit the main CSS and JS files. WP does. So for me, it would be easier to fix it on Magento or WP, than on WF. Let me know if this make sense.

[@talhashahzad7106]

Do we need to update GoDaddy DNS to point to Cloudflare as well ?

[@lumiousmedia]

I personally moved my domain to CF. If you add a domain in in CF, it will automatically pick the DNS settings you have in GoDaddy. And yep - point them to CF. Let me know if this make sense. It's the cloudflare DNS that needs to point to the Webflow non-SSL IPs, and not GoDaddy DNS.

[@talhashahzad7106]

​@@lumiousmedia Do you know of another method where we don't change nameserver records? (E.g. via CNAME?) I ask because we have a lot of records on GoDaddy and don't have plans to use name servers elsewhere. Wondering if the partial CNAME setup may work here :point_up:

[@lumiousmedia]

@@talhashahzad7106 Nope. unfortunately, you need to change to CF nameservers. You can't make it work jsut with CNAME. When you add your GD domain to CF, it will automatically import all DNS.