awesome-performance

So in this post, I want to demystify some of these concepts, and offer techniques for accurately measuring what’s going on when we render things on the web.

content-visibility enables the user agent to skip an element's rendering work, including layout and painting, until it is needed. Because rendering is skipped, if a large portion of your content is off-screen, leveraging the content-visibility property makes the initial user load much faster. It also allows for faster interactions with the on-screen content.

Guarantee your site loads quickly to avoid user drop off

Learn how to send Web Vitals data to Google Analytics 4 properties and export the data for analysis in BigQuery and Data Studio.

The Server Timing header provides a discrete and convenient way to communicate backend server performance timings to developer tools in the browser. Adding timing information to your application enables you to monitor back-end and front-end performance all in one place.

Measure and optimize performance and user experience

This loader optimizes the output of mini-css-extract-plugin and/or css-loader, entirely removing the potentially large CSS classname mappings normally inlined into your bundle when using CSS Modules.

instant.page uses

Visualise the Core Web Vitals metric Cumulative Layout Shift (CLS) with a simple GIF.

Faster subsequent page-loads by prefetching in-viewport links during idle time (

Sitespeed.io is a set of Open Source tools that makes it easy to monitor and measure the performance of your web site.

This plugin measures your webpack build speed.

All you need is type=module on the script element, and the browser will treat the inline or external script as an ECMAScript module.

Tokopedia is one of the largest e-commerce companies in Indonesia. With 2.7M+ nationwide merchant networks, 18M+ product listings, and 50M+ monthly visitors, the web team knew that investment in web performance was essential. By building a performance-first culture, they achieved a 35% increase in click-through rates (CTR) and an 8% increase in conversions (CVR).

Optimizing interactivity of product details pages for a 90% reduction in Max Potential FID in Lighthouse and a 9% improvement in FID in Chrome User Experience Report.

Smashing struggled with amber Core Web Vitals score for a while. Then after 6 months they finally managed to fix it. Here’s a little case study on how they detected and fixed the bottlenecks, and how they ended up with green scores, all the way.

The solution to this problem is to only load polyfills when they’re needed, but as it turns out, in practice that’s a lot harder than it sounds.

A 0.1 second improvement in 4 speed metrics can improve progression rates across the full purchase funnel.

Converting

WebP is a modern

Provide videos with a supercharged focus on visual performance. This custom element renders just like the real thing but approximately 224X faster.