When GigaOM launched their redesign earlier this year, they impressed us by cutting down their page generation time by more than half – and, they built it in just two months. How? We chatted with Casey Bisson, Director of Engineering at GigaOM to find out.
What spurred the GigaOM redesign?
As one of our product managers has been repeating: speed is a feature. We wanted to preserve the user experience and cut out things that didn’t matter — we wanted to clean up the code with the goal of dramatically improving speed.
Om has been blogging for a long time, and there were a huge number of plugins that were built to support different features over time. Over all those years of blogging, never once did we get a chance to stop and look back and what features we’ve added while growing from a personal blog to a company with lots of authors.
For this redesign, we had a moment – not long – to ask the serious question about each feature: what does it do, and is it worth preserving? We started with the answer to the second question being “no.”
So, how did your team tackle the performance issue?
In the previous 18 months, we had been working on lots of different ways of improving performance without dramatically improving our code base. We went from shamefully bad page load times to slightly worse than average. But to get the remaining performance increase, we had to refactor all of our code. Performance isn’t something you can build on after the fact.
In structuring our theme, a huge amount of time was spent on building for lazy loading. For our site, content is king. So when you load the site, the things you want to read, the content, we get those to your browser first. Then, the things around the content, the part of the site that are business requirements, those are lazy loaded.
What were the biggest offenders on your previous site in terms of page load time?
One of the biggest offenders was our CSS. It had grown to a full megabyte in size, which required a lot of time to download. So by doing the redesign from scratch, we were able to get rid of our old CSS and create new CSS from scratch, and build in optimizations for selectors and markup on the page from the start.
What was the simplest change that you made that affect page load times?
Something that is big picture simple – but took us a while to do – was getting rid of graphics. This brought us a huge win.
The way we got rid of images entirely was to replace graphics with a web font. It partially contributes to the stark look of the page, but all the line art is generated by a web font that saves us quite a bit of download time. The web font itself is very small – all the different characters are different images, like our logo, or the twitter icon. It requires a very different workflow with very different tools, but once we did it, it was amazingly easy to do.
How does one build a high performance WordPress site?
Let WordPress be WordPress and cut away what is not WordPress. WordPress has an incredibly sophisticated architecture, and there are a lot of features that you can add, but when you’re building that way you’re not building for performance. In our redesign, we were getting rid of what what we could.
All of our code, everything that we run on our site, starts out as an independent plugin that runs on baseline WordPress. It means we’re building better plugins that are easier to debug and maintain, in addition to the performance gains we get from going down to baseline WordPress. It also makes it easy to onboard new engineers and distribute individual projects because there’s no dependency between individual plugins.
We also adopted the idea that everything we built would be a candidate for public release. It prevents us from doing something stupid that isn’t maintainable as our site changes – something you wouldn’t be proud of sharing with the WP community – just because it gets the job done.
How has being on WordPress.com VIP improved your site’s performance?
The automatic concatenation of scripts and CSS, the automatic CDN-ing, these are things that come with the VIP platform that we don’t have to manage. If you take a regular WordPress site and you try to scale it up, there’s a lot of setup and configuration to get the concatenated scripts and CSS, and finding a CDN. All that takes time. WordPress.com VIP has been a great value to us in terms of giving us a baseline platform with baseline best practice features available to us, without us having to contract for it to maintain it.
How have your users responded to your redesign?
We’ve definitely gotten some good audience feedback. One of the things we noticed is that the hours people spend on the site have gone into the after-work hours, and there’s been an increase in the after-work usage of the site on mobile devices. That means people are finding the site more comfortable on mobile devices, and that they are taking the site home with them.
Want more? Read Casey’s blog post on Browser Performance Improvements on Code Kitchen.
Or, curious about WordPress for large-scale / enterprise installs? Contact WordPress.com VIP Services.
