Chrome Dev Summit 2018 — Day 1

This is my first story/post after a couple of years. So I decided to dedicate this to the awesome web community. I couldn’t find a better post than writing and sharing my experience with Chrome Dev Summit 2018. This post is mainly for anyone interested in knowing more about Chrome’s latest web platform capabilities and/or never had a chance to attend them in person, or who don’t have much time to watch @ChromeDeveloper’s Youtube channel. I tried my best to give the summit experience as useful as possible. So bear with me for mistakes/unclear details. Please feel free to comment/message any corrections you may find as you read.

Disclaimer
All the slides in the pictures of this post are owned by Google Inc. 
This post just literally shares my understanding of the sessions and experience of the summit, not necessarily resembles the exact content or intent of the speakers. Thoughts expressed here are my own and not of my employers.


Chrome Dev Summit 2018

Chrome Dev Summit establishes a platform to share the latest and upcoming modern web technologies on web platform (especially Chrome) that can be used to build amazing web experiences and collect feedbacks. And, of course, to engage with the leading web developers in the community to build awesome stuff leveraging the latest capabilities and the best practices recommended by Chrome engineers and advocates.

This is the 6th Chrome Dev Summit, my first summit to attend in person meeting with all the web geeks and of course Googlers on Chrome team.

Location: Yerba Buena Center for the Arts · San Francisco
Can’t ask for the better location than this, perfect in the center of downtown San Francisco. 😈

This is one of the interesting kick starts at any conference that I have ever seen. It started off with the video hilariously describing how Chrome was baked from the fork of Apple Webkit. While it was hilarious, it also mentioned some of the key details went behind baking Chrome. Kudos to — Jake Archibald, Paul Lewis, Mariko Kosaka for the fun filled start 👏

After all, it was the 10th anniversary of Chrome and Android. Can’t believe its been 10 years since Chrome was launched. I guess the experience of using Chrome has made us forget the ubiquitous use of it.

Without further due, let’s dive into the keynote and sessions of the day.

Context setting
Day 1 — Focussed more on what can be achieved today with the support of available modern web technologies and browser supports, and touched little bit of what’s coming.

Day 2 — Covered and highlighted what’s coming in the future, that includes experimental features on Chrome and proposals to TC 39. And at the end of the day, some of the key features of Chrome OS were highlighted.


Keynote
Ben Galbraith, Director, Chrome
Dion Almaer, Director, Web Developer Ecosystem

Ben Galbraith and Dion Almaer covered a lot of topics and gave an insightful overview of the latest web platform capabilities and how Chrome has crossed various milestones, including security enhancements. Basically recalled how Chrome was started and became a mainstream browser, including the screenshots of the early version of Chrome especially that blue Omnibox with those cartoons. How nostalgic! 😊

What Chrome has been supporting …

  • V8 engine — Celebrating 10 yrs
  • Web Assembly support
  • Native support of async / wait
  • Optimization of object restructuring
  • AV1 — new video format
  • WebP for images (new image format — 30% perf improvement)

Here are some of the Chrome Toolings highlighted,

  • Lighthouse (Some of you might have been already using it)
  • PageSpeed Insights
  • CrUX (Chrome User Experience)

Case Studies and Examples

  • Starbucks (native-like experience on mobile web)
  • Pinterest (video of mobile web experience played)
  • Wayfair (performance tool with ratings)

These case studies have highlighted some of the early results of customer acquisition of Chrome partners based on their adaption of latest web techniques.

Two interesting new features highlighted that I liked and anticipated a lot,
 1. Webpackaging (Would it replace the latest build tools? Webpack? 🤔) 
 2. Portals

There was a smooth demo that compared the Canvas rendering with and without WebAssembly and Workers. 
Check out the demo yourself — Demo

Looks like Desktop PWA will be the next big thing in bringing modern web technologies to Desktop Apps. Spotify PWA was highlighted. Based on what I heard, Adobe Photoshop and Twitter will see Desktop PWA soon. 😻

One of the key highlights was web.dev 💻. A new resource to learn modern web technologies, best practices on page insights tooling, performance measurements and monitoring and help the web community to build faster websites. And, the day 1 keynote was ended with the sneak peek of the demo Project VisBug 🦋.

There was an interesting slide “Service Workies” ⚙️— couldn’t resist sharing with you all here.

Here is the link www.serviceworkies.com


Game Time — BigWebQuiz
Jake Archibald, Paul Lewis, and Mariko Kosaka introduced an online web quiz (BigWebQuiz.com) where the answers were collected in real time from the participants and the leaderboard (top 3) was revealed at the end of the day.

BigWebQuiz’s funny launch ending pic

Every session break had a round for both the days. If I remember correctly this game was developed by Surma from Chrome team. It was built on Firebase APIs for collecting and showing answers in near real-time. Here are some of my answers to the quiz —

I guess I scored 168. I will share the winners in my next Medium story — CDS Day 2. Stay tuned!


Get Down to Business: Why the Web Matters
Aanchal Bahadur, Strategic Partner Development Manager
Zack Argyle, Engineering Lead, Pinterest
David Brunelle, director, product engineering, Starbucks
Matt Rizzo, Senior Product Manager, Spotify

This session was more of success stories/case studies from Chrome partners (Spotify, Starbucks, Pinterest) where they had leveraged the latest capabilities of PWA, AMP, and other modern web technologies. It eventually showed how customer acquisition can be greatly improved and contributed to multi-fold revenues.

Aanchal Bahadur sharing partner success stories

Some use cases where web performance matters

1️⃣ Spotify story
Looks like Spotify has been investing greatly on the mobile web as it has seen excellent growth, especially countries like Brazil where it has introduced the mobile web experience. Results showed the importance of mobile web considering how users can benefitted especially when they run out of storage spaces in their mobile phones.

Some of the technical adaption 💻 ⚙️ — Media Session API, Add to Home Screen, Protected Content (DRM) and more. There was also a mention of AB testing (Universe A vs Universe B) to validate the demand of mobile web.

2️⃣ Starbucks story 
 Starbucks addressed this hypothesis by adapting the latest 
 capabilities of the modern web
“How can we use the web to give our customers the best possible experience?
 
Some of the technical adaption 💻 ⚙️— Caching through Service Workers, Workbox, IndexedDB, Credential Management API, Add to Home Screen, the right set of Accessibility, and a Pattern Library (Reusable React components)
 
This adaptation brought a 65% increase in Starbucks Registrations overall via the web.

3️⃣ Pinterest story
Pinterest took a step back and rewritten their app from scratch using modern web PWA capabilities. The new app was 4x faster, JavaScript down to 200 KB from 650 KB, CSS down to 6KB from 160 KB. They measure their growth by the metric called Pins Seen
 
Whats achieved — 
Worldwide : +103% weekly users +300% session duration
Low-bandwidth areas: 300% weekly users and 600% Pins seen.

I guess it is true to bring lots of mobile web to life and put in real-use. I still remember some of my friends had storage issues, and they generally don’t install apps unless it is really important. Bringing the native experience to mobile web would definitely be beneficial with the right adaptation of PWA and other modern web capabilities.

Many other companies have been investing heavily on the mobile web. Here is a glimpse of some the companies worldwide.

Aanchal Bahadur talking about companies investing on web performance

State of the Union for Speed Tooling
Paul Irish, Performance Engineer
Elizabeth Sweeny, Product Manager

This session majorly covered three topics —

  1. Metrics
  2. Lighthouse
  3. UX Tooling

I couldn’t agree more on this.

“You can’t improve what you don’t measure” — Peter Drucker

Metrics: Some of you might have already been working to collect, measure and monitor the metrics. Some use Lighthouse and some PageSpeedInsights. This time Chrome introduced a new metric called First Input Delay (FID)along with First Contentful Paint, Time to Interactive (TTI)

This is an experimental metric, so it may or may not make it to the upcoming versions of Chrome.

Lighthouse: Lighthouse improvements on Chrome

  • Lighthouse report (introduced badges to better focus on metrics)
  • Runtime reduction
  • Score Bucketing (increased the bar for the green range to 90 to 100). This one was interesting, as they moved the range of green zone to a higher level. Better monitoring?
  • Throttling simulation (“Fast 3G” is “Slow 4G”)
  • Lighthouse integrations (also in Web.dev)

UX Tooling: Chrome UX Report

  • Regional analysis (not sure about this, I guess I was taking notes on previous slides 😃 🐒)
  • CrUX Dashboard — this is something new coming to Chrome. I’m excited to learn more about this.

Also, there was a mention of SquareSpace’s perf dashboard built along with Lighthouse. It significantly improved the TTI (Time-to-Interactive) by 3x.

Paul Irish talking about Lighthouse features coming to PageSpeed Insights

Overall unified Tooling experience by bringing some of the Lighthouse features to PageSpeed Insights that better helps the team. In other words, “PageSpeed API v5 is the new Lighthouse API v1” ☄


Speed Essentials: Key Techniques for Fast Websites
Houssein Djirdeh, Developer Advocate
Katie Hempenius, Chrome Engineer

In general, there are several pitfalls that can degrade the performance of any websites that will make the website slower. However, loading and optimizing three major assets would bring significant performance improvement to the websites. I’m sure, you guessed it correctly — Images, Web Fonts, and JavaScript. This session has covered several techniques available today to optimize these assets and how it can be achieved efficiently.

1️⃣ Images 📷 
I remember experts (like Addy Osmani) recommending to use <video> tag in place of <img> tag when embedding GIFs. If I remember correctly, <video> uses intraframe compression effectively to bring GIFs to the web. On the other hand, WebP has been in use for almost 8 years. Not many developers know about this, it uses best class compression techniques.

🌟 Hint: Inspect Google Image Search 🔍

This tweet has got very good attention from the participants as it evoked the eagerness of Apple fanboys. 😃 📱

⭐️ New video format — AV1 (AOMedia Video) is an open source video coding format developed by Alliance for Open Media. Could this be the future of the video on the web 🤔? It basically compresses the video by 30% (40–45% than MP4). Significant improvement to bring a growing number of videos on the web to low bandwidth areas.

⭐️ Lazy loading technique for loading images into the browser — Chrome introduced this new attribute “lazyload” with values being on or off or auto in <img> tag to lazy load images natively. This is cool and much needed for image heavy websites.

2️⃣ Web Fonts
For sites that rely on typography and fonts and rendering with perfect anti-aliasing — here is the new tip

font-display: swap;

[font-display — CSS: Cascading Style Sheets | MDN
Refer this MDN page for more details on font-display swapping techniques.

3️⃣ JavaScript 
This section covered all the greatest techniques that can be used to optimize and load JavaScript effectively.
⭐️ Split your JS bundle and load them on demand

⭐️ Use dynamic import to load on demand modules. All the modern 
 frameworks already supporting dynamic import. 
 
 Here is the code snippet of Vue’s dynamic import to lazy load 
 components (you guessed it correctly I’m a big fan of Vue.js),

Houssein Djirdeh comparing frameworks’ component imports

⭐️ Use “preload” for script loading

<link rel=“preload” as=“script” href=“code.js”>

⭐️ Only transpile what you need.
⭐️ Differential serving — serve bundles based on browser supports. 
Use this in Webpack config,

“targets” : { 
esmodules: true
}

⭐️ Chrome’s native module loading,
 Load as module

<script type=”module” src=”main.mjs”>

⭐️ Use ‘nomodule’ to hint the browser

 <script nomodule src=”bundle.js”>
<link rel=”modulepreload” as=”script”>

⭐️ Find unused CSS and JS. This can be monitored using the Coverage tab in Chrome.

⭐️ Webpack Bundle Analyzer is another great utility tool to see the sizes of different bundles/dependency modules used.

⭐️ Introduce Lighthouse as part of the CI process (supports well on Github) to monitor the metrics.

Here is the popular clothing brand Uni Qlo’s successful results,

Houssein Djirdeh sharing Uni Qlo’s success story

In summary, “Use what works best” 😊. But before introducing, understand the existing architecture.


Building Faster, More Resilient Apps with Service Worker: A Caching Strategy Deep Dive
Ewa Gasperowicz, Developer Programs Engineer
Phil Walton, Developer Programs Engineer

This is one of the excellent sessions that covered Service Worker and different caching strategies to provide the best user experience.

As you know Service Workers comes at a cost, so this session followed the objective “Maximize the benefits while reducing the cost

There were two different strategies discussed,
 1. Serving strategy 
 2. Caching strategy

Plenty of resources available on these topics [Workbox | Google Developers]. Workbox JS provides easy to use wrapper APIs to bring Service Worker into the web app.

Some of the recommendations shared in the talk to speedup navigations
 ⭐️ Respond from Cache right away
 ⭐️ When the network is needed, fetch partial content and stream the rest from a cache
 ⭐️ Use navigation preload so network requests on SW startup

“Service-Worker-Navigation-Preload: true”

Caching strategy was explained very neatly with the example of Food | Side Dish | Trash by Ewa Gasperowicz. I missed taking that pic, but it was a good one 😉. It basically explained — cache what is needed and configure service worker accordingly, and of course use quota to manage cache efficiently.

Here are some of the key points highlights, 🌟

🌟 Hint: Workbox simplifies the implementation of SW with strategies.


Smooth Moves: Rendering at the Speed of Right
Jason Miller, Developer Programs Engineer
Adam Argyle, UX Engineer

How to start! Hmm… Well… There was an interesting pronunciation chit chat between Jason Miller and Adam Argyle for the demo app title whether to call “schaaat” or “Chaaat” or “chat”. 😄

Micro-interactions play a key role in perceiving the performance of the app. This session covered some of the useful techniques that enable rendering up to 60 fps.

Delivering 60 fps on low-end mobile ensures the smoothness everywhere.

This session also touched some aspects of RAIL model, and discussed three key areas to achieve smooth moves,

1️⃣ Efficient animation

 Instead of style.left (goes through 4 stages)
Recalculate -> Layout -> Paint -> Composite

Use style.transform (goes through 2 stages)
Recalculate -> ~~Layout~~ -> ~~Paint~~ -> Composite

As it passes through only two stages to render the elements. Composite is an intensive memory-hogging task, so it is important to pay attention to simple CSS properties that could enable efficient rendering. On the other hand, GPUs are really good at transforming composited layers, and modern web browsers are taking advantage of this and renders the content efficiently. 
 
 2️⃣ Read.then (write)
 ⭐️ Script (read and write) causes some additional calculations, so this is another important area to focus on while rendering elements.
 ⭐️ Sometimes requestAnimationFrame() could help in achieving the smoothness, but it should be used with caution. 
 
 3️⃣ Lazy Wins
 Using some of the native supported techniques could also bring good 
 smoothness. Here are some of them,
 ⭐️ Leveraging browser scrolling (use of sticky display)
 Also, the use of native smooth scrolling ignores the dependency of all 
 those DOM utilities. 
 
 Here is the code snippet to smooth scroll,

 element.scrollView({
behavior: “smooth”,
block: “end”
})

⭐️CSS property

scroll-snap-start 

[Well-Controlled Scrolling with CSS Scroll Snap | Web | Google Developers]
Refer this article written by Robert & Majit

Overall, this session has covered how simple things can significantly improve the rendering performance of different DOM elements.


Complex JS-heavy Web Apps, Avoiding the Slow
Jake Archibald, Developer Advocate
Mariko Kosaka, Drawsplainer

This is another interesting session 😍. Through the demo of Squoosh.app — it covered how JS code can be significantly reduced.

The demo was started by showing how the app can apply different compression algorithms while maintaining a considerable amount of quality. If I remember correctly, they used a long shot image taken in Google IO. While Mariko Kosaka was playing with the app, Jake Archibald covered the story behind it. It was a perfect combo talk! 😉

After the demo, there was a story about how they went behind in building this app. Also covered different technologies and capabilities used to build the app.

What went behind? Here are some I noted from the talk,
 ⭐️ Uses OptiPNG (significant boost in reducing the PNG file size)
 ⭐ ️Lots of Web Assembly (especially for compression algorithms)
 ⭐️ PREACT + Webpack
 ⭐️ Two workers (one on either side)
 ⭐️ Library comlink to take care of the communication between workers and main app thread.

Surma has written an article Emscripting a C library to Wasm. Check out for more in-depth details on how WA can be used in your project.

It is surprising to see how the right combination of technologies can bring better code reduction and improvements. Squoosh.app is one of the great examples of such combination! Kudos Surma, Mariko, Jake Archibald and the team. Would you believe if the actual JS size of this app (excluding the WA side) is just 350 bytes 😋 (minified and gzipped)? I was surprised to see such a heavy JS app is literally under 1Kb. And the audience was like wooooow… that must be one heck of a reduction 😄

Jake Archibald and Mariko Kosaka revealing the final size of the app

Building Modern Web Media Experiences: Picture-in-Picture and AV1
François Beaufort, Developer Programs Engineer
Angie Bird, Chrome Engineer

If you are building a media based apps or want to build one, this talk would be interesting and informative as it covered some of the key capabilities available today on the web platform.

This talk has covered PIP (Picture-in-Picture) APIs and codecs. And some code snippets that are ready to be used.

Chrome natively supports AV1 video format which was built on VP9. I remember it used to be H.264 which is widely adopted online. I guess, AV1 has brought better compression techniques that help load the videos faster.

Angie Bird talking about AV1’s Better Coding Efficiency

Demo: AV1 to H.264 Switching 
To show this codec comparison, there was a demo that explained the smoothness of switching between two different formats and how it can play smoothly (just like a butter sliding between two slices of bread😄).

Here is the road map of AV1 support and when it is arriving to different platforms (this is just an ETA, timing might vary),

To get the different configuration of decoding information supported by the browser —

await navigator.mediaCapabilities.decodingInfo(mediaConfig)

Here is the MDN link [Media Capabilities API — Web APIs | MDN]


Modern Websites for E-commerce in the Real World
Cheney Tsai, Mobile Solutions Consultant
Ramya Raghavan, Mobile Solutions Consultant

This is another talk where they showcased some of the partner case studies who adopted PWA and AMP capabilities, especially in the e-commerce domain. This talk covered these case studies under three categories,

  1. Organizational Alignment
  2. Technical Approach
  3. Measurement

1️⃣ Organizational Alignment
Websites mentioned: 1800flowers.com and justfly.com

They talked about how having along-term vision and plan for short-term goals can bring better results. I couldn’t take good notes for this 🙁

2️⃣ Technical Approach
Websites mentioned: walmart.com, ebay.com, and airbnb.com

Walmart has significantly reduced their JS and CSS bundle sizes for faster loading of their web content and assets.

Whereas, Ebay followed Predictive Prefetching of their Listing Pages to achieve faster loading. Imagine prefetching the details page when the user is viewing the listing page. The moment the user clicks the details page it will load at a blazing speed as the assets are pre-cached in the browser. This is very interesting as it leads to many technical challenges.

Airbnb adopted client-side-rendering (CSR) like server-side-rendering (SSR) to achieve faster rendering. I assume, CSR has been introduced only in certain scenarios.

The motto of this technical approach is “Improve Speed by Focusing on User Navigations”.

3️⃣ Measurement
Showcased: Cdiscount, Carrousel, Wayfair

This section of the talk was mainly talked about how having a controlled measurement strategy and performance budget can bring in more customer acquisition.

Here is the slideshot (new naming huh 😄) of how common goals tied to specific metrics and yield better results.

Performance Budget is basically a framework that helps in bring different stakeholders of the product to adhere to certain guidelines to achieve desired results while improving the performance (just saying 😺). Addy Osmani has written a detailed article on several performance improvement techniques that also covered performance budget and other key measurements —


Progressive Content Management Systems
Alberto Medina, Developer Advocate
Weston Ruter, Developer Programs Engineer

This talk was one of my favorites as they took Wordpress as their experimental CMS platform to test the latest web platform capabilities like Service Workers and PWAs (Accelerated Mobile Pages). And of course, they shared the learnings that can be followed while introducing PWA capabilities to other CMS platforms.

Alberto Medina had set the context of the talk before diving in and also talked about the importance of delightful User Experience. Here is the slideshot from his talk,

Alberto Medina explaining the importance of pillars of a delightful UX

I really like how he categorized different pillars that can impact the user experience. 😉 👏

The twofold approach followed in the talk, 
 1️⃣ AMP (AMP for Wordpress)
 2️⃣ Integration of Modern Web Capabilities and APIs

Weston Ruter showcased the demo POC that was built to experiment PWAs in Wordpress

Weston Ruter talking about PWA POC in Wordpress

Later, he shared the challenges and how it was solved. Also, described how the learnings can be applied to successfully introduce PWAs to any CMS platforms. If I remember correctly, some of the major CMS providers have already plugins built-in or coming soon to help the content creators to introduce progressive capabilities to their websites.


Making Modern Web Content Discoverable for Search
Martin Splitt, Developer Advocate
Tom Greenaway, Developer Advocate

This talk was started with the quote (at least if I remember correctly 🤔)

“The Best Practices for ensuring a modern JavaScript powered website is indexable by search.

This is another interesting talk. I have always been intrigued by the search engines and how it crawls the content at a massive scale. Martin Splitt and Tom Greenaway gave an insightful session on how Google Search sees the content compared to web browsers (in other words frameworks’s CSR), and also covered several aspects of single-page-apps (SPA) contents to be discoverable.

Here is the high-level architecture discussed,

Martin Splitt and Tom Greenaway sharing how Google Search sees and renders the content

And it looks like, behind the scenes of search engine dynamic rendering plays a major role in sending optimized content to the browsers. It is fascinating how all these rendering magic happens at nanoseconds and gets delivered at microseconds!


P.S: Some of the capabilities showcased in the summit are experimental and under proposal. It may or may not make it to the standards spec. So keep an eye on W3C Standards page and of course you can follow Chrome Developers for the latest updates.

🌟 Some highlights of the day

  • Chrome baking was hilarious and entertaining. 😆
  • Squoosh.app and Project VisBug received well (at least based on what I heard from the audience) 👏
  • BigWebQuiz was fun. It would be interesting if @DasSurma release the stats of the participants’ engagement. 🕴
  • Squoosh app’s 350 byte size. ⚙️ 🙈
  • “Smoothness is perceived perf.” “Feel connected”. 😊
  • PWAs for CMS. 🎉

🌟 Key takeaways

  • Know and use what works best.
  • Adapt the native capabilities.
  • Have measurement strategy, perhaps introduce Lighthouse CI.
  • Have performance budget.
  • Know what is coming on the web platform.
  • Networking with Googlers and GDEs.
  • And more… share yours in the comment..

Oh yeah! There was also after party as well after Day 1 sessions. I couldn’t attend, but I heard it was awesome. Follow #ChromeDevSummit hashtag on Twitter for more updates. You may see some very cool and crazy pics 😉

Well! Well! Well… If you’re here, I really appreciate your interest. You have spent quite a bit of your time reading this big story. I’m in the process of writing my experience on Day 2. Follow me and stay tuned.

Thank you! 🙌 🤝 🙏