Chrome 60: Paint Timing API, Control Font Loading with Font-Display and WebAssembly

  20 Nov 2019   , , , , , ,


PETE LEPAGE: You can now measure
time to first paint and time to first contentful paint
with the paint timings API. You can control how fonts are
rendered with the CSS font display property and
what assembly has landed. From the National
Museum of Mathematics in Manhattan on a tricycle
with square wheels, I’m Pete [? LePage. ?]
Let’s dive in and see what’s new for
developers in Chrome 60. When a user navigates
to a page, they’re looking for some visual
feedback to reassure them that everything is working. With the new paint timing
API, we can now measure that. The API exposes two metrics– time to first paint, which marks
the point at which the browser starts to render
something, anything, the first bit of
content on screen. And time to first
contentful paint, which marks the point when the
browser renders the first bit of content from the DOM– text and image,
something like that. Check out Phil Walton’s
post on updates to learn how you can
track these metrics and use them to improve
your experience. Web fonts give you the ability
to incorporate rich typography. But if the user doesn’t
already have the typeface, it needs to be downloaded,
potentially making your site appear slow. Thankfully, most browsers
will use a fallback if the font takes
too long to download. The new font display
property allows you to control how a
downloadable font renders before it’s fully loaded. Auto uses whatever font display
strategy the user agent uses. Block gives the font
face a short block period and an infinite swap period. Swap gives the font face
a zero second block period and an infinite swap period. Fallback gives the font face
an extremely small block period and a short swap period. And finally, optional
gives the font face an extremely small block period
and a zero second swap period. It’s supported in
Chrome 60 and Opera, and is in development
for Firefox. Check out Rob Dodson’s post
on updates for full details. WebAssembly, or wasm, provides
a new way to run code written in languages like C and C++ on
the web at near native speeds. It provides the speed necessary
to build an in-browser video editor or run unity games
at high frame rates, utilizing existing
standards-based web platform APIs. Check out Alex [INAUDIBLE]
Google I/O talk and find more info at WebAssembly.com,
including demos, docs, and how to get started. These are just a few of
the changes in Chrome 60 for developers. But of course,
there’s plenty more. The PaymentRequest
API is now supported on desktop versions of Chrome. The new Web Budget
API enables a site with the Web Push
notification permission to send a limited
number of push messages that trigger background
work, such a syncing data or dismissing notifications,
without the need to show a user visible notification. And
PushSubscription.expirationTime is now available,
notifying sites when and if a
subscription will expire. Check the description
for more details, including links
to docs and specs. Also, check out Case’s new
video about all the new features and Chrome 60 in
the Chrome DevTools. Then click the Subscribe
button, and you’ll get an email whenever
a new video is launched on our channel. I’m Pete [? LePage, ?] and as
soon as Chrome 61 is released, I’ll be right here to tell
you what’s new in Chrome.

Leave a Reply

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