s.p. digital icon s.p. Digital slogan

How to Improve Core Web Vitals

improve core web vitals score

In July, Google updated the algorithm, including the Core Web Vitals update, even though it is not confirmed a high score gained from testing will rank better on Google search.

Then why Core Web Vitals should be evaluated even though it is not explained as one of the signals in ranking in site search?

Publishing a website is not automatically targeted to search engines to get a better position, but instead, how the site can provide a great experience to visitors both in terms of web design, good content presentation with illustrative images to increase satisfaction with the content presented and have fast access to web pages.

The common question is, what elements or metrics must be considered so that the website developed gets a good score from the Core Web Vitals audit side?

When described in Core Web Vitals, there are four main metrics, they are:

  • LCP (Large Contentful Paint) relates to how long the page renders the largest visible element.
  • FID (First Input Delay) is the length of time it takes for the page to start responding to user actions.
  • CLS (Cumulative Layout Shift) is the UI shift of the page during page load.
  • INP (interaction to next paint) is the time it takes for the page to respond to an interaction with the user.

At this time, the focus is on how to get better performance in LCP, namely how to make the newly created website, when published and tested, get a good score according to the value range set in the Google Search Central documentation, which is:

  • LCP Good: <=2,5detik
  • LCP Need Improvements: <=4 detik
  • LCP Poor: >4 second

Ways to improving website elements to get a good LCP score:

1. Using modern image formats

Most web developers without SEO knowledge will ignore the results of web performance testing because it will add work and take time. Unlike the case with programmers who understand the basics of SEO, with all their efforts, they will implement it so that the resulting website gets good appreciation from consumers and website users in the future. The modern image format is WebP, which is supported by modern browsers. Webp format is recommended for websites instead of .jpg because it has a smaller file size.

2. Using responsive images

Responsive images tell the browser that there are several image options, and the browser will present an image that matches the screen used to visit the website. The element used is the srcset attribute of the img element, for example:

Web pages use the element or the srcset attribute of the img element to specify responsive images. However, some browsers and crawlers need help understanding this attribute. You should always specify the fallback URL via the src attribute.

  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="flowers.webp">
  <img src="flowers.png" alt="flowers">


  srcset="flowers-320w.jpg 320w, flowers-480w.jpg 480w, flowers-800w.jpg 800w"
  sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"

3. Delete unused Scripts and Stylesheets.

If the website development stage uses a front-end framework, it is important to be efficient so that scripts or CSS files not needed in the page rendering process do not burden the loading process. This stage is the most difficult to do, requiring extra work.

4. Minify and Compress Scripts and CSS

Scripts with a large size can be minimized by minifying the script or CSS style so that the download time does not interfere with the website element rendering process.

5. Defer non-critical CSS

Separate Scripts and Stylesheets are needed in the primary element rendering process that must be downloaded at the beginning, and styles can be downloaded after the rendering process is complete In the process, so that page rendering is not hampered, defer non-critical CSS can increase the process of the website page rendering.


Fixing a website that has LCP problems is complex and influenced by many factors. Customers who want to create a website should consider choosing SEO-friendly website development service agency with good performance so that users get the maximum experience.