How to Improve Speed Index (SI) in WordPress?
Do you know how many seconds it takes for your website to load on your visitor’s screen? The answer points to the Speed Index (SI), a performance metric that is affected by anything related to the upper part of the screen.
Speed Index (SI) contributes to your overall performance score in the Lighthouse report. Maintaining a good Speed Index provides a great user experience: it means the content in the viewport is delivered quickly.
There are six metrics to optimize in order to improve your performance score, and Speed Index accounts for 10% of this global score calculated by Lighthouse.
What is a good Speed Index? How is it measured? Which tools are the most reliable? Conducting a performance audit for your website can be quite challenging!
Follow our step-by-step guide to check your Speed Index KPI and carry out an effective performance optimization process. We will explain the Speed Index metric, free tools you can use to measure your performance, and some technical tips to achieve a good Speed Index score (below 3.4 seconds).
What is Speed Index in Lighthouse?
Speed Index is a Lighthouse performance metric that shows how quickly the content of a page loads and becomes visible to the user.
It indicates the loading time of the visible portion of a webpage’s upper part (the viewport). It measures the entire loading process of what users see before they start scrolling.
Actually, Lighthouse records a video of the loading process and calculates the difference between all the frames. Then, Lighthouse uses the Speedline Node.js module to compute the final SI score. (More information about this module can be found on GitHub.)
Speed Index is the result of a calculation: the average rendering speed and visual progress of a webpage, also called visual completeness.
It is a meaningful lab metric to measure load time that directly affects how users perceive website performance.
How to Improve Speed Index? Performance Tips
To improve the Speed Index and overall speed of your WordPress site, follow these eight performance techniques:
Defer JavaScript (JS)
Delay JS and Remove Unused JS
Minify JS and Minify CSS
Optimize CSS Delivery and Remove Unused CSS
Optimize Images + Implement Lazy Loading
Use Data Compression
Use a Content Delivery Network (CDN)
Preload and Optimize Fonts