Page speed is one of the most important considerations in site design, as it has been shown by Google to drastically impact bounce rate. And even more importantly, page speed is a metric that Google uses when ranking your site in search results. With 93% of search traffic worldwide, Google’s opinion of your site is incredibly important.
Luckily, Google has provided tools to help analyze and improve your site’s performance. Google’s official PageSpeed Insights and the open source Lighthouse dev tool can be used to test and optimize site speed. Google has gone through several revisions to its page speed criteria, having released version 5 in November 2019, which once again adjusts performance weighting. At the same time, they merged PageSpeed with Lighthouse, making Lighthouse their official measure of page performance. According to Lighthouse’s score weighting, there are five major components to site speed:
- First Contentful Paint (20%): FCP measures the time from navigation to the time when the browser renders the first bit of content. This includes elements like images, non-white <canvas> elements and SVGs on your page. This is an important milestone for users because it provides feedback that the page is actually loading. Version 5 increased the value of FCP over first meaningful paint, essentially rewarding pages that have optimized their rendering path.
- First Meaningful Paint (7%): FMP is the time at which the page’s primary above-the-fold content appears on screen. Definitions of primary content vary by page type, according to Google: “For blog articles, it would be the headline + above-the-fold text (and text must be visible—not waiting for fonts). For search engines, it would be search results. If an image is critical to the page (e.g., e-commerce product page), then first meaningful paint requires it to be visible.” Version 5 lowers the weight of FMP in favor of FCP, suggesting that Google is more interested in when the bare components of a site are loaded.
- Speed Index (7%): This is what most people probably think of when it comes to speed tests. It measures how quickly content is visually displayed during the page load. During this process, Google actually captures a video of page load and then applies a JavaScript module to determine visual progression between frames. Again, Google is checking for progressive loading of page elements in the most efficient order possible, which can be improved by optimizing the critical rendering path. Loading smaller elements above the fold first will improve both speed index and FCP.
- First CPU Idle (3%): This is the time it takes for the page to load useful content and register event handlers for page elements. The page must also respond consistently within 50 milliseconds to user interaction. This is the point at which a user can first interact with a page and receive feedback. Elements below the visible fold may not yet be completely loaded or interactive, however.
- Time to Interactive (33.3%): Time for the page to load all content and register event handlers for every page element. The page must also respond consistently within 50 milliseconds to user interaction. At this point, the page can be fully interacted with and provides response to the user without serious lag. Google weighs TTI more heavily than any other category, so you should be concerned with the total size of your page content. According to Google, optimizing content can be achieved via minification of JavaScript and CSS files, compressing images appropriately, minimizing plug-in usage, and applying lazy-loading of video and images to prioritize content above the fold. Finally, you can improve load time by following Google’s AMP guidelines and prerendering elements when possible to minimize load time.
To test your own site’s page speed, simply right click and select “inspect” on the page. The audits tab allows you to conduct a complete Lighthouse audit, included in which is the Site Performance speed test. The audit will also provide insights to help improve the load time of your pages. You can also download Google’s plug-in to run tests with a click.
Ensuring your site is optimized for page speed is a must in any comprehensive site audit, but you can start by simply optimizing key pages where you want users to convert on goals. Following Google’s advice, you should see an improvement in load time and, subsequently, bounce rate and user engagement.
