Core Web Vitals Annotations

Core Web Vitals Annotations插件简介

Core Web Vitals Annotations插件描述

This extension will overlay annotations onto your website to highlight page attributes that had an impact on the Ce Web Vitals perfmance metrics, First Input Delay (FID), Largest Contentful Paint (LCP)  Cumulative Layout Shift (CLS). It also repts the Ce Web Vitals metrics f the page, using Googles recommended colcoded thresholds.

Two types of annotations will be overlaid onto elements of a webpage:

1. Elements that had layout shift  contributed to the Cumulative Layout Shift sce. Depending on the severity of the shift, the annotations will be col coded from lowest impact to highest  yellow > ange > dark ange > red. In the upper left h cner of each annotation you will find the shift sce.

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 h cner of the annotation.

The extension popup should open a grid with the FID, LCP  CLS metric timings. At the bottom of the popup is a button to remove the annotations from the website.

Except f the Largest Contentful Paint, the Ce Web Vitals metrics are user initiated. Take note of the following when you use the plugin  debug your website:

 The First Input Delay is captured after a user clicks  taps a key on the webpage. If you open the extension befe 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,  then reopen.

  Cumulative Layout Shift is an accumulation of shifts on the page. As you scroll through the page, you may see additional shifts  the extension will add new annotations dynamically. The popup grid that repts the total sce will also increase as me shifts accrue.

 Cumulative Layout Shift annotations highlight an element that moved, **not the element that caused the shift**. F 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,  possibly the ad.

 Given the ad example above, multiple elements on the page may have been shifted after the ad loaded. In that , only one shift sce will be recded, but all of the affected elements will be highlighted with an annotation. In this , you should see an arrow (↳) next to the annotated shift sce which denotes a grouping of elements that shifted together.


                                

Core Web Vitals Annotations插件离线安装方法

1.首先用户点击谷歌浏览器右上角的自定义及控制按钮，在下拉框中选择设置。

2.在打开的谷歌浏览器的扩展管理器最左侧选择扩展程序或直接输入：chrome://extensions/

3.找到自己已经下载好的Chrome离线安装文件xxx.crx，然后将其从资源管理器中拖动到Chrome的扩展管理界面中，这时候用户会发现在扩展管理器的中央部分中会多出一个”拖动以安装“的插件按钮。

4.下载 Core Web Vitals AnnotationsChrome插件v0.0.2版本到本地。

5.勾选开发者模式，点击加载已解压的扩展程序，将文件夹选择即可安装插件。

注意：最新版本的chrome浏览器直接拖放安装时会出现“程序包无效CRX-HEADER-INVALID”的报错信息，参照这篇文章即可解决