Last week, NPR implemented changes that make its pages load twice as fast. The site has gone from average page load times of 6.5 to 8 seconds to 3.5 to 4 seconds. On Tuesday, NPR’s Patrick Cooper and Justin Bachorik wrote about the changes and offered tips to other Web developers on speeding things up.
Here’s No. 6:
Make speed a team sport. NPR’s developers led the way on this technically thorny work, but they worked in concert with colleague designers, project managers and a testing specialist. This small, multi-discipline team made major decisions through consensus and worked in NPR’s usual Agile style. (For instance, the designers and developers collaborated on new visual indicators of a page’s loading.) Every member of the team was responsible for building a faster NPR.org.
I spoke with Cooper, NPR’s director of Web and engagement, and Bachorik, NPR’s lead developer, via email about how they sped things up and how they’ll measure success.
Tell us about this process. What prompted it?
Cooper: Our team has been redesigning NPR.org in the past few years to be fully responsive and mobile-friendly. Throughout that work, our developers were making speed optimizations, but they were also compiling details of potentially greater changes. Meanwhile, performance was becoming a key focus for every member of the team, including designers and managers. The team evaluated every potential new NPR.org design or feature for effects on site speed.
And of course, the news industry overall is talking a great deal about speed now. Platforms and publishers are developing a wide range of performance-oriented solutions. If you want to serve mobile audiences, your delivery needs to be fast. We felt NPR.org held significant possibilities.
So, from this summer into fall, alongside other projects, we decided to chase the potential big wins. Our developers began with a couple weeks of research, prototyping and conversations. Our colleagues at NPR Digital Services, who build the Core Publisher CMS for NPR member stations, had already executed on several aspects of this work on their sites and were very helpful. We share digital development and design best practices back and forth regularly.
After the developers found the right approaches for our particular needs, they began rolling through the many layouts and features that comprise the site. They rewrote tons of code, and our designers teamed with them to rethink the slower areas of the site experience. We tested the new code throughout the process and moved progressively from very raw testing methods and environments to ones that closely simulated our live site and real audience paths. NPR’s developers led the way, but launching an upgrade of this scale required a true team effort.
There are 7 great tips at the bottom of today’s piece sharing ways other people can make their sites load faster. What are some key things that worked at NPR?
Bachorik: Site speed has always been a priority for us, so we’ve been following many of these best practices for some time. Our most recent release focused specifically on a complete overhaul of the way that we build and deliver JavaScript on NPR.org. This required us to reconsider, rewrite and reorganize almost every line of JavaScript on the site, which provided an opportunity to streamline our codebase and remove legacy or inefficient code.
The net result is set of well-organized JavaScript modules that work in concert to support every feature available to users of NPR.org. In addition to significantly outperforming previous versions of the site, the new code is also conceptually easier to grasp, which has led to greater feature development and bug-fixing velocity by the team.
It’s also important to point out that while there are many improvements to website performance that a team of developers can make independently, it’s incredibly helpful to have a performance-oriented product team. We work in two-week agile scrum cycles that prioritize teamwork. Constant communication between developers, designers, and product managers allowed us to evaluate as a group which features on NPR.org were pulling their asset weight, so to speak, and which could be removed for the sake of performance without causing trouble.
What kind of feedback have you gotten from users so far? Have they noticed?
Cooper: It’s been quiet so far, but that’s good. Our developers changed more than 10,000 lines of code under the hood, and our team spent hours in testing sessions to make sure the upgrade was smooth and subtle. When a website is fast, user reaction is usually subconscious. The site just works and keeps up with you. Now, when a website is slow — that’s when users speak up.
We’re glad, though, to see the news getting some traction in the digital-media community today. Speed is a critical issue in the industry. News organizations have to find solutions that not only deliver audiences but also fit their needs and boost the sustainability of their businesses.
How will you measure success with this?
Bachorik: As per tip #5 on today’s blog post, we’ve been keeping a watchful eye on our metrics since the inception of this work. Our recent launch shaved hundreds of kilobytes of JavaScript and CSS assets off almost all of our pages, and that’s resulted in average page load times that are several seconds below pre-launch benchmarks. The savings in asset weight affect more than just the user experience on NPR.org; smaller assets ultimately result in lower content delivery network bills for the organization. We’re a non-profit at NPR, and we need to run lean.
We conduct team-wide launch reviews after every major deployment, and we’ll continue to assess and discuss critical metrics like asset weight and page load time as we build new features and functionality into NPR.org. Our roadmap for the year ahead is packed.
Cooper: In the long run, we hope a faster NPR.org leads to more visitors coming back more often and sharing our journalism with new audiences. We’ll be watching our traffic analytics.
The other big measure of success — one more qualitative — will be our ability to execute on new ideas. A leaner website is a more flexible website. Throwing out old code and optimizing the rest puts us in position to welcome new innovation. Speed is a feature but also an opportunity.