Skip to content

Latest commit

 

History

History
1934 lines (1046 loc) · 119 KB

index.md

File metadata and controls

1934 lines (1046 loc) · 119 KB

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

Legend

ℹ️ = Official sources (most often Google announcements)

🚀 = Must read articles

📚 = Resources I use regulary

🎥 = Video

Stay up to date

Community & Social Media

Newsletter

Blogs

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:

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

Core Web Vitals Tools

Articles

General

SEO and Marketing

Network and Caching

Image and Video Optimization

Web Fonts

Measure Performance

Third-Party Services

Optimise the Critical Render Path

Javascript and Render Performance

Perceived performance

This is all about how humans perceive performance and what we can do to help our users to keep focused:

Tooling Articles

Online courses

These are excellent courses for web developer to gain a lot of insights about web performance.

Free Web Courses

Free Video Courses

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

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.

  1. Bandwidth, latency, and radio performance (37:42)

  2. Optimizing networking performance (and HTTP 2.0) (49:36)

  3. Critical rendering path (41:10)

  4. Delivering 60 FPS in the browser (48:15)

Business

Third-Party Services

The Psychology of Performance

Network and Caching

Measure

Tooling

Image and Video

Development

Meta

Twitch

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

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.

  • Webpagetest Slack Integration

Lighthouse & CrUX & Core Web Vitals

Images & Video

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

  • Content Security Policy (CSP) Generator

  • Wappalyzer - Identify technology on websites

  • SimilarWeb Find similar pages for a competitor benchmark.

  • Build with Understand the technical building blocks of a website.

Development Tools

  • Resource Hint Validator by DebugBear

  • HTML Size Analyzer by DebugBear

  • 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

  • Bundle per page type/entry point

  • 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.

  • CSS stats

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.

  • Gzip and Brotli Compression Level Estimator

  • Is HTTP2 fast yet?, Andy Davies

  • Cache Control Header Builder

Fonts

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

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?

Case studies

Open data sources

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

#Checklists