Estimated reading time: 4 minutes
Last week, we talked about Core Web Vitals as part of PageSpeed Insights performance score. Today, we explain how you can use the other four performance score metrics to improve your website performance.
Having a high score in PageSpeed Insights is important for better SEO and hence higher Google Search rankings. It improves your website’s user experience, bounce rate, and conversion rate.
First Contentful Paint (FCP)
It measures the time the browser takes to render the first piece of DOM content. DOM includes images, non-white <canvas> elements, and SVGs excluding iframe.
Your performance score compares your FCP time and those for real websites based on the HTTP Archive data. Sites in the 99th percentile render FCP in 1.5 seconds. If your FCP is 1.5 seconds, your FCP score is 99.
Fonts are large files and take time to load. Some browsers hide text until the font loads. This causes a flash of invisible text. You can improve your FCP score by:
- Avoiding invisible text while loading custom fonts by temporarily showing a system font using <font-display: swap> in your @font-face CSS
- Using <link rel=”preload”> to load your font files earlier e.g. <link rel=”preconnect” href=”https://fonts.gstatic.com”>
- Adding <&display=swap> to Google Fonts URL e.g. <link href=”https://fonts.googleapis.com/css2?family=Lato&display=swap” rel=”stylesheet”>
Speed Index
It measures the time content is visually displayed by capturing a video of the page loading in the browser and computing its progression between frames. Your performance score compares your speed index with those of real websites, based on the HTTP Archive data.
| Speed Index (sec) | Color-coding | Speed Index score |
| 0–4.3 | Green (fast) | 75–100 |
| 4.4–5.8 | Orange (moderate) | 50–74 |
| Over 5.8 | Red (slow) | 0–49 |
You may improve your Speed Index by:
- Minimizing main thread of browser rendering like parsing HTML and building the DOM, parsing the CSS and applying styles, parsing, evaluating, and executing JavaScript, and processing user events,
- Reducing JavaScript execution time like minification and compression, removing unused JS, etc, and
- Ensure text remains visible during webfont load.
Time to Interactive (TTI)
It measures the time a page takes to become fully interactive. It happens when the page displays useful content, event handlers are registered for most visible page elements, and the page responds to user interactions in 50 ms.
Your performance score compares your TTI with those for real websites, based on the HTTP Archive data. Sites in the 99th percentile render TTI in 2.2 s. If your TTI is 2.2 s, your TTI score is 99.
To improve TTI, you should:
- Defer or remove unnecessary JavaScript,
- Optimize JavaScript,
- Reduce JavaScript payloads with code splitting,
- Use preload, render, precache, and lazy load pattern,
- Optimize third-party JavaScript,
- Minimizing main thread of browser rendering, and
- Reducing JavaScript execution time.
Total Blocking Time (TBT)
It measures the total time that a page is blocked from responding to user input like a mouse click. The time adds the blocking portion of all the tasks executed for more than 50 ms between FCP and TTI. If your page has a long task of 90 ms, the blocking portion would be 40 ms.
Your performance score compares your TBT with those for the top 10,000 sites on mobile devices including 404 pages.
| TBT time (ms) | Color-coding |
| 0–300 | Green (fast) |
| 300-600 | Orange (moderate) |
| Over 600 | Red (slow) |
To improve TTI, you should reduce long tasks by:
- Deferring or removing unnecessary JavaScript,
- Reducing JavaScript payloads with code splitting,
- Optimizing third-party JavaScript, and
- Minimizing inefficient JavaScript statements.
Summary
Together with Core Web Vitals (LCP and CLS), First Contentful Paint (FCP), Speed Index, Time to Interactive (TTI), and Total Blocking Time (TBT) are PageSpeed Insights performance score metrics. These user-centric performance metrics are critical to improve your website performance and hence user experience.
Having a high score in PageSpeed Insights is important for better SEO and hence higher Google Search rankings. It improves your website’s user experience, bounce rate, and conversion rate.
