Speed index explained from images perspective in Magento 2

  • It is the average time at which visible parts of the page are displayed. Expressed in milliseconds, and dependent on the size of the viewport, the lower the Score.Speed Index (SI) is a performance metric that measures how quickly your page is visually complete above-the-fold.
  • SI is dependent on the size of the browser viewport and differs from other metrics like first contentful paint (FCP) and (LCP).

1. Identification

Tools like GT metrix,lighthouse,Page speed insights

2 How to improve your speed index for image perspective

2.1 firstly Optimize your image
  • Use image format (srcset,Picture tag, Preload)
  • Reduce the overall size of your images
  • Resize images on your server so that the display size matches the original size of the image or use srcset sizing attributes.
  • Consider your priorities and choose the most appropriate image format for each individual asset.
2.2 Embrace progressive images
Speaking of which progressive images to render in increments starting with low resolution approximations and then progressing to a complete picture. this process is slightly different depending on the image format.