Shopify Pagespeed Optimization and Core Web Vitals

Shopify site usually has errors related to Pagespeed and Core Web Vitals:

– сritical Cumulative Layout Shift (CLS) associated with photocells;
– unoptimized scripts, fonts, styles that affect the return time of the first byte;
– the critical indicator of the Largest Contentful Paint;
– incorrectly configured lazy load, which affects the time before the interactive;
– using Youtube or Vimeo as a Hero background;
– delayed loading of Google Analytics scripts and Tag Manager.

These errors were found and corrected on the website highly-spirited.ca.
The progress is best seen in the screenshots in the gallery.

An important improvement was the lighting for scripts and styles. Now, for each group of pages (home page, separate product, catalog, separate page), its own set of styles and scripts is loaded, reduced by 90% from the original.

As a result, the compliance of Web Vitals Core and the growth of Pagespeed from the red to the green zone.

Note. The speed of the mobile version loses about 20 Pagespeed points due to the Facebook App. Facebook script embedding is possible without the Facebook App, but the client is worried about possible risks. The question is open.