The Ecommerce Guide to Improving Your First Contentful Paint (FCP) Score

When it comes to buyer experience and conversion, site speed is crucial. Based on our analysis of Shopify data, research, and experiments, we found that even a half-second improvement in site speed can increase conversion. To improve your site speed, you first have to measure it, which involves analyzing several key metrics, and one of the most important is First Contentful Paint (FCP).

FCP is the time it takes for the first image or text from the DOM to be “painted” on your website.. This tells users the site is active and loading. A slow FCP can mean people leave your store before they ever see anything. Google has found that the chances of a user bouncing increase 32% as page load time goes from one second to three seconds.

In this article, we’ll look at what impacts your storefront’s FCP score, and key strategies for keeping it as low as possible. 

What is a good FCP score?

Google’s benchmark for a good FCP score is 1.8 seconds or less. For your store to get a good FCP score, the first piece of recognizable content needs to load in less than 1.8 seconds for at least 75% of your site users. A good best practice is to measure mobile and desktop scores separately, to make sure each is performing well.

According to Shopify research and data across millions of transactions, we know that even milliseconds faster site speed can notably improve conversion. The flip side is also true—every millisecond added to site speed can decrease conversion rate. Because site speed directly impacts your bottom line, it’s critical to regularly review your FCP score, especially as you apply updates and launch new features. 

What ecommerce platform has the best FCP score?

Even if you optimize your website code for lightning-fast FCP, infrastructure issues could make achieving a good score impossible, which is why you need both.

We’ll start with Shopify. Our engineering team is constantly innovating our platform for global speed and performance. This makes a big difference for the brands we host. Nearly all of them (93%) have a fast storefront, based on FCP scores from their publicly available Core Web Vitals data, which is more than any other major commerce platform. What’s more, when you compare the average speed of stores on Shopify to other platforms, ours render 1.8 times faster on average.

Building your store on Shopify gives you the foundation you need for a good FCP score. With Shopify as the benchmark, let’s look at how some other key players in the market compare.

Shopify vs. BigCommerce

• 80% of BigCommerce stores are fast vs. 93% of Shopify stores
• Shopify’s server speed is 1.9x faster on average than BigCommerce’s
• Shopify stores render 1.4x faster on average than BigCommerce stores

Shopify vs. Salesforce Commerce Cloud

• 65% of Salesforce Commerce Cloud stores are fast vs 93% of Shopify stores
• Shopify’s server speed is 2.2x faster on average than Salesforce Commerce Cloud’s
• Shopify stores render 1.5x faster on average than Salesforce Commerce Cloud stores

Shopify vs. Adobe Commerce (Magento)

• 53% of Adobe Commerce stores are fast vs 93% of Shopify stores
• Shopify’s server speed is 3.4x faster on average than Adobe Commerce’s
• Shopify stores render 2x faster on average than Adobe Commerce stores

Shopify vs. WooCommerce

• 34% of WooCommerce stores are fast vs 93% of Shopify stores
• Shopify’s server speed is 3.9x faster on average than WooCommerce’s
• Shopify stores render 2.4x faster on average than WooCommerce stores

Shopify vs. custom-built stores

• Shopify’s server speed is 2.4x faster on average than custom-built stores’
• Shopify stores render 1.7x faster on average than custom-built stores

It’s critical to remember that your platform can have a major impact on your FCP score and other speed metrics. When performance issues are at the infrastructure level, they are often beyond your control. That’s why it’s so important to choose a commerce platform that takes speed seriously.

All data mentioned above is according to Core Web Vitals collected for a representative sample of sites on Shopify and its competitors—covering 200,000 sites across a sampling of all revenue bands and all major commerce platforms. Learn more by visiting the full report.

Why is it so challenging to improve FCP?

Anyone who has been tasked with speeding up a website knows that it can be a huge headache. Today’s ecommerce buyers expect a fully interactive, personalized experience—and those features pay off in conversions and revenue. But they also require a lot of resources to load each time. Each new capability is also a new way to slow down your storefront.

Here are just a few of the resource-intensive features of modern online shopping that make it challenging to improve your FCP: 

• Interactive buying features, including carousels, filters, and advanced search
• Multiple high-quality photos and videos for every product
• Personalized content and product recommendations based on user behaviors and preferences
• Real-time inventory and dynamic pricing
• Advanced account management with extensive lookups
• Chat and other customer engagement tools

Even when you finally get a good FCP score, that doesn’t mean you have addressed every site speed optimization metric. There are many others that are influenced by different factors, including:

• Largest Contentful Paint (LCP): LCP is the time it takes for the largest element on the page to become visible, showing that the main content has fully loaded.
• Time to Interactive (TTI): TTI measures how long it takes for the site to become fully interactive.
• First Input Delay (FID): FID refers to how long a user must wait for the site to respond after they click on a button, link, or other interactive element.

LCP in particular is a popular CWV metric to measure. While important, it’s heavily impacted by factors like slow themes and third-party plugins, which is why Shopify chose FCP as the primary metric for our site speed report mentioned earlier.

Attempting to architect and solve for each and every metric can end up taking a lot of time, technical skill, and resources. Building your store on a platform like Shopify, however, gives you a headstart on speed optimization so that you can focus more of your efforts on revenue-driving innovations.

The ability to reallocate your resources towards innovation, combined with the fact that we know store speed and conversion are connected, is why we so often see stories like Transformer Table, who migrated to Shopify and experienced not only a 67% increase in site speed, but also a 2x conversion rate.

How to improve your FCP score

As we mentioned earlier, it can take a lot of work to maintain a good FCP score while offering a modern buying experience. But it’s not impossible. Let’s take a quick look at some actionable steps you can take to boost your FCP score.

Reduce server response time

To reduce your server response time, make sure your store is running on high-performance servers that can process requests faster. You then want to adjust your back-end processes and configurations to reduce the number of overall queries to databases and other back-end resources. 

Another way to reduce server response time is to implement caching mechanisms to store frequently accessed data. Optimizing the overall structure and architecture on your ecommerce site can also help reduce load on the server even if you have a lot of media, features, and functionality.

Implement lazy loading

If you’ve ever scrolled down a page and have the content appear on the fly, you’ve experienced lazy loading. To implement lazy loading, it’s as easy as adding an attribute (loading=”lazy”) to images and other content. This tells the server not to load the element until it’s needed. On Shopify, theme sections and blocks are already configured to intelligently apply lazy-loading techniques based on where they are located on the page.

Use a single host for static content

Having multiple DNS lookups in your architecture can introduce latency and increase your FCP score. To get a better FCP score, you need to host your static content (media, CSS files, and JavaScript) on a single, dedicated subdomain. Static content in your Shopify store shares the same domain as your storefront to help you improve your FCP score.

Eliminate render-blocking resources

When websites are built, they sometimes require that a CSS, JavaScript, or HTML import be completely loaded before any other part of the page can render. These files are known as render-blocking resources, and the more you have, the slower your site loads.

To improve your FCP score, you can add attributes (“defer” or “async”) to certain CSS and JavaScript files that are not as important to the initial rendering of your website. This tells the browser to load them after other, more important resources have loaded.

Remove unused code (e.g., CSS, HTML, JavaScript)

One way to boost website performance is by only sending any data that is strictly necessary. That said, ecommerce websites evolve over time, and they may have CSS, HTML, and JavaScript files that might not be in use any more. Or, your store might have lots of default files being loaded in from templates and site builders. 

No matter what the reason, you can improve your FCP score by auditing your store’s codebase to include only the necessary files. This can take some time and technical skills to make sure you don’t delete anything but dead code. But the less your browser has to load, the faster your site will be.

Enable text compression

Text compression helps improve FCP scores by reducing the size of the text data that needs to be loaded. You can enable text compression using algorithms such as Brotli or Gzip to reduce the overall size of the size of the HTML, CSS, and JavaScript files being loaded by the website user. 

Use page caching

Page caching improves performance by storing a static copy of your ecommerce webpages on the server it is hosted on. That way, the entire page doesn’t have to be fully, dynamically generated every time a user visits your site. 

Tools like Varnish Cache can be used to implement server-side page caching. For an ecommerce store, they should be configured to cache only the static parts of an ecommerce website, while still retrieving dynamic content like shopping carts and personalized recommendations.

Optimize font loading 

Many ecommerce sites use custom fonts to establish a consistent visual brand experience. But the more custom fonts you use on your ecommerce site, the more fonts have to load before the site is properly rendered. This can negatively impact your FCP score.

To keep fonts loading fast, you can use the CSS style “font-display: swap” to tell the browser to show text as soon as possible, even if it means using a default web font temporarily. You can also preload important fonts on your website using the HTML tag “<link rel="preload">” to make sure they get retrieved as soon as possible.

Audit and remove any unnecessary redirects

Setting up redirects is a good best practice to avoid giving your customers the dreaded 404 error when they visit your site. If a page has been on your site for a long time and it’s being taken down, it’s a good idea to redirect to an existing, relevant page.

Over time, redirects can pile up. This can lead to a lot of unnecessary HTTP requests, and in the process, slow your site performance down. The most common redirects that can be removed to improve your FCP score and site speed are:

• WWW and non-WWW: Keep your URLs standard to either use the “www” or not, to avoid these types of redirects. For example, you can choose lanxiaowei.shop, or shopify.com, but don’t use both.
• HTTP to HTTPS: To avoid redundant HTTP to HTTPS redirects, simply make sure your site is fully served over HTTPS.
• Trailing slashes: Set up your ecommerce store to either consistently use or omit trailing slashes, so redirects like these are not necessary. For example, use either: shopify.com/example or shopify.com/example/ for every URL generated.
• Chain redirects: Make sure every redirect only goes from one URL to another, without any steps in-between. Chain redirects often happen when one resource is removed from the site, a redirect is created, and then the resource it is pointing to eventually also gets removed, and another redirect is set up.
• Internal redirects: When a page is removed from your store, try to locate every instance of an internal link and update it to a new link, rather than relying on a redirect.

An ecommerce platform built for speed

At Shopify, we know that the fastest online stores are the most successful ones. That’s why we recently made a major investment in the infrastructure powering our platform. To reach a global customer base faster, we added several new server locations in Europe. We also use Cloudflare’s global content delivery network (CDN), which adds over 300 more points of presence. This robust footprint also contributes to Shopify stores with a 99.99% uptime.

Every Shopify customer is fully hosted by our servers, which we constantly optimize to make sure they can handle ecommerce at massive scale. Our engineers have built new efficiencies so that we’re no longer scaling servers during high volume periods. That means Shopify customers will always be ready for peak traffic whenever it comes, and never lose a sale to high traffic.

For most retailers, endlessly tweaking code and infrastructure to improve your site’s FCP score isn’t a good use of time. When you build on Shopify, you can spend less time worrying about performance, and more time generating revenue.

To learn more about partnering with Shopify, get in touch today.