Hummingbird
Hummingbird (source: O'Reilly)

Introduction

The performance of your website is as valuable as ever, and grows in importance every year as ecommerce takes a bigger bite of the sales pie, mobile online use continues to grow, and the web in general becomes ever more entangled in our lives. There’s one significant problem: websites seem to be getting slower every year, not faster.

There are many reasons why websites are slow. Servers are an important aspect of web performance, and in some respects that’s a solved problem, but there are still many high-profile sites that demonstrate poor performance even with sophisticated hardware. If you’re serious about it at all, you’re not going to be running a site on shared hosting and expecting to handle significant traffic surges without a problem. Building out a site with load balancing, dedicated database resources, and so on is simple enough. It’s really a matter of a little expertise, some planning, and a budget. But adding server resources before fixing more basic performance issues brings its own problems.

Web pages themselves present a different issue: they keep getting bigger and more complicated. Radware and Strangeloop have been measuring web page size and performance for the Alexa top 2,000 retail websites going back to 2010. Their most recent report noted that, in 2014, web pages among the sites examined are bigger than they’ve ever been. The average web page for the top 500 Alexa sites was a whopping 1.4MB. Yes, megabytes!

Make the Web Faster

Moore’s Law takes care of this, right? Faster processors, bigger pipes, better software. Applications used to come on a single 1.44MB floppy. Now they require a DVD (or more likely a several-gigabyte download), but they run just as fast while providing more features. This means big web pages shouldn’t be a problem, right? Just throw more technology at your site—faster servers, more RAM, caching and load balancing services, a NoSQL database—and the problem should be solved.

Unfortunately, it’s more complicated than that. Your backend hardware and software are only one facet of the performance problem. There’s certainly an opportunity to performance-tune the backend of your site either by optimizing its configuration or simply adding more horsepower. However, along this path you’re likely to encounter the need for much deeper technical knowledge along with added costs and complexity.

There’s another path that I think you should explore first. Plus-size web pages are a problem all on their own. A large web page takes up a great deal more bandwidth in transit and many more round trips for everything to arrive on the computers of your visitors. The more visitors, the more bits flying around. Your first task should be a simple one: examine whether the size and complexity of your web pages themselves are creating a performance bottleneck.

The Simple Path to Performance

Making your web experience quicker and more enjoyable for visitors may not require a large investment in new development languages and frameworks or state-of-the-art hardware. It may be as simple as making sure the basic HTML, CSS, and JavaScript components of your site—the foundational frontend building blocks of the Web for nearly 20 years—have been optimized. This is all well-known technology and shouldn’t be a problem, but evidence shows us it is a problem… and it’s getting worse from year to year.

In this article I’ll explain why web pages have become so large, and I’ll take a look at why that’s a problem for visitors to your website — and possibly a problem for your business. Then I’ll show you a few simple but often overlooked frontend development techniques to help whip your web pages into shape, slimming them down and resulting in the best performance possible.

Article image: Hummingbird (source: O'Reilly).