Join Morten Rand-Hendriksen for an in-depth discussion in this video What is performance and optimization?, part of HTTP/2: Developing for Performance.
- [Instructor] Have you ever noticed that when you surf the web some sites load much quicker than others. Sometimes the site loads immediately as if it was already on your phone or computer. And other times you're left staring at a blank screen for what feels like ages, only to have the site come up in bit and pieces while the content shifts and moves around. This is what we call web performance or page speed. How fast any particular web page loads in your browser. A site that loads quickly has good performance. A site that makes you stare at a white screen for a long time has bad performance.
The performance of a site relies on several factors. The visitor's connection speed, which we have no control over, the bandwidth and power of the web server, which we can control by picking the right hosting provider, and how well our site is optimized for performance. That's what we'll focus on in this course. You use the web, so you know that performance matters, but you may be surprised to learn how much it matters. The impact of the performance of a site can be split into three categories: user experience, user and owner cost, and findability.
User experience first. I'm certain you have abandoned many sites without reading them because they were slow to load or buggy. We all have. Performance has a significant impact on the user experience of a site. Good performance provides a good user experience, and bad performance, a bad one. But performance is more significant than merely having a bad experience. Studies have shown that visitors will abandon a site in as little as three seconds if it does not load properly. Studies from online retailers show every second shaved off the load time has a direct positive impact on conversions.
In short, improved performance means improved user experience means improved conversions. Conversely, a site with poor performance is losing you visitors and money every second it does not load properly. Performance also has a direct financial impact on both the people visiting the site and the site owner. The main reason for poor performance is bloat. Big image files, big code files, and lots of them. As of July 2016, the average size of a web page is 2.4 megabytes.
That means every time you visit a link you are likely downloading 2.4 megabytes of content of which only a small fraction actually matters. This number is increasing rapidly, mostly thanks to the proliferation of high quality, high bandwidth connections at home and offices and through mobile networks. With fast internet, size doesn't seem to matter. But if your internet service is slow, or has a bandwidth limit, or both, it does matter, a lot. Every bit of data costs money, and thus serving up a bloated website is wasting people's money.
If people realized how much bandwidth is wasted loading unoptimized and poorly performing sites, there would be complaints. The same can be said for the site owner. If the average size of your web pages is 2.4 megabytes and you get a thousand visitors, you just pushed 2.4 gigabytes of data through the web. And if each of those visitors loads a couple of pages, that number is multiplied. Most web hosts operate with bandwidth levels, and once you exceed them, you pay a premium.
As a result, a poorly performing site can cost you and your company a lot of money over time. Finally, search and findability. For a site to be successful, it has to be findable. That usually means the site needs to be indexed in search engines and shareable through social media. Over the last couple of years, search engines headed up by Google, have started weighting and ranking sites based on performance. Fast and well performing sites bubble to the top of the search results. While poorly performing sites drop to the bottom.
This is partially a result of their mobile first strategy, but it's also an attempt to push web developers like you and me to think more about performance. That means if you want your site to be found on search engines, making sure they are optimized for performance is an important step. So, what is performance? In a nutshell, it's how fast and effective your site loads in the visitor's browser. And to build a website with great performance, we need to optimize everything within it, from the images, to the code and other elements, to how they are handled on the server, delivered through the network, and processed by the browser.
- What is website optimization?
- Understanding how browsers render content
- Measuring performance
- Optimizing images
- Optimizing code
- Compressing data with GZIP
- Optimizing file caching
- Leveraging CDNs