Awesome web performance list
A curated list of awesome web performance stuff
How-To’s
- Track Core Web Vitals In GA4 With Google Tag Manager - In this article is shown how you use a new custom template to set up the Core Web Vitals tracking without having to use Custom HTML tags. It's also shown how to use this template’s output to send the data to Google Analytics 4.
- Optimizing resource loading with Priority Hints - Priority hints indicate the relative importance of resources to the browser. They can enable optimal loading and improve Core Web Vitals.
- Measure and debug performance with Google Analytics 4 and BigQuery - Learn how to send Web Vitals data to Google Analytics 4 properties and export the data for analysis in BigQuery and Data Studio.
- Optimizing Web Vitals using Lighthouse - Finding opportunities to improve user-experience with Chrome's web tooling
- Web Performance Recipes With Puppeteer - This guide has recipes for automating Web Performance measurement with Puppeteer
- Performance Checklist - Everything you need to know in 2020
- perf.rocks - Find resources that help you build lightning fast websites
- Metrics - Measure and optimize performance and user experience
- Fast load times - Guarantee your site loads quickly to avoid user drop off
- Network reliability - See consistent, reliable performance regardless of network quality
- Measuring Performance With Server Timing - 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.
- Your first performance budget with Lighthouse - We can now define a simple performance budget in a JSON file, which will be tested as part of the lighthouse audit!
- Accurately measuring layout on the web - 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.
- Optimize First Input Delay - First Input Delay (FID) is a Core Web Vitals metric that captures a user's first impression of a site's interactivity and responsiveness. It measures the time from when a user first interacts with a page to the time when the browser is actually able to respond to that interaction.
- Optimize Cumulative Layout Shift - Cumulative Layout Shift (CLS) - a Core Web Vitals metric, measures the instability of content by summing shift scores across layout shifts that don't occur within 500ms of user input. It looks at how much visible content shifted in the viewport as well as the distance the elements impacted were shifted.
- Optimize Largest Contentful Paint - Largest Contentful Paint (LCP) is a Core Web Vitals metric and measures when the largest content element in the viewport becomes visible. It can be used to determine when the main content of the page has finished rendering on the screen.
- content-visibility: the new CSS property that boosts your rendering performance - 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.
Articles
- Improving Core Web Vitals, A Smashing Magazine Case Study - 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.
- Picture perfect images with the modern img element - The humble
element has gained some superpowers since it was created. Given how central it is to image optimization on the web, let’s catch up on what it can do and how it can help improve user-experience and the Core Web Vitals.
- How focusing on web performance improved Tokopedia's click-through rate by 35% - 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).
- How Mercado Libre optimized for Web Vitals (TBT/FID) - 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.
- Milliseconds make millions - A 0.1 second improvement in 4 speed metrics can improve progression rates across the full purchase funnel.
- Web Vitals: essential metrics for a healthy site - Measuring the quality of user experience has many facets. While some aspects of user experience are site and context specific, there is a common set of signals — "Core Web Vitals" — that is critical to all web experiences.
- Why Performance Matters - Performance issues vary. At best, they create small delays that are only briefly annoying to your users. At worst, they make your site completely inaccessible, unresponsive to user input, or both.
- WPO stats - Case studies and experiments demonstrating the impact of web performance optimization (WPO) on user experience and business metrics.
- The Impact of Web Performance - I’m going to show that rendering performance is more important than any of the Lighthouse page load metrics
- Move Fast & Don’t Break Things - It’s true, new web technology is exciting, but we already have the tools to build amazing things and deliver them efficiently today.
- Smaller HTML Payloads with Service Workers - A service worker can request just the bare minimum of data it needs from the server (e.g. an HTML content partial, a Markdown file, JSON data, etc.), and then it can programmatically transform that data into a full HTML document.
- Using Native JavaScript Modules in Production Today - The technique allows you to ship significantly less code to module-supporting browsers, and it’s now supported by most web frameworks and CLIs.
- ECMAScript modules in browsers - All you need is type=module on the script element, and the browser will treat the inline or external script as an ECMAScript module.
- Loading Polyfills Only When Needed - 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.
- When CSS Blocks - Preload is a bit of a blunt instrument—whatever you apply to it is gonna jump way up in line to be downloaded. The use of preload means that these stylesheets, which you’re presumably making asynchronous because they aren’t very critical to page display, are given a very high priority by browsers.
Implementations
- Youtube Embed Component - Provide videos with a supercharged focus on visual performance. This custom element renders just like the real thing but approximately 224X faster.
Tools
- web-vitals library - The web-vitals library is a tiny (~1.5K, brotli'd), modular library for measuring all the Web Vitals metrics on real users, in a way that accurately matches how they're measured by Chrome and reported to other Google tools (e.g. Chrome User Experience Report, Page Speed Insights, Search Console's Speed Report).
- Web Vitals report - This tool can be used to create a Web Vitals report for any site that uses the web-vitals JavaScript library to send data to Google Analytics.
- sitespeed.io - Sitespeed.io is a set of Open Source tools that makes it easy to monitor and measure the performance of your web site.
- Turbolinks - Get the performance benefits of a single-page application without the added complexity of a client-side JavaScript framework.
- Quicklink - Faster subsequent page-loads by prefetching in-viewport links during idle time (Angular module).
- Instant.page - instant.page uses just-in-time preloading — it preloads a page right before a user clicks on it.
- "constant-locals-loader" for Webpack - 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.
- Speed Measure Plugin for webpack - This plugin measures your webpack build speed.
- Layout Shift GIF Generator - Visualise the Core Web Vitals metric Cumulative Layout Shift (CLS) with a simple GIF.
Converter
- webp - WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.
- FFmpeg - Converting video and audio has never been so easy.
- svgo - SVG Optimizer is a Nodejs-based tool for optimizing SVG vector graphics files (Web GUI).