Skip to content

csswizardry/web-performance-resources

BranchesTags
 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

74 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

*Performant Parallaxing, Paul Lewis, 12/2016

Perceived performance

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

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

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

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

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.

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.

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

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

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

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

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

  • CSS Triggers Which CSS element trigger layout, paint, or composite?

  • BundlePhobia find the cost of adding a npm package to your bundle

  • FOIT vs FOUT

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

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

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

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

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

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

40 stars

Watchers

2 watching

Forks

10 forks
Report repository

Releases

No releases published

Packages

No packages published