Fix Largest Contentful Paint image was lazily loaded error on Shopify theme скачать в хорошем качестве

Fix Largest Contentful Paint image was lazily loaded error on Shopify theme

Making Shopify themes faster is something that has become increasingly important. Not only does Google care about the performance of your website, but more importantly your users do too. In this video, we'll walk through one of the simplest performance wins you can implement into your Shopify theme that proves to carry the greatest benefit - improving the Largest Contentful Paint (LCP) metric. In many instances, Shopify themes are implementing best practices with lazy loading images. This ensures that resources aren't called until they are needed when a user scrolls to the image on the page. However, this is not something we want to implement when the image is "above the fold" or immediately in the viewport when the page loads. This is because of the importance of the LCP. Making sure the LCP, most often cases (but not always) an image, loads quickly ensures that we can take full advantage of performance benefits with below the fold images not impacting a fast load for above the fold content. ---- 00:00 - Introduction 00:51 - Example of LCP Lazily Loaded vs Not 02:25 - LCP and Why It’s Important 03:44 - How to Opt In/Out of Lazy Loading 07:25 - Tag Filter Option via Liquid 09:49 - Testing Code 11:21 - Closing ---- // Video Resources // Shopify Dev Docs: https://shopify.dev/docs/themes Largest Contentful Paint: https://web.dev/lcp/ Lighthouse Scoring Calculator: https://googlechrome.github.io/lighth... // General Links // Website: https://www.thepagesmedia.com Twitter:   / trpage_dev   LinkedIn:   / tr-page   Instagram:   / thepagesmedia   // Hardware* // 💻 2022 Apple MacBook Pro (16-inch, Apple M1, 32GB RAM, 1TB SSD): https://amzn.to/3iv4Xmo 🎙️Rode NT-USB USB Condenser Microphone: https://amzn.to/3VrlmqJ ⌨️ Keychron K4J2 Mechanical Keyboard: https://amzn.to/3OXO2Vz 🎧 Bose QuietComfort 45: https://amzn.to/3hhdidd 🪑 MUIGELS Ergonomic Mesh Office Chair: https://amzn.to/3EnUn8X *Some of the items may contain affiliate links and it's possible that I may receive a small commission if you use the link