New in Chrome 77
Chrome 77 is rolling out now! There’s a better way to track the performance of your site with Largest Contentful Paint. Forms get some new capabilities. Native lazy loading is here. The Chrome DevSummit is happening November 11-12 2019. And plenty more. Let’s dive in and see what’s new for developers in Chrome 77!
chrome77 new-in-chrome chromedevsummit forms formdata lazy-loading performance
LayoutNG
LayoutNG is a new layout engine for Chromium that has been designed for the needs of modern scalable web applications. It improves performance isolation, better supports scripts other than Latin, and fixes many float, margin, and web compatibility issues.
layout performance chrome76 layoutng
New in Chrome 75
Chrome 75 is rolling out now. There’s a new way to reduce latency on canvas elements. Web apps can now share files to other installed apps using the system level share sheet. All of talks from Google I/O are on our YouTube channel. And plenty more. Let’s dive in and see what’s new for developers in Chrome 75!
chrome75 new-in-chrome canvas performance google-io graphics sharing
Paint Holding - reducing the flash of white on same-origin navigations
A quick overview of paint holding. A Chromium feature for reducing the flash of white on same-origin navigations
Exploring a back/forward cache for Chrome
On the Chrome team, we are exploring a new back/forward cache to cache pages in-memory (preserving JavaScript & DOM state) when the user navigates away.
Get Ready for Priority Hints
Priority Hints are coming to an Origin Trial near you! Try them out!
Rendering on the Web
Where should we implement logic and rendering in our applications? Should we use Server Side Rendering? What about Rehydration? Let's find some answers!
fundamentals performance app-shell
Chrome 69 Paint Timing Issues
Chrome 69 includes an incorrect change to our paint-timing metrics, which was intended to capture more of the rendering pipeline, but resulted in some inaccurate timestamps.
Web Performance Made Easy: Google I/O 2018 edition
Learn the current tools, libraries and optimization techniques that make improving web performance easier, by following the Oodles Theater project.
OffscreenCanvas — Speed up Your Canvas Operations with a Web Worker
OffscreenCanvasAPI is available as of Chrome 69. This article explains how you can use it to achieve performance improvements in rendering graphics in your web app.
canvas graphics performance workers
Custom site performance reports with the CrUX Dashboard
Today we're releasing the CrUX Dashboard that you can use to better understand how an origin's performance evolves.
ux performance chrome-ux-report
Speed is now a landing page factor for Google Search and Ads
Speed is now a landing page factor for Google Search and Ads.
Page Lifecycle API
The Page Lifecycle API brings app lifecycle features common on mobile operating systems to the web. Browsers are now able to safely freeze and discard background pages to conserve resources, and developers can safely handle these interventions without affecting the user experience.
Introducing NoState Prefetch
Chrome 63 shipped with NoState Prefetch. NoState Prefetch is a mechanism for fetching resources in advance that uses less memory than the deprecated prerendering process.
Experimenting with First Input Delay in the Chrome UX Report
Announcing the addition of the First Input Delay (FID) experimental metric to the Chrome User Experience Report.
First Input Delay
First Input Delay (FID) is a new performance metric for measuring page responsiveness for real users in the wild.
New in Chrome 65
Chrome 65 adds support for the new CSS Paint API, which allows you to programmatically generate an image. You can use the Server Timing API to provide server performance timing information via HTTP headers, and the new CSS display: contents property can make boxes disappear! Let’s dive in and see what’s new for developers in Chrome 65!
chrome65 new-in-chrome css layout performance
Preloading modules
<link rel="modulepreload"> offers a way of declaratively loading JavaScript modules ahead of time. This article looks at how it works and why it's better for modules than <link rel="preload">.
Chrome 64 to deprecate the chrome.loadTimes() API
The non-standard chrome.loadTimes() API will be deprecated in Chrome 64 now that standards-based equivalents exist for all of its useful features.
performance deprecations removals chrome64
The Device Memory API
The Device Memory API allows developers to serve different resources to users based on their device's memory capabilities.
Animating a Blur
A few tricks are necessary to animate a blur efficiently.
New in Chrome 60
With Chrome 60, 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 font-display CSS property. WebAssembly has landed and there's plenty more!
chrome60 new-in-chrome performance paint webfonts webassembly
Aligned Input Events
Providing a smooth user experience is important for the web. Over the past few releases of Chrome we have driven down input latency across these devices.
chrome58 chrome60 events performance ux
Building performant expand & collapse animations
When making expand and collapse effects you can use scale transforms to keep your UI performant.
CSS Deep-Dive: matrix3d() For a Frame-Perfect Custom Scrollbar
Custom transform matrices allow you to build frame-perfect custom scrollbars.
Speed up Service Worker with Navigation Preloads
Navigation preload lets you overcome service worker startup time by making requests in parallel.
chrome59 serviceworker performance
Lighthouse January 2017 update
What's new in Lighthouse 1.5. New audits, extension updates, Performance Experiment, online Viewer features, and UI tweaks.
lighthouse tools performance progressive-web-apps
Building a Better Web with Lighthouse
What's new in Lighthouse. Redesign, new best practice audits, and an online report viewer.
lighthouse tools performance progressive-web-apps
position:sticky is back in Chrome
After a long time absent from Chrome, position:sticky is back.
Performant Parallaxing
When used judiciously paralaxing can add of depth and subtlety to a web app.
performance parallax css 3d style
CSS Containment in Chrome 52
The new CSS Containment property lets developers limit the scope of the browser’s styles, layout and paint work.
performance chrome52 layout paint style containment
Performance Observer: Efficient Access to Performance Data
The W3C Performance Timeline specification defines an interface for browsers to provide programmatic access to low level timing data. This opens the door to some interesting use cases like custom performance analysis, third party tools and more.
performance events chrome52 javascript
Improving Scroll Performance with Passive Event Listeners
New to Chrome 51, passive event listeners provide a major potential boost to scroll performance.
performance events chrome51 javascript scroll touch
Stream Your Way to Immediate Responses
Start processing your service worker responses ASAP, thanks to ReadableStreams.
performance chrome52 streams serviceworker
Canvas toBlob() Support Added in Chrome 50
Support for canvas.toBlob set to land in Chrome 50.
images performance workers chrome50
Chrome Supports createImageBitmap() in Chrome 50
Support for image decoding in workers set to land in Chrome 50.
images performance workers chrome50
Prioritizing Your Resources with link rel='preload'
Chrome 50 adds support for rel='preload', and deprecates rel='subresource'
link preload performance chrome50
High Resolution Timestamps for Events
Find out when events occur with microsecond precision, thanks to DOMHighResTimeStamp.
Tab Discarding in Chrome: A Memory-Saving Experiment
Reducing Chrome's memory footprint is one of the team's top priorities this year.
Automating Resource Selection with Client Hints
Image optimization is hard and automation is the key to success.
Using requestIdleCallback
requestIdleCallback is new performance API for scheduling work when the browser is idle.
Using poster images on plugin content
Chrome can now add custom poster images to object elements to improve perceived loading performance of plugins such as Flash.
Measuring Performance in a Service Worker
If you can't measure the performance of your requests in a service worker, how can you say it improves performance? Now you can answer that question with recent changes in Chrome.
news performance serviceworker
Offline-first, fast, with the sw-precache module
Add service worker-powered offline capabilities to your site with the sw-precache module.
news serviceworker offline cache performance
Chrome Dev Summit 2014: The Applied Science of Runtime Performance
The story of building the Chrome Dev Summit site.
news performance chromedevsummit frontend
Developer feedback needed: Frame Timing API
A brand new API is in the works to help measure frames per second in the wild, but it needs your feedback.
news performance testing frontend
Automating Web Performance Measurement
Use PSI to get web performance metrics into your build process.
news gulp performance pagespeed node buildprocess
Chrome Dev Summit: Performance Summary
Performance Matters
300ms tap delay, gone away
Every click interaction in mobile browsers is hampered with a 300ms delay, but that's gone in Chrome 32 for mobile-optimized sites!
news mobile performance touchevent
Flexbox layout isn't slow
Good news: new flexbox (display: flex) is 2.3x faster than old flexbox (display: box)!
Profiling Long Paint Times with DevTools' Continuous Painting Mode
Stick your landings! position: sticky lands in WebKit
When milliseconds are not enough: performance.now
How to convert ArrayBuffer to and from String
How to convert ArrayBuffer to and from String
requestAnimationFrame API: now with sub-millisecond precision
Big boost to DOM performance - WebKit's innerHTML is 240% faster
Round-up of Web Browser Internals Resources
Optimizing JavaScript
Transferable Objects: Lightning Fast!
news binary performance workers
Use mediump precision in WebGL when possible
