Google Analytics vs. Google Page Speed
Nerd alert: This post is only for crazy website performance freaks. Proceed at your own risk.
The holy grail for us crazy website performance freaks is to reach a perfect score of 100/100 in Google Page Speed without sacrificing important features of the website we’re building. One of those important features is Google Analytics. Gotta have Google Analytics, right?!
Let’s say that you’ve optimized your website to the perfect score of 100/100 and now decide to add Google Analytics. Too bad, your score is now 98/100. That’s because the ga.js JavaScript file loaded from Google’s servers doesn’t have a far-future expires HTTP header. To get the perfect score back, we need to fix this problem.
Getting back to 100/100
Here’s a solution that I use on one of my websites. It involves the addition of a single .ashx file to your web project. It’s isolated, safe to use and works.
The role of the .ashx file is to act as a proxy to the Google Analytics ga.js script file by downloading its content and serving it with a sufficient expires header. It caches the script file on the server, so it doesn’t have to download the ga.js file every time a visitor hits your website.
Step 1: Add an empty .ashx file (Generic Handler) to the root of you project and call it ga.ashx.
Step 2: Copy this code into the .ashx file you created in step 1.
Step 3: Modify the Google Analytics tracking script on your page to look like this:
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-12345678-9']);
_gaq.push(['_trackPageview']);
</script>
<script src="/ga.ashx" async="async" defer="defer"></script>
Voila! That’s it. You now have the perfect score back.
Optional step 4: Don’t like the .ashx extension? Then change it to .js by adding this to the web.config:
<rewrite>
<rules>
<rule name="analytics">
<match url="^ga.js" />
<action type="Rewrite" url="ga.ashx" />
</rule>
</rules>
</rewrite>
You need to add it to the <system.webServer> section of web.config. Remember to run the AppPool in Integrated Pipeline Mode for the <system.webServer> section to kick in.
Then just change the script tag to this:
<script src="/ga.js" async="async" defer="defer"></script>
Wait, is this a good idea?
I’ll let you be the judge of that. What I can tell you is that this exact code is running on one of my websites and it reports data to Google Analytics just fine.
Does it work? Yes
Is it cool? Totally
Should I do it? N/A