Improve LCP of your Shopify app 💎

Summary

In this video, Farit, a Shopify app developer, shares his journey of improving the Largest Contentful Paint (LCP) score to earn the 'Build for Shopify' badge. He explains how optimizing page structure, avoiding layout shifts, and leveraging static file caching helped improve LCP. Farit also emphasizes the importance of testing the app in various states (first-time users, users with data) and explains the role of the 75th percentile in LCP calculations. Through practical examples and code tips, Farit offers valuable insights for developers seeking to enhance app performance and user experience.

Takeaways

• 😀 LCP (Largest Contentful Paint) is crucial for qualifying for the 'Build for Shopify' badge, with a required score of less than 2.5.
• 😀 Optimizing LCP is challenging but essential, and it’s important to measure it across all app states (onboarding, with data, without data).
• 😀 The Web Vitals library is helpful for debugging and measuring LCP, providing insights on which element is detected as the largest content piece.
• 😀 Changes to the content layout, such as increasing text length, can significantly impact LCP, as seen in the test where text length was modified.
• 😀 Content structure plays a big role in LCP—static content should be loaded after dynamic content to avoid layout shifts and improve page speed.
• 😀 Testing LCP performance should be done both locally and in production, as performance can vary between the two environments.
• 😀 Static content (like promotional text) should not be loaded before dynamic content to avoid layout shifts and improve LCP.
• 😀 Browser caching for static files (JavaScript, CSS) can significantly improve LCP performance, especially for returning visitors.
• 😀 While a CDN can improve LCP, a simple single-server setup with proper static file caching can also be effective, even for slow internet countries.
• 😀 LCP calculations are based on the 75th percentile of all page loads, meaning that extremely slow loads won’t heavily affect the average if most loads are fast.
• 😀 Every millisecond counts in LCP optimization, and even small changes in content can lead to significant improvements in load time.

Q & A

What is LCP and why is it important for Shopify apps?

LCP stands for Largest Contentful Paint, which measures how quickly the largest piece of content (usually an image or text block) is rendered on the screen. It's crucial for Shopify apps because a lower LCP score (below 2.5 seconds) is one of the requirements for earning the 'Build for Shopify' badge.

How did Farit initially struggle with LCP and what helped him improve it?

Farit initially struggled with improving LCP due to challenges in understanding how page structure and database queries impacted performance. He was able to improve his LCP by debugging with console logs, making adjustments in content (like text length), and optimizing the app's structure to prevent layout shifts.

What role does testing in different app states play in LCP optimization?

Testing LCP in different app states is critical because users can experience the app differently. For instance, users who are onboarding for the first time may have a different experience compared to those with data already in the app. Farit emphasizes the importance of optimizing LCP for all user states, including first-time users and returning users with data.

How can developers measure LCP and track performance effectively?

Developers can measure LCP by using the web vitals library in their code, which provides real-time LCP data in the console log. This allows developers to identify which element is being detected as the largest content piece and track changes as they adjust page content or structure.

What effect did adding a longer text have on the LCP score in Farit's testing?

When Farit added a longer block of text, the LCP score increased significantly. The LCP value jumped from 0.8 seconds to 1.4 seconds, demonstrating how changes to content length can directly affect the LCP score.

Why is it important to avoid layout shifts when optimizing for LCP?

Layout shifts, which occur when content moves around as it loads, can negatively impact the user experience and increase LCP. Farit ensures that static content, like promotional banners, is not loaded before database-driven content to prevent these shifts and maintain a smooth page load.

What strategies does Farit use to prevent layout shifts and improve LCP?

Farit prevents layout shifts by loading all content at once, including both static and database-driven elements, to avoid moving content around as the page loads. He also places static content (like promotional banners) at the bottom of the page to ensure they don't interfere with the primary content loading.

Does Farit use a CDN to improve LCP for his apps?

No, Farit does not use a CDN for his apps. Instead, he relies on a single server setup and static file caching in the browser for his JavaScript and image files. He finds this method effective without overcomplicating the infrastructure.

How does static file caching help improve LCP?

Static file caching helps by storing JavaScript and image files in the user's browser cache, reducing the load time for subsequent visits. Farit enables caching for his files to ensure faster performance, particularly for repeat users.

What is the significance of the 75th percentile in LCP calculations?

The 75th percentile is important because LCP calculations are based on the performance of the majority of users, rather than extreme cases. Slow load times from users with poor internet connections are excluded from the average, ensuring that LCP scores reflect typical user experiences rather than outliers.