Techniques for Optimizing Web Performance
Use this library of content to learn how to measure and fix common web performance issues we see on Shopify sites.
Table of Contents
Jump to a section:
- Metrics and testing
- Loading speed and Largest Contentful Paint (LCP)
- Layout stability and Cumulative Layout Shift (CLS)
- Responsiveness and Interaction to Next Paint (INP)
- Performance Management
You may come across a lot of unfamiliar terms in the beginning of your learning journey. We compiled a list of commonly used terms to help you out.
Metrics and testing
Loading speed and Largest Contentful Paint (LCP)
On optimizing the LCP element:
- Debugging common causes for slow loading in Shopify Liquid storefronts
- Optimizing images for performance on Shopify
- Lazy load images for performance
- Responsive images on Shopify with Liquid (demo)
- Improve Largest Contentful Paint (LCP) by removing image transitions
- How layout position impacts three big web performance levers
- Announcing new Liquid features for better web performance
On resource delivery:
- Using the Shopify CDN for better performance
- Introduction to preconnect and preload resource hints
- Early learnings for Early Hints at Shopify
Case studies:
Layout stability and Cumulative Layout Shift (CLS)
Responsiveness and Interaction to Next Paint (INP)
