Hello everyone,
I am looking for some advise on improving overall store performance particularly with relation to shopify image optimization and Core Web Vitals (LCP, FID and CLS).
I wanted to know that what are the best ways to manage custom typefaces, third party scripts and high resolution banner graphics without damaging the store’s loading speed? Do anyone rely any particular built-in Shopify capabilities or suggested optimization workflows?
I would be very grateful for any advise.Thank you!
Hello @angelina-new-user
Small thing first, FID is retired, it’s INP now, and that’s the metric third-party scripts actually hurt.
Images: the Shopify CDN already resizes and serves WebP, so stop uploading 4000px banners, around 2000px wide is plenty and let image_url do the rest. Your hero (the LCP element) wants loading=“eager” plus fetchpriority=“high”, everything below the fold gets loading=“lazy”, and always set width and height attributes so nothing jumps (that’s your CLS).
Fonts: use the theme’s font picker where you can, those come off Shopify’s CDN with no extra connection to open. If you need a custom face, upload the woff2 to assets, preload it and set font-display: swap.
Scripts are usually where the score dies. Put pixels and analytics in Settings > Customer events instead of pasting them into theme.liquid, and load chat, review and heatmap widgets on interaction or after load rather than in the head.
Then judge it on the Core Web Vitals report in Search Console, not Lighthouse. Lab and field numbers disagree constantly and the field data is the one Google ranks on.
Hope that helps
I’ve already posted an article below that covers all of these points. You can check it out—it should cover everything you’re looking for.
Shopify Store Development Checklist – Build a Professional & High-Performance Store
Best regards,
Devcoder 
Hello @angelina-new-user
To optimize your store images, media.
- Make them lightweight compress images, videos as low as you can
- convert images to .webp format.
- Add correct image size for mobile, lazyload media below the fold
- preload fonts