I’m Pete LePage, let’s dive in and see what’s
new for developers in Chrome 77!

Largest Contentful Paint

Understanding and measuring the real world performance of your site can be hard.
Metrics like load, or DOMContentLoaded, don’t tell you what the user is
seeing on screen. First Paint, and First Contentful Paint, only capture the
beginning of the experience. First Meaningful Paint is better, but it’s
complex, and sometimes wrong.

The Largest Contentful Paint API, available starting in Chrome 77, reports
the render time of the largest content element visible in the viewport and
makes it possible to measure when the main content of the page is loaded.

To measure the Largest Contentful Paint, you’ll need to use a Performance
Observer, and look for largest-contentful-paint events.

New forms capabilities

Many developers build custom form controls, either to customize the look and
feel of existing elements, or to build new controls that aren’t built in to
the browser. Typically this involves using JavaScript and hidden <input>
elements, but it’s not a perfect solution.

Two new web features, added in Chrome 77, make it easier to build custom form
controls, and remove the many of the existing limitations.

The formdata event

The formdata event is a low-level API that lets any JavaScript code
participate in a form submission. To use it, add a formdata event listener
to the form you want to interact with.

When the user clicks the submit button, the form fires the formdata event,
which includes a FormData object that holds all of the data being submitted.
Then, in your formdata event handler, you can update or modify the
formdata before it’s submitted.

Form-associated custom elements

Form-associated custom elements help to bridge the gap between custom elements
and native controls. Adding a static formAssociated property tells the browser
to treat the custom element like all other form elements. You should also add
common properties found on input elements, like name, value, and validity
to ensure consistency with native controls.

Native lazy loading

I’m not sure how I missed native lazy loading in my last video! It’s pretty
amazing, so I’m including it now. Lazy loading is a technique that allows
you to defer the loading of non-critical resources, like off-screen <img>'s,
or <iframe>'s - until they’re needed, increasing the performance of your page.

Starting in Chrome 76, the browser handles lazy loading for you, without the
need to write custom lazy loading code, or use a separate JavaScript library.

To tell the browser you want an image, or iframe lazy loaded, use the
loading=”lazy” attribute. Images and iframes that are “above the fold”
load normally. And those that are below, are only fetched when the user
scrolls near them.

And more!

These are just a few of the changes in Chrome 77 for developers, of course,
there’s plenty more.

The Contact Picker API, available as an
origin trial, is a new, on-demand picker that allows users to select an entry
or entries from their contact list and share limited details of the selected
contacts with a website.