This page is not complete.
Below is a concise introduction to best practices, tools, APIs and links to provide more information about each topic. It is also crucial to realize what is really important to your users. It might not be absolute timing, but user perception.
- Start with learning the critical rendering path of the browser. Knowing this will help you understand how to improve the performance of the site.
- Using resource hints such as
rel=preconnect, rel=dns-prefetch, rel=prefetch, and rel=preload
- CSS performance factors
- Use HTTP/2 on your server (or CDN).
- Use a CDN for resources which can reduce load times significantly.
- Compress your resources using gzip, Brotli, and Zopfli.
- Image optimization (use CSS animation, or SVG if possible).
- Lazy loading parts of your application outside the viewport. If you do, have a backup plan for SEO (e.g render full page for bot traffic)
Web performance is all about user experience and perceived performance. As we learned in the critical rendering path document, linking CSS with a tradional link tag with rel="stylesheet" is synchronous and blocks rendering. Optimize the rendering of your page by removing blocking CSS.
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'"> <noscript><link rel="stylesheet" href="/path/to/my.css"></noscript>
The downside with this approach is the flash of unstyled text (FOUT.) The simplist way to address this is by inlining CSS that is required for any content that is rendered above the fold, or what you see in the browser viewport before scrolling. These styles will improve perceived performance as the CSS does not require a file request.
<style type="text/css"> // Insert your CSS here </style>
EOT and TTF formats are not compressed by default. Apply compression such as GZIP or Brotli for these file types. Use WOFF and WOFF2. These formats have compression built in.
Within @font-face use font-display: swap. By using font display swap the browser will not block rendering and will use the backup system fonts that are defined. Optimiize font weight to match the web font as closely as possible.
Icon web fonts
If possible avoid icon web fonts and use compressed SVGs. To further optimize inline your SVG data within HTML markup to avoid HTTP requests.
- Learn to use the Firefox Dev Tools to profile your site.
- Pagespeed Insights can analyze your page and give some general hints to improve performance.
- Lighthouse can give you a detailed breakdown of many aspects of your site including performance, SEO and accessibility.
- Test your page's speed using Webpagetest.org, where you can use different real device types and locations.
- Try the Chrome User Experience Report which quantifies real user metrics.
- Define a performance budget.
- Gather user metrics using https://github.com/akamai/boomerang
- Or directly gather with window.performance.timing
Things not to do (bad practices)
- Download everything
- Use uncompressed media files