Course Introduction (Free Preview)

This is a preview lesson. Please purchase the course before starting the lesson.

Web applications–such as Google Drive, Facebook, and Twitter–have become more complex with rich JavaScript interaction, but unlike these applications your blog or website usually has a simple purpose– to allow your visitors to easily and quickly consume your content.

There are many methods to increase the performance of your website, from simply adding a content distribution network to serve static files such as images and style sheets, to the complex task of setting up a completely static HTML website with a platform such as Jekyll.

Why high performance?

There’s a famous statistic released by Amazon’s Greg Linden that indicated sales on Amazon decreased 1% for every 100ms increase in latency. Similarly, Google’s research concluded an extra half-second in page rendering time resulted in 20% lost traffic, while Shopzilla found that a 5-second increase in loading speed resulted in 25% more page views, 10% increased revenue, and over 100% increase in traffic from Google.

Your website may not have revenue in the billions of dollars, but a 20% decrease in traffic is significant for any company or blogger. And while you personally may not experience such a large impact in page views, consider the case where your WordPress website is completely unavailable due to maintenance or a server problem.

What is high performance?

You may immediately jump to network throughput as a primary indicator of a high performance website. Obviously, a server with the capacity to serve binary files at your home internet’s maximum capacity is surely better than one that cannot. But for webpages, raw throughput simply isn’t the primary factor.

In a research paper written by Google’s Mike Belshe, it was determined there was a diminishing return for network speeds above 5Mbps. This is because of the latency factor– while a network can funnel data to you at an extremely fast speed, there is a minimum time the server will take to even begin responding to you. This is largely affected by the physical distance between your website’s server and visitors– for a server located in New York City in the United States, your website may load in mere milliseconds, while a visitor from the United Kingdom or Russia may experience network latency equal to that of the New York visitor’s entire loading time.

Another large factor in your website’s performance is perceived load time. While a benchmark may indicate a long loading time for your blog, your visitors may be able to see and interact the site long before your commenting system finishes loading. There are several techniques for decreasing the perceived loading and rendering time, such as using asynchronous Javascript embedding (or the newer “defer” property of the script tag) and lazy loading, or simply avoiding Javascript entirely.

What are some ways to increase website performance?

We’ll go into the specifics of each of these techniques over the next few lessons, but there are several methods of increasing the performance of your website.

At the “easy” end of the spectrum is basic resource optimization and compression. Tools such as the YUI Compressor, ImageOptim, PNGOUT, and others allow for resources such as images and Javascript to be reduced in file size by significant percentages. With a simple command in your Terminal or Command Prompt, you can reduce the size of your images by half or more in some cases.

Javascript and CSS minification also has a similar reduction in file size. If you’ve ever visited JQuery’s website (or that of another popular Javascript library), you’ll often see an uncompressed “developer” version and a compressed “production” script. In JQuery’s case, the minified script is only 35% of the size of the raw source code.

Finally, by using a content distribution network, you can move your static resources physically closer to your visitors. This decreases latency and often can improve caching, resulting in a singificant reduction in load time.

Outcome

The goal of this series is to ultimately tune your website to load in under half a second. With the proper resource concatination and optimization, you may even be able to push this load time down to 200ms or less. Of course, all of this depends on the location of your visitor and their internet connection, but if you can shave a second or two off of your load time on a fast broadband connection, users on slower 3G (or even dial-up) networks will also see a significant benefit.

There’s quite a line-up ahead. The course is structured with basic, easy optimization tips towards the beginning and more advanced tuning techniques near the end– there’s something for everyone, and I hope you find it useful.

Lesson tags: Introduction
Back to: Introduction to Website Performance > Introduction