INP, LCP, and CLS are today the line between "slow loading" and "store that sells." Here's an actionable checklist with snippets for Shopify: 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. - Trim JS and third-party (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 for mobile URLs.
10 Quick Fixes (with code for Shopify)
1) Don't lazy load the hero (your LCP)
In your hero section, load the image eagerly 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 modern formats automatically
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 on the main thread
Defer non-critical third-party assets (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 initial items (e.g., 8–12) and use native "Load More." Avoid mega-menus with hundreds of nodes.
6) Lazy load only below the fold
In lower sections, apply 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 <head> with DevTools > Network.
9) Hero with video: static poster
If you use video on the homepage, define a lightweight poster and block autoplay on mobile.
10) Measure, iterate, and document.
After each change, repeat the mobile PSI test and record the results (date, metric, URL). Prioritize what has the most impact on LCP/INP.
Frequently Asked Questions
What INP, LCP, and CLS should I aim for?
Goal: INP ≤ 200 ms, LCP ≤ 2.5 s, CLS ≤ 0.1 at the 75th 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 measure?
After each significant change and weekly on mobile.
0 comments