CDS take-aways … it’s all about performance

Recently, the Chrome Development Summit — the web-highlight of the year — took place. It’s the yearly event where the world’s most popular browser takes the scene to talk about the present and the future of the web. Tons of great content, exciting announcements and meeting friends (new and old) as well as Google engineers. In this blog post, I’ll walk through the highlights as seen from my (slightly commerce-focused) perspective.

VisBug

Visbug is a new Chrome extension for fiddling with layout-stuff on the web. Its a point-and-click experience where you can easily edit any text or its style, see how things align and even get feedback on the accessibility of your work. I think this could enable non-coder-designers to better understand and play around with the mark-up as the visual components come to life.

Check it out: https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc

The Sqoosh app

The Sqoosh.app is a new web app that lets you visually compare different image compression types and their settings. The tool itself is appealing, but how it’s built is what’s most interesting. It a progressive web app, and all the individual compression engines are run on separate threads — using web assembly.

You can check out the app at https://sqoosh.app/ but before you do, I recommend watching this video that explains the clever technology behind the app: https://www.youtube.com/watch?v=ipNW6lJHVEs

Happiness, Engagement, Adoption, Retention, Task success, a.k.a. HEART

A new year, a new acronym. HEART is for measuring the quality of UX. I think the acronym makes sense, and it might be more memorable than others we’ve seen (What is the I in RAIL again?)

Performance

When Chrome first came out, it outperformed all the other browsers by 20x, and with Chrome, it’s still about performance. WebAssembly, already blazingly fast, now has (experimental, I think) thread-support. The browser can now natively lazy load images to speed up the initial render and save on network and memory. And the next generation video-codecs, AV1, compresses video at a comparable quality with only half the bytes of h.264. Also, the browser now has even more performance-specific APIs for better measuring timing. And page speed now has a json-api, so you can run it from a build-chain or any other tool. However, the performance-related thing I’m most excited about is the virtual-scroller. It’s a native implementation of the popular pattern that many libraries have implemented already, but solving some of the current problems like anchoring, find-in-page and indexing. The overall idea is to let the browser do its thing instead of trying to do it yourself. Make sure your animations are compositable, use css scroll-snap, run work off the main thread. And you can now actually use feature policies (using http-headers) to warn (or even disallow) bad practices (like oversizing or nor compressing images), so you can make sure they are caught in development before they hit production.

You should check out all the talks really, but I found the one about virtual-scroller particularly interesting — https://www.youtube.com/watch?v=UtD41bn6kJ0, and if you are into layout and animation, you should definitely watch Surma’s talk about the future of CSS with Houdini https://www.youtube.com/watch?v=lK3OiJvwgSc

WebComponents are the future of the web

For years, we have talked about how WebComponents will one day save the web. That day is finally here! WebComponents are broadly supported, and with libraries like LitElement, we have a close-to-native alternative to the major framework, with great developer experience alongside great performance. And the tools are coming along. Check out Justin Fagnani’s talk where he shows off LazyLitElement and other new and shiny features in LitElement. https://www.youtube.com/watch?v=ypPRdtjGooc

So much more — in just 10 years

Of course, there is so much more. Like immersive web with native XR (AR and VR) coming, WebPackaging that will allow third parties to preload content in a privacy-preserving way, Web authentication and, of course, an update on how Googlebot (the indexer for Google search) reads your site, runs your javascript, etc.

This year Chrome celebrates its 10-year-birthday. The team made a video about baking that cake, and you should definitely watch it — it’s funny and contains a lot of interesting facts about the history of Chrome. Check out if you’re in on all the puns… https://www.youtube.com/watch?v=CbU9GzgS0HY