I’ve been on the lookout for a service that would reliably speed up various web projects such as FantasySP and Top IAmA. The faster the pages load, the happier my users will be. I first started out using Cloudflare, but their service has been getting worse and worse. Their pay features aren’t worth the money and using Cloudflare will most likely slow down response times. A winning combination!
Then I heard Google PageSpeed was in invite only beta. (Not to be confused with mod_pagespeed, which is an Apache module that offers very similar features). Google PageSpeed Service is very similar to cloudflare and all traffic will be passed through their servers via a DNS change. I was finally accepted into the program and have spent the past few days tweaking my sites for best performance.
Though before we get to the results, let’s first go over why FantasySP tends to load a little slow to begin with.
What’s really slowing down my site are advertisements and third party javascript. No surprise there, right? I offer my members a banner free experience, but the average joe has to load a page that is slower than I’d like. To measure front-end performance I use NewRelic. Prior to using Google PageSpeed Service, the average web page loads anywhere from 6 to 8 seconds.
Enter Google PageSpeed Service
I started out using Recommended Settings, which are the things you are probably familiar with: remove whitespace, combine CSS, minfiy javascript/css, use Google’s CDN, optimize images etc. I decided to go all in with Google even though I already used Amazon Cloudfront as my CDN. Google adds some additional goodies such as converting images to inline DATA, further reducing HTTP requests. It also automatically converts all references to images in stylesheets to run off their CDN, even if it’s not local to my server. (Goodbye Amazon Cloudfront?).
Google PageSpeed went live on Christmas day, the 25th.
Immediately all pages started to load in under 5 seconds. Best of all, no functionality on the site was broken, and I did not detect any additional latency by using Google’s service.
On December 26th I decided to enable additional experimental features that are labeled “high risk”. I also enabled a new low risk feature called prefetch DNS resolve.
The best way to solve slow javascript is to defer javascript, which should prevent javascript from hanging and slowing down page rendering. Google claims this is “high risk” and may break things, so I made sure to do thorough testing during a day that would have less traffic than normal.
Once defer javascript was enabled, you’ll notice that DOM Processing decreased even further, whereas page rendering actually increased. Unfortunately I cannot explain why that is. (Experts, feel free to chime in). So the next question might be, is deferring javascript even worth it according to that graph? The difference between the 25th and 26th do not seem to matter?
Let’s have a look at what deferring javascript does in a browser not known for speed: Internet Explorer 9. By enabling Google PageSpeed on December 25th, the pageload times decreased to under 6 seconds for the first time in seven days. On the 26th, deferring javascript decreased pageload times to around 3 seconds. Keep in mind that number includes banner advertisements.
Clearly deferring javascript helps with IE9, but what about the other browsers?
In every browser, you’ll notice that DOM processing and network times decreased, whereas page rendering times increased. My theory is that since the javascript is deferred, the dom is processed a lot faster, but that doesn’t mean the page is fully rendered. Again, feel free to chime in here with your own explanation. I *think* the end user will feel as though the pages load a lot faster, despite the additional page rendering.
Unfortunately I am unable to test Android and iPhone browser performance because these users are directed to a different sub domain. Plus, I don’t think Google supports these browsers for deferring Javascript. Older browser performance from IE8/IE7 remain unchanged because many of Google’s optimizations are for modern browsers only.
According to my testing, the previous bottlenecks like advertisements and rendering Google Charts no longer slow down pageloads.
Next up is to see performance from Google Webmaster Tools. When I used Cloudflare, Googlebot noticed huge performance issues. Cloudflare caused my 200 ms response times to double and even triple. Will the same results appear for Google’s Service?
As you can see, passing traffic through Google PageSpeed servers does cause a penalty of about 100 ms in response times. Their servers are doing an awful lot of optimizations behind the scenes, so this is not at all surprising. The trade off is that the end user gets entire seconds shaved off their load times. I think I’ll take that any day.
More Advanced Optimization Techniques
Of course, I am not satisfied there and wanted to further push the boundaries of what Google PageSpeed Service can do. Next up is to cache and prioritize visible content. Cloudflare has something similar, but they call it railgun. Railgun also requires you to run an extra process to send HTTP data back and forth to Cloudflare to show them which HTML content is stale so it can be cached. I have no idea how well Railgun performs since no one has actually reviewed the service.
Google’s cache and prioritize visible content works a bit different. You do not need to run any additional service on your server. Instead they parse the HTML based on a set of rules you specify and rely on using Javascript to speed up rendering times. Their website says: “Non-cacheable portions are stripped from the HTML, and the rest of the page is cached on PageSpeed servers. Visible content of the page is prioritized on the network and the browser so it doesn’t have to compete with the rest of the page.” Visible content means, content that the end user actually can see on their browser. I do not know if it is user specific, or they just base this off the most common resolution. So anything above the fold will load immediately, whereas content below the fold may load via a Javascript call.
If deferring javascript works on your site then this feature should work once configured correctly. Here is their full video explaining the feature:
I went ahead and applied FULL caching to Top IAmA with no rules. This site has no advertisements and very little javascript. Response times here are a best case scenario Every page that gets rendered can be cached for 30 minutes. This means that Google only needs to fetch a page once every 30 minutes, otherwise it serves it straight from their servers. Googlebot shows the results:
You’ll notice two things about this graph… 1) The response times to the far left are terrible and 2) The response times under Google PageSpeed with cached content are extremely fast. Response times went from 200ms to around 50 ms. The response times to the far left are a result of Cloudflare’s Full Caching features with Rocket Loader enabled. As I mentioned earlier, avoid Cloudflare at all costs. The response times in the middle of the graph are from my server.
I did attempt to add Google’s cache and prioritize visible content to FantasySP. Once I tallied up all of the IDs and classes needed for user specific data I previewed the feature site-wide. After a some tweaking of class names, everything seemed to be working without any issues. Although I soon ran into occasional Javascript errors under IE10 that would halt rendering the full page.
This shows you how fragile this feature is because a single javascript error will cause rendering to fail.
The error for IE10 shows as:
SCRIPT5007: Unable to get property ‘childNodes’ of undefined or null reference
f2ae86053f8f64f57a4ef28a17bd0669-blink.js, line 30 character 224
Every other browser seemed to have no issues whatsoever. IE10 seemed to load the fastest, with Chrome, Safari, and Firefox not too far behind. I applied this technique to a certain subset of pages on FantasySP that I feel confident will have no errors and can use the speed boost. Have a look at this Russel Wilson or Matt Ryan page. During pageload, watch the console to see how different sections of the page load via javascript calls from blink.js. If you don’t see it on the first pageload, then refresh to see the cached version appear.
Google Analytics
The final set of data will be looking at “Avg. Document Content Loaded Time (sec)” metric in Google Analytics under Site Speed -> DOM Timings. Google Analytics explains this metric as: “Average time (in seconds) that the browser takes to parse the document and execute deferred and parser-inserted scripts (DOMContentLoaded), including the network time from the user’s location to your server.”
I broke up the data by browser and they include: Chrome, Internet Explorer, Safari, and Firefox. Internet Explorer comes in just a hair faster than Chrome. Although Safari seems to be worse.
Google Analytics confirms what the NewRelic graphs show. Users will perceive pageloads as much faster with Javascript being deferred.
Conclusion
According to NewRelic browser metrics and testing, Google PageSpeed Service offers significant improvements to load times. It is relatively easy to set up and is better than any other competing service. Sites both big and small should use at least some of the services provided.
Google PageSpeed Service with advanced optimization techniques is a perfect solution when it comes to simple WordPress blogs that use Disqus commenting. All you have to do is add an ignore rule for /wp-admin/* and enjoy a much faster blog that should be able to handle an almost unlimited amount of visits and traffic. I’d love to see results from anyone else out there willing to try.
Overall I’d say using Google PageSpeed is a no brainer. Test it out and let me know your thoughts.
Update #1: Over at the hackernews thread, Jeff Kaufman, who works with the PageSpeed team gave some very insightful comments that are a must read.
Update #2: This blog you are currently reading now uses Google PageSpeed Service with advanced caching techniques, such as Google’s cache and prioritize visible content.
