benbob — 2012-11-03T08:34:19-04:00 — #1
To speed up the download time for my site on slow connections, it has been suggested to defer parsing of JS, how do I do this?
I have 3 different bits of script.
The first bit on the page is needed every time it gets loaded, but it is fine if that is done as the very last item.
<!-- Start of StatCounter Code -->
<div class="statcounter"><a class="statcounter" title="joomla counter"
alt="Boiler repairs south london counter"
src="http://c.statcounter.com/6170797/0/4187b1bb/0/"></a></div></noscript><!-- End of StatCounter Code -->
The second bit would also be fine if done as the last item.
var _gaq = _gaq || ;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script'); s.parentNode.insertBefore(ga, s);
The last bit which is the "Google+ button" is only used infrequently, and would not be needed at all in most cases and would ideally not be read/loaded until it was actually called for.
<!-- Place this tag where you want the +1 button to render --><g:plusone></g:plusone>
Q1. Does the deferring always use the same system?
Q2. Where do I go start learning the ins and outs of deferring JS?
aussiejohn — 2012-11-03T10:52:40-04:00 — #2
Depending on the version of the Google+ button that you're using, it could be that and the statcounter script that are slowing your page down.
The Google Analytics script is injected in to the head with its async attribute set to true. This method of injecting scripts does not block page load nearly as much as for example referencing an external script directly like the statcounter script.
So, a few ways to increase performance are:
- place all scripts at the bottom of the page, this way they will not interfere with your stylesheets and markup being loaded first.
- where possible find an asynchronous version of third party code, like the Google Analytics code (Google+ Button has an async snippet too)
There are a few places that offer some more information:
Hope this helps
felgall — 2012-11-03T20:05:41-04:00 — #3
benbob — 2012-11-04T04:39:56-05:00 — #4
Thanks folks, I'll start with moving all JS to the end of the page code
That sounds like a good idea. The problem is that I have no idea how to actually achieve this.
My knowledge of JS is extremely limited, to the point of not having finised 101.
Any chance of a summary in word of less than 1 syllable?
I don't have, and doubt I ever will have, any more JS than I absolutely need, so doubt that I will benefit from any script loaders.
I will move all JS to the end of the code for starters, and try to learn more about "asynchronous JS code", whatever that may be.
- I shall look this up and see how much I can absorb. Any recommendations for total noobs in the field of JS in terms of speeding things up? I don't feel the urge to start learning about JS coding itself (nor do I have the time), purely on how best to use existing scripts, what to do/not to do, and that sort of thing. What I most need now, is entry level info; the very basics.
aussiejohn — 2012-11-04T06:24:44-05:00 — #5
The important things to take away are:
- Move all scripts to the end of the page, just before the </body> tag
- External scripts that are referenced like <script src="http://example.com/script.js"></script> are often the main performance problem, load them as late as possible.
- External scripts that are injected with code similar to the Google Analytics snippet won't block the page from rendering and should be preferred to loading a script using a <script src=""> tag. So if your third-party scripts offer those kind of code snippets you should use those instead.