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
developer

My coding habits and a look at when I code

I love data, especially when it comes to data that can tell a story.  I was looking at my github account and wondering whether I could see a pattern in the times that I make my commits.  Naturally, I was curious and pulled up my punchcard.

By looking at my punchcard, what type of job do you think I have?  Can you guess?

Github punchcard
Github punchcard

I noticed a few trends:

  1. The most obvious one is that I am not a morning coder and my commits generally don’t start appearing until around 10AM.
  2. I clearly work seven days a week.
  3. My work day does not end at 5PM.
  4. I generally try to wrap up whatever I am working on by 5PM.  This is especially true from Wednesday – Friday.
  5. I work the least on a Saturday.
  6. On Thursday and Friday I tend to work even later than earlier in the week.  My guess is that I’m trying my best to finish what I am working on before the weekend comes.  Generally on the weekend I tend to add some polish on whatever I released during the week.  So that tends to be more fun coding with less heavy lifting.
  7. Monday and Tuesday I tend to work way past 5PM.  My guess is that I’m eager to get going at what I’m coding and after the weekend I’m a bit more refreshed.
  8. When it comes to a Saturday night I tend to code the latest.  So much for partying.  Boy, I’m such a geek.

Some things you may not know.  I work for myself and run my own company called FantasySP.  Hopefully by my commits, you’ll notice that I am dedicated to the project.  As the sole employee, I feel the pinch to get things done.

Is my commit pattern different than yours?  Does your day job force you to have a much different schedule?  Do salary developers work seven days a week as well?

I encourage everyone to write about their own punchcards.

Categories
microsoft

Windows 8 is better than you think

People tend to form an opinion on an operating system immediately and way before any of them had a chance to use it.  For example, it is widely unknown that Windows Vista is crap.  Yet, if you used a computer with Windows Vista, you would likely just assume it’s running Windows 7.  Perception is everything.  Sometimes it’s wrong.

Windows 8 has a vastly different tiled screen in-place of the start menu.  We all know this.  At first glance your immediate reaction to drastic change is negative.  Completely normal.  Then I saw my dad use Windows 8.

Section of Windows 8 Start Screen
Section of Windows 8 Start Screen

For an older user, Windows 8 is a blessing.  From their point of view, you are presented with a very inviting and straight-forward screen with colorful tiles.  Hidden away is the complicated desktop with dozens of icons.  Gone is the start-menu with endless rows of applications. The new interface has all of the every day tasks right there in from of you: email, internet, weather, calendar, and more.

My dad never has to leave the easy-to-use start screen.  So how does this new interface simply things?

In terms of simplifying email, my dad has email accounts from AOL and MSN.  This caused a few problems:

  1. Previously he would sign in and out of those each day.
  2. He would not know if he had new mail or not until he signed in.
  3. He had to learn different interfaces to send and receive email.

I could have fixed this by creating a gmail account and have those emails funnel in to there. This would give him another email account and possibly confuse him even more.  Not to mention it might be too complicated with labels and priority inbox and such.  Perhaps that’s not the best email inbox for him.  I wasn’t about to use Outlook because that is even more complicated.

But with the new windows mail. It could not be easier.  I added each email account he had to the mail app and he could easily switch between them.  He would also know immediately when he got a new email.  The best part is that it all exists within the same easy to use interface.

What Microsoft did is actually VERY smart.  They made an extremely easy to use interface that the MAJORITY of their users would be able to master.  Both young and old can master this interface very quickly.  They released a windows phone and tablet with the same exact interface.  If I bought my dad a surface tablet or windows phone he would immediately know how to use it.

That’s rather brilliant, don’t you think?  All of those untapped users could buy a windows phone tomorrow and feel right at home.

At the same time, this new interface hurts the advanced user.  We don’t want it and have no use for it.  I have Windows 8 running and am extremely satisfied in every aspect except this new start menu.  For the advanced user, Windows 8 is an incremental update from Windows 7.  The new interface is not a deal breaker, but I’m not exactly thrilled with it either.  If i don’t want to use it, then I don’t have to.  Advanced users can get around the problem.

It’s also blatantly obvious that by creating this interface Microsoft is yet again putting their apps front and center and conditioning their users to stay with Microsoft products.

Except this time, they might actually want to.