Defer Parsing of Javascript

csosa · April 24, 2015, 10:08pm

Hello, I am using Google Developers PageSpeed Insights and I am running the test on one of my pages. and it says that: 346.5KiB of JavaScript is parsed during initial page load. Defer parsing JavaScript to reduce blocking of page rendering. and gives me this list.

https://ajax.googleapis.com/.../jquery.min.js (85.7KiB)
http://iogproducts.com/calc/js/jquery.js (84.5KiB)
https://ajax.googleapis.com/.../jquery.min.js (83.7KiB)
http://iogproducts.com/Scripts/jquery-1.4.1.min.js (63.2KiB)
https://maxcdn.bootstrapcdn.com/.../bootstrap.min.js (26.4KiB)
http://iogproducts.com/calc/calc.js (1.6KiB)
http://iogproducts.com/ABOUTUS.aspx (824B of inline JavaScript)
http://iogproducts.com/Scripts/jqddm.js (471B)

Not sure what “Defer Parsing” means?

websitemedia · April 24, 2015, 10:58pm

Defer is an attribute of html script tag. It delays the execution of the script tag until after the page has loaded. The reference literature is here.

For your reference, here is a good article " How To Increase The Page Loading Speed Of Your Mobile Website Design." on the tactics to increase your page loading speed. The defer tactic is point # 7 in the article.

Good luck,

Braulio

ralphm · April 24, 2015, 11:02pm

Are your scripts attached to the bottom of the page (just before the closing </body> tag? That seems the best way to defer script loading to me. Not sure if that’s what the issue is, though.

websitemedia · April 24, 2015, 11:21pm

One of our lessons learned was that in spite of the scripts being @ the bottom of the page. The section of the website that is above the fold that requires the javascript will quit rendering until the javascript loads. So best of both worlds, put the scripts at the bottom of the page and add defer as required if pagespeed insights detects it.

This worked for us on customer pagespeed insight improvements.

Braulio

csosa · April 27, 2015, 10:20pm

Thanks Guys, @websitemedia @ralphm

csosa · April 27, 2015, 11:40pm

I got these script tags that is telling me defer, however I have no control over them since they are from outside sources beyond my server. should I just place them at the bottom of my </body>?

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

ralphm · April 27, 2015, 11:44pm

Yes, although make sure any other scripts that depend on them are placed below them. For example, you need to call the jQuery library before linking to other scripts that depend on it.

csosa · April 27, 2015, 11:52pm

Like So?:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-57297790-1', 'auto');
      ga('send', 'pageview');
   </script>
    <script src="/Scripts/jquery-1.4.1.min_defer.js" type="text/javascript"></script>     
      <!-- Shock label Calc Scripts -->
    <script type="text/javascript" src="/calc/js/jquery_defer.js"></script>
    <script type="text/javascript" src="/calc/js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="/calc/calc_defer.js"></script>
    <script type='text/javascript'>
        var _glc =_glc || []; _glc.push('all_ag9zfmNsaWNrZGVza2NoYXRyDwsSBXVzZXJzGLSQ6bwKDA');
        var glcpath = (('https:' == document.location.protocol) ? 'https://my.clickdesk.com/clickdesk-ui/browser/' : 
        'http://my.clickdesk.com/clickdesk-ui/browser/');
        var glcp = (('https:' == document.location.protocol) ? 'https://' : 'http://');
        var glcspt = document.createElement('script'); glcspt.type = 'text/javascript'; 
        glcspt.async = true; glcspt.src = glcpath + 'livechat-new.js';
        var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(glcspt, s);
    </script>
 </body>
</html>

ralphm · April 27, 2015, 11:55pm

Hm, I suppose so. There are lots of things in there I don’t know about. Seems like a lot of defer scripts in there, though. What are they all for? If you are looking at optimizing page speed load, my guess would be the best thing you could do is get rid of a lot of those scripts altogether. (Partly tonge-in-cheek, as I don’t know what the purpose of all those scripts is.)

csosa · April 27, 2015, 11:57pm

they are for a calculator in the website.I cannot get rid of them ha…

csosa · April 28, 2015, 12:32am

hmm seems I didnt need these two hehe

<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

but I need this one because it seems like my nav is using some sort of jquery

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

csosa · April 28, 2015, 12:32am

Is it bad that its telling to defer alot?

ralphm · April 28, 2015, 1:13am

I assume there’s a purpose for it. I was more wondering if there’s redundancy creeping in there—such as duplication.

Mittineague · April 28, 2015, 2:07am

Calling in more than one version of jQuery is likely to cause problems eg.
whichever `jquery.min.js’ is referenced last is likely to override functions in the previous one.

Might not be a problem, but it depends on what version other functions are dependent on.

James_Hibbard · April 28, 2015, 5:45am

but should be fixed regardless.

csosa · April 28, 2015, 9:41pm

Is it ok to put this google analytics code before my </body>?

<script type="text/javascript">
       
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-41887506-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

RyanReese · April 28, 2015, 9:47pm

Yes, that’s where you should be putting it.

csosa · April 28, 2015, 10:03pm

But should it be right before the </body>? like the last thing?

csosa · April 28, 2015, 10:44pm

Just a general question I tested big company and design firm websites and they have very low scores on their websites using PageInsights. My question is am I wasting my time on working on this, because it seems nobody else uses it? Maybe it depends on the content being used?

Mittineague · April 28, 2015, 10:49pm

Big companies don’t need to be good. But the average Joe Schmo needs every inch of ground they can gain.

That said. it is possible to lose focus by over-optimizing. i.e.
Is it really worth spending time trying to save .000000058 ms or 3 bytes?