Page speed issue

Question

While testing page loading time on https://developers.google.com/speed/pagespeed/insights/?url=aishwat.com it says

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

and lists down few javascripts (which you may look at link provided)

Now, I am using these as base scripts angular.min.js, angular-animate.min.js, angular-aria.min.js, angular-material.min.js And they need to be loaded in this particular order (one can't load angular animate before angular)

The question is how to make them non blocking ?

I have already kept them outside head block

Source code : https://github.com/aishwat/aishwat.com/blob/develop/public/index.html

Plz have a look at source page

If you click on the error you will [land on this page telling you how](https://developers.google.com/speed/docs/insights/BlockingJS). — A1rPun, Feb 25 '16 at 10:51
ya it advises to make them inline or async/defer . I cant make them inline, because they are big and i cant make them async/defer because then it doesn't maintain loading order — Aishwat Singh, Feb 25 '16 at 10:56
See the answer below, just move them to where they're non blocking. — David Barker, Feb 25 '16 at 10:59

score 1 · Accepted Answer · answered Feb 25 '16 at 11:15

1

The PageSpeed insight site has a good documentation what you can do to prevent it.

To make your javascript non-blocking you can add the async or defer attributes to your script tags. To maintain the order it is recommended to use defer.

<script defer src="my.js">

I see your <script> tags are outside of your <body>, this is not valid HTML so I recommend putting them back at the head or somewhere in your body.

answered Feb 25 '16 at 11:15

A1rPun

16,287
7
57
90

ya this does it , i thought async and defer are same and it wont maintain order, my bad. Anyways but any similar thing for css delivery too ? see this now https://developers.google.com/speed/pagespeed/insights/?url=aishwat.com&tab=mobile – Aishwat Singh Feb 25 '16 at 11:18
@aishwatsingh Good question, there isn't such thing as `async` or `defer` for CSS files but [this article](http://www.giftofspeed.com/defer-loading-css/) has some good suggestions. – A1rPun Feb 25 '16 at 11:29
one more issue, as u see i was having a fallback approach like ` ` now it loads both offline and cdn version – Aishwat Singh Feb 25 '16 at 11:59
tried this ` ` but it's still loading local script – Aishwat Singh Feb 25 '16 at 12:40
http://stackoverflow.com/questions/35627789/html-script-loading-with-fallback-approach-and-differ – Aishwat Singh Feb 25 '16 at 12:56

Page speed issue

1 Answers1