Skip to main content

Setting up Core Web Vitals support with Kuroco

What are Core Web Vitals?​

Web Vitals are Google's indicators of website health.
Core Web Vitals refer to the LCP (largest contentful paint), FID (first input delay), and CLS (cumulative layout shift), the three most important Web Vitals.

LCP (largest contentful paint)​

The LCP indicators the maximum visual content display time, or the time it takes for the main and the largest content on the page to be displayed. An LCP of under 2.5 seconds is considered "good".
The following factors are used to measure the LCP:

  • The <img> element
  • The <image> element in a <svg> element
  • The <video> element
  • Background images loaded using the url() CSS function
  • Block-level elements containing text nodes or other child elements of inline-level texts

FID (first input delay)​

The FID indicates the delay time to first input, or the browser reaction time from when a user first interacts with a page (e.g., clicks a link/button, presses a key).
Note that scrolling and zooming in/out are excluded from this measurement. A response time of 0.1 second or less is considered "good.

CLS (cumulative layout shift)​

The CLS indicates the cumulative number of layout shifts, or unexpected shifts in the web elements during the loading of the page.
A CLS score of 0.1 or less is considered "good".
Common examples of layout shifts include images that change positions every time they are loaded, as well as JavaScript or CSS that load content asynchronously, causing other elements to become misaligned.

Impact on SEO​

Core Web Vitals are part of the page experience signals used by Google for evaluating search results. Therefore, they can affect SEO (search engine optimization) ranking.
Other page experience signals of a website include:

  • Mobile compatibility
  • If the content is served over HTTPS
  • Presence of interstitial pages (e.g., advertisements)

Tools for measuring Core Web Vital scores​

Core Web Vitals scores can be measured using Google tools such as Lighthouse, PageSpeed Insights, and Search Console.

Improving Core Web Vital scores​

LCP score​

Possible causes of a low LCP score:

  • Long server response time
  • JavaScript and CSS interfering with rendering
  • Slow loading of resource files such as JavaScript, CSS, and images
  • Client-side rendering

Effective ways to increase the score:

  • Reduce server response time
  • Cut down on JavaScript and CSS that interfere with rendering
  • Improve resource file loading (e.g., by reducing file size)
  • Improve the order in which external files are loaded (e.g., by specifying <link rel="preconnect">)
  • Improve rendering methods

Increase your LCP score easily with Kuroco​

Since Kuroco uses CDNs, resource files such as JavaScript, CSS, and images can be delivered at high speed. In this way, server response time is no longer an issue.
You can also cache API responses by configuring the cache settings as appropriate.
Furthermore, Kuroco supports image delivery in the next-generation format .webp, along with URL parameter-based resizing.
With proper coding, you can also easily improve resource file size and loading.

FID score​

Possible causes of a low FID score:

  • Unnecessary code in the JavaScript and CSS, leading to bloated file sizes
  • Long execution time due to JavaScript logic problems
  • Impact from third-party JavaScript such as ads or SNS buttons
  • High number of requests due to coding problems or site requirements

Effective ways to increase the score:

  • Improve JavaScript logic to reduce processing time
  • Reduce or asynchronously load third-party scripts
  • Reduce the number of requests and adjust the resource loading order to reduce wait time

Increase your FID score easily with Kuroco​

Being a headless CMS with an API-centric design, Kuroco is compatible with JavaScript frameworks such as Nuxt.js and Next.js.
Moreover, KurocoFront's hosting capabilities enable high-speed delivery of static content using CDNs.
With Kuroco and JavaScript frameworks, you can build websites with good FID scores.
Raising LCP and CLS scores will also improve the FID. Therefore, unless you have a complex site, you can leave FID adjustments for last.

CLS score​

Possible causes of a low CLS score:

  • The sizes of <img> or <video> elements have not been specified
  • The sizes of embedded elements such as ads and <iframe> have not been specified
  • Content is loaded dynamically
  • FOUT (flash of unstyled text, or flickering) due to web font loading delays

Effective ways to increase the score:

  • Set the width and height for the <img> and <video> elements
  • Set the loading size of embedded ads, <iframe> elements, and dynamic content, or reserve space for them in advance using CSS
  • Optimize loading of web fonts (e.g., by specifying <link rel="preload">)

Increase your CLS score easily with Kuroco​

Kuroco allows dynamic conversion by adding a parameter to the image URL.
Besides specifying the size of the <img> element, you can also deliver fixed-size images by setting the width parameter in the image URL.

You can also define responsive images of uniform resolution by combining srcset and width in the image URL as shown below:

<picture>
  <source media="(max-width: 799px)" srcset="example.jpg?width=400" /><!-- For display on devices with a viewport width of 799px or lower -->
  <source media="(min-width: 800px)" srcset="example.jpg?width=800" /><!-- For display on devices with a viewport width of 800px or higher -->
  <img src="example.jpg" alt="Sample image" />
</picture>

More information​

This tutorial provided a general overview of Core Web Vitals. To learn more about the specific topics covered here, refer to the links below:

Web and Core Web Vitals

LCP (largest contentful paint)

FID (first input delay)

CLS (cumulative layout shift)

Dynamic image conversion

Support

If you have any other questions, please contact us or check out Our Slack Community.

Contact form
Join Kuroco Slack community