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

Рет қаралды 2,473

4 ай бұрын

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.notion.site/Web-Vi...
This episode is part of 'Page Speed Insights' course which goes through all the Web Vitals issues and show how to fix them.

Пікірлер: 33

@marinastativko6252 3 ай бұрын

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

@lumiousmedia 3 ай бұрын

Glad it helped and thanks for your support

@pedroortiz4506 4 ай бұрын

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 4 ай бұрын

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'.

@shadow8277 3 ай бұрын

These videos literally saved my job! Thank you Chris, please making more in-depth, advanced Webflow tutorials likes this! ✨

@lumiousmedia 3 ай бұрын

Will do! Thanks for your support

@mateusvidal3187 Ай бұрын

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

@lumiousmedia Ай бұрын

Thanks

@dusandjordjevic701 4 ай бұрын

This one is gold, bravo!

@lumiousmedia 4 ай бұрын

Thanks man

@user-pf7pt3tt6z 4 ай бұрын

Amazing work man!

@lumiousmedia 4 ай бұрын

Thanks

@umpvideo4246 3 ай бұрын

Thank you. That was work.

@SourooshNazari 21 сағат бұрын

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.

@conzepsolutions 9 күн бұрын

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

@techbyusman 3 ай бұрын

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 3 ай бұрын

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 3 ай бұрын

@@lumiousmedia Thanks Man!

@JesseShauffer 3 ай бұрын

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 3 ай бұрын

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

@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: chris@thelumious.com

@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!

@nicolaboccuto3669 2 ай бұрын

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 2 ай бұрын

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

@nicolaboccuto3669 2 ай бұрын

@@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 2 ай бұрын

@@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 3 ай бұрын

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

@lumiousmedia 3 ай бұрын

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 3 ай бұрын

@@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 3 ай бұрын

@@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.

@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.