Google has delayed the Core Web Vitals roll out from May to mid-June, holding off the full live update until the end of August. The highly anticipated new set of ranking signals will be combined with current search signals, creating the new page experience. What does this new development mean for your business?
If you’ve been diligently working with your web design team and SEO specialists to implement changes to your website, you have nothing to worry about. The delay in rollout only means you could be ahead of the curve. If you haven’t begun to modify your site, on the other hand, the delay only means you now have time to meet the new set of metrics.
What are the Core Web Vitals?
The Core Web Vitals are set to change the way Google ranks websites. It covers three major metrics, namely:
- Largest Contentful Paint (LCP). It measures how quickly the page loads
- First Input Delay (FID). The FID is about interactivity or how engaging your pages are
- Cumulative Layout Shift (CLS). This metric measures how stable the elements in your page are as the users interact with it.
So the new set of metrics will focus on loading time, interactivity, and page stability, giving you a blueprint to what you and your web developers need to work on.
And here are five effective ways to do so:
- Optimize Your Images and Videos
Slow loading pages can cost you, potential clients. For a lot of sites, images are the largest element in view, so it’s best to optimize them.
An effective way to do this is to scale and compress all images on your website. Some image optimization tools to use are tinypng or ShortPixel . You can also convert your images to more efficient modern formats, like .png, as well as make sure that they’re responsive images that look perfect on both mobile and desktop devices.
Draw a distinction between “optimization” and “size reduction.” You may try to cut the size of your images in an effort to get them to load faster. But remember that the whole point behind the Core Web Vitals is to deliver a better experience for users. Your images (or videos) may load quicker, but your website visitors may not find them useful if they’re blurry or low in quality.
- Lazy Load Images and Third-Party Scripts
Lazy loading is another way to make your website images more responsive and load quicker. In this method, images load as the user scrolls to that area of the page. If they’re above the fold, all the images that a user is supposed to be looking at will appear first. As they scroll down, images in those areas of the page will follow.
Lazy loading not only allocates the bandwidth properly, it’s also useful for websites that are heavy on images.
One way you can easily lazy load an image is through HTML. You just need to follow this markup:
<img src=”imagename.png” loading=”lazy” alt=”image1”/>
<iframe src=”content1.html” loading=’lazy”></iframe>
Although the process can be tedious when you have lots of images on certain pages, lazy loading can be simple enough to do.
- Make Sure That All Elements in Your Page Won't Shift Out of Place
Google measures CLS through a performance observer to detect layout shifts. When an element shifts or the layout shifts, the performance observer invokes a callback function that adds to the existing layout-shift score.
One tool that will help you view the stability of your website or debug the layout shift is the layout shift regions option in DevTools from Chrome. This feature highlights the moving elements as they’re moved. It’s not telling you why it’s shifting, you have to figure it out on your own. What it does is show you the elements that are affecting the shift.
Your images and video elements should come with width and height size attributes. You can also use the CSS aspect ratio boxes to reserve the space that the image or element needs. This way, the page can allocate the correct space for the file without shifting all the elements on the page as the file loads.
Layout shifts only count when they are visible to the user. So if a shift occurs below the page but the user has yet to scroll down to that area, then it’s not going to count toward CLS.
- Fix Your UX Patterns for Desktop and Mobile
Many layout shifts are the result of bad UX patterns. One example of that is pop-ups in websites or banners popping at the top of the page to make an announcement. When these elements do that, they tend to push everything else down on the page.
Make sure to reserve enough space for dynamic content. These are content that will subsequently pop up, like promos or ads. One tip is to avoid inserting new content above an existing content, especially if you’re not following up with adjusting the content for the whole page.
- Improve Your Real User Monitoring (RUM) Setup
Real User Monitoring is the process of capturing and analyzing the movements of each user of a website or application. It’s often called real user metrics or end-user experience monitoring. You can do this by checking the page-level performance data.
Google Search Console (GSC) is a helpful tool that will tell you the performance of pages based on URL groups or groupings of URLs that have similar HTML structures.
Monitoring the RUM will also make sure that a user’s first impression of your site’s responsiveness and interactivity is positive.
Bonus Tip:
Another factor that can impact your CWV performance is the server response time. Generally, a faster server response time improves every single page-load metric.
Ideally, you want the browser to quickly receive content from the server, that way, it will also show up on screen and ready to be viewed by the user in record time.
How can you tell if you have a slow server response time? Use tools like WebPage Test and Lighthouse.
Lighthouse in particular has a page audit element called Reduce Initial Server Response Time. If you see this in your audit report, it means you have to spend time digging into the problem with your web developers.
Better Website Performance, Better User Experience — Better Ranking
The Core Web Vitals are meant to help users enjoy their experience online. With his update, Google aims to prioritize site speed and user experience. But there’s no one formula for optimization because it will depend on the current performance of your website, your goals, and the industry you’re in.
Ultimately, these upgrades ensure the web is populated with relevant and quality websites. To apply the best practices to your website to make sure you’re delivering the best services and experience to your customers.