IMPRINT Imprint © 2014 Smashing Magazine GmbH, Freiburg, Germany ISBN (PDF): 978-3-94454087-0 Cover Design: Veerle Pieters eBook Strategy and Editing: Vitaly Friedman Technical Editing: Cosima Mielke Planning and Quality Control: Vitaly Friedman, Iris Lješnjanin Tools: Elja Friedman Syntax Highlighting: Prism by Lea Verou Idea & Concept: Smashing Magazine GmbH 2 About This Book Slow loading times break the user experience of any web- site—no matter how well crafted it might be. In fact, it only takes three seconds until users lose their interest in a site if they don’t get a response immediately. If another site happens to be 250ms faster than yours, then users are more inclined to switch to a competitor’s website in no time. Web fonts, heavy JavaScript, third-party widgets — all of them can sum up to become a real performance bot- tleneck. Nevertheless, tracking that down does not only improve loading times but also results in a much snappi- er experience and a higher user engagement. In this eBook, we’ve compiled an entire selection of front-end and server-side techniques that will help you tackle such bottlenecks. Find out how to speed up exist- ing websites, build high-performance sites (for both mo- bile and desktop), and prepare them for heavy-load situa- tions. Furthermore, you’ll learn more about how perfor- mance improvements and a 97–99 Google PageSpeed score were achieved on Smashing Magazine, as well as how optimization strategies can enhance real-life projects by taking a closer look at Pinterest’s paint performance case study. With the help of this eBook, you’ll notice that it’s high time to dig deeper into your own site and exam- ine it closely. Why don’t you polish it up and make it even better than it already is! 3 IMPRINT TABLE OF CONTENTS Improving Smashing Magazine’s Performance: A Case Study......................................................................................5 How To Speed Up Your WordPress Website ......................50 You May Be Losing Users If Responsive Web Design Is Your Only Mobile Strategy....................................................... 64 How To Make Your Websites Faster On Mobile Devices............................................................................................. 86 Creating High-Performance Mobile Websites ..................115 Don’t Get Crushed By The Load: Optimization Techniques And Strategies....................................................... 137 Speed Up Your Mobile Website With Varnish................. 157 Cache Invalidation Strategies With Varnish Cache........169 Gone In 60 Frames Per Second: A Pinterest Paint Performance Case Study...........................................................179 About The Authors ..................................................................... 205 4 Improving Smashing Magazine’s Performance: A Case Study BY VITALY FRIEDMAN ❧ Improvement is a matter of steady, ongoing iteration. When we redesigned Smashing Magazine back in 2012, our main goal was to establish trustworthy branding that would reflect the ambitious editorial direction of the magazine. We did that primarily by focusing on crafting a delightful reading experience. Over the years, our focus hasn’t changed a bit; however, that very asset that helped to establish our branding turned into a major perfor- mance bottleneck. Good Old-Fashioned Website Decay Looking back at the early days of our redesign, some of our decisions seem to be quick’n’dirty fixes rather than sound long-term solutions. Our advertising constraints pushed us to compromises. Legacy browsers drove us to dependencies on (relatively) heavy JavaScript libraries. Our technical infrastructure led us to heavily customized WordPress plugins and complex PHP logic. With every new feature added, our technical debt grew, and our style sheets, markup and JavaScript weren’t getting any leaner. Sound familiar? Admittedly, responsive web design as a technique often gets a pretty bad rap for bloating web- sites and making them difficult to maintain. (Not that 5 IMPROVING SMASHING MAGAZINE’S PERFORMANCE: A CASE STUDY non-responsive websites are any different, but that’s an- other story.) In practice, all assets on a responsive website will show up pretty much everywhere1: be it a slow smart- phone, a quirky tablet or a fancy laptop with a Retina screen. And because media queries merely provide the ability to respond to screen dimensions—and do not, rather, have a more local, self-contained scope—adding a new feature and adjusting the reading experience poten- tially means going through each and every media query to prevent inconsistencies and fix layout issues. “MOBILE FIRST” MEANS “ALWAYS MOBILE FIRST” When it comes to setting priorities for the content and functionality on a website, “mobile first” is one of those difficult yet incredibly powerful constraints that help you focus on what really matters, and identify critical compo- nents of your website. We discovered that designing mo- bile first is one thing; building mobile first is an entirely different story. In our case, both the design and develop- ment phases were heavily mobile first, which helped us to focus tightly on the content and its presentation. But while the design process was quite straightforward, im- plementation proved to be quite difficult. Because the entire website was built mobile first, we quickly realized that adding or changing components on the page would entail going through the mobile-first ap- 1. http://www.guypo.com/mobile/ performance-implications-of-responsive-design-book-contribution/ 6 proach for every single (minor and major) design deci- sion. We’d design a new component in a mobile view first, and then design an “extended” view for the situa- tions when more space is available. Often that meant ad- justing media queries with every single change, and more often it meant adding new stuff to style sheets and to the markup to address new issues that came up. Shortly after the new SmashingMag redesign went live, we ran into per- formance issues. An article by Tim Kadlec from 20122 shows just that. We found ourselves trapped: development and mainte- nance were taking a lot of time, the code base was full of minor and major fixes, and the infrastructure was becom- ing too slow. We ended up with a code base that had be- 2. http://timkadlec.com/2012/01/work-to-be-done/ 7 IMPROVING SMASHING MAGAZINE’S PERFORMANCE: A CASE STUDY come bloated before the redesign was even released —very bloated3, in fact. Performance Issues In mid-2013, our home page weighed 1.4 MB and pro- duced 90 HTTP requests. It just wasn’t performing well. We wanted to create a remarkable reading experience on the website while avoiding the flash of unstyled text (FOUT), so web fonts were loaded in the header and, hence, were blocking the rendering of content (actually it’s correct behaviour according to the spec4, designed to avoid multiple repaints and reflows.) jQuery was required for ads to be displayed, and a few JavaScripts depended on jQuery, so they all were blocking rendering as well. Ads were loaded and rendered before the content to ensure that they appeared as quickly as possible. Images delivered by our ad partners were usually heavy and unoptimized, slowing down the page further. We also loaded Respond.js and Modernizr to deal with legacy browsers and to enhance the experience for smart browsers. As a result, articles were almost inaccessible on slow and unstable networks, and the start rendering time on mobile was disappointing at best. It wasn’t just the front-end that was showing its age though. The back-end wasn’t getting any better either. In 2012 we were playing with the idea of having fully inde- pendent sections of the magazine—sections that would 3. http://timkadlec.com/2012/01/work-to-be-done/ 4. http://www.w3.org/TR/resource-priorities/#intro-download-priority 8 live their own lives, evolving and growing over time as in- dependent WordPress installations, with custom features and content types that wouldn’t necessarily be shared across all sections. Yes, we do enjoy a quite savvy user base, so optimization for IE8 is really not an issue. Because WordPress multi-install wasn’t available at the time, we ended up with six independent, autonomous WordPress installs with six independent, autonomous style sheets. Those installs were connected to 6 × 2 data- 9 IMPROVING SMASHING MAGAZINE’S PERFORMANCE: A CASE STUDY bases (a media server and a static content server). We ran into dilemmas. For example, what if an author wrote for two sections and we’d love to show their articles from both sections on one single author’s bio page? Well, we’d need to somehow pull articles from both installs and add redirects for each author’s page to that one unified page, or should we just be using one of those pages as a “host”? Well, you know where this is going: increasing complexi- ty and increasing maintenance costs. In the end, the sec- tions didn’t manage to evolve significantly—at least not in terms of content—yet we had already customized tech- nical foundation of each section, adding to the CSS dust and PHP complexity. (Because we had outsourced WordPress tasks, some plugins depended on each other. So, if we were to deacti- vate one, we might have unwittingly disabled two or three others in the process, and they would have to be turned back on in a particular order to work properly. There were even differences in the HTML outputted by the PHP templates behind the curtains, such as classes and IDs that differed from one installation to the next. It’s no surprise that this setup made development a bit frus- trating.) The traffic was stagnant, readers kept complaining about the performance on the site and only a very small portion of users visited more than 2 pages per visit. The visual feedback when browsing the site was visible and surely wasn’t instant, and this lag has been driving read- ers away from the site to Instapaper and Pocket—both on mobile and desktop.