CODEWITHSUNDEEP
javascripthtmlcss
user2756554
user2756554

Reputation:

Eliminate render-blocking JavaScript and CSS

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?!

Upvotes: 6

Views: 3226

Answers (2)

user1710796
user1710796

Reputation:

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

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

Upvotes: 0

Jivan
Jivan

Reputation: 23068

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>

Upvotes: 4

Related Questions