Eliminate render-blocking JavaScript and CSS

Question

I am having a trouble with figuring out what "this spsefic outcome" in Google PageSpeed Test actually mean.

I am testing this website: www.loaistudio.com - https://developers.google.com/speed/pagespeed/insights/?url=www.loaistudio.com

screenshot of test result

Can anyone advice me please? I have managed to fix all of the other errors - but I am completely stuck at this one, I understand that CSS has to be in the head of the page, is this telling not to place it in the head but at the end of the page?!

Some advise that you put the javascript resources like jQuery and the like at the end of the page just before the closing </body> tags, this is how the bootstrap framework does it, although the advantage is minimal. — adaam
– adaam, Commented Feb 4, 2014 at 0:04

Jivan · Accepted Answer · 2014-02-04 00:05:16Z

4

Your browser freezes page rendering while loading JavaScript

Quick answer: you just have to put your JavaScript src below your content.

Why? Because when your browser begins loading JavaScript, it freezes the rest until it's done with that.

Loading the content of your page first allows it to be displayed, and then JavaScript has all the time it needs to load.

So do like this:

<html>
    <head>
    </head>
    <body>
        My great body content!
        <script type="text/javascript" src="my/js/files.js">
        <script type="text/javascript" src="http://www.googleapi.com/my/external/scripts.js">
    </body>
</html>

Instead of this (which is unfortunately still really common):

<html>
    <head>
        <script type="text/javascript" src="my/js/files.js">
        <script type="text/javascript" src="http://www.googleapi.com/my/external/scripts.js">
    </head>
    <body>
        My great body content!
    </body>
</html>

answered Feb 4, 2014 at 0:05

Jivan

23.4k16 gold badges92 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2756554 Over a year ago

This worked, but CSS? why is it telling me to put it at the end as well!? That can't be done right? CSS always has to be in the top?

user1710796 · Accepted Answer · 2014-02-04 00:10:15Z

0

Alternately, just add the async at the end of your script tag.

<script src='' async></script>

answered Feb 4, 2014 at 0:10

user1710796

1 Comment

BigBadMe Over a year ago

If only life were that easy! This is a dangerous method to employ as it assumes two things 1) the browser supports async 2) that there is no dependency between scripts loaded with async. For example, what if you load jQuery with async and your own script (which uses jQuery) loads before it? Answer: errors.

Collectives™ on Stack Overflow

Eliminate render-blocking JavaScript and CSS

2 Answers 2

Your browser freezes page rendering while loading JavaScript

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Your browser freezes page rendering while loading JavaScript

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related