Core Web Vitals Annotations
Item logo image for Core Web Vitals Annotations

Core Web Vitals Annotations

Featured
5.0(

1 rating

)
Item media 1 screenshot
Item media 2 screenshot

Overview

Annotate a website with the Core Web Vitals

This extension will overlay annotations onto your website to highlight page attributes that had an impact on the Core Web Vitals performance metrics, First Input Delay (FID), Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS). It also reports the Core Web Vitals metrics for the page, using Google's recommended color-coded thresholds. Two types of annotations will be overlaid onto elements of a webpage: 1. Elements that had layout shift and contributed to the Cumulative Layout Shift score. Depending on the severity of the shift, the annotations will be color coded from lowest impact to highest - yellow -> orange -> dark orange -> red. In the upper left hand corner of each annotation you will find the shift score. 2. The element with the Largest Contentful Paint will be highlighted with a dashed purple annotation. It will include the paint time in the upper left hand corner of the annotation. The extension popup should open a grid with the FID, LCP and CLS metric timings. At the bottom of the popup is a button to remove the annotations from the website. Except for the Largest Contentful Paint, the Core Web Vitals metrics are user initiated. Take note of the following when you use the plugin and debug your website: - The First Input Delay is captured after a user clicks or taps a key on the webpage. If you open the extension before one of those actions, then you will notice that the metric is missing from the grid. To get the First Input Delay, close the extension, make a user action on the page, and then reopen. - Cumulative Layout Shift is an accumulation of shifts on the page. As you scroll through the page, you may see additional shifts and the extension will add new annotations dynamically. The popup grid that reports the total score will also increase as more shifts accrue. - Cumulative Layout Shift annotations highlight an element that moved, **not the element that caused the shift**. For example, if an ad loads late on the page, it may push some elements below it downward, causing a shift. The elements below the ad will likely be highlighted, and possibly the ad. - Given the ad example above, multiple elements on the page may have been shifted after the ad loaded. In that case, only one shift score will be recorded, but all of the affected elements will be highlighted with an annotation. In this case, you should see an arrow (↳) next to the annotated shift score which denotes a grouping of elements that shifted together.

5 out of 51 rating

Google doesn't verify reviews. Learn more about results and reviews.

Review's profile picture

Stian LifeOct 23, 2021

Works as shown, great tool!

Details

  • Version
    0.0.2
  • Updated
    February 24, 2021
  • Offered by
    delambo
  • Size
    191KiB
  • Languages
    English
  • Developer
    Email
    delambo@gmail.com
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

The developer has disclosed that it will not collect or use your data.

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes

Support

For help with questions, suggestions, or problems, visit the developer's support site

Related

Core SERP Vitals

3.3(13)

Show the Core Web Vitals data from the Chrome User Experience Report in the Google Search Results.

AMP Validator

4.2(95)

Automatically checks each page for AMP validation.

Robots Exclusion Checker

5.0(27)

Live URL checks against robots.txt, meta robots, x-robots-tag & canonical tags. Simple Red, Amber & Green status. An SEO Extension.

Web Vitals

4.1(40)

Measure metrics for a healthy site

Core Web Vitals

5.0(5)

This extension measures Google Core Web Vital Scores

CLS Visualizer

4.4(11)

Visualizer the CLS of any webpage

LCP & CLS Monitor

0.0(0)

Core Web Vitals Largest Contentful Paint and Cumulative Layout Shift Monitor

Core Web Vitals Inspector

0.0(0)

Find scrips that bring down your Core Web Vitals scores

Core Web Vitals Visualizer

5.0(10)

Visualize the Core Web Vitals of any webpage

SpeedVitals

5.0(9)

Perform Web Vitals & TTFB Test on Multiple Locations & Devices

SEO Pro Extension

4.8(75)

Are you ready to save at least 5 hours/week on daily SEO checks? If your answer is yes, then SEO Pro is exactly what you need.…

Web Vitals Tester

5.0(1)

Analyze Web Vitals score and diagnostic

Core SERP Vitals

3.3(13)

Show the Core Web Vitals data from the Chrome User Experience Report in the Google Search Results.

AMP Validator

4.2(95)

Automatically checks each page for AMP validation.

Robots Exclusion Checker

5.0(27)

Live URL checks against robots.txt, meta robots, x-robots-tag & canonical tags. Simple Red, Amber & Green status. An SEO Extension.

Web Vitals

4.1(40)

Measure metrics for a healthy site

Core Web Vitals

5.0(5)

This extension measures Google Core Web Vital Scores

CLS Visualizer

4.4(11)

Visualizer the CLS of any webpage

LCP & CLS Monitor

0.0(0)

Core Web Vitals Largest Contentful Paint and Cumulative Layout Shift Monitor

Core Web Vitals Inspector

0.0(0)

Find scrips that bring down your Core Web Vitals scores

Google apps