When trying to get the highly after “Built For Shopify” tag for an app, there are a list of criteria one must meet. By far, the most challenging one to meet is the Largest Contentful Paint (LCP) criterion. Shopify requires that 75% of the time your app’s LCP be at or below 2.5 seconds. With this blog, I will cover all the tips and tricks I used to get one of our apps from 4.8 seconds all the way down to 2.1.

Overview

But first, what is LCP? LCP is the time it from when the user starts loading the page until the time when the largest image or text block finishes rendering. So, to fulfill Shopify’s criteria, 75% of the time merchants visit your app, the page should load at or below 2.5 seconds. That is a daunting task. When I first heard about this, I did not know what to do. My other app had an LCP score of 1.7 seconds, and, in my head, was nearly identical to the other app. I was lost. However, after much research, I came up with a plan. There are many things to think about when trying to lower the score, but they fall into 3 general categories. Let’s dive into each

1. Asset Management

When I am talking about assets, I mainly mean images. To optimize your images for LCP,

Compress and resize images to an optimal size without compromising quality.

Use avif/webp image formats

Do not lazy load your images

For our app, images were not really necessary, so we got rid of them. Doing so did not help much since our app is client-side rendered

2. Load Management

After html, stylesheets are loaded. After stylesheets, images and js are loaded. To make sure this does not happen sequentially and you are optimizing your load times:

Minimize stylesheet sizes so they do not block image resource loading.

Minimize js that may block rendering

Use async or defer attributes for non-essential scripts.

Set appropriate cache headers to enable browser caching for static assets.

Server-side render your js instead of client-side render. (Use Remix instead of an old Shopify template)

3. Server Management

Decreasing Time to first Byte (dfs) is critical to lower LCP, since that is what determines the first part of your load time. Before the html, stylesheet, and js load, the browser must get the first byte and know there is more information coming on the way. But, it is often the hardest to control because it depends on what servers you use. The two ways to optimize here are

Get a CDN (or multiple)

Upgrade Server Hardware

Finally, after much tinkering with all of the tips above, I found my solution by upgrading my Heroku tier. I did not in my wildest dreams think that the action that made the most difference concerning my LCP would be that.

Yes, sometimes, you have to pay to win. If everything else on this list does not work for you, consider paying your cloud provider more money or emailing us.