Eliminate render-blocking resources

#help #webdev

The audits tells me to Eliminate render-blocking resources and its giving me the cdn link of bootstrap... And I don't know how to deal with it.... Can you help?

Top comments (14)

Ben Halpern • Sep 25 '18

I've written about this a bit

Making dev.to Incredibly fast

Ben Halpern ・ Feb 2 '17 ・ 5 min read

#webperf #meta

And discussed it in a Railsconf talk

Good luck! This may not be worth worrying about, and things like HTTP2 server push may be making this less approach obsolete, but in case you want to learn more, I hope my resources help.

Olimpio • Sep 25 '18

Thank you... Great tips. I didn't know about cloudinary and I'm testing it and it just amazing... About eliminating CDN links it's kinda confusing cuz back in time many devz were recommending to use CDN "cuz it was fast and secure and bla bla bla" but things are changing now... 😉

Ben Halpern • Sep 25 '18

I think there's some nuance there, CDNs are still pretty amazing as a technology itself.

But yeah, don't want to be doing things willy nilly. You're introducing some chaos every time you do.

Mattia Astorino • Sep 26 '18 • Edited

<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">

developer.mozilla.org/en-US/docs/W...

The preload value of the element's rel attribute allows you to write declarative fetch requests in your HTML
, specifying resources that your pages will need very soon after loading, which you therefore want to start preloading early in the lifecycle of a page load, before the browser's main rendering machinery kicks in. This ensures that they are made available earlier and are less likely to block the page's first render, leading to performance improvements. This article provides a basic guide to how preload works.

You can't use defer or async because if you load an ui component that require js at the top of the page you must already have his js working.

Olimpio • Sep 26 '18

Ohhhh... This will be hepful when using Google fonts/... Its very interesting... Thank You

Benny Powers 🇮🇱🇨🇦 • Sep 25 '18

What I've done in the past is use a chrome extension called Used CSS to generate a stylesheet which only contains the used css rules.

Olimpio • Sep 25 '18

Ohhh. Thank you... But how will I remove unused CSS rules which are inside the file on the CDN link?

Benny Powers 🇮🇱🇨🇦 • Sep 25 '18

I just deleted the CDN link and only used my generated CSS.
Just be careful with this technique because if you later on need to use bootstrap styles that weren't included, you'll be out of luck.

Edison Yap • Sep 25 '18

Are you loading it async?

Olimpio • Sep 25 '18

Actually used the CDN link on the head tag... I guess it's sync...

Edison Yap • Sep 25 '18

One way I can think of is that you can use JS to load the stylesheet asynchronously.

stackoverflow.com/questions/240202...

What Render Blocking means is that on your initial load, the browser is waiting for all resources to be fetched. There's a couple ways to defer loading, I think JS have a simple async='true', whereas CSS is a bit trickier. The link I shared has better information.