Over the last eight years, the Huffington Post has launched countless products, experiments, and new features. We have expanded our reach with seven new international editions and we are just getting started.
This amazing vector of growth also comes with a bit of technical debt. Like every major website, our page performance has suffered as we've added tons of new features over the years. As the manager of front end development, it is one of my responsibilities to speed things up. The Huffington Post is a shining star in the media industry, and it should perform accordingly for all types of browsers on any platform.
During the last few months, I have worked with our amazing web devs to completely reinvigorate our mobile web experience. We've modernized the code and created a lighter interface that renders faster and delivers more relevant content to our readers. It's now fully API-driven and decoupled from the rest of the codebase. It uses contemporary web technologies like HTML5 and CSS3 to promote a responsive design and fully semantic markup. I'm happy to say that this effort saw a huge reduction in page load time and an dramatic increase in pageviews.
We learned a lot from our mobile web rebuild and we reduced technical debt, but we still have a lot of work to do. Our desktop sites have not been performing to our satisfaction. Historically, we made choices in the heat of the moment. We were growing fast and moving quickly. The unfortunate side effect was a site that was hard to optimize. About a year ago, I made it my mission to rectify this; enter project Phoenix.
- Accessibility
- Browser Compatibility
- Page Speed Performance
Browser compatibility is another area where major websites have stumbled as web browsers continue to evolve. With Phoenix we have completely rebuilt our front end code using technology friendly to multiple browsers. We are introducing progressive enhancement that focuses on older browsers first (starting with IE8) and improves the experience for users with cutting edge browsers, such as Chrome and IE10. We have completely rewritten our markup using HTML5, and have introduced CSS3 to take advantage of hardware acceleration.
Page load performance. To improve our page load timing we have completely re-engineered our page build process.
- We have made the move over to Sass for our CSS. This allows us to have a much more manageable structure for including and building stylesheets when we need them, instead of just including all of our styles, all the time.
- We have completely audited our JavaScript and removed many of lines of legacy code. This means the browser no longer needs to interpret unused code.
- We are introducing a sharding algorithm for all of our assets. This increases the number of simultaneous http connections the browser can handle, resulting in more assets being loaded at once. (We have found this so useful that we intend to open source it in the near future.)
- As with our mobile website, we will now be API driven. This will once again decouple the code and improve the rate at which we can iterate on just the front end technology.
This has been a huge undertaking, touching over 80% of our code and systems. We're proud to say that we are nearing the finish line and will be rolling out changes gradually over the next few months.