Categories
cloudflare Google optimization

Google PageSpeed Service Review

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.

NewRelic: Browser performance
NewRelic: Browser performance

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.

Load Times in Internet Explorer 9
Load Times in Internet Explorer 9

 

Clearly deferring javascript helps with IE9, but what about the other browsers?

Windows firefox
Windows firefox
Mac Chrome 23
Mac Chrome 23
Windows Chrome 23
Windows Chrome 23

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?

Google Webmaster Tools
Google Webmaster Tools

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:

Googlebot crawl speed Top IAmA
Googlebot crawl speed Top IAmA

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.

DOMContentLoaded
DOMContentLoaded

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.

Categories
cloudflare

Cloudflare response times are getting worse

I was just checking out Googlebot’s response times with Cloudflare enabled and disabled.  The chart below is straight from webmaster tools for FantasySP.

Googlebot Response Times in Crawl

Back in March – April I had Cloudflare enabled, and I noticed elevated response times.  I thought it might be due to Cloudflare, so I disabled it.  Back then, I thought 400+ ms was bad.

As you can see, May response times were much better with Cloudflare disabled.  The only problem with that is my site’s load also increased, so I decided to re-enable Cloudflare towards the end of May up until a few days ago.  Now response times are well above 1,000ms.  Why is their performance degrading so fast?  This seems to fall inline with their announcement of business and enterprise options.  Perhaps the free accounts are hurting because of this?

There have been other reports of this as well.

Categories
cloudflare

Speed Up Your Site & Disable Cloudflare

My apologies for the sensationalist title, but there is a problem with Cloudflare that is not being reported on tech blogs, or their status page. My intention of this post is to simply get the word out to other developers. Enabling the cloudflare proxy can cause severe delay in response times.

Delaux.com experienced similar problems, way back in October of 2010:

I get 20 ms ping from my home and sub 10 ms from work, when the name servers run directly. After the switch-over to CloudFlare, I started getting ping in the range of 260ms – 300ms, they were unstable and over ten times my normal ping.

With Cloudflare proxy enabled I saw the occasional bad response time with FantasySP and thought nothing of it.  Over time, response times seem to have continued to drop.  Now it’s gotten so bad that Ajax POST requests would take up to 1 minute to respond.

I began getting complaints from my users.  I figured it was something on my end.  Maybe my host was having issues? Is my caching having issues?  I spent a day trying to track down the problem. Every other server monitoring metric suggested that they should be just fine.

It turns out the culprit was Cloudflare.  Once it was disabled, pages no longer took 100ms+ to connect.  Ajax requests no longer hung for up to one minute.

The issue with Cloudflare is worth mentioning.  There is a chance Cloudflare is slowing down your site and you don’t even know it, especially your WordPress Dashboard.

My advice to Cloudflare users is to disable the orange cloud and test out your site for a day or so.  Did response times improve?  If they got worse, simply re-enable Cloudflare.  (Keep in mind disabling the Cloudflare Proxy takes about 10 to 20 minutes to go into effect, so look in the Header Requests for “Server” and wait until “cloudflare-nginx” is gone.)

I hope Cloudflare fixes their issues because I will be the first one to jump back on the bandwagon.  Do they serve too many users?  Do they realize their service has degraded over time?  Perhaps there was a problem from the start, and I didn’t even notice it?

I have an open support ticket with Cloudflare and will update this post with anything worth noting.  So far they have acknowledged some type of problem and are looking into it.

If you have experienced similar issues, let me know.

Categories
cloudflare optimization

Does Cloudflare live up to the hype?

I have given Cloudflare a try for the past week or so for FantasySP.com and want to pass along my thoughts.  I saw a few reviews that were quite astonishing and decided to find out if they are accurate.  I have been reading great things about it and couldn’t resist trying it out.

Will Cloudfront Increase Pages Per Visit?

Unfortunately no.  The only reason you’ll see an increase in pages per visit is if you change the setting to add your Google Analytics code to every page.  I decided to use this myself and look at the results:

Pages/Visit

Notice the bump in pages/visit?  Almost double.  That is when I added the Analytics code to every page and it completely skewed everything out of whack.   Meanwhile GetClicky and awstats both showed them to be at normal levels.  So clearly this Cloudflare setting should not be used and anyone who shows these type of drastic results are just lying to themselves.

I obviously don’t think Cloudflare adds this setting to artificially increase analytics stats.  Although, I can’t explain why this happens, since they claim its fine to add without removing the old code.

Will Cloudflare Decrease Bounce Rate?

Probably not.  If anything, it could have a slight increase in your bounce rate depending on how much bad bot/spam traffic you were getting.  Although, a bad bot might even help your bounce rate because they are often times so abusive and load many pages.  If Google Analytics shows a drastic decrease in bounce rate then it is due to the Cloudflare setting to add the script to every page.  Have a look at my bounce rate:

Bounce Rate

Sorry folks, Cloudflare is no miracle bounce rate solution. 🙁

Will Cloudflare Increase the Speed of the Site?

Yes, even using their free service!  Cloudflare has a whole list of features that show how they can decrease the time it takes for a page to load.  They will cache content, similar to a CDN and provide optimized routes to your site, and block abusive traffic.  If you pay for their service then you will see even better benefits (none of which I have tested).

So I guess the real question is, does Cloudflare make FantasySP faster?  Yes and no.  I have most of my static content already on Amazon’s Cloudfront.  My DNS before Cloudflare was Amazon’s Route 53.  So how much of a benefit am I really getting when some of Cloudflare’s services were already taken care of?  Here is a look at Googlebot’s time it takes to crawl FantasySP.com:

Googlebot Crawl Rate

According to Googlebot, the site isn’t faster, perhaps slightly slower if anything.  It could be that Amazon’s Route 53 provides equally as good routing for end users and I don’t see much of a difference.  Either way, there isn’t enough evidence to make a call on this.  What really matters is if there is a difference for the end user in a real browser.  For my site, javascript is what is holding back the end user experience.  Which brings up my next point, Rocket Loader.

Does Rocket Loader Improve Speeds?

To test Rocket Loader’s performance, I will be using NewRelic’s End User performance tracking.  I have been using this for well over a month and it should show any trends with end user speeds.

As you can see, there is a large decrease in pageload time and goes from 8 seconds to 6! Awesome right?  Well, unfortunately I noticed that Rocket Loader was screwing up some of the rendering of advertisements that were on the site.  Thus making my site’s javascript unusable.  Rocket Loader works fine with Google AdSense, but AdSense doesn’t generally hang as much because of their recent optimizations.

What I really wanted Rocket Loader to do, was to improve performance of the other ad networks that I use.  These are the ones causing all the slowndown.  Alas, it wasn’t meant to be.  Clearly it was making a difference, but it is a bit buggy at this point.  My next step is to selectively use Rocket Loader on certain javascript components and see if it will make a difference in overall load time without breaking things.  Stay Tuned for that!

So Where Does This Leave Us?

After reading all of this, you might think I’d come to the conclusion that Cloudflare isn’t worth the trouble.  Exactly the opposite.  Cloudflare delivers on a lot of the promises of the service.  Just be sure you don’t make mistakes like enabling Google Analytics on every page.  That feature just doesn’t make any sense to me.  (I’d love to hear your thoughts on this.)

If you aren’t using a CDN or a customized DNS service, then switching to Cloudflare should have an impact on quicker load times.  Even if you do have a CDN and a customized DNS service, the fact that Cloudflare blocks bad threats and saves your server resources and prevents lots of spam.  It’s also nice to see trending data for search engine bots and outbound links.

I’d love to try out Cloudflare’s pay only services to see if they improve upon speeds, but they do not offer a trial for such a thing.  Perhaps down the line I will test these as well.  I also think Rocket Loader will continue to improve and will truly make a difference for some users out there.

What do you guys think?