Skip to content Skip to sidebar Skip to footer
Home / Angularjs / Asynchronous / Css / Javascript / Seo

How To Eliminate 'render-blocking Javascript' Error For Mobile

Post a Comment
Recently I tested my site for mobile friendliness, mobile speed, and desktop speed.I got shocked with the results of my desktop and mobile speed which are too poor like 48/100 and

Solution 1:

When you put the CSS files in your heading <head> section, then browser can't load other resources until they did not get (render) css files from your server.

Google already said on their article, if you have small css files then put it internally into head section, so browser don't need to request another HTTP GET request to your server and it will use CSS directly from your <style>.yourcsscode{}</style> tag.. And if your css file is big then use javascript to render it asynchronously (Example already included in above link).

For javascript use asyn tag like this <script async src="my.js"> and if your javascript is small then use it internally so you can save another HTTP GET request.

The whole thing here is, your browser need to wait to load other resources untill they did not get css and javascript files from server. Rahul provided too many points which does not solve this problem but it is useful if you consider to optimize your pagespeed.

Solution 2:

don't include you js file in between <head> tag instead include them at end of body tag

I recommend you to compress and minified all you js in one file and css in one file to reduced http request and add expiry header using .htaccess

and this might help you https://varvy.com/pagespeed/render-blocking-css.html

additionally I suggest you to refer this link https://developer.yahoo.com/performance/rules.html

  1. Make Fewer HTTP Requests
  2. Use a Content Delivery Network (CDN)
  3. Add Expires or Cache-Control Header
  4. Gzip Components
  5. Put Stylesheets at Top
  6. Put Scripts at Bottom
  7. Avoid CSS Expressions
  8. Make JavaScript and CSS External
  9. Reduce DNS Lookups
  10. Minify JavaScript and CSS
  11. Avoid Redirects
  12. Remove Duplicate Scripts
  13. Configure ETags
  14. Make Ajax Cacheable
  15. Flush Buffer Early
  16. Use GET for Ajax Requests
  17. Postload Components
  18. Preload Components
  19. Reduce the Number of DOM Elements
  20. Split Components Across Domains
  21. Minimize Number of iframes
  22. Avoid 404s
  23. Reduce Cookie Size
  24. Use Cookie-Free Domains for Components

etc

You may like these posts

Post a Comment for "How To Eliminate 'render-blocking Javascript' Error For Mobile"