How To Improve Largest Contentful Paint (LCP) on Gatsby Sites with Hero Background Images

Today, we’re going to share how to improve LCP on a Gatsby website.

This is the same process that we implemented on one of our Gatsby projects to pass on Core Web Vitals audit.

This is for those Gatsby sites with full-width background images on their hero or above the fold section.

Let’s dive right in.

On our projects, we were using the Gatsby Background Image plugin for our hero sections to implement the “blur-up” technique or ”traced placeholder” SVG during image load.

Later on, we found out that the image processing affects the LCP score on our websites.

The Largest Contentful Paint or LCP is one of Google’s Core Web Vitals metrics. It measures the time a site takes to show completely the biggest content on the screen.

The article that greatly helped us in finding a solution to the LCP challenge was from Google’s Addy Osmani: Preload late-discovered Hero images faster.

Osmani shares that the main idea in preloading the hero background image is, “to avoid the browser having to wait for the script before beginning to load the image, as this could heavily delay when users can actually see it.”

After learning the concept, the first thing that we did was to stop using Gatsby Background Image, at least for the hero or above the fold sections.

To add preload on the hero image, we are using React Helmet in the component.

We then use Styled Components to position the hero text in the middle of the background image.

You can see our sample code below for a hero component with full-width background image or photo:

Please note that while the code above works for us, it may or may not work for you.

We’re still continuing our study on how to improve core web vitals on our projects.

If you have any suggestions on how to improve LCP time, please let us know.

Additional Resources:

• Importing Assets Directly into Files in Gatsby
• React Helmet in Gatsby
• Styled Components in Gatsby
• Web Design Company