2

As you probably know, Google PageSpeed Insights wants you to defer your javascript.

Google itself suggests a solution to defer your code:

<script type="text/javascript">
    function downloadJSAtOnload()
    {
        var element = document.createElement("script");
        element.src = "deferredfunctions.js";
        document.body.appendChild(element);
    }
    if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false);
    else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;
</script>

Of course is a good solution, but it's far from the real circumstances (many scripts to include, code to execute, etc...)

Strating from an example:

<html>
    <head>
    </head>
    <body>
        <script type='text/javascript' src='...'></script>
        <script type='text/javascript' src='...'></script>
        <script type='text/javascript' src='...'></script>
        <script type='text/javascript'><!--
            // some code
            $(document).ready(function(){
                // code to execute when the page is ready
            });
        --></script>
    </body>
</html>

The question is: How to apply the Google suggestion to the example above?

Marco Panichi
  • 1,068
  • 1
  • 18
  • 31
  • given that your second sample requires that jquery be loaded to execute, you wouldn't gain much. "load some JS so you can defer loading JS". – Marc B Apr 08 '13 at 04:34
  • You are right Marc, but Google PageSpeed doesn't say the same. It continues to show me the advice: "defer JavaScript execution until page load". Do you think I can omit this? – Marco Panichi Apr 08 '13 at 04:40

1 Answers1

-1

The Google example can work for multiple scripts if you have the downloadJSatOnload append several script elements to the page, and then call the code you would normally put in $(document).ready(function () { ... });. That code could be called explicitly or be the last file downloaded.

Steven Hood
  • 678
  • 5
  • 18
  • I've tried to apply this solution. All the jquery scripts work (slideshow, map, form validation) but I got the "Uncaught ReferenceError: $ is not defined" error. It's like the ready block is executed before all the scripts, but everything works the same. How is it possible? – Marco Panichi Apr 09 '13 at 11:46
  • Can you edit the question to include the code you tried? Also, see some of the linked questions, they're very similar to this one and might provide some ideas. – Steven Hood Apr 10 '13 at 03:39
  • Edited. I've considered the solution showed [here](http://stackoverflow.com/a/5853358/162049) but it can be applyed to just one script and it doesn't fit my needs - maybe I'm missing some uses of that code? – Marco Panichi Apr 10 '13 at 08:36
  • I've edited again, in order to keep the questions clear and separated. I've continue the argument in [this another question](http://stackoverflow.com/questions/15949219/why-this-code-doesnt-work) – Marco Panichi Apr 11 '13 at 12:50