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,
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,
- 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.
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,
- 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.