Sign in

Core web vitals and UX: Top Tips

Nishit Agarwal
Core web vitals and UX: Top Tips

Core Web Vitals are some specific elements that Google considers important to the overall user experience of a website. Core Web Vitals consists of three specific measurements: page speed and user interaction. Maximum content paint, initial input delay, and cumulative layout shift. In a nutshell, Core Web Vitals are a subset of the elements that are part of Google's Page Experience Score in user-friendly (basically, Google's way of assessing the overall UX of a page).


Why is Core Web Vital So Important?

Google plans to make the page experience an official Google ranking factor. The page experience is a combination of factors that Google considers important to the user experience:

  • HTTP
  • Mobile Friendly
  • Lack of Interstitial Pop Ups
  • Safe Browsing (basically no malware on the page)


And Core Web Vital is its score. Judging from the announcement and the name itself, it is no exaggeration to say that top web vitals dominate the site pg in digital marketing experience.


To make sure your website is ready for this change, I've put together some tips for optimizing your website for important areas of the page experience. These cover areas such as faster and smoother visual loading, improved mobile usability, and improved website security at advanced digital marketing course.

  • Preloading Critical Resources to Reduce Visual Load Time

One of the first metrics users see when a page is loaded is that the content is displayed on top of the collapsed content. Here, the Largest Contentful Paint (LCP) and the first Core Web Vitals metric work to measure the speed at which key elements are loaded onto the page. To see what the LCP element of a page is, simply look at the page in Chrome DevTools and it will appear in the waterfall chart on the Performance tab. Once you know what the LCP element is, you can easily see the visual progress of your loading speed using the Performance tab in Chrome DevTools.

  • Minimize Long Tasks and Optimize Main Thread Activity

Behind the scenes, there are various issues that can result in users waiting for the browser to respond to a tap or click on a page. This is measured by the second Core Web Vitals metric, First Input Delay (FID). This experience can be frustrating to the user, but there are things we can do to solve this problem and reduce the latency between human interaction and the browser response. Often a long task is added to this issue. Basically, these are part of the JavaScript code that blocks the main thread for a long time, causing the page to freeze and stop responding. The long Chrome DevTools task is on the Main tab of the waterfall chart at the top and is highlighted with a red triangle.


  • Reserve Images to Load on the and Space for Embedding

The third core web vital metric, Cumulative Layout Shift (CLS), examines how much the visual layout of a page moves when the page loads. This measures the frustrating area of ​​UX that we all may have seen, where the user clicked on a particular link, but the page moved and accidentally clicked on another area of ​​the page for content writing. I am aiming for it. One of the most common causes of high CLS scores and low UX is the lack of reserved storage space for images and embedded resources. For example, if you use the Chrome DevTools screenshot feature on the Performance tab, you'll see that the BBC Weather cookie consent banner doesn't have space for loading. Once loaded, the displayed content will be pushed down in the viewport for around 3 seconds.


  • Make Sure Your Key Page Templates are Mobile-Friendly

After mobile traffic surpassed desktop traffic in 2016, it's important to optimize your website for mobile devices that more and more people are surfing. became. The layout and ease of use of websites on mobile devices can affect the user experience. For example, users should be able to see important content clearly and easily without zooming in. There are two ways to evaluate the usability of your website on mobile devices. The first is to monitor mobile usability reports in the  Google Search Console.


  • Check Your Website for Security Issues

In addition to load performance and mobile usability, website security is also a determinant of your page experience. Google wants to make sure that the websites displayed on SERPs are safe for users without security issues for brand voice. The most important security issues you should be aware of are malware, unwanted software, phishing, and malicious content. See the Google Search Console Security Issues Report for an easy way to find out if your website has issues that could endanger your users. This report is under the heading "Security and Manual Actions".


  • Allowing Forms and Embedded Resources to Be Served Over HTTPS 

Incorporating HTTPS as a signal to the page experience is another way for Google to keep users safe while browsing. Delivering content that requires user interaction and input over an insecure HTTP connection puts the user at risk and makes the user and their data more vulnerable. This is especially important for forms where users enter personal information such as B. At checkout when payment information is passed. One way to identify these issues is to use  Screaming Frog's security diploma in digital marketing reports.

Nishit Agarwal
Zupyak is the world’s largest content marketing community, with over 400 000 members and 3 million articles. Explore and get your content discovered.
Read more