Defer parsing of JavaScript - Google Page Speed

Asked 26/8, 2011 at 14:47 Answered 31/12, 2014 at 7:58

javascript jquery performance google-pagespeed

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?

Polarize answered 26/8, 2011 at 14:47 Comment(1)

When you say "my JavaScript is already at the bottom" are you referring to your own personally written JS, or are you also accounting for the <script> tags for jquery, etc? – Fate 26/8, 2011 at 14:55

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

Helaine answered 27/2, 2012 at 7:30 Comment(0)

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>

Cappello answered 31/12, 2014 at 7:58 Comment(0)

I see this is an old question, but since I was looking for a good answer myself, I am going to share the method I currently use.

As far as inline Javascript is concerned, what I do is change all the type attributes to text/deferred-javascript, or something similar, so that the code within the script tag is not evaluated during page load. Then I attach a function to the page onload event; said function finds all the scripts matching the type above and evaluates the code inside using eval(). I know in general eval() is evil but it seems to be helpful here.

For external Javascript files, I do something very similar. Instead of adding the script tags to the page, I record them and insert them one-by-one after page load has completed.

One problem I'm having is that if one of the inline deferred Javascript contains an error (say a parse error), the subsequent scripts are not loaded (but that might depend on my current implementation).

Ciera answered 20/1, 2013 at 14:32 Comment(0)

That's probably a generic response/suggestion for when it encounters a certain level of performance.

Although, it specifically mentions jQuery, a plugin, and 109 bytes of inline JavaScript. Do you have any inline JavaScript? Are you also placing your JavaScript includes at the bottom of the <body>?

Example

Loading Performance article

EDIT:

Based on recently posted HTML...

As a test, remove these two items to see if it makes any difference:

<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.5.1.min.js"%3E%3C/script%3E'))</script>

~~Also, the warning message mentions 109 bytes of inline JS, yet I don't see anything like that in the HTML you've posted.~~

Clem answered 26/8, 2011 at 14:57 Comment(3)

There is no other javascript and yes my all javascript at bottom just before <body> – Polarize 26/8, 2011 at 14:58

@Jitendra: Then perhaps we can see your code or a link to your page? – Clem 26/8, 2011 at 14:59

this is inline javascript in my html ` <script>$(document).ready(function() { $("#various2").fancybox({ 'width': 485, 'height': 691, }); });</script>` – Polarize 26/8, 2011 at 15:16

Hi recently we have created an opensource nodejs framework called "elegant framework" that help you building fast web application and we succeeded to get 100% google page speed in both desktop and mobile in all pages : you can check it at:

https://developers.google.com/speed/pagespeed/insights/?url=getelegant.com

there is a lot of things you can learn from it by viewing the page source also if anything you cannot understand please comment so i can help you with

so far you can try this method:

// Load script element as a child of the body
function loadJS(src, callback) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    if (script.readyState) {  //IE
        script.onreadystatechange = function () {
            if (script.readyState == "loaded" || script.readyState == "complete") {
                script.onreadystatechange = null;
                if (callback) {
                    callback();
                }
            }
        };
    } else {  //Others
        script.onload = function () {
            if (callback) {
                callback();
            }
        };
    }
    script.src = src;
    document.body.appendChild(script);
}
// Load style element as a child of the body
function loadCSS(href,callback) {
    var element = document.createElement("link");
    element.rel = "stylesheet";
    if (element.readyState) {  //IE
        element.onreadystatechange = function () {
            if (element.readyState == "loaded" || script.readyState == "complete") {
                element.onreadystatechange = null;
                if (callback) {
                    callback();
                }
            }
        };
    } else {  //Others
        element.onload = function () {
            if (callback) {
                callback();
            }
        };
    }
    element.href = href;
    document.body.appendChild(element);
}
// Load All Resources
function loadResources() {
    // css
    loadCSS("/compressed/code-mirror-style.css?please1");
    loadCSS("/compressed/all.css?please2");

    // js
    loadJS("/compressed/code-mirror.js", function () {
        loadJS("/compressed/common.js", function () {
            $("[data-lang]").each(function () {
                var code = $(this).addClass("code").text();
                $(this).empty();

                var myCodeMirror = CodeMirror(this, {
                    value: code,
                    mode: $(this).attr("data-lang"),
                    lineNumbers: !$(this).hasClass('inline') && !$(this).hasClass('no-numbers'),
                    readOnly: true
                });
            });
        });
    });
}

// Check for browser support of event handling capability
if (window.addEventListener) {
    window.addEventListener("load", loadResources, false);
} else if (window.attachEvent) {
    window.attachEvent("onload", loadResources);
} else {
    window.onload = loadResources
}

Maclaine answered 9/1, 2014 at 21:9 Comment(0)

Recommended topics

Hot tags