Web page size, speed, and performance
Measure site speed and optimize code to help reduce abandonment rates and make your site successful.
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.
Learn faster. Dig deeper. See farther.
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.