How to eliminate 'Render-blocking JavaScript' error for mobile
Question
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 40/100 respectively, with the error,
Eliminate render-blocking JavaScript and CSS in above-the-fold content
and then i removed the unwanted content getting loaded in my page and also added a defer at the end of my tag,then with this changes the error got suppressed for Desktop and my score increased to 82/100 for desktop and 68/100 for mobile. That's fine up to now but the problem is the same error still remains with my mobile speed,
Eliminate render-blocking JavaScript and CSS in above-the-fold content
I dont know why error still remains with mobile speed when it was fixed with desktop.Can any one please help me with a suggestion.Thanks in advance.
2 answers
solution1
1 2017-01-31 07:23:37
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.
solution2
0 2017-01-31 05:40:16
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
- Make Fewer HTTP Requests
- Use a Content Delivery Network (CDN)
- Add Expires or Cache-Control Header
- Gzip Components
- Put Stylesheets at Top
- Put Scripts at Bottom
- Avoid CSS Expressions
- Make JavaScript and CSS External
- Reduce DNS Lookups
- Minify JavaScript and CSS
- Avoid Redirects
- Remove Duplicate Scripts
- Configure ETags
- Make Ajax Cacheable
- Flush Buffer Early
- Use GET for Ajax Requests
- Postload Components
- Preload Components
- Reduce the Number of DOM Elements
- Split Components Across Domains
- Minimize Number of iframes
- Avoid 404s
- Reduce Cookie Size
- Use Cookie-Free Domains for Components
etc
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.