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

Question

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 :)

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

Any suggestions?

Answer 1

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