Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Defer parsing of JavaScript - Google Page Speed

All of my JavaScript files are already at the bottom but Google Page Speed is giving this suggestion to improve speed:

Defer parsing of JavaScript

88.6KiB of JavaScript is parsed during initial page load. Defer parsing JavaScript to reduce blocking of page rendering. http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js (76.8KiB) http://websiteurl/js/plugins.js (11.7KiB) http://websiteurl/ (109B of inline JavaScript)

This is the my html (example)

<html>
<head>
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<head>
<body>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.5.1.min.js"%3E%3C/script%3E'))</script>
    <script src="js/plugins.js"></script>
    <script>$(document).ready(function() {
            $("#various2").fancybox({
                'width': 485,
                'height': 691,
            });
        });</script>
    </body>
    </html>

What should I do to increase performance by using defer?

Is it only for Google chrome or for all?

like image 829
Jitendra Vyas Avatar asked Aug 26 '11 14:08

Jitendra Vyas


People also ask

What is defer parsing JavaScript?

Defer parsing of Javascript means using " defer " or " async " to avoid render blocking of a page. This HTML command instructs the browser to execute/parse the scripts after (defer) or asynchronously (in parallel) to the page loading. This allows the content to show without waiting for the scripts to be loaded.

Should I defer all JavaScript?

You should use defer for all other scripts. defer is great because it: Gets loaded as soon as possible — so it reduces load times. Doesn't execute until everything you need is ready — so all the DOM you need is there.

Can you defer Google Tag Manager?

If you bypass GTM by inserting the external tags/scripts that you want on your site directly, it will improve performance immediately. Now you can't just put the defer attribute on the script tag since that doesn't work on inline scripts.


2 Answers

If you're looking for page performance then first and foremost you should move those scripts to the bottom of your page to allow the other assets to load.

Also use dns prefetch in the head to set the base domain for google-code

<link rel="dns-prefetch" href="//ajax.googleapis.com">

Since this is just a small piece of code, you could simply add it to your plugins.js file at the bottom then defer the plugins file.

<script src="js/plugins.js" defer></script>

That's what I'd do anyway, all my sites are optimized to 98 and 97 respectively in yslow and page speed.

Hope it helps.

-V

like image 182
Vince Kronlein Avatar answered Sep 29 '22 10:09

Vince Kronlein


Add in <script type="text/javascript" defer="defer"> tag like that it works for me.

<script type="text/javascript" defer="defer" src="<?php echo $this->getSkinUrl();?>js/jquery.bxslider.js"></script>
like image 30
Randhir Yadav Avatar answered Sep 29 '22 09:09

Randhir Yadav