Defer parsing of JavaScript - Google Page Speed

Jitendra Vyas picture Jitendra Vyas · Aug 26, 2011 · Viewed 35.6k times · Source

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?

Answer

Vince Kronlein picture Vince Kronlein · Feb 27, 2012

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