What is First Contentful Paint and How to Improve it in Shopify?

Overview

A First Contentful Paint Metric measures how long it takes for any part of the page’s content to appear on screen after it starts loading. When a page loads, it shows the first visible elements, such as a logo, text, image, or background.

• 1. FCP is one of the core web vitals.
• 2. GSI score has a 10% weightage for FCP.
• 3. FCP of less than 2 seconds is considered good to pass web vital.

• What is a Good Score for FCP?
• How to improve First Contentful Paint?
• Why Does High First Contentful Paint Occur?
• Why FCP is Important for a Site’s Speed Performance?

What is a Good FCP?

• Good: less than 2 Seconds
• Needs Improvement: 2-4 Seconds
• Poor: Greater than 4 Seconds

How to Improve First Contentful Paint?

• Eliminate Render-Blocking Resources
  This opportunities section all URLs blocking the rendering of your site and impacting the First of your page. The goal is to reduce the impact of these render-blocking URLs.
  Here are the routes to eliminating or reducing the size of these resources:
  • Reduce the size of your Javascript. Remove all extra unnecessary comments from the code.
  • You can defer the loading of Javascript. It takes a long time to load these files because they are often large. Javascript files will not interfere with the quick rendering of your content if they are loaded last and async also.
  • Reduce unused CSS(Go with the critical css).

• Generate Critical CSS and inline it

  In these cases, we extract only the CSS above the fold in order to manage the above-the-fold content. You should minify the critical CSS and then add it within your page (between

  tag), or render by creating a separate file. The theme CSS takes longer to load due to its large size, and it breaks the layout above the fold until the whole theme CSS loads. Your layout is held until all of the CSS has loaded. It should be placed in the header rather than the complete CSS links. From the head section, delete all back-rendering tags, CSS, and JS scripts just before the closing body tag.

• Preload Resources
  A preload request tells the browser to fetch a critical resource at the earliest possible time. Resources that are critical may include stylesheets, JavaScript, images, and fonts.
  • Image Using Preload
    Preloading images using the HTML tag. These two value options of the rel attribute (relationship between the current document and the linked document) are most relevant to the issue: prefetch: load the given resource while the page is being rendered.
  • Preload for Webfont
    As a result of the attribute as=” font” type=” font/woff2″, the browser will download this resource as a font and prioritize it accordingly.
  • Preload for CSS
    In CSS files, fonts defined with @font-face rules and background images defined in CSS files are not discovered until the browser downloads and parses the CSS files. By using preloading, the resources are fetched before the CSS files are downloaded.
    For CSS, all we need to do is add the onload=” this.rel=’’stylesheet’” attribute to the link tag.
    CSS can be split into two parts using the critical CSS approach. This is the process of reducing unused CSS. This is the technique that extracts the CSS for above-the-fold content in order to render content to the user as fast as possible.
    The following code can be used to solve this problem: adding link rel=” preload” can speed up the download process.
  • Preload for Javascript
    The browser has a built-in Preloader which helps get scripts downloaded sooner. Using link rel=preload in the markup might accelerate that even more, depending on the structure of your HTML document.
    < link rel=”preload” href=”{{‘app.js’|asset\_url}}” as=”script” type=” text/ javascript” >
    Read this Blog and Find: Preload and Prefetch

• Reduce your DOM Size
  Your browser creates a tree structure of the objects called DOM(Document Object Model) every time it loads a web page.
  DOM represents objects in your HTML as a tree diagram. Each HTML element, such as the body or h1, has its own node.
  After a web page has been loaded, the browser creates a document object model (DOM). As a map, the DOM represents the nodes and objects. In this way, programming languages can connect to the page.
  There are several ways you can reduce your DOM size:
  • Divide large pages into smaller ones.
  • Make sure to lazy load as many HTML elements as possible, and not just images.
  • Your page should only display a limited number of posts.
  • Remove unwanted CSS (instead of hiding it).
  • Load the section through Ajax.

Read this Blog and Find:  Reduce your Dom Size

Why Does High First Contentful Paint Occur?

• Long loading time for fonts
• High request counts and large transfer sizes
• Slow server response times(TTFB)
• Render-blocking resources
• Unused CSS
• Above the fold, script-based elements
• Above-the-fold lazy loading
• Not inlining images above the fold
• Excessive Dom size

Additional Tips

• Lazy Load Content Below the Fold
  Only load content that users see when they scroll down, further reducing initial FCP time.
• Minimize Third-Party Apps
  Many apps add code and resources to your store, potentially impacting FCP. Evaluate which apps are essential and consider alternatives with lighter implementations.

Site Speed Performance Analysis Tools

• Google Pagespeed insights (Recommended)
• GTMetrix
• ChromeDevTools

By implementing these strategies and monitoring your FCP, you can create a faster-loading Shopify store that delivers a better user experience and boosts your online business success.

Remember, optimizing FCP is an ongoing process. Keep testing and iterating to find the best combination of techniques for your specific store.

This explanation helps! Feel free to ask if you have any further questions about FCP or Shopify optimization.

Looking For Expert Shopify Speed Optimization And Other Services Get In Touch