New in Chrome 77: Native Lazy Loading, Largest Contentful Paint, and New Forms Capabilities

New in Chrome 77: Native Lazy Loading, Largest Contentful Paint, and New Forms Capabilities


PETE LEPAGE:
There’s a better way to track the performance
of your site, forms get some new capabilities,
and native lazy loading is here I’m Pete LePage. Let’s dive in and see what’s
new for developers in Chrome 77. [MUSIC PLAYING] Understanding and measuring
the real world performance of your website can be hard. Metrics like load,
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 still complex
and sometimes wrong. The largest
Contentful Paint API, available starting
in Chrome 77, reports the render time of the largest
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 the largest
Contentful Paint events. Since a Paint often
loads in stages, it’s possible that the largest
element on a page will change. So you should only report the
last, largest Contentful Paint event to your analytic service. Phil has a great post on
the largest Contentful Paint API on web.dev. 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 into 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 many of the
existing limitations. 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 that you want to interact with. When the user clicks
the Submit button, the forum 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. FormAssociated
custom elements help to bridge the gap between custom
element and native controls. It tells the browser to
treat the custom element like all other form
elements and adds common properties found
on input elements, like name, value, and validity. Check out the post on
web.dev for all the details. 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
images or iframes, 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 that you
want an image or iframe lazy loaded, use the
loading=”lazy” attribute. Images and iframes
that are above the fold will load normally, and
those that are below are only fetched when the
user scrolls near them. Check out the post on
web.dev for details. 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. And there are new
measurement units in the Intl.NumberFormat API. Oh, and the Chrome Dev
Summit is coming up on November 11 and 12. It’s a great opportunity to
learn about the latest tools and updates coming
to the web platform and hear directly from the
Chrome engineering team. It’ll be streamed live
on our YouTube channel, or if you want to
attend in person, you can request your invite at
the Chrome Dev Summit website. All the details,
including docs and specs, are in the updates post
linked in the description. Be sure to check out the latest
Chrome DevTools video to learn what’s new in DevTools. And don’t forget to subscribe. I’m Pete LePage. And as soon as Chrome
78 is released, I’ll be right here to tell
you what’s new in Chrome. [MUSIC PLAYING]

60 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *