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:
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:
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.
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.
<picture>
<source type="image/svg+xml" srcset="pyramid.svg">
<source type="image/webp" srcset="flowers.webp">
<img src="flowers.png" alt="flowers">
</picture>
Or
<img
srcset="flowers-320w.jpg 320w, flowers-480w.jpg 480w, flowers-800w.jpg 800w"
sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
src="flowers-800w.jpg"
alt="flowers">
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.
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.
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.
Summary
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.
LIFE’S ONLY DIRECTION, FORWARD.
