InteractionContentfulPaint: largestContentfulPaint-Eigenschaft
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more browser support for this feature? Tell us why.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Die schreibgeschützte largestContentfulPaint-Eigenschaft der PerformanceSoftNavigation-Schnittstelle gibt die aktuelle größte LargestContentfulPaint zurück, die für diese Soft-Navigation relevant ist.
Diese kann zwischen zwei InteractionContentfulPaint-Einträgen für die gleiche Interaktion gleich bleiben, wenn ein neuer contentreicher Paint kleiner als der aktuelle größte contentreiche Paint für diese Interaktion ist. Wenn Sie diese API verwenden, um die Largest Contentful Paint (LCP) für Soft-Navigationsvorgänge zu messen, ist möglicherweise nur der größte Paint für Sie von Interesse.
Beachten Sie, dass in aktuellen Implementierungen InteractionContentfulPaint auf steigende Paint-Größen beschränkt ist, sodass sie zur Messung der Largest Contentful Paint (LCP) für Soft Navigations verwendet werden kann; der largestContentfulPaint-Wert sollte sich jedes Mal ändern. Die API wurde jedoch so konzipiert, dass alle Paints, die für eine Interaktion relevant sind, emittiert werden können, daher könnte sich dies ändern.
Wert
Ein LargestContentfulPaint-Objekt, das den größten contentreichen Paint (LCP) für diesen Interaction Contentful Paint darstellt.
Beispiele
Protokollierung der größten contentreichen Paint von InteractionContentfulPaint
In diesem Beispiel gibt der Aufruf von entry.largestContentfulPaint ein LargestContentfulPaint-Objekt zurück.
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
console.log(
"Interaction Contentful Paint:",
entry.startTime,
entry.largestContentfulPaint,
);
}
});
observer.observe({ type: "interaction-contentful-paint", buffered: true });
Um einen JSON-String zu erhalten, können Sie direkt JSON.stringify(entry) verwenden; dies ruft automatisch toJSON() auf.
Spezifikationen
| Spezifikation |
|---|
| Soft Navigations and Interaction Contentful Paint # dom-interactioncontentfulpaint-largestcontentfulpaint |