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?
Eliminate render-blocking resources
Publish Date: Sep 25 '18
18 14Comments 14 total
- Edison YapSep 25, 2018
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.
Benny Powers 🇮🇱🇨🇦Sep 25, 2018What 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.
- OlimpioSep 25, 2018
Ohhh. Thank you... But how will I remove unused CSS rules which are inside the file on the CDN link?
- Benny Powers 🇮🇱🇨🇦Sep 25, 2018
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.
Ben HalpernSep 25, 2018I've written about this a bit
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.
- OlimpioSep 25, 2018
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 HalpernSep 25, 2018
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 AstorinoSep 26, 2018<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.
- OlimpioSep 26, 2018
Ohhhh... This will be hepful when using Google fonts/... Its very interesting... Thank You
Are you loading it async?