Why page speed matters
People that deal with Search Engine Optimization (SEO) will know that the performance of a website affects the ranking of Google search results since 2010. Back then, this was only the case when the client was using a Desktop device. Since mid-2018 website performance is also a ranking factor for searches with mobile devices.
There are numerous examples of how a fast loading page positively affects the user experience on a website. A case study by Mozilla found that a more performant landing page for the Firefox browser led to a significantly increased number of downloads. Google found that higher loading times increase the probability that a user leaves the website. If you run an online shop, for example, less visitors directly translate to a loss in revenue.
Even though many page speed case studies are somewhat dated, the W3C recently (2018-09) assembled the Web Performance Working Group. The purpose of the WPWG is to establish standardized interfaces for measuring website performance. This development shows that web application performance is still in flux and a highly relevant topic.
How to measure website perfomance
There are different ways to gauge website performance. We will be looking at the Time to First Paint, Time to First Contentful Paint, and Time to First Meaningful Paint. The latter two metrics are used in several performance measurement tools and have been around for some time. The concept of Time to First Paint is not new, but found its way into the recent Editors Draft about Paint timing of the Web Performance Working Group (as of 2018-10-17; commit 8b866e1).
The first paint is the point in time where the browser has drawn anything on the screen. This represents an important stage during the rendering process as it provides the user with feedback that something is happening.
The first contentful paint is the point in time where the browser draws the first text or image on the screen. This does not necessarily mean that all resources relevant to the web application have been loaded. For example, fonts can still be missing and text will be displayed using a fallback font.
The first meaningful paint has to be defined for each site individually, because it depends on what is meaningful to the user, i.e. what the user is looking for. For website that displays an article the first meaningful paint may be defined as the heading and abstract being visible. A website that displays product information, in turn, may require the product image to be visible.
The notion of a meaningful paint can be a bit elusive at times. Luckily, there are already tools out there that try to measure the time to first meaningful paint. Google's PageSpeed Insights allows the user to enter their website URL and performs a variety of checks and measurements. The test results provide actionable advice to improve the website's performance. The Chrome browser ships with Lighthouse which serves a similar prupose. In addition, results from Lighthouse can be saved to verify that a change to the site brought the desired improvements. If you are concerned about visitors from a specific location on earth, you may want to have a look at webpagetest.org. Webpagetest allows you to simulate a visitor from a specific place in the world using the specified device and web browser.
How to improve website performance
The presented performance metrics are influenced by a number of parameters. Some of these factors are in control of the developer, such as the configuration of the web server or the total amount of bytes that need to be transmitted. Other factors are out of the developer's control, such as network latency. The amount of bytes that need to be transferred for a web application is often referred to as the page weight. The HTTP archive continuously analyses websites and provides recent data about the page weight by content type. The following graphic shows the page weight distribution on 2018-08-15:
Clearly, image content and JavaScript account for most of the page weight of an average website. Therefore, developers can get out the most by optimizing these two content types. The goal of this site is to provide educational resources for website performance optimization, especially related to media content. We are planning to keeping the articles updated and to expand the number of topics gradually. For starters, read the guide on selecting an appropriate image format.