web-performance-resources
Up to date collection of valuable web performance resources
View the Project on GitHub fabkrum/web-performance-resources
Web Performance Resources
This is a list of sources I personally found useful to learn about web performance. I keep this list up to date and add new great resources often. If you know great resources which aren’t covered here please create a pull request.
Table of Contents
- Stay up to date
- Core Web Vitals
- Articles
- Online courses
- Videos
- Books
- Tools
- Open Source Projects
- Studies
- Case studies
- Open data sources
- W3C Standards
- Build a fast blog with Eleventy
- Checklists
Legend
ℹ️ = Official sources (most often Google announcements)
🚀 = Must read articles
📚 = Resources I use regulary
🎥 = Video
Stay up to date
Community & Social Media
-
This Web Performance Twitter-List makes it easy for you to follow all the web performance authors, speakers, and evangelists at once - 📚
-
Twitter: #webperf, #perfmatters
-
Web performance Slack channel - 📚 Slack channel which is focusing on web performance with more than 1.400 members
-
WebPerf Working Group Meetings, Understand what topics are discussed and be prepared for what is coming in the future
Newsletter
-
Perf.email by Calibre, The newsletter contains mainly web performance articles which are not directly connected with their product. Therefore I can recommend to follow it.
-
Webpagetest.org Newsletter, Weekly Newsletter with Webpagetest.org updates and articles
-
Web performance newsletter weekly web performance newsletter by Marc Radziwill
-
Smashing Magazine Newsletter This is not a Web Performance only Newsletter
-
Dev Tips, Umar Hansa, weekly Great resource to learn the newest Chrome Dev Tools tips and tricks
Blogs
-
Planet Performance Overview of performance related blogs
-
The speed of thought - Posts from the Performance Team at Wikimedia
Podcasts
Video Formats
-
WebPageTest - Twitch: Bi-weekly live show on Twitch by Tim Kadlec around Webpagetest topics (Catchpoint)
-
Speed@Scale: Web Performance audits by Tracy Lee (@ladyleet) and guests
Web Performance Meetups
Look for a performance Meetup group close to where you live. This is a great opportunity to share and discuss ideas with other performance experts. Here are some groups close to our offices:
-
Barcelona: https://www.meetup.com/Barcelona-Web-Performance/
-
Berlin: https://www.meetup.com/Berlin-Web-Performance-Group/
-
London: https://ldnwebperf.org/
-
Munich: https://www.meetup.com/Munchen-Web-Performance-Group/
-
New York City https://www.meetup.com/Web-Performance-NY/
-
Toronto: https://www.meetup.com/Toronto-Web-Performance-Group/
Conferences
This are all conferences with a strong focus on web performance. They all have a very good lineup:
-
Lazy Load 2021 (June 11 & 18, online event, Ticket: Starting at 119 USD)
-
Performance.now() / Twitter 11–12 November 2021, Amsterdam, Netherland (Ticket: 550 EUR + VAT) – The event where the Web Perf family comes together in Europe (must go event)
-
We love speed, Bordeaux, France – Not very international, most of the talks are French
-
#perfMatters / Twitter Redwood City, California, USA
Core Web Vitals
-
The 9 most effective Core Web Vitals opportunities of 2023, Barry Pollard, 05/2023
-
Advancing Interaction to Next Paint, Rick Viscomi, Annie Sullivan, 05/2023
-
How to optimize web responsiveness with Interaction to Next Paint, Annie Sullivan, Michal Mocny, 05/2023
-
Largest Contentful Paint update in Chrome version 112, Karlijn Löwik, 04/2023
-
Optimize Time to First Byte (TTFB), Jeremy Wagner, 01/2023
-
Optimizing Largest Contentful Paint (LCP)https://www.youtube.com/watch?v=JhTR2fz68ec), Harry Roberts, 10/2022
-
Google’s top Core Web Vitals recommendations for 2023, Barry Pollard, Rick Viscomi, Philip Walton, Jeremy Wagner, Brendan Kenny, 01/2023
-
What goes into making a new Web Vital metric, Annie Sullivan, 12/2022
-
Why is CrUX data different from my RUM data?, Barry Pollard, 08/2022
-
Luxury retailer Farfetch sees higher conversion rates for better Core Web Vitals, Rui Santos & Manuel Garcia & Patrícia Couto Neto & Dikla Cohen, 07/2022
-
Chrome UX Report documentation, 07/2022 - ℹ️
-
Optimising Largest Contentful Paint, Harry Roberts, 03/2022
-
Optimising Core Web Vitals on SPAs, Simon Hearne, 03/2022
-
How To Benchmark And Improve Web Vitals With Real User Metrics, Átila Fassina, 02/2022
-
Improving Core Web Vitals, A Smashing Magazine Case Study, Barry Pollard, 12/2021
-
Hands On with the new Responsiveness Metrics, Hongbo Song, 12/2021
-
Have Core Web Vitals made the web faster?, Barry Pollard, 12/2021
-
Towards an animation smoothness metric, Michal Mocny & Behdad Bakhshinategh & Jonathan Ross, 11/2021
-
An experimental responsiveness metric, Hongbo Song, 11/2021
-
CLS at BuzzFeed — Part 1: Raising The Floor, Edgar Sanchez, 11/2021
-
CLS at BuzzFeed — Part 2: Getting Help From Real Users, Edgar Sanchez, 11/2021
-
CLS at BuzzFeed — Part 3: Dealing with the unpredictable, Edgar Sanchez, 11/2021
-
CWV will become a desktop ranking factor in February 2022 - ℹ️
-
Case Study: Renault Group, Thierry Coustillac & Antoine Bisch & Cédric Bazureau, 10/2021
-
Core Web Vitals Optimizer (proven process & open-source tool), Fabian Krumbholz, 09/2021 - 📚
-
How SPA architectures affect Core Web Vitals, Philip Walton & Yoav Weiss, 09/2021
-
Web Vitals patterns, Katie Hempenius, 09/2021 - 📚
-
Insight into Core Web Vitals from the Chrome Platform Team, Annie Sullivan & Katie Hempenius, 08/2021
-
Why lab and field data can be different (and what to do about it), Philip Walton, 08/2021
-
A performance-focused workflow based on Google tools, Antoine Bisch & Garima Mimani, 08/2021
-
HTTP Archive: CrUX Report, HTTP Archive, Monthly Update
-
Prevent unwanted Layout Shifts caused by Scrollbars with the scrollbar-gutter CSS property, Bramus Van Damme, 07/2021
-
Simulating real users in the lab to debug CLS issues, Rick Viscomi, 07/2021
-
Towards a better responsiveness metric, Nicolás Peña Moreno & Annie Sullivan & Hongbo Song, 06/2021 – ℹ️
-
The do’s and don’ts of Core Web Vitals, Ric Riley, 06/2021
-
More time, tools, and details on the page experience update, Google Search Central, 05/2021 - ℹ️
-
Improving Cumulative Layout Shift at Telegraph Media Group, Chris Boakes, 06/2021
-
CSS for Web Vitals, Katie Hempenius & Una Kravets, 06/2021
-
Business impact of Core Web Vital optimizations, WPO Stats, Updated regularly - 📚
-
What can the HTTP Archive tell us about Largest Contentful Paint?, Paul Calvano, 06/2021
-
How To Fix Cumulative Layout Shift (CLS) Issues, Barry Pollard, 06/2021
-
Core Web Vitals Tracking via GA4, BigQuery and Google Data Studio, Tony McCreath, 06/2021
-
Core Web Vitals – The Final Countdown, Fabian Krumbholz, 05/2021
-
How to get your page Core Web Vitals from the CrUX API, Fabian Krumbholz, 05/2021
-
What’s new in Web Vitals, Google I/O, 05/2021 - ℹ️
-
The business impact of Core Web Vitals, Google I/O, 05/2021
-
Ask Me Anything - Core Web Vitals, Google I/O 2021, 05/2021
-
Optimizing Web Vitals using Lighthouse, Addy Osmani, 05/2021
-
Cumulative Layout Shift: Measure and Avoid Visual Instability, Karolina Szczur, 05/2021
-
Measuring Core Web Vitals, Barry Pollard, 05/2021
-
More time, tools, and details on the page experience update, Jeffrey Jose (Google), 04/2021 – ℹ️
-
The Almost-Complete Guide to Cumulative Layout Shift, Jess B Pack, 04/2021
-
An In-Depth Guide To Measuring Core Web Vitals, Barry Pollard, 04/2021 – 🚀
-
Diving Into the New Cumulative Layout Shift, Tim Kadlec, 04/2021
-
Evolving the CLS metric, Annie Sullivan (Google), 04/2021 – ℹ️
-
Debug Web Vitals in the field, Philip Walton, 04/2021
-
Debug layout shifts, Katie Hempenius, 03/2021
-
Cookie Banners and Web Vitals, Brian Louis Ramirez, 03/2021
-
How to create a competitive analysis dashboard for Core Web Vitals using Google Data Studio, Rachel Anderson, 03/2021
-
Case Study Vodafone: A 31% improvement in LCP increased sales by 8%, Davide Grossi, 03/2021
-
Cumulative Layout Shift Study of Over 1 Million Websites, Mitul Gandhi, 02/2021
-
Analyzing Web Vitals with WebPageTest, Patrick Meenan, 12/2020
-
How to Improve Core Web Vitals, Simon Hearne, 10/2020
-
Cumulative Layout Shift in Practice, Nic Jansma, 10/2020
-
Cumulative Layout Shift in the Real World, Nic Jansma, 10/2020
-
Optimize for Core Web Vitals, Addy Osmani, 06/2020 – 🚀 & 🎥
-
Defining the Core Web Vitals metrics thresholds, Bryan McQuade, 05/2020
-
The Science Behind Web Vitals, Amar Sagoo / Annie Sullivan / Vivek Sekhar, 05/2020
-
Evaluating page experience for a better web, Sowmya Subramanian (Google), 05/2020 – ℹ️
-
Lessons learned from performance monitoring in Chrome (Slides), Annie Sullivan, 11/2019 – 🎥
Core Web Vitals Tools
-
Layout Shift GIF Generator: Visualise the Core Web Vitals metric Cumulative Layout Shift (CLS) with a simple GIF.
-
Cumulative Layout Shift Debugger: Visualise the Cumulative Layout Shift (CLS) to identify what needs improving on mobile and/or desktop in the initial load of a website.
Articles
General
-
The Performance Inequality Gap, 2023, Alex Russell, 12/2022
-
Browser Cookie Status, Simo Ahava - 📚
-
Website performance and the planet, Fershad Irani, 01/2022
-
Should you use a carousel on your website?, Myriam Jessier, 12/2021
-
2021 Chrome Dev Summit: Web Performance 101 (Slides), Tammy Everyts, 11/2021
-
Web Alamnac 2021: Web Performance, Sia Karamalegos, 11/2021
-
My Challenge to the Web Performance Community, Philip Walton, 10/2021
-
Personalizing Performance: Adapting Application in real time to member environments, Nitin Pasumarthy, 09/2021
-
The metrics game, Philip Tellis, 08/2021
-
Hobson’s Browser, Alex Rusell, 07/2021
-
Website Speed: Advice from the trenches, Bojan Basrak, 05/2021
-
Opting your Website out of Google’s FLoC Network, Paramdeo Singh, 04/2021
-
How to Convince Your Boss to Care About Speed, Karolina Szczur, 04/2021
-
So You Want To Make Your Website Faster?, Jason Knight, 04/2021
-
prefers-reduced-motion: Taking a no-motion-first approach to animations, Tatiana Mac, 03/2021
-
The Performance Inequality Gap, 2021, Alex Russell, 03/2021
-
Site Speed and Search Ranking (Complete Guide), Ben Schwarz, 02/2021
-
Finally – a way to calculate revenue impact of site speed, Lina Hansson, 01/2021
-
Blood pressure study: Which website issue cause users the most stress?, Robin Langford, 12/2020
-
Understanding Emotion for Happy Users – How does your site make your users feel?, Philip Tellis, 11/2020
-
Strengthening the Link Between Site Speed and Business Outcomes, Andy Davies, 10/2020
-
Why you should be testing your 404 pages web performance, Matt Hobbs, 08/2020
-
The Need for Speed, 23 Years Later, Kathryn Whitenton, 05/2020
-
Evaluating page experience for a better web, Sowmya Subramanian, 05/2020
-
Front-End Performance Checklist 2020, Vitaly Friedman (Smashing Magazine), 01/2020
-
Building a resilient frontend using progressive enhancement, GOV.uk, 12/2019
-
We analyzed 5.2 million desktop and mobile pages - Here’s What We Learned About Page Speed, Brian Dean, 10/2019
-
How Web Content Can Affect Power Usage, Benjamin Poulain & Simon Fraser, 08/2019
-
Web Page Usability Matters, Addy Osmani, 01/2019
-
Front-End Performance Checklist 2019, Vitaly Friedman, 01/2019
-
You need neither PWA nor AMP to make your website load fast, Nikita, 11/2018
-
The very real problem facing British retailers that nobody is talking about, Ryan Townsend, 11/2018
-
Brain Food: Speed Matters: Designing for mobile performance (PDF), AWWWARDS & Google, 2018
-
Start performance budgeting, Addy Osmani, 10/2018
-
Web Performance 101: JS, CSS, HTTP, images & fonts, Ivan Akulov, 10/2018
-
Hyper-Lightweight Websites Challenge (PDF) / Toronto SPOTLIGHT PERFORMANCE talk, Chris Zacharias, 10/2018
-
The power of progressive enhancement, Andy Bell, 08/2018
-
Optimize Website Speed With Chrome DevTools, Kayce Basques, 07/2018
-
Speed is now a landing page factor for Google Search and Ads, Ilya Grigorik, Addy Osmani, 07/2018
-
How to create the best experience for every user with the newest web APIs, Fabian Krumbholz, 06/2018
-
15+ Experts Share Their Web Performance Advice for 2018, Cody Arsenault, 06/2018
-
Fostering a Web Performance Culture, José M. Pérez, 06/2018
-
A Beginner’s Guide to Website Speed Optimization, Mark Gavalda, 05/2018
-
Delivering Fast and Light Applications with Save-Data, Ilya Grigroik, 01/2018
-
Can You Afford It?: Real-world Web Performance Budgets, Alex Russell, 10/2017
-
The State of the Web — A guide to impactful performance improvements, Karolina Szczur, 09/2017
-
What is Progressive Enhancement and why should you care?, Tiffany Tse, 02/2017
-
Making websites that work well on Opera Mini, Bruce Lawson, 06/2015
-
Perf Audits for Blink & DevTools, CNet, Wikipedia, Time, Paul Irish, 02/2015
-
My Performance Audit Workflow, Paul Lewis, 04/2014
SEO and Marketing
-
WTH Google, is Pagespeed a SEO ranking factor or not?! (Spoiler: yes, it is, but not a ranking system..), Erwin Hofman, 05/2023
-
Are Core Web Vitals affected by Google Ads?, Roderik Derksen, 11/2022
-
Core Web Vitals is a Measurable Ranking Factor, Johannes Beus, 09/2021
-
How To Perform An SEO Audit Using Google Search Console, Olga Zarzeczna, 06/2021
-
Everything we know about Core Web Vitals and SEO, Simon Hearne, 02/2021
Network and Caching
-
Don’t make visitors on your website wait for the same page twice, Jordy Scholing, 05/2023
-
Make sure to check your caching rules, Leander Westerhout, 07/2022
-
Bringing instant page-loads to the browser through speculative prerendering, Leena Sohoni & Addy Osmani, 02/2022
-
Experiment with Priority Hints Locally, Brian Louis Ramirez, 11/2021
-
New HTTP standards for caching on the modern web, Tim Perry, 10/2021
-
Coalescing Connections to Improve Network Privacy and Performance, Talha Paracha & Suleman Ahmad, 10/2021
-
Deploying HTTP/3 on Windows Server at Scale, Nick Banks, 10/2021
-
How to win at CORS, Jake Archibald, 10/2021 – 🚀
-
Bringing instant page-loads to the browser through speculative prerendering, Addy Osmani & Leena Sohoni, 09/2021
-
The Challenges of Ajax CDN, Catchpoint, 09/2021
-
HTTP/3 From A To Z: Core Concepts (Part 1), Robin Marx, 08/2021 – 🚀
-
HTTP/3: Performance Improvements (Part 2), Robin Marx, 08/2021
-
HTTP/3: Practical Deployment Options (Part 3), Robin Marx, 09/2021
-
Quicklink case study: faster pages, increased page views, Andrea Verlicchi, 07/2021
-
Conditional HTTP GET: The fastest requests need no response body, Ilija Eftimov, 06/2021
-
Preload, prefetch and other tags, Ivan Akulov, 05/2021
-
Prefetching Heuristics, Minko Gechev, 02/2021
-
Head-of-Line Blocking in QUIC and HTTP/3: The Details, Robin Marx, 12/2020
-
Back/forward cache, Philip Walton, 11/2020
-
Intent to Remove: HTTP/2 and gQUIC server push, Chromium, 11/2020
-
The Performance Cost of EV Certificates, Simon Hearne, 11/2020
-
Who Opts-in to Save-data?, Simon Hearne, 10/2020
-
Improve performance by using a content delivery network, Katie Hempenius, 09/2020 - 🚀
-
Measuring and examining TLS 1.3, IPv4, and IPv6 performance, Matt Hobbs, 07/2020
-
San Certificates: How Many Alt-Names Are Too Many?, Paul Calvano, 02/2020
-
EV Certificates Make The Web Slow and Unreliable, Aaron Peters, 01/2020
-
The impact of SSL certificate revocation on web performance, Matt Hobbs, 01/2020
-
How to Test DNS Server Response Time to Troubleshoot Site Speed, Jenni McKinnon, 11/2019
-
Extended Validation Certificates are (Really, Really) Dead , Troy Hunt, 08/2019
-
Three Ways of Checking Rel=preconnect Resource Hints Are Working, Andy Davies, 04/2019
-
Preconnect resource hint and the crossorigin attribute, Michael Crenshaw, 04/2019
-
Cache-Control for Civilians, Harry Roberts, 03/2019
-
TTFB optimization: a guide to enhanced performance, Stephan Becker, 03/2019
-
QUIC and HTTP/3 : Too big to fail?!, Robin Marx, 12/2018
-
All about prefetching, Katie Hempenius, 12/2018
-
Measuring Performance With Server Timing, Drew McLellan, 10/2018
-
Service Worker Caching Strategies Based on Request Types, Thomas Steiner, 08/2018
-
Dynamic resources using the Network Information API and service workers, Dean Hume, 07/2018
-
Connection-Aware Components, Max Böck, 07/2018
-
To push or not to push, Patrick Hamann, 06/2018
-
Towards ever faster websites with early hints and priority hints, Andrew Betts, 06/2018
-
Brotli Compression – How Much Will It Reduce Your Content?, Paul Calvano, 07/2018
-
What is HTTP/2 — The Ultimate Guide, Ali Raza, 04/2018
-
Resource Hints — What is Preload, Prefetch, and Preconnect?, Brian Jackson, 01/2018
-
HTTP Caching, Ilya Grigorik, 01/2018
-
A Comprehensive Guide To HTTP/2 Server Push, Jeremy Wagner, 04/2017
-
Preload, Prefetch And Priorities in Chrome, 03/2017, Addy Osmani
-
A Link: rel=preload Analysis From the Chrome Data Saver Team, Simon Pelchat, 03/2017
-
What is the preload directive?, 01/2017
-
Caching best practices & max-age gotchas, Jake Archibald, 2016
-
HTTP/2 Push: The details, Robin Marx, 12/2016
-
The 14KB In The TCP Initial Window, Tyler Cipriani, 09/2016
-
How DNS works (Comic)
Image and Video Optimization
-
Building an effective Image Component, Leena Sohoni & Kara Erickson & Alex Castle, 10/2021
-
Decoding AVIF: Deep dive with cats and imgproxy, Polina Gurtovaya & Andy Barnov, 08/2021
-
The performance effects of too much lazy-loading, Rick Viscomi & Felix Arntz, 07/2021
-
GIFS on the web: A new way to bloat, Doug Sillars, 06/2021
-
Serving sharp images to high density screens, Jake Archibald, 06/2021
-
The Humble
Element And Core Web Vitals, Addy Osmani, 04/4021 - 🚀
-
Proxying Cloudinary Requests with Netlify, Tim Kadlec, 11/2020
-
How to cap image fidelity to 2x and save 45% image weight on high-end mobile phones, Andrea Verlicchi, 11/2020
-
How to preload responsive images with imagesizes and imagesrcset, Stefan Judis, 10/2020
-
Time for Next-Gen Codecs to Dethrone JPEG, Jon Sneyers, 02/2020
-
Maximally optimizing image loading for the web in 2021, Malte Ubl, 12/2020
-
Native image lazy-loading for the web, Houssein Djirdeh, Addy Osmani, Mathias Bynens, 07/2020
-
How JPEG XL Compares to Other Image Codecs, Jon Sneyers, 05/2020
-
AVIF for Next-Generation Image Coding, Netflix Technology Blog, 02/2020
-
In-Browser Performance Linting With Feature Policies, Tim Kadlec, 02/2020
-
Visual acuity and device-pixel-ratio, Eric Portis, 03/2019
-
Video Playback On The Web: The Current State Of Video, Doug Sillars, 10/2018
-
Video Playback On The Web: Video Delivery Best Practices, Doug Sillars, 10/2018
-
Automating Resource Selection with Client Hints, Ilya Grigorik, 07/2018
-
Image Inconsistencies: How and When Browsers Download Images, Harry Roberts, 06/2018
-
Essential Image Optimization, Addy Osmani, 2017
-
Using SVG as placeholders — More Image Loading Techniques, José M. Pérez, 10/2017
-
Base64 Encoding & Performance, Part 2: Gathering Data, Harry Roberts, 02/2017
-
Base64 Encoding & Performance, Part 1: What’s Up with Base64?, Harry Roberts, 02/2017
-
Improving Perceived Performance with Multiple Background Images, Harry Roberts, 10/2016
-
How Medium does progressive image loading, José M. Pérez, 10/2015
-
Responsive Images 101, Jason Grigsby, 03/2015
-
Srcset and sizes, Eric Portis, 03/2014
Web Fonts
-
30 Best Web Safe Fonts for Your Next Design in 2021, Maateo Duó, 07/2021
-
Making Google Fonts Faster in 2021, Sia Karamalegos, 07/2021
-
A New Way To Reduce Font Loading Impact: CSS Font Descriptors, Barry Pollard, 05/2021
-
5 steps to faster web fonts, Iain Bean, 05/2021
-
How I set up Glyphhanger on macOS for optimizing and converting font files for the Web, Sara Soueidan, 03/2021
-
More than you ever wanted to know about font loading on the web, Malte Ubl, 01/2021
-
The importance of
@font-facesource order when used with preload, Matt Hobbs, 01/2021 -
How to avoid layout shifts caused by web fonts, Simon Hearne, 01/2021
-
The Fastest Google Fonts, Harry Roberts, 05/2020
-
Should you self-host Google Fonts?, Barry Pollard, 02/2020
-
Preloading Fonts and the Puzzle of Priorities, Andy Davies, 02/2019
-
The font loading checklist, Zach Leatherman, 08/2018
Measure Performance
-
Experimenting with measuring soft navigations - Chrome Developers, Barry Pollard, Yoav Weiss, 02/2023
-
Variability Isn’t the Problem, Tim Kadlec, 12/2022
-
How Fast Is Your Web App? How to Test Page Transition Performance, Scott Jehl, 09/2022
-
Element Timing: One true metric to rule them all? , Andy Davies, 09/2022
-
Measure What You Impact, Not What You Influence, Harry Roberts, 08/2022
-
Why Lighthouse Performance Score Doesn’t Work, Karolina Szczur, 12/2021
-
What’s new in PageSpeed Insights, Addy Osmani & Elizabeth Sweeny, 11/2021
-
Why does Lighthouse lab data not match field data?, Matt Zeunert, 08/2021
-
How do Chrome extensions impact browser performance?, Matt Zeunert, 07/2021
-
Benchmarking JavaScript Memory Usage, Tim Kadlec, 06/2021
-
Lighthouse performance scoring - How Lighthouse calculates your overall Performance score, 06/2021
-
How Real User Monitoring will improve GOV.UK for everyone, Matt Hobbs, 06/2021
-
How Lighthouse 8 Changes Affect Your Metrics, Karolina Szczur, 06/2021
-
Lighthouse V.8 FAQ, Paul Irish, 06/2021
-
How to use WebPageTest’s Graph Page Data view, Matt Hobbs, 04/2021
-
Setting up Cloudflare Workers for web performance optimisation and testing, Matt Hobbs, 03/2021
-
Cloudflare Worker recipes for frontend performance testing, Matt Hobbs, 03/2021 – 🚀 & 📚
-
Measuring Network Performance in Mobile Safari, Harry Roberts, 02/2021
-
An Opinionated Guide to Performance Budgets, Tammy Everts, 02/2021
-
How to run a WebPageTest test, Matt Hobbs, 12/2020
-
Strategies for Telemetry Exfiltration (aka Beaconing In Practice), Nic Jansma, 12/2020
-
On Cadence, Cohorts and Trained Behavior, Tobias Baldauf, 12/2020
-
Site-Speed Topography, Harry Roberts, 11/2020
-
Measuring Performance behind consent popups, Simon Hearne, 05/2020
-
Performance Budgets, Pragmatically, Harry Roberts, 01/2020
-
How to read a WebPageTest Connection View chart, Matt Hobbs, 12/2019
-
How to read a WebPageTest Waterfall View chart, Matt Hobbs, 10/2019 – 🚀 & 📚
-
Lighthouse Variability, 2019 – 🚀
-
Metrics - Measure and optimize performance and user experience, 2019
-
Largest Contentful Paint, Philip Walton, 08/2019
-
Time to First Byte: What It Is and Why It Matters, Harry Roberts, 08/2019
-
Web Page Usability Matters, Addy Osmani, 01/2019
-
Metrics from 1M sites, Steve Souders, 12/2018
-
Second Meaningful Content: the Worst Performance Metric, Scott Jehl, 11/2018
-
The Three Types of Performance Testing, Harry Roberts, 10/2018
-
Measuring Performance With Server Timing, Drew McLellan, 10/2018
-
Applying Waterfall Visualizations to Real User Monitoring Data, Simon Hearne, 10/2018
-
An analysis of Chromium’s paint timing metrics, Joseph Wynn, 09/2018
-
Accurately measuring layout on the web, Nolan Lawson, (09/2018)
-
A step by step guide to monitoring the competition with the Chrome UX Report, Rick Viscomi, 09/2018
-
How to track performance, U.S. Web Design System, 07/2018
-
Assessing Loading Performance in Real Life with Navigation and Resource Timing, Jeremy Wagner, 06/2018
-
User Timing API (Custom Timing): the most relevant performance measure ever, Damien Jubeau, 03/2018
-
Server Timing in the Wild, Christopher Sidebottom, 03/2018
-
Is a High Abandon Rate Hitting Your Online Marketing Budget?, Fabian Krumbholz, 03/2018
-
ResourceTiming Visibility: Third-Party Scripts, Ads and Page Weight, Nic Jansma, 03/2018
-
Measure Performance with the RAIL Model, Addy Osmani, 02/2018
-
User-centric Performance Metrics, Philip Walton, 02/2018
-
Breaking Down the Performance API, Preethi, 12/2017
-
An Audit of Boomerang’s Performance, Nic Jansma, 12/2017
-
Choosing the Correct Average, Harry Roberts, 01/2017
-
User Timing and Custom Metrics, Steve Souders, 11/2015
-
Conversion Impact Score: What is it? And why do you need to know yours?, Tammy Everts, 07/2015
-
Driving WebPagetest from a Google Docs Spreadsheet, Andy Davies, 12/2014
-
Page Weight Matters - surprising result after web performance improvement Chris Zacharias), 12/2012
Third-Party Services
-
Web Almanac 2021: Third Parties, Barry Pollard, 11/2021
-
Best practices for using third-party embeds, Leena Sohoni & Katie Hempenius & Addy Osmani, 10/20201
-
The Impact of Third-Party Scripts on the Facebook Outage, Kunjal Botadra, 10/2021
-
Loading Third-Party JavaScript, Addy Osmani & Arthur Evans
-
Best practices for tags and tag managers, Katie Hempenius, 07/2021
-
Keeping third-party scripts under control, Chris Anstey & Antoine Bisch, 04/2021
-
Best practices for cookie notices, Katie Hempenius, 04/2021
-
Bypassing Cookie Consent Banners in Lighthouse and WebPageTest, Andy Davies, 03/2021 – 🚀
-
Understanding the True Cost of Client-Side A/B Testing, Tim Kadlec, 01/2021
-
The Case Against Anti-Flicker Snippets, Andy Davies, 11/2020
-
Reducing the Site-Speed Impact of Third-Party Tags, Andy Davies, 10/2020
-
Adding controls to Google Tag Manager, Barry Pollard, 09/2019
-
Improve web performance lazy loading reCaptcha, Antonio Ufano, 06/2020
-
Self-Host Your Static Assets, Harry Roberts, 05/2019
-
How we shaved 1.7 seconds off casper.com by self-hosting Optimizely, Kyle Rush, 08/2018
-
Changing Our Approach to Anti-tracking, Nick Nguyen, 08/2018
-
When 3rd parties stop being polite … and start getting real, Charles Vazac & Nic Jansma, 06/2018
-
Identifying, Auditing, and Discussing Third Parties, Harry Roberts, 05/2018
-
Crashing the (Third) Party, Oleg Zender, 06/2018
-
Collection of articles about 3rd party, Trend Walton
-
How 3rd Party Scripts can be performant citizens on the web, Ryan Townsend, 08/2017
-
Performance and Resilience: Stress-Testing Third Parties, Harry Roberts, 07/2017
-
Discover how Adidas is using data science to deliver third-party governance, Kristian Sköld, 11/2016
-
How A/B testing tools worsen your site speed (study), OrangeValley, 04/2016
-
10 pro tips for managing the performance of your third-party scripts, Tammy Everts, 11/2015
Optimise the Critical Render Path
-
Why Not document.write()?, Harry Roberts, 01/2023
-
Speeding Up Async Snippets, Harry Roberts, 10/2022
-
Critical CSS? Not So Fast!, Harry Roberts, 09/2022
-
Priority Hints - What Your Browser Doesn’t Know (Yet), David Ross, 07/2022
-
Optimizing resource loading with Priority Hints, Patrick Meena & Addy Osmani & Leena Sohoni, 10/2021 - 🚀 📚
-
Chrome Resource Priorities and Scheduling, Patrick Meenan, 09/2021 - 🚀 📚
-
How To Optimize CSS for Peak Site Performance, Craig Buckler, 09/2021
-
Eliminate render blocking CSS to improve start render time, Jeff Knox, 09/2021
-
Small Bundles, Fast Pages: What To Do With Too Much JavaScript, Ben Schwarz, 09/2021
-
How to Eliminate Render-Blocking Resources: a Deep Dive, Sia Karamalegos, 07/2021
-
The Critical Request: How to Prioritise Requests to Improve Speed, Ben Schwarz, 04/2021
-
How to Improve CSS Performance, Milica Mihajlija, 03/2021
-
The Simplest Way to Load CSS Asynchronously, Scott Jehl, 07/2019 – 🚀
-
Measuring the Critical Rendering Path, Ilya Grigorik, 12/2018
-
Inlining or Caching? Both Please!, Scott Jehl, 11/2018
-
CSS and Network Performance, Harry Roberts, 11/2018
-
Analyzing Critical Rendering Path Performance, Ilya Grigorik, 08/2018
-
Front-End Performance Checklist, 2018, GitHub Project with updates
-
The PRPL Pattern, Addy Osmani, 02/2018
-
Now You See Me: How To Defer, Lazy-Load And Act With IntersectionObserver, Denys Mishunov, 01/2018
-
Optimising the front end for the browser, Sanjay Purswani, 02/2017
-
Prefer DEFER Over ASYNC, Steve Souders, 12/2016
-
A comprehensive guide to font loading strategies, Zach Leatherman, 07/2016
-
Understanding the critical rendering path, rendering pages in 1 second, Luis Vieira, 06/2015
-
More Weight Doesn’t Mean More Wait, Scott Jehl, 04/2015
Javascript and Render Performance
-
When JavaScript Fails, Jason Godesky, 02/2023
-
Everyone has Javascript, right?, Stuart Langridge
-
Five Data-Loading Patterns To Boost Web Performance, Agustinus Theodorus, 09/2022
-
Optimize long tasks, Jerry Wagner, 09/2022 – 🚀
-
The impact of removing jQuery on our web performance, Matt Hobbs & Andy Sellick, 08/2022
-
Profiling & Optimizing the runtime performance with the DevTools Performance tab, TK, 08/2022
-
Don’t fight the browser preload scanner, Jeremy Wagner, 05/2022
-
The Web Performance impact of jQuery, Matt Hobbs, 03/2022
-
[Have Single-Page Apps Ruined the Web? Transitional Apps](https://www.youtube.com/watch?v=860d8usGC0o), Rich Harris, 12/2021 -
Improve how you architect webapps, Addy Osmani & Lydia Hallie – 🚀
-
[Nuxt SSR Optimizing Tips]{https://vueschool.io/articles/vuejs-tutorials/nuxt-ssr-optimizing-tips/}, Filip Rakowski
-
Introducing Partytown 🎉: Run Third-Party Scripts From a Web Worker, Adam Bradly, 10/2021
-
Minimising Layout and Layout thrashing for 60 FPS, Charis Theo, 09/2021 – 🚀
-
Does shadow DOM improve style performance?, Nolan Lawson, 08/2021
-
Debugging memory leaks - HTTP 203, Jake Archibald & Surma, 08/2021
-
Explore JavaScript Dependencies With Lighthouse Treemap, Sia Karamalegos, 08/2021
-
The real cost of Javascript dependencies (and the state of JS package quality), Vincent Vallet, 06/2021
-
The State Of Web Workers In 2021, Surma, 06/2021
-
Building a Faster Web Experience with the postTask Scheduler, Callie (Airbnb Engineering & Data Science), 05/2021 – 🚀
-
Don’t attach tooltips to document.body – Learn how the browser works – Debug forced reflow, Atif Afzal, 03/2021 – 🚀
-
How to Create and Fix Memory Leaks With Chrome DevTools, Rakia Ben Sassi, 03/2021
-
JavaScript performance beyond bundle size, Nolan Lawson, 02/2021
-
The Import On Interaction Pattern, Addy Osmani, 12/2020 – 🚀
-
The “Live DOM” Is Not “Slow”, “Bad”, Or “Wrong”. Web Developers Are., Jason Knight, 11/2020
-
Prevent layout shifts with CSS grid stacks, Hubert Sablonnière, 10/2020
-
content-visibility: the new CSS property that boosts your rendering performance, Una Kravets, Vladimir Levin, 08/2020
-
Preact vs React - Updating React at Etsy, Ben Sangster, 07/2020
-
The Cost of Javascript Frameworks, Tim Kadlec, 04/2020
-
Fixing memory leaks in web applications, Nolan Lawson, 02/2020
-
How to load polyfills only when needed, Ivan Akulov, 02/2020
-
Responsible JavaScript: Part III - Third parties, Jeremy Wagner, 11/2019
-
The cost of JavaScript in 2019, Addy Osmani, 06/2019 – :rocket:
-
When should you be using Web Workers?, Surma, 06/2019
-
Responsible Javascript: Part II - Code Bundle, Jeremy Wagner, 06/2019
-
Faster script loading with BinaryAST?, Ingvar Stepanyan, 05/2019
-
Svelte 3: Rethinking reactivity, Rich Harris, 04/2019
-
Responsible Javascript: Part I - Web platform over frameworks, Jeremy Wagner, 03/2019
-
JavaScript Loading Priorities in Chrome, Addy Osmani, 02/2019 – 📚
-
Idle Until Urgent, Philip Walton, 09/2018 – :rocket:
-
Browser painting and considerations for web performance, Georgy Marchuk, 08/2018
-
The Cost Of JavaScript In 2018 (Video), Addy Osmani, 08/2018
-
Examining Web Worker Performance, James L Milner, 05/2018
-
Front-End Performance Checklist, 2018, GitHub Project with updates
-
jankfree, Website which collects resources about render performance
-
What forces layout/reflow?, Paul Irish
-
Using requestIdleCallback, Paul Lewis, 01/2018
-
Optimize Javascript Execution, Paul Lewis, 01/2018
-
Why Web Developers Need to Care about Interactivity, Philip Walton, 12/2017
-
Improving Performance with the Paint Timing API, Umar Hansa, 10/2017
-
Deploying ES2015+ Code in Production Today, Philip Walton, 09/2017
-
Performant Web Animations and Interactions: Achieving 60 FPS, Emily Hayman, 08/2017
-
JavaScript Start-up Performance, Addy Osmani, 02/2017
-
Performant Parallaxing, Paul Lewis, 12/2016
-
The Anatomy of a Frame, Paul Lewis, 02/2016
-
The future of loading CSS, Jake Archibald, 02/2016
-
4 Types of Memory Leaks in JavaScript and How to Get Rid Of Them, Sebastián Peyrott, 01/2016
-
The cost of frameworks, Paul Lewis, 11/2015
- FLIP Your Animations, Paul Lewis, 02/2015
Perceived performance
This is all about how humans perceive performance and what we can do to help our users to keep focused:
-
A Guide to Keeping Users Engaged While They Wait, Morgan Davies, 07/2021
-
Optimistic UI Patterns for Improved Perceived Performance, Simon Hearne, 01/2021
-
Everything you need to know about skeleton screens, Bill Chung, 10/2018
-
The psychology of web performance, 06/2018
-
The Illusion of Time, Adrian Zumbrunnen, 08/2015
-
Why Performance Matters: The Perception Of Time, Denys Mishunov, 09/2015
-
Why Performance Matters, Part 2: Perception Management, Denys Mishunov, 11/2015
-
Why Performance Matters, Part 3: Tolerance Management, Denys Mishunov, 12/2015
-
True Lies Of Optimistic User Interfaces, Denys Mishunov, 11/2016
-
Taking A Look At The State Of Progressive Images And User Perception, José Manuel Pérez, 02/2018
Tooling Articles
-
New Render Blocking Indicator in Chrome and WebPageTest, Tim Kadlec, 07/2021
-
WebPageTest Sorcery Using Google Sheets, Brian Louis Ramirez, 06/2021
-
Using Chrome Local Overrides To Optimize Page Speed, Brian Louis Ramirez, 05/2021
-
WebPageTest API, Chris Coyier, 05/2021
-
Profiling site speed with the Chrome DevTools Performance tab, DebugBear, 04/2021
-
Exploring Site Speed Optimisations With WebPageTest and Cloudflare Workers, Andy Davies, 09/2020
-
Prototyping optimizations with Cloudflare Workers and WebPageTest, Andrew Galloni, 08/2020
-
Web Performance Recipes With Puppeteer, Addy Osmani, 04/2020
-
Cloudflare Workers, Pat Meenan Collection of Cloudflare Worker scripts, generally focused on performance optimizations
-
Chrome Flags for Tooling, Paul Irish
Online courses
These are excellent courses for web developer to gain a lot of insights about web performance.
Free Web Courses
- web.dev, Google, 11/2018
Free Video Courses
- Udacity: Website Performance Optimization by Google (free) This course is great to start. You will learn how the browser works internally and how you can optimise the critical render path.
Paid Video Courses
-
Setting up DevTools for Performance Testing, Harry Roberts, 07/2022
-
Lightning-Fast Web Performance, Scott Jehl, 05/2020 This course is great for Frontend Developers who are interested in web performance. Scott introduces the most relevant web performance metrics and shows the most effective ways how to optimize them in great detail. The course contains also a lot of good references which can be used to dive deeper into the topic.
-
Frontend Masters: Web Performance, Steve Kinney, 03/2018 ($39 / monthly subscription) This is the go to course for Frontend Developers. This course is going really deep into Javascript Performance and Rendering Performance. I recommend this for more senior developers.
-
Pluralsight: Tracking Real World Web Performance, Nik Molnar, 05/2015 ($29 / monthly subscription) Nice introduction into web performance measurement.
-
Modern Dev Tools, Umar Hansa, 05/2017 ($94) Umar is a Chrome Developer Tools expert and explains all the tools you need to understand and fix web performance issues.
-
Frontend Center, Glen Maddern, ($15/monthly subscription) Not 100% related to Web Performance. A few of the trainings are available for free.
-
devcademy - Web performance workshop, Marc Radziwill, 08/2020 (299€ - 750€)
Videos
-
Modern Web - State of Web Performance 2021, Panel: Alex Rusell, Yoav Weiss, Katie Hempenius, Rob Ocel, Katie Saylor-Miller, 08/2021
-
Top 10 performance pitfalls - HTTP 203, Jack Archibald & Surma, 06/2021
A crash course on web performance
This is a great free introduction into web performance. Ilya Grigorik from Google is covering everything from network, the critical render path and in-app performance. It is from 2013 but it is still highly relevant.
-
Critical rendering path (41:10)
-
Delivering 60 FPS in the browser (48:15)
Business
-
Inclusive Design is Fast by Default (Slides), Simon Hearne, 09/2021
-
From Milliseconds to Millions: A Look at the Numbers Driving Web Performance (Slides), Harry Roberts, 11/2019 – 🚀
-
The 7 Habits of Highly Effective Performance Teams (Slides), Tammy Everts, 11/2019
-
7 Years of Never Shutting Up About Site Speed (Schuh case study) (Slides), Stuart McMillan, 11/2019
-
PWA Challenges (Slides), Jason Grigsby, 11/2018 – Performance.now()
-
Building a Foundation for Performance, Michelle Vu, 11/2018 – Performance.now()
-
Starting a Dedicated Web Performance Team, Sarah Dapul-Weberman, 06/2018
-
Web Performance @ NBrown, Nick Webb & Laura Sheridan, 06/2018
-
Fast Fashion: Missguided (Slides), Mark Leach & Andy Davies, 06/2018
-
25% Faster Hotel Search. Web Performance? — Trivago, Tobias Baldauf, 06/2018
-
Conversions@Google 2018, Luke Wroblewski, 05/2018
-
On Building Performance for the Long Term (Slides), Allison McKnight, 02/2018
-
Building for Billions, Tal Oppenheimer, 06/2016
-
Making a business case for web performance optimization, Kristian Sköld, 04/2016
-
Performance Budget, Tim Kadlec, 04/2015
Third-Party Services
-
Hybrid Personalization in the Adobe Experience Platform Web SDK, Jason Waters, 11/2023
-
Keeping it 100, Web Performance with Franklin, Adobe - Project Franklin, 08/2023
-
How anti-flicker snippets from A/B testing tools impact site speed, Matt Zeunert, 02/2022
-
Deep dive into third-party performance (Slides), Simon Hearne, 11/2019
-
It’s My (Third) Party and I’ll Cry If I Want To (Slides), Harry Roberts, 11/2018
-
Name That Script (Slides), Trent Walton, 04/2018
-
A/B Testing, Ads and other 3rd Party Tags (Slides), Andy Davies, 02/2018
-
3rd Parties: A Hate Love Who Wants to be Managed, Kristian Sköld, 12/2017
-
What are third party components doing to your site?, Andy Davies/Simon Hearne, 06/2015
-
Stranger Danger: Tracking Vulnerabilities in Your Third Party Code, Guy Podjarny, 2015
-
Third Party Performance, Guy Podjarny, 04/2015
The Psychology of Performance
-
The Psychology of Speed, Simon Hearne, 10/2020
-
Improving perceived performance of loading screens through animation - Bachelor Thesis (PDF), Samantha Persson, 07/2019
-
Designing for Speed & Hacking Users Perception, Mustafa Kurtuldu, 04/2019
-
Cheating the UX when there is nothing more to optimize (Slides), Stephanie Walter, 01/2018
-
Perceived Performance: The Only Kind that Really Matters (Slides), Eli Fitch, 11/2017
-
The Illusion of speed - improving the perceived speed of websites, Paul Bakaus, 08/2017
-
Deconstructing Performance, Denys Mishunov, 01/2016 The content of this talk is similar to Eli Fitch’s talk, but less technical.
Network and Caching
-
HTTP Caching Tests, Mark Nottingham
-
List of YouTube videos about QUIC/HTTP3, Robin Marx
-
Data-s(h)aver strategies, Tim Vereecke, 11/2019
-
HTTP/3 - HTTP over QUIC is the next generation, Daniel Stenberg, 09/2019
-
More Than You Wanted to Know About Resource Hints, Harry Roberts, 06/2019
-
Resource loading, prioritization, HTTP/2 - oh my! - PerfMatters (Slides / Slides from Tutorial), Patrick Meenan, 05/2019
-
Building Faster, More Resilient Apps with Service Worker (Chrome Dev Summit 2018), Phil Walton/Ewa Gasperowicz, 11/2018
-
Headers for Hackers (Slides, Article: Headers we want, Article: Headers we don’t want), Andrew Betts, 11/2018 – Performance.now() Conference
-
Fun with Protocols, Natasha Rooney, 11/2018 – Performance.now() Conference
-
Take a (Client) Hint (Slides), (Code), Jeremy Wagner, 09/2018 - FullStack Fest Conference
-
QUIC: in Theory and Practice, Slides, Robin Marx, 06/2018
-
HTTP/2 101, Surma, 11/2015 Nice introduction to HTTP2
-
Yesterday’s perf best-practices are today’s HTTP/2 anti-patterns, Ilya Grigorik, 06/2015
Measure
-
Web Performance Metrics Cheatsheet, Ire Aderinokun, 10/2021
-
How to test site speed optimizations with Compute@Edge, Leon Brocard, 06/2021
-
WebPageTest and Cloudflare Workers – A Performance Consultant’s Dream Combo?, Andy Davies, 20/2020 – 🚀
-
How website speed can impact digital ad revenue (Slides), Simon Hearne, 06/2019
-
Crash Course in CrUX, Slides, Rick Viscomi, 04/2018 - perfmatters
-
The Latest in Metrics & Measurement, Paul Irish, 11/2018 – Performance.now()
-
How I learned to stop worrying and love UX metrics (Slides), Tammy Everts, 11/2018 – Performance.now() Conference
-
User Experience & Performance: Metrics that Matter, Slides, Philip Tellis, 10/2018
-
Chrome User Experience Report, Inian Parameshwaran, 06/2018
-
How Fast Is It?, Slides, Patrick Meenan, 02/2018
-
How’s the UX on the Web, Really?, Ilya Grigorik, 02/2018
-
Reliably Measuring Responsiveness in the Wild, Shubhie Panicker/Nic Jansma, 07/2017
-
Web Performance: Leveraging the Metrics that Most Affect User Experience, Shubhie Panicker/Philip Walton, 05/2017
-
Measuring Continuity, Philip Tellis/Nic Jansma, 07/2016
-
Using Machine Learning to Determine Drivers of Bounce and Conversion, Tammy Everts/Patrick Meenan, 07/2016
-
Forensic Tools for In-Depth Performance Investigations, Philip Tellis/Nic Jansma, 06/2016
-
Visualizing performance data in engaging ways, Mark Zeman, 06/2015
Tooling
-
Extending WebPageTest with Custom Metrics, Tim Kadlec, 04/2021
-
WebPageTest: Custom Metric Examples, WebPageTest
-
Speed tooling evolutions: 2019 and beyond, Elizabeth Sweeny & Paul Irish, 11/2019
-
Demystifying Speed Tooling (Google I/O ’19), Elizabeth Sweeny & Paul Irish & Amir Rachum, 05/2019
-
State of the Union for Speed Tooling (Chrome Dev Summit 2018), Elizabeth Sween/Paul Irish, 11/2018
-
What’s new in Chrome Dev Tools, Paul Irish, 05/2018
-
The power of Headless Chrome and browser automation, Eric Bidelman, 05/2018
-
Use Lighthouse and Chrome UX Report to optimize web app performance, 05/2018 Use the new Lighthouse API to integrate it into the Jenkins pipeline.
-
A Modern Front-End Workflow with DevTools, Umar Hansa, 02/2018
-
Charles Proxy, Willow Talk, 01/2016
-
Developer’s Toolbox: What is Charles and why would I want it?, Team Learnable, 05/2014
Image and Video
-
Progressively loading images - HTTP 203, Jake Archibald & Surma, 05/2021
-
SVG Will Save Us, Sarah Drasner, 04/2019, perfmatters
-
Building Modern Web Media Experiences: Picture-in-Picture and AV1 (Chrome Dev Summit 2018), François Beaufort/Angie Chiang, 11/2018
-
Image Optimization, Kornel Lesiński, 11/2018 – Performance.now()
-
Beyond the Basics of Image Optimization — (Slides), Una Kravets/Martin Splitt, 02/2018
-
Your Hero Images Need You! Save the Day with HTTP2 Image Loading, Tobias Baldauf, 04/2016
-
High Performance Images: Beautiful Shouldn’t Mean Slow, Guy Podjarny, 12/2015
Development
-
Harry Roberts - Get Your “head” Straight, Harry Roberts, 11/2021
-
Web Performance Tuning with browser APIs, Yaser Adel Mehraban, 06/2021
-
Transitioning to modern JavaScript (Article), Houssein Djirdeh, Jason Miller, Chrome Dev Summit 2020, 12/2020
-
When JavaScript Bytes (Slides), Tim Kadlec, 11/2019
-
You Really Don’t Need All that JavaScript, I Promise., Stuart Langridge, 2019
-
Adaptive Loading — Improving the UX for millions on low-end devices, Addy Osmany, 11/2019
-
Predictive Prefetching (Slides), Divya Sasidhara, 11/2019
-
WebAssembly – To the browser and beyond! (Slides), Patrick Hamann, 11/2019
-
The main thread is overworked & underpaid, Surma, 11/2019
-
Speed at Scale: Web Performance Tips and Tricks from the Trenches (Google I/O ’19), Addy Osmani & Katie Hempenius, 05/2019
-
Rendering on the Web: Performance Implications of Application Architecture (Google I/O ’19), Jason Miller & Houssein Djirdeh , 05/2019
- A Quest to Guarantee Responsiveness: Scheduling On and Off the Main Thread (Chrome Dev Summit 2018), Shubhie Panicker/Jason Miller, 11/2018
-
Speed Essentials: Key Techniques for Fast Websites (Chrome Dev Summit 2018), Katie Hempenius/Houssein Djirdeh, 11/2018
-
Raiders of the Fast Start: Frontend Perf Archeology (Slides), Katie Sylor-Miller, 11/2018 - Performance.now() Conference
-
The Long Tail of Performance (Slides), Tim Kadlec, 11/2018 - Performance.now() Conference
-
Optimizing Fonts (Slides), Zach Leatherman, 11/2018 – Performance.now() Conference
-
How I optimized my JavaScript sheet music rendering engine, Adrian Holovaty, 11/2018 – Performance.now() Conference
-
Debugging UI Performance Issues (Slides), Anna Migas, 11/2018 – Performance.now() Conference
-
Make JavaScript Faster (Slides), Steve Souders, 11/2018 – Performance.now() Conference
-
Schedule your animations like a pro – with requestAnimationFrame, Paul Lewis, 09/2018
-
Frontend Resilience (Slides), Ian Feather, 06/2018
-
There’s more to Performance than meets the Eye, Léonie Watson, 06/2018, Delta Conference
-
The Event Loop, Jake Archibald, 02/2018 – W3C Spec Event Loop
-
Performant Animations: Hitting 60fps, Emily Hayman, 02/2018
-
Resource Loading — Past, Present & Future (Slides), Yoav Weiss, 02/2018
-
Web Fonts are ▢▢▢ Rocket Science (Zach’s lenghty article), Zach Leatherman, 02/2018
-
Front End Center: Caching & CDNs, 10/2017
-
Fast By Default: Modern Loading Best Practices, Addi Osmani/Ilya Grigorik, 10/2017
-
Front End Center: Why Latency Matters: Foundations of Web Performance, 08/2017
-
Creating UX that “Just Feels Right” with Progressive Web Apps, Owen Campbell-Moore, 05/2017
-
Solving the Web Performance Crisis, Nolan Lawson, 01/2017
-
Solving the Web Performance Crisis, Nolan Lawson, 01/2017
-
Planning for Performance: PRPL, Sam Saccone, 11/2016
-
AMP: Does it Really Make Your Site Faster?, Nic Jansma, Nigel Heron, 11/2016
-
UI Elements at 60fps, Paul Lewis, 06/2016
-
Owning your performance: RAIL, Paul Irish, 11/2015
- HTTP2 and Front-End Performance, Mark Nottingham, 05/2015
Meta
-
Web Performance Research, TK, 08/2022
-
performance.now().reject(reasons) (Slides), Ilya Grigorik, 11/2019
-
A Decade of Disciplined Delivery (Slides), Henri Helvetica, 11/2019
-
The Future of Performance (Slides), Vitaly Friedman, 11/2019
Twitch
-
Web Performance Auditing (with Tim Kadlec) — Learn With Jason (90m), 07/2020
-
Testing optimizations with Cloudflare Workers and WebPageTest, Tim Kadlec (Webpagetest), 07/2020
-
Live Auditing a Government Site, Tim Kadlec (Webpagetest), 06/2020
-
Hidden Gems in WPT, Tim Kadlec (Webpagetest), 06/2020
Books
This are the books I read about web performance and I can highly recommend all of them:
-
Image Optimization, Addy Osmani, Smashing Magazin Book, 04/2021
-
Going Offline, Jeremy Keith, A Book Apart, 04/2018
-
High Performance Images, Colin Bendell/Tim Kadlec/Yoav Weiss/Guy Podjarny/Nick Doyle/Mike McCall, O’Reilly, 11/2016 This book goes really deep and will answer you all the questions you could possible ask about images.
-
Time is money, Tammy Everts, O’Reilly, 06/2016 This book is great to understand why performance matters and how it influences human behaviour and your business metrics. I recommend this book highly for Business Consultants.
-
Using WebPageTest, Rick Viscomi/Andy Davies/Marcel Duran, O’Reilly, 10/2015 This book gives a deep insight into WebPageTest. You will learn a lot of things you wouldn’t find out reading this book.
-
Designing for Performance, Lara Callender Hogan, O’Reilly, 12/2014
-
Responsible Responsive Design, Scott Jehl, A Book Apart, 11/2014
-
High Performance Browser Networking, Ilya Grigorik, O’Reilly, 09/2013 (free) This book is a must read. If you are serious about web performance you have to understand the network layer. This book will teach you what you need to know.
-
High Performance Web Sites, Steve Souders, O’Reilly, 09/2007 This book is a classic.
-
Even Faster Web Sites, Steve Souders, O’Reilly, 07/2009 Another classic book.
Tools
Free tools and services
-
Chcr.co Check Your Site Across Leading Website Testing Tools
WebPageTest
-
WebPageTest Make synthetic measurements from all over the world. Make performance audits of any website. This tool is very powerful and gives you a lot of insights. I use it a lot to make a website comparison video. – 🚀
-
WebPageTest comparison URL generator Compare multiple webpagetest results which each other. Nice tool to see filmstrips site by site.
-
Frustration Index “The gap between metrics is a better KPI for user experience” - FRUSTRATIONindex looks at the gap between metrics instead of looking at them individually. The bigger the gap the bigger the chance a user gets frustrated.
-
Request Map Generator The Request Map Generator is the go to place to understand what 3rd party tools are running on your page and how much data they are adding.
Lighthouse & CrUX & Core Web Vitals
-
Lighthouse network throttling simulation This tool runs a Lighthouse performance test at a range of different network speeds. It shows how bandwidth and round-trip latency impact site performance metrics.
-
Lighthouse Lighthouse is becoming the best audit tool for web performance. It has a great documentation and gives valuable insights. This is where my performance audit is starting.
-
Lighthouse Parade A Node.js command line tool that crawls a domain and compiles a report with lighthouse performance data for every page.
-
Pagespeed Compare Compare performance metrics of your pages against each other or your competitors using Google PageSpeed Insights.
-
Lighthouse Scoring Calculator: Learn how the Lighthouse Score is calculated for the last two versions. This helps to understand where changes are comming from if your score changes.
-
Lighthouse Scores from around the world: Global performance insights, powered by Lighthouse. Lighthouse Metrics provides easy insights for your site’s performance. Save your time by running tests from multiple locations to get the valuable insight you need.
-
Web Performance Budget Calculator Create your own budget based on httparchive data of millions of pages. Download it as an json file for Lighthouse Web Performance Budget.
-
Test your mobile speed with Google Test score, benchmark with other pages from the same industry, detailed report
-
Google Search Console Detect Core Web Vitals issues on your page. Fix it. And revalidate.
-
Google Page Speed Insights Show CrUX RUM data of big websites.
-
Treo Configure speed metrics using percentiles and intervals for any website from @ChromeUXReport
-
Real User Experience Test (rUXt) Access RUM data for 3,237,526 websites accessed by Google Chrome Users
-
Google Speed Scorecard Compare your mobile Site Speed with your competition based on CrUX data
-
Google Imapct Calculator Estimate the revenue impact of performance optimisations
-
massWebVitals A node CLI script to grab Largest Contentful Paint, First Input Delay & Cumulative Layout Shift for a list of pages specified in a .csv file.
-
Layout Shift GIF Generator: Visualise the Core Web Vitals metric Cumulative Layout Shift (CLS) with a simple GIF.
-
Cumulative Layout Shift Debugger: Visualise the Cumulative Layout Shift (CLS) to identify what needs improving on mobile and/or desktop in the initial load of a website.
-
Batch Speed: Bulk speed test multiple urls using Google’s Page Speed checker
-
Layout Shift Terminator: The following tool allows you to enter arbitrary markup which causes layout shifts (e.g. social embed) in order load the markup at various viewport sizes to be able to measure the dimensions at each. With this information it then provides optimized markup with responsive media queries to reduce the amount of layout shifting when the markup is rendered on a loading page.
Images & Video
-
AVPress Compress & resize videos in the browser thanks to WebAssembly and FFMPEG.WASM.
-
Squoosh Upload an image and compare the original with different compressed version to find a good balance between filesize and image quality. – 🚀
-
I just want to put an image on my page (Article) Optimizes images and generate the HTML for you.
-
Cloudflare: Image Optimization Test Image analysis tool. This tool gives you insight about how you can optimise your images to gain a better web performance.
-
Cloudinary: Image Analyser Image analysis tool. This tool gives you insight about how you can optimise your images to gain a better web performance. This tool is also integrated within webpagetest.org.
-
Responsive Image Breakpoints Generator v2.0 Easily generate the optimal responsive image dimensions
-
ImageOptim Image compression
-
ImageAlpha: Free png optimizer for MacOS
Thirdparty
-
3P web, Shows the impact of Third-Party Tools based on HTTP Archive data.
-
https://better.fyi/trackers/ Nice list of 3rd party trackers with detailed information, for example about how to block the service. Which comes in handy when you want to measure the impact of a tool.
-
spof-o-matic Chrome extension for detecting and simulating frontend Single Points Of Failure
-
JS Manners I like this page to audit JS Frameworks and 3rd party tools.
-
Webbkoll This tool helps you check what data-protecting measures a site has taken to help you exercise control over your privacy.
-
Ghostery See what 3rd party tools are loaded on a site.
-
3rdParty.io 3rdParty.io monitors third-party scripts and libraries, and checks that they’re following best practices for performance, reliability and security – 🚀
-
3rd Party Audit Google Sheet A Google Sheet provided by Harry Roberts which gives you a nice overview over your used 3rd Party Tools
-
SimilarWeb Find similar pages for a competitor benchmark.
-
Build with Understand the technical building blocks of a website.
Development Tools
-
PurifyCSS Online Insert your website URL below and find out by how much of your CSS file size can be reduced – 🚀
-
Microsoft WebHint webhint is a customizable linting tool that helps you improve your site’s accessibility, speed, cross-browser compatibility, and more by checking your code for best practices and common errors.
-
Chrome Developer Tools This is the go to tool for all web developers. Understand how your code gets loaded, parsed and rendered. – 🚀
-
Yellow Lab Tools Online test to help speeding up heavy web pages: Frontend Quality, WebPerf, JS Profiling – 🚀
-
Waterfaller: generate tasks for developers that boost page speed Waterfaller uses Google PageSpeed Insights to generate an actionable list of tasks to improve your Core Web Vitals metrics. It might be a good compliment to Lighthouse audit tips! – 🚀
-
Can I use? Check the browser support for every web technology. – 🚀
-
SpeedChecklist A checklist which shows you how to optimise web performance issues you might have. You find best practices for the most common problems described in great detail.
-
Slowfiles, Harry Roberts & Ryan Townsend Simulate slow loading JS and CSS files.
-
CSS Triggers Which CSS element trigger layout, paint, or composite?
-
BundlePhobia Find the cost of adding a npm package to your bundle
-
EStimator Find out how much turning on modern JS could save.
-
Perf Track, Compares the HTTP archive data of different JavaScript Frameworks
-
Source Map Explorer, Webpack Bundle Analyer Understand what code you are loading
-
You might not need Javascript Don’t use Javascript for things where it is not really needed. This website shows you to do stuff with CSS: Slider, Modal, Scroll Indicator, Navigation, Tabs, Accordion
-
You might not need jQuery Learn how to get rid of jQuery dependencies in your project. This page shows you how to achieve things with Vanilla Javascript.
-
Browser Scope Browserscope is a community-driven project for profiling web browsers. The goals are to foster innovation by tracking browser functionality and to be a resource for web developers.
Network Tools
-
Fast or Slow Global Website Speed Profiler
-
https://httpstatus.io/ Service which shows status codes, latency, response headers and more from the URL you submit. This is great to check for redirects and other network related issues.
-
Cloud Ping See the network latency from your location to all AWS centres in the work.
-
Charles Web Debugging Proxy (free/$50) The proxy sits between your browser and the internet and lets you monitor and alter all the network traffic. I use it mainly for network throttling and request blocking.
-
DNS Perf DNS Speed Benchmark: Test the performance of your DNS provider from all over the world using this benchmark tool
-
DNS Speed Test The DNS hosting speed tool will give you valuable DNS performance information for each level in the DNS tree to assist with performance evaluations and performance troubleshooting.
-
SSL Server Test This free online service performs a deep analysis of the configuration of any SSL web server on the public Internet.
-
httpstat.us Service which responds which all kind of http error codes. With this service you can check how your app or website reacts when 3rd party services are responding with an error.
-
CDN Performance Tool Using one of your page’s CDN requests, enter the request URL above—perhaps try an image request. Uptrends sends the request and checks your CDN responses from multiple locations. Uptrends measures the response times, connection details, headers, response size, and more from each location. For best results, enable debug response headers in your CDN configuration.
-
CDN Planet Find the CDN which is right for you.
-
Is HTTP2 fast yet?, Andy Davies
Fonts
-
Font Style Matcher If you use font-display: swap this tool is great to make sure the fallback font looks as similar as possible to avoid major layout changes once the web font is loaded and swapped.
-
Glyphhanger Your web font utility belt. It can subset web fonts. It can show you what unicode-ranges are used on a web site (optionally per font-family). It can also subset web fonts automatically using the unicode-ranges it found.
-
Wakamaifondue Tool to inspect local font files
-
Online Font Converter A good tool to create woff2 fonts
-
Google Web Fonts Helper A Hassle-Free Way to Self-Host Google Fonts by Mario Ranftl
Browser Extensions
-
Cloudinary Media Inspector Gives a quick overview of all loaded images (dimension, ratio, format, header, details)
-
Piez Piez displays optimizations made by Akamai Image Manager, Resource Optimizer, Push/Preconnect, and Script Manager.
-
ModHeader Set additional headers. I use this to set the x-host when I test Cloudflare Workers in the browser.
-
Web Vitals Shows the Web Vitals for the active page.
-
CLS Visualizer This plugin will highlight and visualize the Cumulative Layout Shift of the current page.
Other Tools
-
What does my site cost How much does it cost for your users to download your page? In many countries the majority of the users are on a pre paid data plan.
-
har.tech Collection of tools which can be used to inspect HAR files.
-
Waterfall Heatmap Bookmarklet Prints the timing data on assets.
-
UX Speed Calculator, Sergey Chernyshev A visualization tool that helps understand relationship between page speed, conversion and bounce rates. Does not require a real data (e.g. RUM) and lets you tweak the distributions yourself
-
SERP Speed Compare your page speed at keyword level with the rest
Paid tools and services
These are professional tools which cost money. The cost are usually depends on traffic, server or data.
-
New Relic New Relic offers your great tools which give you insight in your whole app stack in real time. New Relic insights lets you also consume 3rd party APIs and correlate performance with business data. It also comes with great monitor solutions which alert you before things getting bad.
-
Speedcurve Speedcurve is build on top of WebPageTest and makes running synthetic tests easy. You get nice looking dashboards which are great for running on a big display in your office. With Lux they also integrated a RUM solution. - 🚀
-
Akamai Web Performance Tools With mPulse you can understand how your performance and business data is correlation. With the “What if” tool you can predict the impact of performance changes on your business KPI. Works together with Chrome UX report data and shows RUM data of your competition (if the data is available).
-
Calibre Nice Web Perf Tool to measure synthetic data
-
Treo Treo is a good choice if you are interested in Lighthouse (Pages) and CrUX (Sites) data.
-
Blackbird Ecommerce site speed monitoring – Track down-to-the-millisecond speed metrics for your users, see how speed affects your conversion rate, and get alerts & reports to stay on top of it
-
Cloudinary Image and video management in the cloud
-
Request Metrics Request Metrics is a simple low-cost performance monitoring service. It charts real user metrics and web vitals for your web pages and API endpoints. It also comes with alerting tools that notify you when pages or endpoints slow down.
-
Cloudflare Workers They are like service workers in the cloud. With their help you can prototype your web performance optimizations quickly and test the outcome in Webpagetest.org.
Open Source Projects
-
Fast Dom Eliminates layout thrashing by batching DOM measurement and mutation tasks.
-
FutureLink Calculates the deceleration of the cursor to predict when a link is about to be clicked.
-
guess.js Libraries and tools for enabling data-driven user-experiences on the web.
-
WebPageTest Foundation for WebPageTest.org. You can install it locally to run it behind a firewall.
-
Lighthouse Codebase of the Google Chrome Lighthouse tool.
Studies
Studies are important to understand how the different markets in the world are working. What are the most used devices? What is the average network connection?
-
Web Performance Optimisation Stats Web performance studies. Learn how web performance impacts business KPIs. A good source to convince people to invest money in web performance optimisations.
-
Progressive Web Apps Stats Learn what influence PWA have on business metrics.
-
https://www.akamai.com/us/en/about/our-thinking/state-of-the-internet-report/
Case studies
-
Case Study: Improving The Performance Of Wix Websites, Dan Shapir, 11/2021
-
How I made my WordPress Site Score 100% on Web Vitals, Kashish Kumawat, 11/2021
-
LinkedIn: Personalizing Performance: Adapting Application in real time to member environments, Nitin Pasumarthy, 09/2021
-
Wix.com: How We Improved Website Performance by Evolving Our Infrastructure, Alon Kochba, 08/2021
-
Learnings From a WebPageTest Session on CSS-Tricks, Chris Coyier, 07/2021
-
How committing to Core Web Vitals increased Netzwelt’s advertising revenues by 18%, Martin Schierle, 07/2021
-
Improving Cumulative Layout Shift at Telegraph Media Group, Chris Boakes, 06/2021
-
Improving The Performance Of An Online Store (Case Study), Jennifer Brehm, 06/2021
-
Optimizing the Performance of a React Progressive Web App, TK, 04/2021
-
Making Cybertruck Faster, 04/2021
-
How has the fastest F1 website in 2021?, Jake Archibald, 03/2021
-
How we built UK’s fastest online fashion-store, Paul, 03/2021
-
Performance: Prefetch Next Pages Chunks, TK, 01/2021
-
Making GitHub’s new homepage fast and performant, Tobias Ahlin, 01/2021
-
How We Improved SmashingMag Performance, Vitaly Friedman, 01/2021
-
Getting Postmark’s Lighthouse Performance Score to 100, Eugene Fedorenko, 09/2020
-
Case study: Analyzing Notion app performance, Ivan Akulov, 05/2020
-
Rebuilding our tech stack for the new Facebook.com, Ashley Watkins, Royi Hagigi, 05/2020
-
How We Boosted Page Speed By 58% … and how you can too!, Downtime Monkey, 10/2019
-
Bringing service workers to Google Search, Jeff Posnick, 06/2019
-
Improving third-party web performance at The Telegraph, Gareth Clubb, 04/2019
-
Who has the fastest website in F1?, Jake Archiblad, 03/2019
-
How we built the fastest conference website in the world, 03/2019
-
Nikkei achieves a new level of quality and performance with their multi-page PWA, Google, 11/2018
-
Measuring Web Performance for Wikipedia using synthetic testing tools, Wikimedia Foundation, 10/2018
-
A Netflix Web Performance Case Study, Addy Osmani, 11/2018
-
How Zalando’s overall site speed improved by more than 25% in five months, Zalando, 06/2018
-
Fast Fashion: Missguided, Mark Leach & Andy Davies, DeltaV, 06/2018
-
Case study: analyzing the Walmart site performance, Ivan Akulov, 04/2018
-
A Pinterest Progressive Web App Performance Case Study, Addy Osmani, 11/2017
Open data sources
-
Scientia Mobile Report, 08/2021
-
What do Lighthouse Scores look like across the web?, Barry Pollard, 04/2021
-
Web Almanac 2020 - HTTP Archive’s annual state of the web report, 12/2020
-
HTTP Archive / Loading speed HTTP archive crawls twice a month the 1.300.000 top sites of the web. This is the best source to understand the state of the web. The HTTP Archive - Guided Tour from Paul Calvano and Rick Viscomi is the best way to get started.
-
Firefox Public Data Report, Firefox usage data
-
Chrome UX report This is the only source I know of, which provides you with RUM data of the most used websites. The data source is the user data of Chrome users. With Google BigQuery or Page Speed Insights you can analyse your competition.
-
Akamai Internet Observatory Browser stats, Network latency between regions
-
Open Signal, Mobile status report worldwide
W3C Standards
The Web Performance Working Group is providing methods to measure and improve aspects of application performance of user agent features and APIs.
The Performance Timing Primer gives a good overview on what the Web Performance Group is working on.
All standards and drafts from the Performance Working Group
#11ty
-
Proxying Cloudinary Requests with Netlify, Tim Kadlec, 11/2020
-
Automatically Generate Social Images for Blog Posts, Jason Lengstorf
-
Migrating from Github Pages to Netlify & Cloudflare, Matt Hobbs, 09/2021
#Checklists