INP, LCP, and CLS are now the dividing line between "slow loading" and "a store that sells." Here's an actionable checklist with Shopify snippets: apply 2–3 adjustments and measure the impact this week.
TL;DR
- INP <= 200 ms , LCP <= 2.5 s , CLS <= 0.1 .
- Don't lazy load the hero (LCP). Use
loading="eager"andfetchpriority="high". - Responsive images with
image_url/image_tagandwidth/heightto avoid CLS. - Cut out JS and third parties (pixels) that trigger the INP.
- Measure with PageSpeed Insights and Search Console. Repeat.
Express audit (5 minutes)
- Open PageSpeed Insights and test Home, Best Selling PDP and Checkout (always on mobile).
- Write down 3 numbers: LCP, INP, and CLS. Repeat after each change.
- In Search Console > Web Vitals, review trends in mobile URLs.
10 quick fixes (with code for Shopify)
1) Don't lazy load the hero (your LCP)
In your hero section, upload the eager image and mark it as high priority. Generic example:
<img
src=" {{ 'hero.jpg' | asset_url }} "
alt="Tu mejor promesa de valor"
loading="eager"
fetchpriority="high"
width="1600" height="900"
class="cartia-hero-img"
/>
If you work with image objects in Liquid:
{{ section.settings.hero | image_url: width: 1800 | image_tag:
widths: '800,1200,1600,1800',
sizes: '(max-width: 768px) 100vw, 1200px',
loading: 'eager',
alt: section.settings.hero_alt,
class: 'cartia-hero-img',
width: section.settings.hero.width,
height: section.settings.hero.height }}
2) Responsive images and automatic modern formats
image_url and image_tag generate variants and serve WebP/AVIF when the browser supports it.
{{ product.featured_image | image_url: width: 1200 | image_tag:
widths: '360,540,720,960,1200',
sizes: '(max-width: 768px) 92vw, 1200px',
alt: product.title,
loading: 'lazy',
class: 'cartia-img' }}
3) Avoid CLS: define dimensions
Always specify width and height (or aspect ratio) for images, banners, and dynamic cards. For variable containers, use a minimum height:
<style>
.cartia-hero { min-height: clamp(320px, 60vh, 720px); }
.cartia-card--img { aspect-ratio: 4 / 5; }
</style>
4) Reduce INP: less JS in the main thread
Postpone non-critical third parties (ads/pixels) until user inactivity:
<script>
(function(){
function loadLater(){
var s=document.createElement('script');
s.src='https://example.com/tercero.js'; s.defer=true; s.async=true;
document.head.appendChild(s);
}
if('requestIdleCallback' in window){ requestIdleCallback(loadLater); }
else { setTimeout(loadLater, 2000); }
})();
</script>
5) Less DOM, more speed
In lists (products/blog), limit the initial number of items (e.g., 8–12) and use the native "Load More" feature. Avoid mega-menus with hundreds of nodes.
6) Lazy load only below the fold
In lower sections, it applies loading="lazy" to images and decoding="async" .
7) Prioritize sources correctly
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="style" href=" {{ 'theme.css' | asset_url }} ">
<style> @font-face { font-display: swap; } </style>
8) Minimize duplicate apps and scripts
Uninstall apps that inject unused JS (duplicate reviews/upsells). Check the <head> section with DevTools > Network.
9) Hero with video: static poster
If you use video on home, set light poster and block auto-play on mobile.
10) Measure, iterate, and document
After each change, repeat PSI on mobile and record the results (date, metric, URL). Prioritize what has the greatest impact on LCP/INP.
Frequently Asked Questions
What INP, LCP, and CLS should I achieve?
Target: INP ≤ 200 ms, LCP ≤ 2.5 s, CLS ≤ 0.1 at the 75th moving percentile.
Can I do it without apps?
Yes. Most image improvements, lazy loading, and JS cleanup are at the theme level.
How often should I take measurements?
After each significant change and weekly on mobile.