GigaOM Redesign: Speed as a Feature

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.

Now live: WordPress.com VIP Search

WordPress’s standard search features are capable and easy to use, but when you’re developing search-driven web applications with WordPress, you need a tool ready-made for that purpose. That’s why today we’re introducing our new WordPress.com VIP Search add-on, and are excited to debut it as part of the relaunch of the Kaiser Family Foundation here on WordPress.com VIP.

WordPress.com VIP Search is a new premium service for our Cloud Hosting customers that delivers the features and flexibility of the powerful elasticsearch software—all hosted, managed, and supported by the WordPress.com VIP team.

With VIP Search enabled, your search results will be more relevant and timely out of the box—but the real benefit is that developers can leverage this new functionality to deeply customize your search results, including support for faceted search. With faceted search features, your users can filter search results on your sites however you’d like—by type of content, category, tag, author, date ranges, and more.

Give it a try right here on vip.wordpress.com, or check out the beautiful redesign of the Kaiser Family Foundation’s website developed by our partners at Alley Interactive. And if you’d like more info on VIP Search, get in touch!

Case Study: BBC America runs on WordPress

BBC America content was previously spread across 3-4 different content management systems. They knew they needed a change and wanted to consolidate their support efforts into a single platform.

We spoke with David Anderson, Senior Product Development Manager at BBC Worldwide, about how WordPress powers BBCAmerica.com, starting with their site redesign a year ago.

How does BBC America use WordPress to power your show network?

The entire BBCAmerica.com site runs on WordPress. It was a gradual change — we first moved our BBC America’s blog, Anglophenia to WordPress, and then the rest of the BBC America site to a WordPress Multisite install after seeing the success of the blog.

Each show has the ability to have its own theme, most of which share a child theme based off the main framework. Each child theme powers its website with a general template which we change to match a show’s content and look & feel. We do this by taking advantage of options in each theme in order to help customize it. Editors can upload their own custom art and customize the site without having to involve a developer.

How long does it take to create a new WordPress site for a BBC America show? 

Since we’re running Multisite, each show gets a new site. We’ve automated the technical creation process to a few form fields and a button. The short answer is that we’ve gotten the process down from 3-5 days to roughly 2 minutes. Keep in mind, this is not including the content that populates the pages, but even that process could take less than a few hours if everything is ready to go. Behind the scenes, there are multiple tasks that run when a site is created. Pages that are needed for each show site such as TV schedule pages are generated, privacy settings are applied so that sites are password protected until they’re ready to be published, menus are created, and connections are made to 3rd party APIs.

How has WordPress streamlined BBC America’s publishing process and editorial workflow?

The ability to create custom content through the WordPress interface (and not have to create custom HTML code) streamlined 80% of the work which in the past had occupied a huge amount of time for a team of four editors. The result is that editors now have more time to focus on content creation instead of figuring out how to edit (or troubleshoot) code. This also helped standardize the user experience because we were able to get the same editing tools and easy-to-use interface into the hands of all of our editors.

Which features of the site are most appreciated by your users?

One important goal for us was to make it as easy as possible to create content quickly and efficiently in a way that “just works.” We were able to streamline the content creation process by customizing the admin interface to allow producers to enter data into fields that make sense for the specific content type they’re creating in each section. We’ve also tried to use drag and drop interfaces when it makes sense. Everyone has gotten used to rearranging apps on their phones by dragging and dropping, and we wanted to carry that experience over into the creation process for the site. Recently, we’ve been hearing from our editors that the updates to the media uploading experience in the 3.5 release have made it much easier and faster to add images and galleries, which is a feature that they really enjoy.

“Our previous platforms locked us into very rigid options. Changes were expensive and took a long time to implement. Now, we have a solid platform that is flexible and constantly being improved.” — David Anderson, Senior Product Development Manager at BBC Worldwide.

How big of a role does social media play in BBC America’s content strategy, and how have you integrated it into the site? 

BBC America is the U.S. home of Doctor Who. That show has a large social media footprint and was probably one of the first shows that made us concentrate on tightly integrating content strategy with social media. We saw great results and now we approach every project with a focus on social. In terms of integrating it into the site, we try to make sure that we’re keeping up with the ever-changing landscape of social networks. We’ve made an effort to implement things like Open Graph and Twitter card tagging on the back-end. On the front-end, we’ve tried to provide ways for visitors to easily share our content. This process is constantly evolving and combines editorial strategy with things like layout tweaks.

How does BBC America like being a part of the open source WordPress community? 

Being a part of the WordPress and open source community in general has allowed us to accomplish things that could have only happened with great difficulty if we had to build another proprietary CMS. Our previous platforms locked us into very rigid options. Changes were expensive and took a long time to implement. Now, we have a solid platform that is flexible and constantly being improved. In most cases, problems can be solved by reading support tickets and blogs. We use several plugins that are available in the WordPress.org plugin repository and it’s amazing how willing plugin developers are to help out when we come across a problem. We try to reciprocate as much as possible and it feels great when we’re able to offer fixes that can help the entire community.

Want more information about WordPress for large-scale / enterprise installs? Contact WordPress.com VIP Services.

Now Hiring: Join the WordPress.com VIP team as a VIP Wrangler!

Automattic is growing, and WordPress.com VIP is growing, too! We’re looking for a few good VIP Wranglers to join our team, and we’d love for you to be a part of what we have planned next.

Through our WordPress.com VIP program, we provide support, hosting, training, and other services to some of the biggest and best WordPress sites on the web. Our VIP Wranglers are responsible for providing support to all of our customers, building and shaping our products, and just generally Making Stuff Go.

On the WordPress.com VIP team, you’ll be a part of a team who has deployed more than 100,000 commits, develops cool products like  Liveblog for WordPress, educates clients and partners through exclusive training, and who gets together several times a year to powwow on our team roadmap and go race car driving.

Here are some skills that will come in handy for a VIP Wrangler:

• Advanced proficiency with WordPress. Low-level language or systems experience a plus, but not required.
• A strong understanding of the Web including HTTP, HTML, CSS, and JavaScript.
• Must be comfortable working primarily in a customer-facing role, including providing support and training.
• You enjoy collaborating with other developers, reviewing code, and making recommendations on technique or approach.
• Great troubleshooting skills. Must be able to take big problems and break them down into manageable pieces with elegant solutions—and importantly, keep our customers apprised of progress throughout.
• The ability to iterate and ship ideas quickly, with loose (at best) direction.

All jobs at Automattic require:

• Great communication skills. We’re a distributed team, so frequent and clear written communication is a must.
• Self-driven work ethic. You need to be a self-starter who loves taking initiative and seeing things through to completion.
• Curiosity and the desire to learn.Our business is changing and growing fast, who knows what will be the skills of tomorrow? Flexibility is key.

Where in the world are we looking to hire VIP Wranglers? Anywhere! Automattic is a distributed company and that means this job will come to you, wherever you live!

Ready to go VIP? Join our team! If you’d like to be considered for this fulltime position, read more and apply for VIP Wrangler!

Global News Q&A: The Technology Behind Their Responsive Redesign

GlobalNews.ca is the online news hub for the Global Television Network, a large Canadian broadcasting network with 12 owned-and-operated stations across the country. In March this year, they launched a massive redesign of their site, built on WordPress by 10up and hosted by WordPress.com VIP. The new site consolidated their many local and national sites into one responsively designed site that displays relevant content based on a user’s location. We chatted with Keith Robinson, the manager of digital products at Global News, to learn more about the vision and technology behind this redesign.

What was your team trying to achieve with the GlobalNews.ca redesign?

We were trying to create a news experience that would work really well across any device. We’ve all seen the tremendous growth in mobile and tablets, and we ultimately felt for news consumers that the best thing to do would be a responsive design that works well on any device.

For the homepage, rather than a traditional news site model, we wanted more of a social media experience. We learned that what consumers want is to choose a story that interests them – that they want to browse through a list of stories to choose from rather than a landing page that gives you a few headlines. It’s less of a curated experience, and more of a stream of news. It’s an experience that lets the user choose.

We recognize that there are multiple possible entry points to the site beyond the homepage. So our redesign was motivated by the notions that every story is ongoing, every beat is a site and every author is a brand. Readers are more likely to arrive through search or a shared link, and so they are almost always landing on a story page. For that reason, we emphasized the story page where there’s a lot of related content, features and a carousel. We included a lot of elements to keep you on the site.

We were also looking to simplify our branding. We had a series of local sites and national sites, and we wanted to bring those together into one GlobalNews.ca experience that detects where you are in the country and gives you a blend of national and local news that’s personalized to your region.

How does the site display content specific to a user’s region?

We have 12 stations across Canada, so we divided Canada up into 12 different regions and users get localized to one of them when they arrive on the site. This is based on IP detection, and it’s about 95 percent accurate. For anyone that arrives on the site, it seamlessly checks the region in the background, cookies it and localizes the site to correspond with one of our broadcast centers.

On our site, there are two tabs, local and national. On the local tab, your region will be weighted more with local news, and on the national tab, you will primarily get national news, with your local elements mixed in. On our weather pages, you’ll get weather localized to you, and on our programs page, you’ll get the programs nearest to you.

There are also several places on the site to change your region, so if you don’t want news in Toronto, it takes a couple seconds to change that, and the next time the user returns, the site will have stored their preferences. The stories are localized using a taxonomy, so when a story is filed, the writer checks off a box saying what region it belongs to. It then puts the story into that localized stream on the site.

How do your editors curate content on GlobalNews.ca?

Having a very simple workflow was important to us. When you’re a news organization, minutes and seconds matter. When Margaret Thatcher dies, you want that story up on your homepage as fast as you possibly can because that’s what your audience deserves. So, we tried to keep the content management system of the site as fast, simple and straightforward as possible so that the editorial staff can focus on making great content and getting up quickly.

10up helped us come up with a curation system that powers a lot of the site: the navigation, carousel, featured story, top story. It’s all one system that gives different choices depending on what zone you’re curating, so it’s not like you need to learn one way to manage content in the carousel and another way to manage content in the right rail.

Also, often times, an article headline is written one way, but the featured title needs to be be shorter and punchier, or the featured picture needs to be changed. The curation tool lets us do that.

Can you tell us about how you integrated video into the redesign?

Our heritage is as a broadcast organization, and we have hundreds of videos produced in-house every day. The purpose of the “Watch” tab is that it takes you to the video center and you can sift through by program or topic area. You can also share the content on social media, and it’s essentially as easy as YouTube to embed the video on your site.

The other reality we’ve found is that as much as you have that broadcast console video experience, the most popular way for people to consume video is on the story page. It’s having that in-context video with the story around it. So we’ve focused on working on videos within story pages.

How long did the redesign process take? 

The concept for the redesign came about in September 2011, and the development work started last year. One of the complexities is that we were doing a complete redesign from the ground up — there was not a single comment element to the old site. And, we were going to a new content management system. So with a brand new backend and frontend, with something that impacts hundreds of people in a larger organization across the country, it makes for a fairly complicated project.

The site design was done by Upstatement, and much of the frontend template work was executed by Filament Group. We engaged with 10up in the fall to do the WordPress integration, and then we’ve hired our own development team. We were very fortunate to hire some really top talent to work with us, and we’ve been working with really good partners.

What was it like working with WordPress.com VIP and 10up?

One of the things that makes WordPress powerful is that it is open source and has many plugins, but when you have a project with this much riding on it, and you need a professional product that performs, you want to be cautious. Fairly early on, we knew that we wanted to go with VIP. We wanted that level of support, having people understand how to make WordPress a secure and high performance environment – there was real value there.

The Featured Partner program made selecting a development agency really easy — there was a short list of companies that were already acknowledged as preferred partners, and from there 10up ultimately looked to be the best fit for this project. 10up brought a lot in terms of being able to listen to our needs and turn it into a functional site. They were great for us because we were at a stage where we needed things done very quickly and needed to discuss exactly what we were looking to do and how we were looking to do it – they helped us go from the discovery process to the implementation. Ultimately, getting to that March deadline for us was not easy for any company, but we really benefited from the partnership and they were good to work with.

How has the site redesign changed your newsroom? 

There are some pretty big philosophical and workflow changes. Beforehand, people were spending a lot of time building a page and putting links onto it and massaging it. Now there’s a shift to focus on the creating content as opposed to the administration of the content.

By choosing WordPress as a CMS, and moving to a system that is simpler, we’re hoping to increase the number of people in the organization who are empowered to create and publish content online. We are a large broadcast organization, with newsrooms in 12 locations and journalists in every big market in the country. We have broadcast journalists that are now not only thinking about the evening newscasts, but also publishing news as it is happening. With WordPress, we have something fairly simple for people who it’s not their full time job to publish content, to easily publish online.

Over the weeks and months, we really want to try to create a platform that all of our journalists can use to get the news out quickly and easily when it breaks.

VIP Developer Workshop 2013 – Waiting List now open!

The WordPress.com VIP Workshop class of 2012.

Response to the VIP Intensive Developer Workshop has been great, and we’re really excited to welcome such a varied and interesting crowd in May!

We’ve closed down registration for this exclusive event! If you’re still interested in attending, you can sign up for the waiting list here. We can’t guarantee we’ll add more capacity but if a spot does open up you’ll be the first in line!

As always, send us your questions and comments if you have any by commenting below.

Couldn’t make it this time? Don’t worry, we offer developer training, superuser training, user training, and editorial training year-round for VIP clients! 

Featured Partner Demo: Tout – April 18th

WordPress.com VIP Featured Partner Tout, a real-time information network for up-to-the-minute video updates across news, sports, politics, entertainment, is going to hold a free 30-minute demo for VIP clients and partners to discover how to use this popular network with WordPress.

Capture Touts on your smartphone and publish real-time 15-second videos to your website, app, social network or Tout.com.

The demo will take place on Thursday, April 18th, at 9am PDT. Find out what time the demo is in your time zone.

To sign up for the free 30-minute demo, brought to you by WordPress.com VIP and Tout, just RSVP here and insert your email address. You will receive a reminder for the demo and details on how to connect to the demo.

Here’s what you’ll learn about Tout:

1. What is Tout
2. How to embed a Tout widget on a WordPress site
3. Tout’s Premium Partnership Services
4. Q&A

Check out their popular Tout channels, which include The Wall Street Journal, USA Today, ESPN, and the BBC, to see how other enterprise sites are using Tout.

RSVP for the Tout demo!