CODEWITHSUNDEEP
javascriptcssbootstrap-4progressive-web-appslighthouse
Kane
Kane

Reputation: 909

How to improve "Eliminate render-blocking resources" for Lighthouse report (PWA)?

My first attempt at a PWA is here: https://flowster.app/calculators/freight-class-calculator/

And I'm trying to get 100% in Lighthouse for all the categories :)

enter image description here

I read the "Learn More" page but couldn't understand how to deliver Bootstrap CSS inline, for example.

Any suggestions?

Upvotes: 4

Views: 5598

Answers (2)

Mr. Hugo
Mr. Hugo

Reputation: 12590

You should only load the CSS and JS in the head that are actually required to load the current 'view' (I deliberately did NOT say 'page'). This does NOT mean that you should inline them. You can perfectly load them from a CSS or JS file. You should load the rest of the CSS and JS in the footer (CSS or JS files are fine here too).

In the case of a single page application (SPA) that is also a progressive web app (PWA), this is only your opening/splash screen... easy enough. It should be very easy to get a 100% score on that. But, when you are talking about a website in which it is unclear what the 'first page' is... it becomes an almost impossible task. A clever CSS in JS or inline solution could do the trick, but would be quite difficult to build.

There is however a much easier solution for websites. I wrote how to get a 100% Google Lighthouse score, which focusses on websites only. TLDR: just omit the frameworks. It might not be a solution for every case, but for those situations where it is possible, it is definitely the way to go.

Upvotes: 1

Akber Iqbal
Akber Iqbal

Reputation: 15041

What this means

“Eliminate render-blocking resources” means that all resources (CSS/JS) which are required for the first view (top fold) should be part of the html itself (inline or script or style block); all the other CSS/JS (which is used somewhere below) can go to their other separate files;

This way, the browser will be able to paint/render the first view quickly and then go on to load the other CSS/JS files;

How to go about it

I went through this myself and realized that within the bootstrap.css i was hardly using 15% of the classes... you may also get the hint of unused css classes within lighthouse also. So this is where you can selectively include only relevant classes in your HTML;

JS will be trickier. Going on, to make this first view functional, you can insert vanilla Javascript (inside the HTML) for the navigation, carousel etc. which is better/faster than bootstrap.js;

hope it helps... Good luck

Upvotes: 4

Related Questions