image date

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.

How is PageSpeed Affected by Scripts

We’re going to take a look at how different scripts affect it. Let’s see!

I’ve optimized the page speed for many different clients. One of the largest factors I see affecting page speed is the “Eliminate render blocking Javascript / CSS in above the fold content.” This is simply because we all seem to run multiple scripts, a good portion of which are fetched externally. We also run multiple CSS files on each page. A good majority of both css and jQuery files are placed before the </head> tag. This slows down the rendering of the page, thus affecting the page speed.

We can do better! More on that later. Let’s get to the tests.

TL;DR

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.

Blank HTML Template

Dreamweaver gives you this page, minus the viewport meta, when you start a new HTML document.

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.

jQuery PageSpeed - 71/89

Both gave a red exclamation mark next to “Should Fix:” for “Eliminate render-blocking JavaScript and CSS in above-the-fold content” and a yellow exclamation mark next to “Consider Fixing:” for “Leverage browser caching.” I won’t get into what all that means in this article. Google does a good job explaining themselves.

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.

jQuery Local PageSpeed - 85/95

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?

Perfect Pagespeed Score

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.

Optimizely PageSpeed - 71/89

I’m sensing a theme here…

Keeping with our jQuery test, I decided to copy the Optimizely script and run it locally.

Optimizely Local PageSpeed - 91/97

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:

Optimizely & jQuery PageSpeed - 68/87

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.

Optimizely & jQuery Local PageSpeed - 85/95

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?

Optimizely & jQuery Combined Locally PageSpeed - 80/93
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>.

Optimizely Local & jQuery in Footer PageSpeed - 91/97

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>:

Simple Script Inline PageSpeed 100/100

Good!

Now if it’s running from a file locally:

Simple Script Local PageSpeed 91/97

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:

Simple Script External PageSpeed 80/93

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.

Optimizely Inline PageSpeed 91/97

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:

Like this post? Rate it, Save it, Share it!

Post Rating: 5.00
based on 2 rating(s)

Click a star to rate:
1 Star2 Stars3 Stars4 Stars5 Stars
Loading...
vader small
ADD COMMENT

Comments are closed.

  • SEMpdx Board Member

    Board Member
    2012-2019
  • MNSearch Board Member
    Co-founder
  • Boost CTR Best PPC blogs
  • Techipedia Best of 2010
close pop

WebRanking Newsletter

Sign up to stay up to date on the latest digital marketing news, trends and strategies.



No thanks I don't to want stay up to date

joe gengquotelWe started working with WebRanking about 11 years ago and they have been amazing. Read More...
Joe Geng - Superior Glove