Overview on Core Web Vitals.
Core Web Vitals are page experience signals that assess a website's user experience. Google considers Core Web Vitals to be a set of unique factors that contribute to a webpage's overall user experience. It contains the following metrics and focuses on three aspects of the user experience: loading, interactivity, and visual stability.
Largest Contentful Paint (LCP) measures how fast the largest element (images, videos, animations, text, etc.) can load and appear on a website.To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
Cumulative Layout Shift (CLS) ensures that a website's pages are without unexpected, confusing movements that might disturb users from consuming the content.To provide a good user experience, pages should maintain a CLS of less than 0.1.
First Input Delay (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. To provide a good user experience, pages should have a FID of less than 100 milliseconds.
We tried to improve CWV on our site ( https://www.inboundmantra.com/ ) built in Webflow.
These are the following ways by which we improved our score in Core Web Vitals.
1. Image Optimisation
a. Optimize and compress images
You can reduce the overall page size by compressing images with TinyPNG and kraken to improve your LCP results. Often try to save landscape images in jpg format and graphics in png format. Next-generation formats such as JPEG 2000, JPEG XR, and WebP can also be used, but we recommend doing some research first.
b. Apply lazy loading
Lazy loading allows you to load images while users scroll down the page, maintaining the website's loading speed and ensuring a high LCP score.
c. Adding width height attribute.
Often give images a width and height attribute so that the browser can reserve space before downloading them. Setting the correct width and height allows the browser to allocate the appropriate amount of space on the page while the element loads.
d. Proper Image formats
Often try to save landscape images in jpg format and graphics in png format. Next-generation formats such as JPEG 2000, JPEG XR, and WebP can also be used, but we recommend doing some research first.
2. Proper way to add css and JS file in template.
scripts that change the functionality of your page or that must be loaded in a certain order
<script src=”yourscript.js” defer></script>
The defer attribute instructs the browser to load the script in the background while the rest of the page renders, rather than waiting for it to load (which would “block” the page).
In HubSpot Instead of attaching the css and js file to template try to add in head with script and link tag.
3. Better way of building web elements.
a. Try to use the Img tag as featured element rather than background image for div.
Instead of using a background image for the div, use the img tag for images as the featured element. To boost the LCP performance, width and height attributes can be set, as well as lazy loading.
b. Low-contrast text.
Text with a low contrast ratio text whose brightness is too close to that of the background can be difficult to read. When light grey text is shown on a white background, for example, it is difficult for users to discern the shapes of the characters, which can minimise reading comprehension and slow reading speed.
Lighthouse flags text whose background and foreground colors don't have a sufficiently high contrast ratio.
c. Proper Heading hierarchy.
You will greatly enhance the navigation experience on your site for assistive technology users by using the right heading and landmark elements.
Lighthouse flags pages whose headings skip one or more levels.
For example, using an <h1> element for your page title and then using <h3> elements for the page's main sections will cause the audit to fail because the <h2> level is skipped:
d. Set Width and height for Iframe and video.
To improve CLS width and height for the Iframe and video needs to be specified to avoid load shift.
e. Do not add JS libraries globally.
Try to add JS libraries where it is used in individual templates and try to avoid adding globally.
f. Better font size and spacing in Mobile devices.
Reduce font size of heading and body content for better readability in mobile device and space between web elements and sections.