Core Web Vitals Annotations
Annotate a website with the Core Web Vitals
Core Web Vitals Annotations란 무엇입니까?
Core Web Vitals Annotations은(는) delambo에 의해 개발된 Chrome 확장 프로그램으로, 주요 기능은 "Annotate a website with the Core Web Vitals"입니다.
확장 프로그램 스크린샷
Core Web Vitals Annotations 확장 프로그램 CRX 파일 다운로드
크롬 확장 프로그램을 crx 형식으로 다운로드하여 브라우저에 수동으로 설치하거나 crx 파일을 친구들과 공유하여 쉽게 크롬 확장 프로그램을 설치하세요.
확장 프로그램 사용 설명서
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. 확장 프로그램 기본 정보
| 이름 |  Core Web Vitals Annotations |
| ID | gjegofcnbogmeijackegenkifhkgkigi |
| 공식 URL | https://chromewebstore.google.com/detail/core-web-vitals-annotatio/gjegofcnbogmeijackegenkifhkgkigi |
| 설명 | Annotate a website with the Core Web Vitals |
| 파일 크기 | 191 KB |
| 설치 횟수 | 2,072 |
| 현재 버전 | 0.0.2 |
| 최근 업데이트 | 2021-02-24 |
| 출시 날짜 | 2021-02-23 |
| 평점 | 5.00/5 총 1 개의 평점 |
| 개발자 | delambo |
| 이메일 | [email protected] |
| 결제 유형 | free |
| 도움말 페이지 URL | https://github.com/delambo/core-web-vitals-annotations |
| 지원되는 언어 | en |
| manifest.json | |
{
"update_url": "https:\/\/clients2.google.com\/service\/update2\/crx",
"description": "Annotate a website with the Core Web Vitals",
"version": "0.0.2",
"name": "Core Web Vitals Annotations",
"permissions": [
"activeTab"
],
"content_security_policy": "style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-eval'; object-src 'self';",
"manifest_version": 2,
"browser_action": {
"default_popup": "popup.html",
"default_icon": {
"128": "images\/logo-128x128.png"
}
},
"icons": {
"16": "images\/logo-16x16.png",
"32": "images\/logo-32x32.png",
"48": "images\/logo-48x48.png",
"128": "images\/logo-128x128.png"
}
} | |
