17

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?

Improve this question
1
  • 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? Commented Aug 26, 2011 at 14:55

5 Answers 5

Reset to default
9

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

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

Comments

2

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>
Improve this answer

Comments

1

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).

Improve this answer

Comments

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.

Improve this answer

3 Comments

There is no other javascript and yes my all javascript at bottom just before <body>
@Jitendra: Then perhaps we can see your code or a link to your page?
this is inline javascript in my html ` <script>$(document).ready(function() { $("#various2").fancybox({ 'width': 485, 'height': 691, }); });</script>`
0

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 }
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.