Rick Viscomi
GitHub
Родитель
5c638ab024
Коммит
53edd6d894
13
README.md
13
README.md
|
|
@ -16,10 +16,6 @@ It also supports the diagnostic metrics:
|
|||
* [Time to First Byte](https://web.dev/articles/ttfb)
|
||||
* [First Contentful Paint](https://web.dev/articles/fcp)
|
||||
|
||||
And finally, it temporarily supports the following deprecated metrics:
|
||||
|
||||
* [First Input Delay](https://web.dev/articles/fid)
|
||||
|
||||
<h3 id="install">Installation Instructions</h3>
|
||||
|
||||
The Web Vitals Chrome Extenstion can be installed from the [Chrome Web Store](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma).
|
||||
|
|
@ -60,9 +56,9 @@ If one or more metrics are failing, the badge will animate the values of these m
|
|||
|
||||
Clicking the Ambient badge icon will allow you to drill in to the individual metric values. In this mode, the extension will also say if a metric requires a user action.
|
||||
|
||||
For example, Interaction to Next Paint requires a real interaction (e.g click/tap) with the page and will be in a `Waiting for input...` state until this is the case. We recommend consulting the web.dev documentation for [LCP](https://web.dev/articles/lcp), [CLS](https://web.dev/articles/cls), [FID](https://web.dev/articles/fid), and [INP](https://web.dev/articles/inp) to get an understanding of when metric values settle.
|
||||
For example, Interaction to Next Paint requires a real interaction (e.g click/tap) with the page and will be in a `Waiting for input...` state until this is the case. We recommend consulting the web.dev documentation for [LCP](https://web.dev/articles/lcp), [CLS](https://web.dev/articles/cls), and [INP](https://web.dev/articles/inp) to get an understanding of when metric values settle.
|
||||
|
||||
As of version 1.0.0, the popup combines your local Core Web Vitals experiences with real-user data from the field via the [Chrome UX Report](https://developer.chrome.com/docs/crux) (CrUX) [API](https://developer.chrome.com/docs/crux/api). This integration gives you contextual insights to help you understand how similar your individual experiences are to other desktop users on the same page. We've also added a new option to "Compare local experiences to phone field data" instead, if needed. Note that CrUX data may not be available for some pages, in which case we try to load field data for the origin as a whole.
|
||||
The popup combines your local Core Web Vitals experiences with real-user data from the field via the [Chrome UX Report](https://developer.chrome.com/docs/crux) (CrUX) [API](https://developer.chrome.com/docs/crux/api). This integration gives you contextual insights to help you understand how similar your individual experiences are to other desktop users on the same page. We've also added a new option to "Compare local experiences to phone field data" instead, if needed. Note that CrUX data may not be available for some pages, in which case we try to load field data for the origin as a whole.
|
||||
|
||||
<img src="media/cwv-extension-screenshot.png" width="75%">
|
||||
|
||||
|
|
@ -86,7 +82,7 @@ The console logging feature of the Web Vitals extension provides a diagnostic vi
|
|||
* Check `Console logging` and click 'Save'
|
||||
* Open the Console panel in DevTools and filter for `Web Vitals`
|
||||
|
||||
To filter out unneeded metrics, prepend a minus sign to the metric name. For example, set the filter to `Web Vitals Extension -CLS -FID` to filter out CLS and FID diagnostic info.
|
||||
To filter out unneeded metrics, prepend a minus sign to the metric name. For example, set the filter to `Web Vitals Extension -CLS -LCP` to filter out CLS and LCP diagnostic info.
|
||||
|
||||
Diagnostic info for each metric is logged as a console group prepended by the extension name, `[Web Vitals Extension]`, meaning that you will need to click this line in order to toggle the group open and closed.
|
||||
|
||||
|
|
@ -100,7 +96,7 @@ The kinds of diagnostic info varies per metric. For example, the LCP info includ
|
|||
|
||||
### User Timings
|
||||
|
||||
For some metrics (LCP, FID, and INP) the breakdowns can be saved to User Timing marks, using `performance.measure` which are then [viewable in DevTools Performance traces](https://developer.chrome.com/docs/devtools/performance-insights/#timings).
|
||||
For some metrics (LCP and INP) the breakdowns can be saved to User Timing marks, using `performance.measure` which are then [viewable in DevTools Performance traces](https://developer.chrome.com/docs/devtools/performance-insights/#timings).
|
||||
|
||||
For the other metrics, Chrome DevTools normally provides sufficient information so additional breakdowns are not necessary.
|
||||
|
||||
|
|
@ -134,7 +130,6 @@ We are making available a set of guides for optimizing each of the Core Web Vita
|
|||
|
||||
* [Optimize CLS](https://web.dev/articles/optimize-cls)
|
||||
* [Optimize LCP](https://web.dev/articles/optimize-lcp)
|
||||
* [Optimize FID](https://web.dev/articles/optimize-fid)
|
||||
* [Optimize INP](https://web.dev/articles/optimize-inp)
|
||||
* [Optimize TTFB](https://web.dev/articles/optimize-ttfb)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
.web-vitals-chrome-extension-popup {
|
||||
width: 560px;
|
||||
height: 600px;
|
||||
|
||||
font-size: 12px;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import {CLSThresholds, FCPThresholds, FIDThresholds, INPThresholds, LCPThresholds, TTFBThresholds} from './web-vitals.js';
|
||||
import {CLSThresholds, FCPThresholds, INPThresholds, LCPThresholds, TTFBThresholds} from './web-vitals.js';
|
||||
|
||||
const assessments = {
|
||||
'good': 0,
|
||||
|
|
@ -137,7 +137,6 @@ export class Metric {
|
|||
static mapCruxNameToId(cruxName) {
|
||||
const nameMap = {
|
||||
'largest_contentful_paint': 'lcp',
|
||||
'first_input_delay': 'fid',
|
||||
'interaction_to_next_paint': 'inp',
|
||||
'cumulative_layout_shift': 'cls',
|
||||
'first_contentful_paint': 'fcp',
|
||||
|
|
@ -186,34 +185,6 @@ export class LCP extends Metric {
|
|||
|
||||
}
|
||||
|
||||
export class FID extends Metric {
|
||||
|
||||
constructor({local, background, rating}) {
|
||||
const thresholds = {
|
||||
good: FIDThresholds[0],
|
||||
poor: FIDThresholds[1]
|
||||
};
|
||||
|
||||
super({
|
||||
id: 'fid',
|
||||
name: 'First Input Delay',
|
||||
local,
|
||||
background,
|
||||
thresholds,
|
||||
rating
|
||||
});
|
||||
}
|
||||
|
||||
formatValue(value) {
|
||||
if (value === null) {
|
||||
return 'Waiting for input…';
|
||||
}
|
||||
|
||||
return millisecondsFormatter.format(value);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export class INP extends Metric {
|
||||
|
||||
constructor({local, background, rating}) {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
|
||||
import { loadLocalMetrics, getOptions, getURL } from './chrome.js';
|
||||
import { CrUX } from './crux.js';
|
||||
import { LCP, FID, INP, CLS, FCP, TTFB } from './metric.js';
|
||||
import { LCP, INP, CLS, FCP, TTFB } from './metric.js';
|
||||
|
||||
class Popup {
|
||||
|
||||
|
|
@ -75,11 +75,6 @@ class Popup {
|
|||
rating: this._metrics.inp.rating,
|
||||
background: this.background
|
||||
});
|
||||
this.metrics.fid = new FID({
|
||||
local: this._metrics.fid.value,
|
||||
rating: this._metrics.fid.rating,
|
||||
background: this.background
|
||||
});
|
||||
this.metrics.fcp = new FCP({
|
||||
local: this._metrics.fcp.value,
|
||||
rating: this._metrics.fcp.rating,
|
||||
|
|
|
|||
|
|
@ -93,10 +93,6 @@
|
|||
value: null,
|
||||
rating: null,
|
||||
},
|
||||
fid: {
|
||||
value: null,
|
||||
rating: null,
|
||||
},
|
||||
inp: {
|
||||
value: null,
|
||||
rating: null,
|
||||
|
|
@ -253,9 +249,6 @@
|
|||
break;
|
||||
case 'INP':
|
||||
case 'Interaction':
|
||||
case 'FID':
|
||||
formattedValue = millisecondsFormatter.format(metric.value);
|
||||
break;
|
||||
default:
|
||||
formattedValue = secondsFormatter.format(metric.value / 1000);
|
||||
}
|
||||
|
|
@ -375,12 +368,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
else if (metric.name == 'FID') {
|
||||
const eventEntry = metric.attribution.eventEntry;
|
||||
console.log('Interaction target:', eventEntry.target);
|
||||
console.log(`Interaction type: %c${eventEntry.name}`, 'font-family: monospace');
|
||||
}
|
||||
|
||||
else if (metric.name == 'TTFB' &&
|
||||
metric.attribution &&
|
||||
metric.attribution.navigationEntry) {
|
||||
|
|
@ -463,17 +450,6 @@
|
|||
end: interactionTime + inputDelay + processingDuration + presentationDelay,
|
||||
});
|
||||
break;
|
||||
|
||||
case "FID":
|
||||
if (!(metric.attribution && metric.attribution.interactionEntry)) {
|
||||
break;
|
||||
}
|
||||
|
||||
const fidEntry = metric.attribution.interactionEntry;
|
||||
performance.measure(`${LOG_PREFIX} FID (${fidEntry.name})`, {
|
||||
start: fidEntry.startTime,
|
||||
end: fidEntry.processingStart,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -517,7 +493,6 @@
|
|||
}, { reportAllChanges: true });
|
||||
|
||||
webVitals.onLCP(broadcastMetricsUpdates, { reportAllChanges: true });
|
||||
webVitals.onFID(broadcastMetricsUpdates, { reportAllChanges: true });
|
||||
webVitals.onINP((metric) => {
|
||||
broadcastMetricsUpdates(metric)
|
||||
}, { reportAllChanges: true });
|
||||
|
|
@ -572,17 +547,6 @@
|
|||
}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lh-metric lh-metric--${metrics.fid.rating} lh-metric--${metrics.fid.value === null ? 'waiting' : 'ready'}">
|
||||
<div class="lh-metric__innerwrap">
|
||||
<span class="lh-metric__title">
|
||||
First Input Delay
|
||||
<span class="lh-metric-state">${metrics.fid.value === null ? '(waiting for input)' : ''}</span>
|
||||
</span>
|
||||
<div class="lh-metric__value">${
|
||||
metrics.fid.value === null ? '' : `${millisecondsFormatter.format(metrics.fid.value)}`
|
||||
}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lh-metric lh-metric--${metrics.fcp.rating}">
|
||||
<div class="lh-metric__innerwrap">
|
||||
<div>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче