Eliminate render-blocking JavaScript and CSS in above-the-fold content

performance
1

When I test web site speed with google tools , it throws me:

Your page holds 4 blocking script resources and 1 blocking CSS resources. This causes a delay in rendering your page.

here are the the resources:

https://www.gstatic.com/firebasejs/3.5.2/firebase-app.js
https://www.gstatic.com/firebasejs/3.5.2/firebase-storage.js
https://elqoufa.com/packages/es5-shim/es5-shim-sham.min.js
https://elqoufa.com/…1516485ae1e2c.js?meteor_js_resource=true

For firebase . I try asyn and defer; but in console throws me an error the firebase is not defined , I try to install also firebase package , I prefere to load it from cdn for better perfermance.

for the last two resource? I know nothing about it.

the ccs ressource is

https://elqoufa.com/…a7599d60db2.css?meteor_css_resource=true
Masquer les détails
1 Like
2

The shim-sham file is there to make your javascript code compatible trough different browsers. The last file of the 4 is the bundle that contains the clientside part of your app. You cant really go without it.

Then there is the a7599d60db2.css file which is the file that contains the bundled css that was imported by your application.

You can do 2 things to fix the warning fro google:

A: use the bare minimum amount of CSS. Google only complains when your css files are significant.
B: split up the css code and only load css that is required aboce the page fold. Then load the other css code after the initial rendering.

All other solutions like defering the load entirely will affect user experience because people will notice a flikkering effect on load.

1 Like
3

@cloudspider Thank’s; so if I wll understand, we can nothing with number 3 and 4??

For the Css, the option b may be better; Is a7599d60db2.css contain only css on my file css or also the one on package like bootstrap ??

Than’s