Optimizing Web Page Performance

Page content

Recommendations for good Web page performance. This summarizes the guidance that is provided by Google.

Finding Performance Issues

Collect field data first, and then use that to calibrate your lab data. Real User Monitoring services provide field data from your own site. The Chrome User Experience Report (CrUX) measures popular Websites across the Internet.

The Lighthouse tool also provides recommendations. These are based on a set of good practices that have been defined by Google. You can run this in Chrome, as an online service, or as a command-line tool.

Using Metrics

There are two types of metrics: visual metrics and interactivity metrics. Visual metrics include First Contenful Paint (FCP) and Speed Index. Interactivity metrics include Time to Interactive (TTI) and First Input Delay, which is the response time of the code that handles the very first input from the user.

The Speed Index measures the period between FCP and TTI. It rewards pages that load assets early. The relationship between these three key metrics is:

First Contenful Paint -> Speed Index -> Time to Interactive

Reducing Payload

The most effective way to improve performance is to reduce the amount of data that your Website sends. There are several ways to do this:

  • Remove unused code
  • Minify CSS and JavaScript
  • Enable content compression with gzip or brotli
  • Set the maximum cache period for each asset that you can
  • Use modern image formats, such as WebP
  • Use code-splitting

You do need to limit caching of an asset in some cases for security, or to ensure that the content is relevant. Set long cache times for assets that do not need to change frequently.

Code-splitting improves the JavaScript boot-up time, as well as reducing the amount of data that is sent to the browser in each response.

Optimizing Network Use

Use markup such as preconnect, preload and prefetch to provide hints to the browser about what it should load, and what priority these should have. For example, use preload with links to Web fonts, so that the browser begins downloading the font as soon as the HTML is parsed.

You should decide a strategy for loading the Web fonts for your pages. Use font-display to control the transition from default browser fonts to your chosen custom fonts. To have maximum control over the loading and caching of font files, Google recommend that you self-host the fonts that your site uses.

To manage your CSS, split the CSS by priority. Consider inlining critical CSS styles, and using preload to fetch a stylesheet with the rest of the CSS that is needed for the page. Then use the defer attribute or lazy-loading to get stylesheets for less important styles. This enables the Web browser to provide a working page to the user much more quickly.

If you are developing a Progressive Web Application, Google recommend that you follow the PRPL pattern. This combines Push, Render, Pre-cache, and Lazy Load.

Online Tools

The Chrome User Experience Report

The Chrome User Experience Report (CrUX) measures user experiences on popular Websites.

The CrUX dataset is updated monthly. Aggregate data for origins (Websites) is published on Google BigQuery, so that you can query that data yourself with Google Data Studio or other tools. PageSpeed Insights uses URL-level data.

Website Testing Tools

Resources

Google Documentation

Google are consolidating their information to the site web.dev. The Google Developers Website still has a large amount of content.

The Webmaster Guidelines are a brief summary of good practice.

Google provide an infographic and page to summarize their performance tools.

Google Videos

Third-Party Resources