Jake is the CEO of edge mesha global web acceleration company empowering ecommerce brands to deliver faster, more streamlined websites.
getty
Running a successful business in 2022 means standing in front of as many potential customers as possible. Google helps you do that for free by presenting your website to its users, who are more than performing 8.5 billion daily searches. The catch: Google wants you to earn that spot on search engine page results (SERPs) by providing the best customer experiences.
google introduced Core Web Vitals in May 2020 as a guide to evaluating the three core components of a website: speed, interactivity, and stability. Websites that excel in these areas score higher on the SERPs.
What are Core Web Vitals?
These are a series of page experience signals that Google uses to evaluate the overall performance of a website. They measure user interactions with websites by page speed and user experience. There are three Core Web Vital metrics that Google uses to evaluate each website: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and First Input Delay (FID).
1. Biggest content-rich paint
LCP measures how long it takes for the largest content element on a website to be visible in the user’s viewport, that is, what is readable by the user. Unless the LCP is loading, users may not be able to interact with the website. This is because the LCP is always above the fold, the content that users can see without scrolling. Bad LCP means that users can’t interact with your website, ruining the user experience and possibly the customer relationship.
A “Good” LCP score is less than or equal to 2.5 seconds. “Need improvement” is less than or equal to 4 seconds and “Bad” is more than 4 seconds. Google recommends aiming for an LCP score of 2.5 seconds or less 75% of the time.
How to fix a bad LCP
• Implement lazy loading images.
Loading all elements at the same time will affect the LCP, especially if the size of the largest content block is not optimized. One way to fix this is to prioritize images above the fold. “Lazy loading images” means that images are loaded asynchronously on your website so that above-the-fold content doesn’t fully load until it’s displayed in the browser’s viewport.
In other words, with lazy loading, all other elements on the website will not load until the user scrolls to their location. This technique is recommended for websites with many visual elements.
• Defer JavaScript.
Suspend Javascript (JS) files while loading pages until the page is fully rendered. This is to allow the browser to parse the HTML to build a document object model (DOM) tree for the web page without interruption. Once this is done, the deferred JS will be loaded.
Tip: You can defer javascript from the backend of your website by adding a defer attribute:
• Defer non-critical CSS.
Defer any CSS that are not required for the website to display or function successfully. After that, you can put critical CSS directly into the HTML
insert structure so that above-the-fold resources are displayed quickly.2. Cumulative Layout Shift
The CLS measures the visual stability of the content on the website without user interaction. Unexpected changes in the content of a website are, for example, layout shifts. A “Good” CLS score is less than or equal to 0.1 second (100 milliseconds); “Need to improve” is less than or equal to 0.25 seconds (250 milliseconds); and “Bad” is more than 0.25 seconds.
How to fix a bad CLS?
• Set aspect ratios for visual elements.
Visual elements (videos and images) tend to shift based on the user’s device and screen size. A quick fix is ​​to specify the width and height attributes of the visual before uploading it to your site so it won’t be scaled incorrectly between device types.
• Preload web fonts.
Unexpected font shifts during page load are common reasons for a bad CLS. This can be a visible change from default to custom font like Flash or Unstyled Text (ERROR) or a blank screen with instances of Flash or Invisible Text (FOIT). An easy solution is to preload fonts for other resources so that users know that your website is interactive. Google recommends using the Font loading API to tell browsers to start fetching font resources immediately.
3. First Entry Delay
The FID measures the time from the user’s first interaction (for example, clicking on a link or tapping a button) until the browser responds. This is solely intended to measure the responsiveness of websites to a visitor’s action. FID is based on “first entry”, which means that users must perform an action on the website before it exists. If a visitor scrolls on a website but does not take any action, there is no FID.
The website’s FID score is based on that of Google Response, Animation, Idle and Loading (RAIL) model for measuring user experience with websites. A “Good” score is less than or equal to 100 milliseconds, “Need to improve” is less than or equal to 300 milliseconds, and “Bad” is more than 300 milliseconds.
How to fix a bad FID?
• Speed ​​up JavaScript tasks.
Excessive JS tasks block the browser’s main thread, making it difficult to process new requests. An easy way to solve this is to encode JS jobs into smaller bits that can be run and run quickly on the main thread. Google recommends performing tasks on the main thread under 50 milliseconds to ensure a visible response within 100 milliseconds and minimize noticeable delay.
• Limit the use of polyfills.
Polyfill is a code that helps provide features of new browsers on old browsers that don’t support them. Polyfills allow websites to function on old and new browsers. Excessive use of polyfills results in an excess of JavaScript blocking the main thread. This then reduces the response to the user’s first input delay. Ideally, polyfills should only be used depending on the browser type, not every time.
Overall, Google’s Core Web Vitals have paved a path for website owners, allowing online retailers to tailor their website optimization strategies to the user experience. By considering Core Web Vitals’ core metrics—and how they can be improved—businesses can improve the website experience for visitors and drive more conversions as a result.
https://cafe-madrid.com/ Business Council is the leading growth and networking organization for entrepreneurs and leaders. Am I eligible?