Contentful Video

[Gaynelle Alnutt]

Historically, it's been a challenge for web developers to measure how quickly the main content of a web page loads and is visible to users. Older metrics like load or DOMContentLoaded don't work well because they don't necessarily correspond to what the user sees on their screen. And newer, user-centric performance metrics like First Contentful Paint (FCP) only capture the very beginning of the loading experience. If a page shows a splash screen or displays a loading indicator, this moment isn't very relevant to the user.

Based on discussions in the W3C Web Performance Working Group and research done at Google, we've found that a more accurate way to measure when the main content of a page is loaded is to look at when the largest element is rendered.

To provide a good user experience, sites should strive to have Largest Contentful Paint of 2.5 seconds or less. To ensure you're hitting this target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.

Note that restricting the elements to this limited set was intentional in order to keep things simple in the beginning. Additional elements (like the full support) may be added in the future as more research is conducted.

These "contentful" heuristics may differ from those used by First Contentful Paint (FCP), which may consider some of these elements, such as placeholder images or full viewport images, even if they are ineligible to be LCP candidates. Despite both using "contentful" in their name, the aim of these metrics is different. FCP measures when any content is painted to screen and LCP when the main content is painted so LCP is intented to be more selective.

The size of the element reported for LCP is typically the size that's visible to the user within the viewport. If the element extends outside of the viewport, or if any of the element is clipped or has non-visible overflow, those portions don't count toward the element's size.

To handle this potential for change, the browser dispatches a PerformanceEntry of type largest-contentful-paint identifying the largest contentful element as soon as the browser has painted the first frame. But then, after rendering subsequent frames, it will dispatch another PerformanceEntry any time the largest contentful element changes.

An element can only be considered the largest contentful element after it has rendered and is visible to the user. Images that haven't yet loaded aren't considered "rendered". Neither are text nodes using web fonts during the font block period. In such cases, a smaller element might be reported as the largest contentful element, but as soon as the larger element finishes rendering, another PerformanceEntry is created.

In addition to late-loading images and fonts, a page may add new elements to the DOM as new content becomes available. If any of these new elements is larger than the previous largest contentful element, a new PerformanceEntry will also be reported.

The browser will stop reporting new entries as soon as the user interacts with the page (via a tap, scroll, or keypress), as user interaction often changes what's visible to the user (which is especially true with scrolling).

For security reasons, the render timestamp of images is not exposed for cross-origin images that lack the Timing-Allow-Origin header. Instead, only their load time is exposed (since this is already exposed through many other web APIs).

To keep the performance overhead of calculating and dispatching new performance entries low, changes to an element's size or position don't generate new LCP candidates. Only the element's initial size and position in the viewport is considered.

This means images that are initially rendered off-screen and then transition on-screen may not be reported. It also means elements initially rendered in the viewport that then get pushed down, out of view will still report their initial, in-viewport size.

In both of the timelines above, the largest element changes as content loads. In the first example, new content is added to the DOM and that changes what element is the largest. In the second example, the layout changes and content that was previously the largest is removed from the viewport.

While it's often the case that late-loading content is larger than content already on the page, that's not necessarily the case. The next two examples show the LCP occurring before the page fully loads.

In the first example, the Instagram logo is loaded relatively early and it remains the largest element even as other content is progressively shown. In the Google Search results page example, the largest element is a paragraph of text that is displayed before any of the images or logo finish loading. Since all the individual images are smaller than this paragraph, it remains the largest element throughout the load process.

To measure LCP in JavaScript, you can use the Largest Contentful Paint API. The following example shows how to create a PerformanceObserver that listens for largest-contentful-paint entries and logs them to the console.

In some cases the most important element (or elements) on the page is not the same as the largest element, and developers may be more interested in measuring the render times of these other elements instead. This is possible using the Element Timing API, as described in the article on custom metrics.

Occasionally, bugs are discovered in the APIs used to measure metrics, and sometimes in the definitions of the metrics themselves. As a result, changes must sometimes be made, and these changes can show up as improvements or regressions in your internal reports and dashboards.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

@garima Interesting! Sorry about that. Could you check again please? We recently fixed a bug that might have been related to that empty state you saw. However, I am still having the original data binding issue.

I want to clarify that I am only having this issue binding to Builder and Contentful data when in a Symbol. When I bind to the same data on a Page, then it works as expected.

@lburtness Since the issue with contentful data binding is only when using symbols so please try to enable the inherit state for the symbol. I think this should fix the issue as you are using dynamic bound to state for locale and nested symbols.

Contentful provides content infrastructure for digital teams to power websites, apps, and devices. Unlike a CMS, Contentful was built to integrate with the modern software stack. It offers a central hub for structured content, powerful management and delivery APIs, and a customizable web app that enables developers and content creators to ship their products faster.

This library can also be used with the Preview API. In order to do so, you need to use the Preview API Access token, available on the same page where you get the Delivery API token, and specify the host of the preview API, such as:

You can create API keys using the Contentful web interface. Go to the app, open the space that you want to access (top left corner lists all the spaces), and navigate to the APIs area. Open the API Keys section and create your first token. Done.

To help you get the most out of this library, we've prepared all available client configuration options, a reference documentation, tutorials and other examples that will help you learn and understand how to use this library.

The contentful.js library returns calls to sync, parseEntries, getEntries, getEntry, getAssets and getAsset in different shapes, depending on the configurations listed in the respective sections below.

In order to provide type support for each configuration, we provide the possibility to chain modifiers to the Contentful client, providing the correct return types corresponding to the used modifiers.

We want to provide a safe, inclusive, welcoming, and harassment-free space and experience for all participants, regardless of gender identity and expression, sexual orientation, disability, physical appearance, socioeconomic status, body size, ethnicity, nationality, level of experience, age, religion (or lack thereof), or other identity markers.

Hey guys I know webflow is suppose to come out with and update that will blow us away when it comes to some type of CMS for webflow hosted sites. But has anybody used contentful.com? It seems like it would work will for our Church site. We have the need for a lot of dynamic stuff like events and media content. And the idea of using their API to pull that content into a webflow site sounds really good. If you have tried it I would love to know your thoughts.

These metrics, in conjunction with the metrics that Browser already collects, such as DomContentLoaded, are an effective gauge of when users perceive that your pages are beginning to render. As above-the-fold content is a critical part of user experience, you can also measure first paint and first contentful paint against metrics such as time-to-first-byte (backendDuration) to measure the latency between server-side rendering and the client-side rendering.

The following examples show New Relic Query Language (NRQL) queries that you can use to build dashboard widgets that track these new metrics. They also illustrate an alert policy, created using New Relic Alerts, that triggers alerts when values for these metrics fall under a defined threshold. The widgets can be used in New Relic One dashboards or in Insights.

Mat Ball is a product marketing manager at New Relic focused on the impact of frontend web applications to business and customer experience outcomes. Previously, Mat worked for SOASTA, where he marketed their data science product.

c80f0f1006