How to improve Google Core Web Vitals
Websites, like any investment, need to be regularly maintained to keep them running properly. Just like you would tune up your car or fill in cracks in your house, you need to tune up your website to make sure it is running at its best. One important way to do this is to improve your core web vitals.
If you’re wondering how to improve Google Core Web Vitals, you’ve come to the right place. In this blog post, we’ve put together the ultimate guide on how to improve your Google Core Web Vitals.
What are Core Web Vitals?
Your core web vitals are a set of metrics that measure the performance of your website. They include things like load time, interactivity, and visual stability. Improving your core web vitals will make your website faster, more responsive, and more visually stable. It will also make your website more user-friendly, which can lead to more conversions and more sales.
The three Core Web Vitals metrics are Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and First Input Delay (FID). LCP measures how fast the largest element (images, videos, animations, text, etc.) can load and appear on a website. CLS ensures that a website’s pages are without unexpected, confusing movements that might disturb users from consuming the content. FID shows how responsive a website’s pages are when users interact with them for the first time. It also measures how fast a website’s browser can provide the result for users.
It is important to start working on improving your Core Web Vital as soon as possible for the best results. Keep in mind that your website's back end and front end need to work together in order to provide the best user experience possible in terms of loading speed, visual stability, and interactivity. Additionally, don't forget about Google's existing search signals, such as mobile-friendliness, safe browsing, HTTPS, and intrusive interstitial guidelines.
How to improve Google Core Web Vitals?
Core Web Vitals are incredibly important because they directly impact the user experience of your website. In other words, if your Core Web Vitals are bad, your website will be slow and frustrating to use.
Luckily, there are a few things you can do to improve your Core Web Vitals.
Improve server response time
A slow server response time will negatively impact your SEO as well as your user experience. Increasing the server response time will improve page-load metrics, including page-load time per second (LCP).
You can measure your server response time using the Time to First Byte (TTFB) metric, which is a measure of server response time and indicates how long it takes for the first byte of your page’s content to arrive in the user’s web browser.
The first step to improving server response time is to find the main tasks that your server needs to do to give back the page content and see how long each task takes. After you find the tasks that take the longest, look for ways to make them faster.
There are various possible ways to improve slow server responses, including:
● Optimising the server's application logic to prepare pages faster.
● Optimising how your server queries databases or migrating to faster database systems.
● Upgrading your server hardware to have better memory or CPU.
Furthermore, the faster your server responds to requests, the better. Getting that server to respond more quickly and directly improves a lot of site speed metrics. On complex sites, the server keeps busy handling requests and serving files and scripts, so it’s best to optimise those processes.
Ensure no LCP elements are above the fold
LCP is one of the three Core Web Vitals metrics. It's a measure of how quickly the main content of a web page is loaded. The main content is the largest image or text block that's rendered within the viewport.
To provide a good user experience, you should strive to have the Largest Contentful Paint of 2.5 seconds or less on your website. A majority of your page loads should be happening under this threshold.
It’s important to ensure that LCP elements don’t take up disproportionate amounts of space on your webpage. Having LCP elements ‘above the fold’ on your site, meaning that you have an LCP element positioned in the upper half of a web page and so visible without scrolling down the page, typically involves having a large image at the top of the page. This image might be a hero image, banner, or carousel, so it's important to optimise these images for a better LCP.
Avoid uncompressed assets
Your page's loading time can be greatly affected by the size of your images. If they are compressed, your site will load much faster than if they are uncompressed. Not only will this improve the experience of your readers, but it will also positively affect your SEO ranking according to Google. Slow loading times can cause people to leave your site, so it is important to make sure that your images are not slowing down your page.
The best way to compress your images is to do it before you upload them to your site. This way, you don't have to rely on a plugin. There are many tools and applications that will do the job for you directly on your computer.
How you save your image impacts the file size, which impacts the loading time. For colourful images, JPG is usually the best choice, but for vectors, images with few colours and images with transparency, PNG will save on the file size.
There are tools available online and to download which will compress your files with just one click and help you avoid dropping in rankings.
They can also cause CLS (Cumulative Layout Shift), which is the measure of all of the unexpected layout shifts that happen during a page's entire life cycle. The aim is to get a measure of a page's "visual stability", since it has a big influence on the user experience. This can therefore affect the page’s ranking in Google Search.
Implement lazy loading
If you're looking to improve your site's UX and core web vitals score, lazy loading images is a great way to do it. Lazy loading allows images to be loaded only when users scroll down to them, which doesn't compromise the website's loading speed. This results in a better LCP score for your site.
Lazy loading could be especially beneficial for your site if it contains many heavy elements like images, animations, or videos. However, there is no set rule for when to implement lazy loading, so you'll have to decide on a case-by-case basis. If your site's LCP score is low, you might want to try lazy loading and compare the results before and after implementation.
Pay attention to width and height attributes
Another factor which can affect CLS is using images without width and height attributes. The same goes for a lazy load placeholder.
CLS is caused by images that don't have dimensions in the CSS. It can also be caused by ads and embeds without dimensions, or by dynamically injected content. Without proper dimensions, these elements tend to jump a bit during the loading process, which makes the page appear jerky and unstable.
This might also be due to new content being inserted above existing content. To avoid this, don't insert new content above existing content, except maybe after an explicit interaction by the user.
You can also improve Core Web Vitals and prevent CLS by adding the width and height for images in the CSS. This way, the browser will reserve space for that image that’ll probably appear later than the text. Now, the jerkiness will disappear because the browser knows that something will be added in due time. You could think about adding some sort of low-resolution placeholder if you want some time to appear quickly and ensure that all your image assets have dimension attributes to avoid this.
Avoid hiding desktop-only element
When the desktop-only element is hidden on mobile, as commonly happens when using a web builder, it can bring unnecessary assets and heavier content. This can significantly affect your CWV and thus also your page ranking.
Break up Long Tasks
Enable fallback to default, browser-supported fonts
Custom fonts can really drag down your performance scores. The browser may delay loading your font unless it is a default font supported by the browser. In this case, a quick fix for you is to have a fallback approach in loading your font with fonts that are default supported by the browser, which will also improve FID.
Effectively use SSR and CSR on your page
Google encourages server-side rendering (SSR) for good SEO values, but it can trade off with page load performance. If your page is too big in terms of content and you render the whole page on the server, it will take more time to load and the page weight will be high. A better approach is to render only the components that appear above the fold on the server, and render the rest of the page components from the client side. This can improve FID, and this way, the user gets the page above the fold immediately, and the rest of the page renders asynchronously without hindering the user experience.
What else can I do to boost my ranking?
If you want to go beyond Core Web Vitals to improve your website ranking, there are a few things you can do.
Fix Slow ISP
Also known as slow internet speed between your server and the audience of your website, a slow ISP can be detrimental to the traffic on your site, can increase your bounce rate and be harmful to your site’s ranking.
There are some easy-to-implement methods for increasing site speed, such as avoiding flash and reducing image sizes. Every metric should be optimised when seconds matter.
Ensure you do not have multiple redirects before reaching the final content
If you’ve changed an address on your site, one way to quickly move information from one URL to another URL without significantly changing your site's design is to use a redirect. There are three main types of redirect: 301 (permanent), 302 (temporary), and Meta refresh.
No one can say for sure how 301 redirects will affect search rankings, but many case studies suggest that the new URLs will rank quickly and that the redirect will have little impact on SEO.
If you use more than one 301 redirects, the process becomes more complicated. Some examples of when you might need to use multiple 301 redirects include when you're moving an entire website or when you run an e-commerce business and need to update multiple product catalogue listings. If this has led to multiple redirects before the user reaches your content, this can be detrimental to your ranking on Google.
SEO is an important tool for website ranking. However, it is only one part of a larger marketing strategy. To improve your website ranking, you need to focus on creating quality content, building quality backlinks, and improving your overall website design and user experience. By following these tips, you can improve your website ranking and attract more visitors.
If you’re looking for a comprehensive, end-to-end web design package, you can count on us. Our experts here at KD Web have years of experience and know just how to put your site at the top of the results list.