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.
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.
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!
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.
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!
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.
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.
Lighthouse January 2017 update
What's new in Lighthouse 1.5. New audits, extension updates, Performance Experiment, online Viewer features, and UI tweaks.
Building a Better Web with Lighthouse
What's new in Lighthouse. Redesign, new best practice audits, and an online report viewer.
position:sticky is back in Chrome
After a long time absent from Chrome, position:sticky is back.
When used judiciously paralaxing can add of depth and subtlety to a web app.
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 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.
Improving Scroll Performance with Passive Event Listeners
New to Chrome 51, passive event listeners provide a major potential boost to scroll performance.
Stream Your Way to Immediate Responses
Start processing your service worker responses ASAP, thanks to ReadableStreams.
Canvas toBlob() Support Added in Chrome 50
Support for canvas.toBlob set to land in Chrome 50.
Chrome Supports createImageBitmap() in Chrome 50
Support for image decoding in workers set to land in Chrome 50.
Prioritizing Your Resources with link rel='preload'
Chrome 50 adds support for
rel='preload', and deprecates
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.
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 percieved 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.
Offline-first, fast, with the sw-precache module
Add service worker-powered offline capabilities to your site with the sw-precache module.
Chrome Dev Summit 2014: The Applied Science of Runtime Performance
The story of building the Chrome Dev Summit site.
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.
Automating Web Performance Measurement
Use PSI to get web performance metrics into your build process.
Chrome Dev Summit: Performance Summary
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-optimised sites!
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