WEBFLOW WEB VITALS: Eliminate Render Blocking Resources & Reduce Unused CSS
2,037
Published 2024-03-02
- 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.notion.site/Web-Vitals-Fix-Eliminate-re…
This episode is part of 'Page Speed Insights' course which goes through all the Web Vitals issues and show how to fix them
All Comments (13)
-
I've been looking for solutions to these problems for YEARS. Massive thank you, Chris!
-
The best video I've been looking for! Thanks, for sharing, bro!
-
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.
-
These videos literally saved my job! Thank you Chris, please making more in-depth, advanced Webflow tutorials likes this! ✨
-
This one is gold, bravo!
-
Amazing work man!
-
Thank you. That was work.
-
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?
-
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!!!
-
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.
-
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 ?
-
Do we need to update GoDaddy DNS to point to Cloudflare as well ?
