Already one of the fastest websites in the news industry, NPR.org now loads twice as fast as it did previously, furthering public radio's commitment to mobile audiences.
NPR technologists launched changes last Wednesday, Oct. 21, that kept the looks of NPR.org largely the same but substantially improved the site's inner-workings. Web speed-analysis tools now show these changes to have cut in half the page-loading times for NPR.org visitors.
The upgrade should improve user experiences across nearly all NPR.org pages — articles, section fronts, the home page, information pages, and more.
With users increasingly on the go and having mobile connections of varying speeds, page-delivery performance has become critical for NPR and other news organizations. NPR.org serves more than 25 million unique visitors each month, and the majority of these visitors access the site on phones and tablets.
This speed boost is not NPR's first. NPR.org's mobile-first redesign in 2012 topped a Mediashift comparison of top news websites. Earlier this month, continued site evolution put NPR near the top of New York Times speed rankings.
With the changes, NPR aims to reach new audiences — serving its non-profit mission to create a more informed public — and open doors to new projects, experiences and station connections on NPR.org.
Additional site upgrades this month have seen similar focus:
If you encounter any issues with NPR.org, feel welcome to contact us. Our digital teams are listening and making improvements regularly.
Tips For Web Developers
If you build websites, here are seven suggestions from the NPR team responsible for the NPR.org speed boost about how to improve your site's performance.
(If you don't build sites, prepare yourself for words you've never heard before.)
1. Minify and concatenate JavaScript and CSS assets. Every individual JavaScript and CSS asset your site loads requires an HTTP request, and reducing the total number of such requests can be hugely helpful to your site's performance. At NPR, we compile our stylesheets using Sass and our JavaScript using the RequireJS optimizer to minimize our HTTP request overhead. Find the tools that are best for you. We also restrict the compilation and delivery of minified and concatenated assets to our staging and production environments. This keeps development workflows snappy, which boosts developer happiness and productivity.
2. Load as much JavaScript asynchronously as possible. Most CSS, and all synchronously-loaded JavaScript, needs to be loaded and interpreted by the browser before a website finishes loading. JavaScript assets that don't affect the initial rendering of your website can be loaded asynchronously by using the async attribute or a JavaScript file loader like RequireJS.
3. Optimize image assets. When developing a responsive website, it's important to be mindful of how much of your users' bandwidth your site will require to load, and it's not unusual for images to be among the heaviest assets on your site. On NPR.org, we initially serve high-compression, low-quality images that can be inexpensively and quickly delivered, and then dynamically replace them with high-quality images of a size appropriate to the resolution of the user's device. However, emerging web standards like srcset promise similar functionality without the use of JavaScript.
4. Keep your servers humming. Most of these tips relate to client-side optimization, but making sure that everything's running as efficiently as possible on the server is just as important to your website's performance. From enabling gzip compression to optimizing database queries and caching layers, there are plenty of ways to speed up the processes that occur before a single byte of HTML is parsed by your users' Web browsers.
5. Measure constantly. There are lots of tools available to developers to help identify areas ripe for performance improvement, including PageSpeed and YSlow, and they're tremendously useful. Generating performance reports on a regular basis is a good way to be certain that the changes you're making to your website's code are having the desired effect.
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.
7. Take testing seriously. Developers wrote unit tests as they worked, and the full NPR.org team began 15-minute, at-your-desk testing sessions a month before launch. In the final two weeks, the team gathered for highly structured, extended sessions. We held separate sessions for mobile and desktop testing. While we always build NPR.org to work across platforms, the split allowed us to focus on platform-specific situations and better adopt the mindsets — and speed realities — of different types of users.
Patrick Cooper is director of Web and engagement at NPR. Justin Bachorik is a senior developer at NPR and lead developer of NPR.org.
Copyright 2021 NPR. To see more, visit https://www.npr.org.