Google Core Web Vitals (CWV) goes beyond a simple timer measuring website loading speed. It delves into the broader realm of performance, encompassing diverse elements that collectively shape the overall user experience. At its essence, CWV represents a pursuit of an exemplary User Experience (UX).
CWV comprises three fundamental pillars: Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift. Successfully addressing these three aspects ensures ‘passing’ CWV. It’s important to note that distinct scores exist for both Mobile and Desktop experiences.
- Largest Contentful Paint (LCP)
- LCP is not just about the largest content loading; it’s about delivering the main content promptly for users to engage with swiftly.
- To pass LCP, your website needs to load in less than 2.5 seconds.
- Some tips to improve LCP
- Reduce the both width/height and file size of your image. Your image should be 1.5x of the target image and reduce the file such as much as possible using online compressing tools such as Compress JPEG.
- ‘Next-gen’ formats such as WebP format is ideal however Magento does not support uploading these. So you can use an extension such as the one from Yireo which will automatically convert all uploaded images to WebP.
- Use a Content Delivery Network (CDN) to deliver your images and content. Some CDNs offer an image compression service.
- Implement browser caching to store static assets locally on the user’s device
- Reduce server-side render time
- Minimise the number of redirects as each redirect increases the time to load a page
- Speak to your server provider to discuss options to speed up the service response time
- First Input Delay (FID)
- FID goes beyond quick responsiveness; it’s about ensuring users can interact without frustrating delays.
- To pass FID, your website needs to load in less than 100ms.
- Following the tips to improve LCP will also help improve the FID.
- Cumulative Layout Shift (CLS)
- CLS is more than preventing layout shifts; it’s about offering a visually stable experience throughout the loading process.
- To pass CLS, your website needs to load in less than 0.1.
- Considerations to improve CLS:
- Include width and height attributes for images to reserve the required space before they load
- Minimise the amount of web fonts you load or host your own fonts.
- Avoid dynamically injected content such as video, reviews or Google Maps embeds
- Manually check core pages on a different devices to assess what content is shifting
- Third party scripts can also contribute to layout shifts
The landscape of web performance is ever-evolving. CWV is not a one-time checklist; it’s an ongoing commitment to adapting and optimising. Regular monitoring, strategic tweaks, and staying abreast of industry best practices are integral to mastering CWV and, consequently, user-centric web performance.
The Importance of Passing CWV: Aligning with Google’s Ranking Factors
CWV is not an arbitrary set of metrics; it’s a crucial factor influencing search engine rankings. Google, in its pursuit of user-centric experiences, factors CWV into its ranking algorithm. Websites that ace these metrics are more likely to enjoy favorable positions in search results, unlocking increased visibility and organic traffic.
Beyond rankings, passing CWV is a pathway to customer engagement. When Google factors your site favorably, there’s a higher likelihood of users clicking through to your site. A positive user experience, backed by strong CWV metrics, can be the catalyst for users not only exploring your site but also converting into satisfied customers.
The performance score, while based on Google’s scoring system, should be used as a guide. It encapsulates various elements contributing to overall performance but lacks the precision of real user data.
Prioritising CWV Improvements: Which Pages to Focus On and Why
Not all pages on your Magento website are created equal. Strategic prioritisation of pages for CWV improvements involves identifying key pages that significantly contribute to user engagement, conversions, or serve as entry points.
Pages to Prioritise:
- Homepage: Often the first touchpoint, optimising the homepage ensures a positive first impression.
- Product Landing and Details Pages: Vital for e-commerce, optimising product pages enhances the shopping experience.
- Checkout Pages: Streamlining the checkout process is crucial for reducing friction and improving conversions.
- High-Traffic Landing Pages: Identify and optimise pages with high traffic.
Avoid fixating on achieving a perfect Performance score of 100. For Desktop, a score above 90 is great, while on mobile, your target should be at least 70.
Need help with passing Google’s Core Web Vitals and improving your scores?
Let’s discuss your website and how we can help!