Skip to content

Home

Jump to bottom
fabkrum edited this page Aug 1, 2018 · 1 revision

Web Performance Resources

This is a list of sources I personally found useful to learn about web performance. I will keep this list up to date and add new great resources.

If you know great resources which aren’t covered here please share them in the comments.

Last updated: August 1, 2018

Stay up to date: Community / Blogs / Newsletter

Articles

General

Network & Caching

Measure Performance

Third-Party Services

Optimise the Critical Render Path

JS & Render Performance

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.

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

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

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

Perceived performance

Network

Measure

Tooling

Images

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.

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?

  • 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

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

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

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?

Open data sources

  • HTTP Archive HTTP archive crawls periodically the top sites of the web and is a great source for learning about trends on the internet.

  • 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

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:

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:

Clone this wiki locally