Chrome Dev Summit is back! Visit to secure your spot in workshops, office hours and learning lounges!

Articles by Sam Dutton

Sam is a Developer Advocate


Before gathering performance metrics for a site audit, there are several checks you can do to identify easy fixes and areas for focus. Some of these checks are relatively subjective, but can identify problems that affect perceived performance.

Auditing Performance

Auditing your site or app will help you build a resilient, performant experience — and highlight quick wins that can be implemented with minimal sign-off. An audit also gives you a baseline for data-driven development. Did a change make things better? How does your site compare with competitors? You get metrics to prioritize effort, and concrete evidence to brag about once you've made improvements.

Use tools to measure performance

There are several core objectives for building a performant, resilient site with low data cost. For each objective, you need an audit.

Check site security

You won't be able to build a PWA without HTTPS. Serving your site over HTTPS is fundamental for security, and many APIs won't work without it. If you need to justify implementation costs, find out why HTTPS matters.

Next steps

Having completed a site audit, you should have accurate review data in a form that makes it easy for developers and other stakeholders to prioritize and justify changes.

Share the results

Once you've audited a site, make sure to package the results in a digestible form. Be sensitive to the people on the receiving end of your audit, structure your report carefully and present your data in terms of opportunities and solutions.

Take Photos and Control Camera Settings

Image Capture is an API to control camera settings and take photos.

Capture a MediaStream From a Canvas, Video or Audio Element

The captureStream() method makes it possible to capture a MediaStream from a canvas, video or audio element.

Muted Autoplay on Mobile: Say Goodbye to Canvas Hacks and Animated GIFs!

Muted autoplay for video is supported on Android from Chrome 53. Previously, a video element required a user gesture to initiate playback.

ECDSA for WebRTC: Better Security, Better Privacy and Better Performance

From version 52, Chrome uses ECDSA by default — a much more efficient and secure algorithm for WebRTC certificate key generation. In addition, RTCCertificates can now be stored with IndexedDB.

Service Worker Caching, PlaybackRate and Blob URLs for Audio and Video on Chrome for Android

From version 52, Android Chrome uses the same media stack as desktop Chrome, rather than relying on the underlying platform implementation. This enables service worker media caching, variable playback rates, blob URLs on Android, MediaStream passing between APIs, and easier cross-platform debugging.

Multi-Device Content

Consider content as well as layout and graphic design when building for a range of users and devices.

Understanding Low Bandwidth and High Latency

It's important to understand what using your app or site feels like when connectivity is poor or unreliable, and build accordingly. A range of tools can help you.

Media Source API: Automatically Ensure Seamless Playback of Media Segments in Append Order

The Media Source API enables JavaScript to construct media streams for playback. From Chrome 50, it's possible to use SourceBuffer sequence mode to ensure media segments are automatically relocated in the timeline in the order they were appended, without gaps between them.

Record Audio and Video with MediaRecorder

The MediaRecorder API enables you to record audio and video from a web app. It's available now in Firefox and in Chrome for Android and desktop.

VP9 Is Now Available in WebRTC

From Chrome 48 on desktop and Android, VP9 will be an optional video codec for video calls using WebRTC.

Google Cast for Chrome on Android

Chrome on Android now allows mobile sites to present to Google Cast devices using the Presentation API and the Cast Web SDK.

Chrome 47 WebRTC: Media Recording, Secure Origins and Proxy Handling

Chrome 47 has several significant WebRTC enhancements and updates including audio and video recording, proxy handling and mandatory secure origins for getUserMedia().

Choose Cameras, Microphones and Speakers from Your Web App

The MediaDevices interface gives access to input and output devices available to the browser including cameras, microphones and speakers.

The EME Logger Extension

EME Logger is a Chrome extension that logs Encrypted Media Extensions (EME) events and calls to the DevTools console.

MediaStream Deprecations

The MediaStream API represents synchronized streams of audio or video. MediaStream.ended, MediaStream.label and MediaStream.stop() are being deprecated. Use, MediaStreamTrack.label and MediaStreamTrack.stop() instead.

Media playback notifications for Chrome on Android

When audio or video is playing on a web page, a notification showing the page title and a play/pause button is displayed in the notification tray and on the lock screen. The notification can be used to pause/resume play or return to the page playing the media.

High performance video with hardware decoding

Hardware video support brings efficient decoding to plugins as well as HTML5 video. Flash users should switch from the old style Video to the StageVideo object.

What is EME?

Enabling HTTPS on your servers is critical to securing your webpages.

Chrome Dev Summit: Open Web Platform Summary

The capabilities of the Open Web Platform is accelerating at a pace that has never been seen before. At the Chrome Dev Summit we talked about how we are working on improving Blink, Security and Media for the platform

Alpha transparency in Chrome video

WebM just added alpha transparency, and support for it has landed in Chrome 31.

WebRTC: RTCDataChannel demo, API changes... and Chrome talks to Firefox!

Screensharing with WebRTC

WebRTC hits Firefox, Android and iOS

Big boost to DOM performance - WebKit's innerHTML is 240% faster