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?
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?
For further actions, you may consider blocking this person and/or reporting abuse
I've written about this a bit
Making dev.to Incredibly fast
Ben Halpern ・ Feb 2 '17 ・ 5 min read
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.
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... 😉
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.
developer.mozilla.org/en-US/docs/W...
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.
Ohhhh... This will be hepful when using Google fonts/... Its very interesting... Thank You
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.
Ohhh. Thank you... But how will I remove unused CSS rules which are inside the file on the CDN link?
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.
Are you loading it async?
Actually used the CDN link on the head tag... I guess it's sync...
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.Thank you... I will read it carefully
async and defer should help alligator.io/html/defer-async/
Lemme try