Magento Core Web Vitals – improve the score of Magento Largest Contentful Paint (LCP)

In the previous part of Magento Core Web Vitals we mentioned how you can determine which parts of Google Core Web Vitals may have the biggest impact on how your Magento 2 website is ranked in Google SERP and in general speed optimization. Investigating Core Web Vitals may help you not only with improving your position in search engine – having a smoothly working store is a part of a great user experience and may help increase conversion rates.

In this article let’s check how you can speed up Largest Contentful Paint – meaning decrease time needed for loading the largest piece of content. The same as first contentful paint, this is as well an important ranking factor.

Largest Contentful Paint (LCP)

You need to consider things like:

• slow server response time: to check if this is one of the issues you need to measure Time to First Byte (TTFB). It’s the time between the start of the browser sending request for a page and the start of the first server response. We consider TTFB to be too high if it exceeds 600 ms and then needs speed optimization. To improve this score you should:

  • resolve possible routing issues on a server,
  • optimize operations made on the database,
  • usage server-side technologies,
  • utilize tools such as Varnish to serve cached content when needed,
  • be aware of mistakes such as disabled database caches or inefficient resources such as slow disk I/O or inefficient RAM,
  • take under consideration upgrading hosting plan and making use of Content Delivery Network (CDN) to route users to a nearby server, especially if your business is international,
  • support HTTPS/2 – it provides better performance using fewer resources and decreases load time
  • use rel=”preconnect” or rel=”dns-prefetch” for critical third-party resources,
• render-blocking JavaScript and CSS (JS CSS): the browser can’t render your page until those resources aren’t ready to use.

Let’s first take a look at CSS in order to improve Largest Contentful Paint:

• keep it clean – many CSS styles are newer used: are part of no longer used features that weren’t properly removed or are used on another page. There are tools like Chrome DevTools Coverage tab and PurifyCSS that will help you,
• minify CSS – this process will remove all characters that are unnecessary for rendering such as comments, spacing, and indentation creating lightweight CSS files,
• make use of critical styles and defer the non-critical ones – as critical CSS we consider the minimum number of style rules that are used during the initial rendering of your store. These styles should be served inline in the head section. There is already an easy way for creating a critical CSS path in Magento 2 admin panel. The rest of the styles can be deferred using attribute rel=”preload” or JavaScript solutions,
• merge non-critical CSS – this will help to reduce the number of HTTP requests but should be done carefully to not merge any unused CSS by accident,
• serve non-critical CSS using CDN.

Reduce JavaScript that is blocking rendering time and decreasing Magento speed optimization:

• minify JavaScript – this operation will output JavaScript without unnecessary indents, comments, and spaces,
• cleanup JavaScript – make use of the coverage tab in Chrome developer tools to check how many lines are unused and remove them,
• defer javascript that is not needed for initial rendering,
• be careful when using Magento 2 JavaScript bundling – it may significantly lower the number of requests needed to render your website. But it may also result in loading JavaScript that is unused on a specific page and increase total bytes loaded thus blocking rendering. Even web.dev advises against using Magento 2 built-in bundling option. The general idea of bundling some of the JavaScript resources is good through so consider using other tools for this task like Magepack.

Other Magento contentful paint Speed Optimization possibilities:

• optimize media assets: images (also the ones used as background images), images inside SVG tags, videos,
• make image optimization by measuring their sizes – try serving proper image sizes for the size of the device your customers use to view your website – use, for example, srcset attribute. This way you won’t load too large images for smaller devices,
• compression image to page loading faster (image optimization in loading),
• consider converting images to new formats (image format JPEG 2000, JPEG XR, or WEbP),
• serve icons as font – this way you may reduce the number of requests. You can use tools like for example icomoon,
• sometimes for simple icons, there is an easy way to replace them with a pure CSS solution,
• load images using lazy loading techniques,
• preload resources that will be used above the fold,
• cache resources using service workers,
• consider providing assets with CDN,
• minify HTML – Magento 2 provides easy configuration to use tool in its admin panel:

• reduce the number of used third-party extensions – many of them were written without regard to speed benchmarks. Often are providing many features that may be not even used but will still be loaded onto your page decreasing Largest Contentful Paint metrics,
• upgrade your version of Magento 2 when possible – newer versions provide better performance both on the backend and frontend sides,
• get under consideration redesigning the website:
  • if an image or video is not relevant to the content then sometimes it’s better to remove this image or video,
  • consider removing carousels. Most of them are distracting and don’t really sell anything (see this great article about why sometimes carousels may hurt your business https://cxl.com/blog/dont-use-automatic-image-sliders-or-carousels/). Sliders often keep on wasting resources by loading huge JavaScript and CSS files,
  • reduce the number of fonts – the website will look cleaner and will use fewer resources that may affect the Magento speed index.

Summary for Magento Contentful Paint and general Magento speed index optimization

There is a long way to improve your scores in Largest Contentful Paint LCP and plenty of possible ways to optimize your Magento 2 store. These optimizations should be taken under consideration as early as possible, before the end of the project when it’s harder to purge all of the unnecessary things.

You will need a lot of time dedicated to auditing your existing website and this whole cycle of removing and testing it would be needed to repeated many times. There are also many other areas where improvement can be done for better scores of First Input Delay (FID) and Cumulative Layout Shift (CLS) metrics.