Skip to content

apodelko/web-performance-resources

BranchesTags
 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

210 Commits
LICENSE
LICENSE
 
 
README.md
README.md
 
 

Repository files navigation

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

Articles

General

Network and Caching

Image and Video Optimization

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

  • 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

Books

This are the books I read about web performance and I can highly recommend all of them:

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

Podcasts

Tools

Free tools and services

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

  • Yellow Lab Tools Online test to help speeding up heavy web pages: Frontend Quality, WebPerf, JS Profiling

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

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

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

  • Chrome Developer Tools This is the go to tool for all web developers. Understand how your code gets loaded, parsed and rendered.

  • 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

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

  • 3P web, Shows the impact of Third-Party Tools based on HTTP Archive data.

  • Web Performance Heat Map Generator

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

  • Website carbon - How is your website impacting the planet?

  • spof-o-matic Chrome extension for detecting and simulating frontend Single Points Of Failure

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

  • Source Map Explorer, Webpback Bundle Analyer Understand what code you are loading

  • Ghostery See what 3rd party tools are loaded on a site.

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

  • ImageOptim Image compression

  • Squoosh Upload an image and compare the original with different compressed version to find a good balance between filesize and image quality.

  • Can I use? Check the browser support for every web technology.

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

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

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

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

  • har.tech Collection of tools which can be used to inspect HAR files.

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

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

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

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

  • FOIT vs FOUT

  • 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

  • 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

  • Real User Experience Test (rUXt) Access RUM data for 3,237,526 websites accessed by Google Chrome Users

  • Waterfall Heatmap Bookmarklet Prints the timing data on assets.

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

  • Configure speed metrics using percentiles and intervals for any website from @ChromeUXReport

  • 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

  • Google Page Speed Industry Benchmarks

  • Performance budget calculator

  • Gzip and Brotli Compression Level Estimator

  • CSS stats

  • 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

  • Mobile Friendly Test

  • SimilarWeb Find similar pages for a competitor benchmark.

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

  • Is HTTP2 fast yet?, Andy Davies

  • Wappalyzer - Identify technology on websites

  • Cache Control Header Builder

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

  • Cloudinary Image and video management in the cloud

  • Treo Combines RUM (CrUX) and Synthetic data

  • 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

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:

  • Smashing Conference London 2018 (Ticket: Early Bird: $499 — Conference & Workshop: $922) 07–08 February 2018, London, UK

  • #perfMatters / Twitter (Ticket: Blind Bird $239 — Conference & Workshop: $748) 27–28 March, 2018, Redwood City, California, USA

  • DeltaV / Twitter (Ticket: Early bird £399 + VAT) 10–11 May 2018, London, UK

  • Performance.now() / Twitter (Ticket: 550 EUR + VAT) 8–9 November 2018, Amsterdam, Netherland

  • We love speed, Bordeaux, France – Not very international, most of the talks are French

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

About

Up to date collection of valuable web performance resources

Resources

Readme

License

Unlicense license
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published