Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

15 St Margarets, NY 10033
(+381) 11 123 4567



How Web Developers Can Optimize For Google’s Core Web Vitals


It’s been nearly one year since Google announced three new user experience metrics that will be part of its core ranking algorithm. These new metrics — known as the Core Web Vitals — will go into effect starting in June 2021. As a web developer, you now have a strong incentive to improve the overall experience you’re delivering on client websites. Sites that meet—or exceed—these metrics will gain a benefit over competitors in search rankings.

What Google is saying by establishing these standards is “web pages need to have an overall better user experience from a speed and usability perspective, and here’s what we think you should do about it.” Research backs this up. As a general rule of thumb, people lose interest if they have to wait too long for a web page to load. So, optimizing sites according to Google’s metrics will result in happier website visitors. This is important to businesses that want users to stick around longer.

Search results on Google have already been taking into account other user experience metrics such as interstitial ads and mobile-friendliness. The three new metrics you as a web developer should now be paying specific attention to are Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift—basically, loading speed, interactivity, and visual stability. The following are some tips on how you can work to address each of these.

Reducing Loading Speed

For a website to be considered “good” under Google’s new metrics, the Largest Contentful Paint (LCP) will need to happen within the first 2.5 seconds from the moment the page begins to load. The LCP metric measures exactly how long the largest visible element, above the fold, take to load. One way you can optimize for this is to move any render-blocking code that loads before the content to the bottom of the page. This includes JavaScript libraries, analytics packages, and CSS that are not required to load the page. You should aim to prioritize the content that loads above the fold—not irrelevant code or packages.

Another thing you can do is to improve the server response time, which Google recommends being under 200 ms. Things like using a content delivery network (CDN), reducing reliance on heavy server-side libraries and frameworks, and making sure any shared server is not starved for resources like CPU, network, or memory, which can slow down the response of your server. Lastly, improving the LCP metric should also include optimizing all images on a page. It is vital that images are compressed and resized to increase the website loading speed.

Improving Interactivity

According to the second metric of the Core Web Vitals, the First Input Delay (FID) of web pages should be under 100 ms. This measures the time from when someone first clicks or scrolls a page to when the page actually responds to that event—that time can’t go over 100 ms. Here, third-party code and JavaScript affect FID.

What can you as a web developer do to optimize for this metric? First, the impact of third-party code can be reduced in one of three ways: by removing it, by ensuring it loads asynchronously, or by making sure it loads after all other content is loaded. Second, JavaScript execution time should be minimized and, if possible, run in a worker off the main thread. You can use performance tools to identify functions or code that runs for a long time and find ways to optimize that.

Stabilizing the Page Visuals

The third Core Web Vital metric—Cumulative Layout Shift (CLS)—is the hardest one for web developers to optimize for, but it’s really important to user experience. It’s really frustrating for page visitors when they’re about to click a button, but the layout of the page shifts and they end up clicking on the wrong element. Google says pages should have a CLS of less than 0.1 in order to offer a good user experience.

A lot of the fixes for this problem involve media assets on the page. To optimize the CLS, you can add a height and width attribute to images and videos on a web page. This tells the browser to reserve space in the layout and to move the page around later, once these have loaded. For any dynamically added content—such as banner ads and inline notifications—you should make sure that the empty space already exists on the page to prevent shifting other content around them.

Finally, as a word of warning, you should never have content insert itself above existing content on the page, except in response to a user’s interaction.

Optimizing For the Future

Typically, Google doesn’t give developers a year to prepare websites for its changes, so the fact that the company announced the Core Web Vitals a year in advance demonstrates what a major change this is. While the “signal” goes into effect starting in June, Google will need to collect 28 days of “Real User Metrics” or “Field Data”—historical user experience—for there to be any change to the website rankings.

Moving forward, Google will likely update the metrics on an annual basis, though these will likely be minor. Of course, following best practices when it comes to improving speed on a website is something you should be doing on your own—including things like making sure there isn’t a lot of bloatware on a website, optimizing images, and using the right size and width of images.

As a rule, web developers should keep themselves informed about any changes that might affect the websites they handle. One thing won’t change: Speed and stability will always be factored in user experience. Be conscious of each choice you make at every step along the way as you develop a website, and you’ll be ready as changes keep coming.

Credit: Source link

Previous Next
Test Caption
Test Description goes like this