How PageSpeed is Affected by Certain Scripts
Run the PageSpeed Insight Tool on a page on your website, and you’ll see how well your page scores. But what you won’t see is how certain things really affect your site…like by how much they’re truly affecting the score.
We’re going to take a look at how different scripts affect it. Let’s see!
We can do better! More on that later. Let’s get to the tests.
I ran a bunch of tests. Results varied, but here’s the takeaway. If you can, move all your scripts to the footer near the </body> tag of your HTML. If there’s a script you absolutely can’t move and it’s external, copy the external files and save them as a locally hosted file on your server.
That’s the TL;DR versions. For the tests and results, keep reading.
Setting up the Test
To test this was simple. Create a blank page with nothing but the very minimal to qualify as a good HTML5 page.
I then ran the page speed test, and it passed with 100/100 for all checks (mobile, mobile ux, desktop). So now that we have a perfect benchmark to test with, let’s get to it.
How is PageSpeed Affected by jQuery Library
This is the most obvious one to run first. For most other scripts to work these days, you have to be running a jQuery library. WordPress and other CMS’s come with it running out of the box. Most people have this placed fairly high in their template, usually in the <head> section, so that’s what I did with this test.
I tested it once with version 1.8.3 as my jQuery library hosted on Google. I ran the same test but swapped the jQuery library to version 2.2.4 hosted on jquery.com. I figured I’d try 2 different versions of the jQuery library, run from 2 different servers.
The results were the exact same.
Now that we know that score. Let’s try something else. This time, I copied the entire jQuery library and saved it as a file locally. So now my jQuery library was simply hosted in the root of my own server (example: /js/jquery.js).
The results were much improved, but not perfect.
Disclaimer: If I were working on page speed and saw that score, both being in the green, I may stop there. That’s pretty darn good!
But for testing purposes, let’s keep going! Can we get it 100 and still run the script? Let’s try moving the script and see.
I ran 3 more tests. One with each of the libraries used before, except this time the script for each was placed just prior to the end body tag (</body>). Guess what?
And boom goes the dynamite! We did it. We still have jQuery running on the page, but now the page scores a perfect 100 on the pagespeed test! *pats self on back*
That’s incredible! A 14 point swing by hosting a script locally, and a 29 point swing just by moving a script in the HTML!
What other popular scripts can we test?
How is PageSpeed Affected by Optimizely
Optimzely is a great script for A/B testing. This one is tricksie, because they explicitly say "Just copy the code below into the <head> tag of your page." Thanks for being so restrictive, Optimizely!
OK, so I did that. Placed their code directory after my <head> tag. Results? They were the exact same as when I had the jQuery libraries up there.
I’m sensing a theme here…
Keeping with our jQuery test, I decided to copy the Optimizely script and run it locally.
Interesting! Although the filesize for my local Optimizely script is 94KB larger than the jQuery script (84KB jQuery, 178KB Optimizely), the gains were much better for the Optimizely script…
I’m afraid I’m not smart enough to explain that one. Anyone know why that would be? Explain in the comments please!
Alas, since Optimizely says we have to keep the code up in the <head>, I’m afraid there’s nothing more we can do with it. You’ll have to settle for 91 & 97 as the best score if you’re running tests with Optimzely.
How is PageSpeed Affected by Multiple Scripts?
It looks like single larger external scripts cause massive slowdowns, at least as far as the page speed test. I wonder what would happen if I ran both jQuery AND Optimizely at the same time:
Interesting… not much of a change from having just one script up there. But as you can see it did affect the score. 3 fewer points for mobile, and 3 fewer for desktop.
(wonders if anyone is saying "I’m glad you said fewer and not less"… now I’m wondering if it was supposed to be "less" and not "fewer." … moving on)
Knowing that just by adding one more script, slows it down a small amount, we can probably figure that score goes down for each additional script you’re running in the head. How many scripts are you running?
Is this the case for multiple locally ran scripts as well? Just to check, I ran them both in the head, but hosted locally.
Just on the edge of staying in the green for mobile. This has me wondering, what if we combined the 2 local scripts and ran them in the head?
Holy cow, Batman! I did NOT expect that! Now I really feel dumb. Why would combining 2 files into 1 cause the page speed to go down when running them via separate files doesn’t? This officially makes my brain hurt…
One last multiple script test while I’m thinking about it. Optimizely, hosted locally in the <head> and jQuery hosted externally just before the </body>.
That I did predict. We already know moving jQuery to the bottom gives us a perfect score when it’s the only one running. So that one makes sense.
How is PageSpeed Affected by Simple Scripts
We see that large, complex, scripts slow us down. What about simple scripts? It doesn’t get any more simpler than a script that just sets a variable, then gives an alert with that same variable as the alert, right? Here’s the whole script
var test = "Testing 1 2 3";alert(test);
Easy peasy. OK, so let’s run a test with that running inline before </head>:
Now if it’s running from a file locally:
Wow! OK, another results I wasn’t expecting. That very simple script ran from a local file got us dinged 9 points and 3 points respectively? Crazy!
Let’s throw that script on another server and see how that changes things:
Man alive….I guess I expected that one to drop, but not that low. For such a small script to cause that much of a change in page speed is pretty wild if you ask me.
Takeaway: If you are running a simple script you’ve written yourself, make sure it’s inline on the page. Not in a file on your server, and definitely not on a file on another server.
How is PageSpeed Affected by Google Analytics
I’d be remiss if I didn’t mention Google Analytics. We’re relatively in luck here as both the Universal and ga.js versions of Google Analytics, when placed near the top of the code, only knock of 1 point for each mobile and desktop.
If you’re a perfectionist and you must hit that 100 mark there is a way! Doing this is inadvisable from me, but here you go:
If you notice in both versions of the script, you’ll see a place where it sets the source.
- In ga.js it’s this line: ga.src = …google-analytics.com/ga.js’;
- In universal it’s this line: (window, document, ‘script’, ‘…/analytics.js’, ‘ga’);
In both cases you can view the .js of each and copy it and call that locally. That will look something like this:
- In ga.js: ga.src = ‘yourdomain.com/ga.js’;
- In universal: (window, document, ‘script’, ‘yourdomain.com/ga.js’, ‘ga’);
I stripped that down a bit cause Chrome was being a bugger. But hopefully you get the idea. If not, leave a comment and I can help you.
Again, I’m not saying to go ahead and do this as I reckon Google updates things often. But it is possible.
That’s a Lot of Tests! Conclusion Please!
Here I was thinking the best possible thing you could do was combine all scripts, including all external files, into one locally hosted file, and place them in the footer of your site. But these results have shown that as long as you position your scripts correctly, preferably as low as possible in the code, nearest the </body> as possible, your page speed should remain unaffected by scripts.
As I was writing that, I became curious once more and took the Optimizely script and put it in the HTML code inline in the <head> section. Since that small script didn’t change the score when ran inline, maybe the Optimizely one won’t either.
Guess not! So, if you absolutely have to run a script in the <head> section, if it’s small, run it inline. If it’s larger, it’s fine to run that file just hosted locally.
Disclaimer: When moving around scripts, make sure you’re testing that your site still functions correctly. You can’t just take the jQuery Library and put it in the footer and expect the whole site will still work!
Leave a comment below if you have any more insight. I’d love to chat about it!
If you like this post and want to find others related to it, then follow me on Twitter: Follow @PaulKragthorpeADD COMMENT