├── LICENSE └── README.md /LICENSE: -------------------------------------------------------------------------------- 1 | This is free and unencumbered software released into the public domain. 2 | 3 | Anyone is free to copy, modify, publish, use, compile, sell, or 4 | distribute this software, either in source code form or as a compiled 5 | binary, for any purpose, commercial or non-commercial, and by any 6 | means. 7 | 8 | In jurisdictions that recognize copyright laws, the author or authors 9 | of this software dedicate any and all copyright interest in the 10 | software to the public domain. We make this dedication for the benefit 11 | of the public at large and to the detriment of our heirs and 12 | successors. We intend this dedication to be an overt act of 13 | relinquishment in perpetuity of all present and future rights to this 14 | software under copyright law. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 19 | IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR 20 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, 21 | ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. 23 | 24 | For more information, please refer to 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Web Performance Resources 2 | 3 | > This is a list of sources I personally found useful to learn about web performance. 4 | > I keep this list up to date and add new great resources often. 5 | > If you know great resources which aren’t covered here please create a pull request. 6 | 7 | ### Table of Contents 8 | 9 | * [Stay up to date](#stay-up-to-date) 10 | * [Articles](#articles) 11 | + [General](#general) 12 | + [Network and Caching](#network-and-caching) 13 | + [Image and Video Optimization](#image-and-video-optimization) 14 | + [Measure Performance](#measure-performance) 15 | + [Third-Party Services](#third-party-services) 16 | + [Optimise the Critical Render Path](#optimise-the-critical-render-path) 17 | + [Javascript and Render Performance](#javascript-and-render-performance) 18 | + [Perceived performance](#perceived-performance) 19 | * [Online courses](#online-courses) 20 | + [Free Web Courses](#free-web-courses) 21 | + [Free Video Courses](#free-video-courses) 22 | + [Paid Video Courses](#paid-video-courses) 23 | * [Videos](#videos) 24 | + [A crash course on web performance](#a-crash-course-on-web-performance) 25 | + [Business](#business) 26 | + [Third-Party Services](#third-party-services-1) 27 | + [The Psychology of Performance](#the-psychology-of-performance) 28 | + [Network and Caching](#network-and-caching) 29 | + [Measure](#measure) 30 | + [Tooling](#tooling) 31 | + [Image and Video](#image-and-video) 32 | + [Development](#development) 33 | * [Books](#books) 34 | * [Tools](#tools) 35 | + [Free tools and services](#free-tools-and-services) 36 | + [Paid tools and services](#paid-tools-and-services) 37 | * [Open Source Projects](#open-source-projects) 38 | * [Studies](#studies) 39 | * [Case studies](#case-studies) 40 | * [Open data sources](#open-data-sources) 41 | * [Web Performance Meetups](#web-performance-meetups) 42 | * [Conferences](#conferences) 43 | * [W3C Standards](#w3c-standards) 44 | 45 | ## Stay up to date 46 | 47 | * [Planet Performance](http://www.perfplanet.com/) 48 | Overview of performance related blogs 49 | 50 | * [Dev Tips](https://umaar.com/dev-tips/), Umar Hansa, weekly 51 | Great resource to learn the newest Chrome Dev Tools tips and tricks 52 | 53 | * [Medium articles about web performance](https://medium.com/tag/web-performance/latest) 54 | 55 | * Twitter: [#webperf](https://twitter.com/search?q=%23webperf), [#perfmatters](https://twitter.com/search?q=%23perfmatters) 56 | 57 | * This [Web Performance Twitter-List](https://twitter.com/fabkru/lists/web-performance) makes it easy for you to follow all the web performance authors, speakers, and evangelists at once: 58 | 59 | * [Web performance Slack channel ](https://webperformance.herokuapp.com/) 60 | Slack channel which is focusing on web performance with more than 750 members 61 | 62 | * [The speed of thought - Posts from the Performance Team at Wikimedia](https://phabricator.wikimedia.org/phame/blog/view/7/) 63 | 64 | * [Smashing Magazine Newsletter](https://www.smashingmagazine.com/the-smashing-newsletter/) 65 | This is not a Web Performance only Newsletter 66 | 67 | ## Articles 68 | 69 | ### General 70 | 71 | * [You need neither PWA nor AMP to make your website load fast](http://tonsky.me/blog/pwa/), Nikita, 11/2018 72 | 73 | * [The very real problem facing British retailers that nobody is talking about](https://www.shiftmagazine.com/articles/the-very-real-problem-facing-british-retailers-that-nobody-is-talking-about.html), Ryan Townsend, 11/2018 74 | 75 | * [Brain Food: Speed Matters: Designing for mobile performance (PDF)](https://www.awwwards.com/brain-food-perceived-performance/), AWWWARDS & Google, 2018 76 | 77 | * [Start performance budgeting](https://medium.com/@osmani/start-performance-budgeting-dabde04cf6a3), Addy Osmani, 10/2018 78 | 79 | * [Web Performance 101: JS, CSS, HTTP, images & fonts](https://3perf.com/talks/web-perf-101/), Ivan Akulov, 10/2018 80 | 81 | * [Hyper-Lightweight Websites Challenge (PDF)](http://www.chriszacharias.com/data/Hyperlight%20Websites%20-%20Chris%20Zacharias.pdf), Chris Zacharias, 10/2018 82 | 83 | * [The power of progressive enhancement](https://medium.com/no-divide/the-power-of-progressive-enhancement-98738766b009), Andy Bell, 08/2018 84 | 85 | * [Optimize Website Speed With Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/speed/get-started), Kayce Basques, 07/2018 86 | 87 | * [Speed is now a landing page factor for Google Search and Ads](https://developers.google.com/web/updates/2018/07/search-ads-speed), Ilya Grigorik, Addy Osmani, 07/2018 88 | 89 | * [How to create the best experience for every user with the newest web APIs](https://medium.com/web-perf-practitioner/how-to-create-the-best-experience-for-every-user-with-the-newest-web-apis-b24b880821b), Fabian Krumbholz, 06/2018 90 | 91 | * [15+ Experts Share Their Web Performance Advice for 2018](https://www.keycdn.com/blog/web-performance-advice-2018/), Cody Arsenault, 06/2018 92 | 93 | * [Fostering a Web Performance Culture](https://levelup.gitconnected.com/fostering-a-web-performance-culture-41360eb8dd36), José M. Pérez, 06/2018 94 | 95 | * [A Beginner’s Guide to Website Speed Optimization](https://kinsta.com/learn/page-speed/), Mark Gavalda, 05/2018 96 | 97 | * [Delivering Fast and Light Applications with Save-Data](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/save-data/), Ilya Grigroik, 01/2018 98 | 99 | * [Can You Afford It?: Real-world Web Performance Budgets](https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/), Alex Russell, 10/2017 100 | 101 | * [The State of the Web — A guide to impactful performance improvements](https://medium.com/@fox/talk-the-state-of-the-web-3e12f8e413b3), Karolina Szczur, 09/2017 102 | 103 | * [What is Progressive Enhancement and why should you care?](https://www.shopify.com/partners/blog/what-is-progressive-enhancement-and-why-should-you-care), Tiffany Tse, 02/2017 104 | 105 | * [Making websites that work well on Opera Mini](https://dev.opera.com/articles/making-sites-work-opera-mini/), Bruce Lawson, 06/2015 106 | 107 | * [Perf Audits for Blink & DevTools, CNet, Wikipedia, Time](https://docs.google.com/document/d/1K-mKOqiUiSjgZTEscBLjtjd6E67oiK8H2ztOiq5tigk/edit), Paul Irish, 02/2015 108 | 109 | * [My Performance Audit Workflow](https://aerotwist.com/blog/my-performance-audit-workflow/), Paul Lewis, 04/2014 110 | 111 | ### Network and Caching 112 | 113 | * [TTFB optimization: a guide to enhanced performance](https://www.netcentric.biz/insights/2019/03/ttfb.html), Stephan Becker, 03/2019 114 | 115 | * [All about prefetching](https://calendar.perfplanet.com/2018/all-about-prefetching/), Katie Hempenius, 12/2018 116 | 117 | * [Service Worker Caching Strategies Based on Request Types](https://medium.com/dev-channel/service-worker-caching-strategies-based-on-request-types-57411dd7652c), Thomas Steiner, 08/2018 118 | 119 | * [Dynamic resources using the Network Information API and service workers](https://deanhume.com/dynamic-resources-using-the-network-information-api-and-service-workers/), Dean Hume, 07/2018 120 | 121 | * [Connection-Aware Components](https://mxb.at/blog/connection-aware-components/), Max Böck, 07/2018 122 | 123 | * [To push or not to push](https://noti.st/patrickhamann/y2sScd/to-push-or-not-to-push), Patrick Hamann, 06/2018 124 | 125 | * [Towards ever faster websites with early hints and priority hints](https://www.fastly.com/blog/faster-websites-early-priority-hints), Andrew Betts, 06/2018 126 | 127 | * [Brotli Compression – How Much Will It Reduce Your Content?](https://paulcalvano.com/index.php/2018/07/25/brotli-compression-how-much-will-it-reduce-your-content/), Paul Calvano, 07/2018 128 | 129 | * [What is HTTP/2 — The Ultimate Guide](https://kinsta.com/learn/what-is-http2/), Ali Raza, 04/2018 130 | 131 | * [Resource Hints — What is Preload, Prefetch, and Preconnect?](https://www.keycdn.com/blog/resource-hints/), Brian Jackson, 01/2018 132 | 133 | * [HTTP Caching](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching), Ilya Grigorik, 01/2018 134 | 135 | * [A Comprehensive Guide To HTTP/2 Server Push](https://www.smashingmagazine.com/2017/04/guide-http2-server-push/), Jeremy Wagner, 04/2017 136 | 137 | * [A Link: rel=preload Analysis From the Chrome Data Saver Team](https://medium.com/reloading/a-link-rel-preload-analysis-from-the-chrome-data-saver-team-5edf54b08715), Simon Pelchat, 03/2017 138 | 139 | * [What is the preload directive?](https://www.keycdn.com/support/preload-directive/), 01/2017 140 | 141 | * [Caching best practices & max-age gotchas](https://jakearchibald.com/2016/caching-best-practices/), Jake Archibald, 2016 142 | 143 | * [How DNS works](https://howdns.works/) (Comic) 144 | 145 | ### Image and Video Optimization 146 | 147 | * [Video Playback On The Web: The Current State Of Video](https://www.smashingmagazine.com/2018/10/video-playback-on-the-web-part-1/), Doug Sillars, 10/2018 148 | 149 | * [Video Playback On The Web: Video Delivery Best Practices](https://www.smashingmagazine.com/2018/10/video-playback-on-the-web-part-2/), Doug Sillars, 10/2018 150 | 151 | * [Automating Resource Selection with Client Hints](https://developers.google.com/web/updates/2015/09/automating-resource-selection-with-client-hints), Ilya Grigorik, 07/2018 152 | 153 | * [Image Inconsistencies: How and When Browsers Download Images](https://csswizardry.com/2018/06/image-inconsistencies-how-and-when-browsers-download-images/), Harry Roberts, 06/2018 154 | 155 | * [Essential Image Optimization](https://images.guide/), Addy Osmani, 2017 156 | 157 | * [Using SVG as placeholders — More Image Loading Techniques](https://jmperezperez.com/svg-placeholders/), José M. Pérez, 10/2017 158 | 159 | * [How Medium does progressive image loading](https://jmperezperez.com/medium-image-progressive-loading-placeholder/), José M. Pérez, 10/2015 160 | 161 | * [Responsive Images 101](https://cloudfour.com/thinks/responsive-images-101-definitions/), Jason Grigsby, 03/2015 162 | 163 | ### Measure Performance 164 | 165 | * [Second Meaningful Content: the Worst Performance Metric](https://www.filamentgroup.com/lab/second-meaningful-content.html), Scott Jehl, 11/2018 166 | 167 | * [The Three Types of Performance Testing](https://csswizardry.com/2018/10/three-types-of-performance-testing/), Harry Roberts, 10/2018 168 | 169 | * [Applying Waterfall Visualizations to Real User Monitoring Data](https://developer.akamai.com/blog/2018/10/10/applying-waterfall-visualizations-real-user-monitoring-data), Simon Hearne, 10/2018 170 | 171 | * [An analysis of Chromium's paint timing metrics](https://speedcurve.com/blog/an-analysis-of-chromiums-paint-timing-metrics/), Joseph Wynn, 09/2018 172 | 173 | * [Accurately measuring layout on the web](https://nolanlawson.com/2018/09/25/accurately-measuring-layout-on-the-web/), Nolan Lawson, (09/2018) 174 | 175 | * [A step by step guide to monitoring the competition with the Chrome UX Report](https://dev.to/rick_viscomi/a-step-by-step-guide-to-monitoring-the-competition-with-the-chrome-ux-report-4k1o), Rick Viscomi, 09/2018 176 | 177 | * [How to track performance](https://designsystem.digital.gov/performance/how/#choosing-metrics-amp-tools), U.S. Web Design System, 07/2018 178 | 179 | * [Assessing Loading Performance in Real Life with Navigation and Resource Timing](https://developers.google.com/web/fundamentals/performance/navigation-and-resource-timing/), Jeremy Wagner, 06/2018 180 | 181 | * [User Timing API (Custom Timing): the most relevant performance measure ever](https://blog.dareboost.com/en/2018/03/user-timing-api-measuring-web-performance-custom-timing/), Damien Jubeau, 03/2018 182 | 183 | * [Is a High Abandon Rate Hitting Your Online Marketing Budget?](https://medium.com/web-perf-practitioner/is-a-high-abandon-rate-hitting-your-online-marketing-budget-c819f85f96b2), Fabian Krumbholz, 03/2018 184 | 185 | * [ResourceTiming Visibility: Third-Party Scripts, Ads and Page Weight](https://nicj.net/resourcetiming-visibility-third-party-scripts-ads-and-page-weight/), Nic Jansma, 03/2018 186 | 187 | * [Measure Performance with the RAIL Model](https://developers.google.com/web/fundamentals/performance/rail), Addy Osmani, 02/2018 188 | 189 | * [User-centric Performance Metrics](https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics), Philip Walton, 02/2018 190 | 191 | * [An Audit of Boomerang’s Performance](https://nicj.net/an-audit-of-boomerangs-performance/), Nic Jansma, 12/2017 192 | 193 | * [User Timing and Custom Metrics](https://speedcurve.com/blog/user-timing-and-custom-metrics/), Steve Souders, 11/2015 194 | 195 | * [Conversion Impact Score: What is it? And why do you need to know yours?](https://www.soasta.com/blog/website-monitoring-conversion-impact-score/), Tammy Everts, 07/2015 196 | 197 | * [Driving WebPagetest from a Google Docs Spreadsheet](https://calendar.perfplanet.com/2014/driving-webpagetest-from-a-google-docs-spreadsheet/), Andy Davies, 12/2014 198 | 199 | ### Third-Party Services 200 | 201 | * [How we shaved 1.7 seconds off casper.com by self-hosting Optimizely](https://medium.com/caspertechteam/we-shaved-1-7-seconds-off-casper-com-by-self-hosting-optimizely-2704bcbff8ec), Kyle Rush, 08/2018 202 | 203 | * [Changing Our Approach to Anti-tracking](https://blog.mozilla.org/futurereleases/2018/08/30/changing-our-approach-to-anti-tracking/), Nick Nguyen, 08/2018 204 | 205 | * [When 3rd parties stop being polite … and start getting real](https://docs.google.com/presentation/d/174EE6e7sV_SXPug_gK5GH4Jk5wB35xjqPrvDUG0E6FA), Charles Vazac & Nic Jansma, 06/2018 206 | 207 | * [Identifying, Auditing, and Discussing Third Parties](https://csswizardry.com/2018/05/identifying-auditing-discussing-third-parties/), Harry Roberts, 05/2018 208 | 209 | * [Crashing the (Third) Party](https://medium.com/spring-media-techblog/crashing-the-third-party-b7c8a46b40db), Oleg Zender, 06/2018 210 | 211 | * [Collection of articles about 3rd party](https://trentwalton.com/tag/Third-Party/), Trend Walton 212 | 213 | * [How 3rd Party Scripts can be performant citizens on the web](https://www.twnsnd.com/posts/performant_third_party_scripts.html), Ryan Townsend, 08/2017 214 | 215 | * [Performance and Resilience: Stress-Testing Third Parties](https://csswizardry.com/2017/07/performance-and-resilience-stress-testing-third-parties/), Harry Roberts, 07/2017 216 | 217 | * [Discover how Adidas is using data science to deliver third-party governance](https://www.slideshare.net/kskoeld/discover-how-adidas-is-using-data-science-to-deliver-thirdparty-governance), Kristian Sköld, 11/2016 218 | 219 | * [10 pro tips for managing the performance of your third-party scripts,](https://www.soasta.com/blog/10-pro-tips-for-managing-the-performance-of-your-third-party-scripts/) Tammy Everts, 11/2015 220 | 221 | ### Optimise the Critical Render Path 222 | 223 | * [CSS audit](https://css-tricks.com/a-quick-css-audit-and-general-notes-about-design-systems/) 224 | 225 | * [[Measuring the Critical Rendering Path](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/measure-crp), Ilya Grigorik, 12/2018 226 | 227 | * [Inlining or Caching? Both Please!](https://www.filamentgroup.com/lab/inlining-cache.html), Scott Jehl, 11/2018 228 | 229 | * [CSS and Network Performance](https://csswizardry.com/2018/11/css-and-network-performance/), Harry Roberts, 11/2018 230 | 231 | * [The font loading checklist](https://www.zachleat.com/web/font-checklist/), Zach Leatherman, 08/2018 232 | 233 | * [Analyzing Critical Rendering Path Performance](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp), Ilya Grigorik, 08/2018 234 | 235 | * [Front-End Performance Checklist](https://github.com/thedaviddias/Front-End-Performance-Checklist), 2018, GitHub Project with updates 236 | 237 | * [The PRPL Pattern](https://developers.google.com/web/fundamentals/performance/prpl-pattern/), Addy Osmani, 02/2018 238 | 239 | * [Now You See Me: How To Defer, Lazy-Load And Act With IntersectionObserver](https://www.smashingmagazine.com/2018/01/deferring-lazy-loading-intersection-observer-api/), Denys Mishunov, 01/2018 240 | 241 | * [Optimising the front end for the browser](https://hackernoon.com/optimising-the-front-end-for-the-browser-f2f51a29c572), Sanjay Purswani, 02/2017 242 | 243 | * [A comprehensive guide to font loading strategies](https://www.zachleat.com/web/comprehensive-webfonts/), Zach Leatherman, 07/2016 244 | 245 | * [Understanding the critical rendering path, rendering pages in 1 second](https://medium.com/@luisvieira_gmr/understanding-the-critical-rendering-path-rendering-pages-in-1-second-735c6e45b47a), Luis Vieira, 06/2015 246 | 247 | * [More Weight Doesn’t Mean More Wait](https://www.filamentgroup.com/lab/weight-wait.html), Scott Jehl, 04/2015 248 | 249 | ### Javascript and Render Performance 250 | 251 | * [Idle Until Urgent](https://philipwalton.com/articles/idle-until-urgent/), Philip Walton, 09/2018 252 | 253 | * [Browser painting and considerations for web performance](https://css-tricks.com/browser-painting-and-considerations-for-web-performance/), Georgy Marchuk, 08/2018 254 | 255 | * [The Cost Of JavaScript In 2018](https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4) ([Video](https://www.youtube.com/watch?v=i5R7giitymk)), Addy Osmani, 08/2018 256 | 257 | * [Front-End Performance Checklist](https://github.com/thedaviddias/Front-End-Performance-Checklist), 2018, GitHub Project with updates 258 | 259 | * [jankfree](http://jankfree.org/), Website which collects resources about render performance 260 | 261 | * [What forces layout/reflow?](https://gist.github.com/paulirish/5d52fb081b3570c81e3a), Paul Irish 262 | 263 | * [Using requestIdleCallback](https://developers.google.com/web/updates/2015/08/using-requestidlecallback), Paul Lewis, 01/2018 264 | 265 | * [Optimize Javascript Execution](https://developers.google.com/web/fundamentals/performance/rendering/optimize-javascript-execution), Paul Lewis, 01/2018 266 | 267 | * [Why Web Developers Need to Care about Interactivity](https://philipwalton.com/articles/why-web-developers-need-to-care-about-interactivity/), Philip Walton, 12/2017 268 | 269 | * [Improving Performance with the Paint Timing API](https://www.sitepen.com/blog/2017/10/06/improving-performance-with-the-paint-timing-api), Umar Hansa, 10/2017 270 | 271 | * [Deploying ES2015+ Code in Production Today](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/), Philip Walton, 09/2017 272 | 273 | * [Performant Web Animations and Interactions: Achieving 60 FPS](https://blog.algolia.com/performant-web-animations/), Emily Hayman, 08/2017 274 | 275 | * [JavaScript Start-up Performance](https://medium.com/reloading/javascript-start-up-performance-69200f43b201), Addy Osmani, 02/2017 276 | 277 | *[Performant Parallaxing](https://developers.google.com/web/updates/2016/12/performant-parallaxing), Paul Lewis, 12/2016 278 | 279 | * [The Anatomy of a Frame](https://aerotwist.com/blog/the-anatomy-of-a-frame/), Paul Lewis, 02/2016 280 | 281 | * [The future of loading CSS](https://jakearchibald.com/2016/link-in-body/), Jake Archibald, 02/2016 282 | 283 | * [4 Types of Memory Leaks in JavaScript and How to Get Rid Of Them](https://auth0.com/blog/four-types-of-leaks-in-your-javascript-code-and-how-to-get-rid-of-them/), Sebastián Peyrott, 01/2016 284 | 285 | * [The cost of frameworks](https://aerotwist.com/blog/the-cost-of-frameworks/), Paul Lewis, 11/2015 286 | 287 | * [FLIP Your Animations](https://aerotwist.com/blog/flip-your-animations/), Paul Lewis, 02/2015 288 | 289 | ### Perceived performance 290 | 291 | This is all about how humans perceive performance and what we can do to help our users to keep focused: 292 | 293 | * [The psychology of web performance](https://blog.uptrends.com/web-performance/the-psychology-of-web-performance/), 06/2018 294 | 295 | * [The Illusion of Time](https://medium.com/swlh/the-illusion-of-time-8f321fa2f191), Adrian Zumbrunnen, 08/2015 296 | 297 | * [Why Performance Matters: The Perception Of Time](https://www.smashingmagazine.com/2015/09/why-performance-matters-the-perception-of-time/), Denys Mishunov, 09/2015 298 | 299 | * [Why Performance Matters, Part 2: Perception Management](https://www.smashingmagazine.com/2015/11/why-performance-matters-part-2-perception-management/), Denys Mishunov, 11/2015 300 | 301 | * [Why Performance Matters, Part 3: Tolerance Management](https://www.smashingmagazine.com/2015/12/performance-matters-part-3-tolerance-management/), Denys Mishunov, 12/2015 302 | 303 | * [True Lies Of Optimistic User Interfaces](https://www.smashingmagazine.com/2016/11/true-lies-of-optimistic-user-interfaces/), Denys Mishunov, 11/2016 304 | 305 | * [Taking A Look At The State Of Progressive Images And User Perception](https://www.smashingmagazine.com/2018/02/progressive-image-loading-user-perceived-performance/), José Manuel Pérez, 02/2018 306 | 307 | ## Online courses 308 | 309 | These are excellent courses for web developer to gain a lot of insights about web performance. 310 | 311 | ### Free Web Courses 312 | 313 | * [web.dev](https://web.dev/learn), Google, 11/2018 314 | 315 | ### Free Video Courses 316 | 317 | * Udacity: [Website Performance Optimization by Google](https://www.udacity.com/course/website-performance-optimization--ud884) (free) 318 | This course is great to start. You will learn how the browser works internally and how you can optimise the critical render path. 319 | 320 | ### Paid Video Courses 321 | 322 | * Frontend Masters: [Web Performance](https://frontendmasters.com/courses/web-performance/), Steve Kinney, 03/2018 ($39 / monthly subscription) 323 | 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. 324 | 325 | * Pluralsight: [Tracking Real World Web Performance](https://app.pluralsight.com/library/courses/web-performance-tracking), Nik Molnar, 05/2015 ($29 / monthly subscription) 326 | Nice introduction into web performance measurement. 327 | 328 | * [Modern Dev Tools](https://moderndevtools.com/), Umar Hansa, 05/2017 ($94) 329 | Umar is a Chrome Developer Tools expert and explains all the tools you need to understand and fix web performance issues. 330 | 331 | * [Frontend Center](https://frontend.center/), Glen Maddern, ($15/monthly subscription) 332 | Not 100% related to Web Performance. A few of the trainings are available for free. 333 | 334 | ## Videos 335 | 336 | ### A crash course on web performance 337 | 338 | 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. 339 | 340 | 1. [Bandwidth, latency, and radio performance](https://www.youtube.com/watch?v=7gtf47D_bu0&list=PL5jvCmjsPECB2mhJopSB-yryxO473JA1r&index=43&t=0s) (37:42) 341 | 342 | 1. [Optimizing networking performance (and HTTP 2.0)](https://www.youtube.com/watch?v=46exugLbGFI) (49:36) 343 | 344 | 1. [Critical rendering path](https://www.youtube.com/watch?v=PkOBnYxqj3k) (41:10) 345 | 346 | 1. [Delivering 60 FPS in the browser](https://www.youtube.com/watch?v=rpNXWxMyzHQ) (48:15) 347 | 348 | ### Business 349 | 350 | * [PWA Challenges](https://www.youtube.com/watch?v=1570FmnYtck) ([Slides](https://www.slideshare.net/grigs/progressive-web-app-challenges)), Jason Grigsby, 11/2018 – Performance.now() 351 | 352 | * [Building a Foundation for Performance](https://www.youtube.com/watch?v=FBeR6QvroEQ), Michelle Vu, 11/2018 – Performance.now() 353 | 354 | * [Starting a Dedicated Web Performance Team](https://www.youtube.com/watch?v=ne_UYfDmDYc), Sarah Dapul-Weberman, 06/2018 355 | 356 | * [Web Performance @ NBrown](https://www.youtube.com/watch?v=z-mhV-pn68Q), Nick Webb & Laura Sheridan, 06/2018 357 | 358 | * [Fast Fashion: Missguided](https://www.youtube.com/watch?v=mLzt23ZVGx0) ([Slides](https://www.slideshare.net/AndyDavies/fast-fashion-how-missguided-revolutionised-their-approach-to-site-performance-deltav-conference-may-2018)), Mark Leach & Andy Davies, 06/2018 359 | 360 | * [25% Faster Hotel Search. Web Performance? — Trivago](https://www.youtube.com/watch?v=9f2sjQmJCKY), Tobias Baldauf, 06/2018 361 | 362 | * [Conversions@Google 2018](https://www.youtube.com/watch?v=EbbjEY-TyhU), Luke Wroblewski, 05/2018 363 | 364 | * [On Building Performance for the Long Term](https://vimeo.com/254947097) ([Slides](https://speakerdeck.com/aemcknig/building-performance-for-the-long-term)), Allison McKnight, 02/2018 365 | 366 | * [Building for Billions](https://www.youtube.com/watch?v=Vmg1ECC2r2Q), Tal Oppenheimer, 06/2016 367 | 368 | * [Making a business case for web performance optimization](https://vimeo.com/163232533), Kristian Sköld, 04/2016 369 | 370 | * [Performance Budget](https://www.youtube.com/watch?v=yqejmZrtmNg), Tim Kadlec, 04/2015 371 | 372 | ### Third-Party Services 373 | 374 | * [It’s My (Third) Party and I’ll Cry If I Want To](https://www.youtube.com/watch?v=bmIUYBNKja4) ([Slides](https://speakerdeck.com/csswizardry/its-my-third-party-and-ill-cry-if-i-want-to)), Harry Roberts, 11/2018 375 | 376 | * [Name That Script](https://vimeo.com/266794924) ([Slides](https://speakerdeck.com/trentwalton/name-that-script)), Trent Walton, 04/2018 377 | 378 | * [A/B Testing, Ads and other 3rd Party Tags](https://vimeo.com/254703766) ([Slides](https://www.slideshare.net/AndyDavies/ab-testing-ads-and-other-3rd-party-tags-smashingconf-london-2018)), Andy Davies, 02/2018 379 | 380 | * [3rd Parties: A Hate Love Who Wants to be Managed](https://www.youtube.com/watch?v=oBD_kClamck), Kristian Sköld, 12/2017 381 | 382 | * [What are third party components doing to your site?](https://www.youtube.com/watch?v=G1BiyYOnjjk), Andy Davies/Simon Hearne, 06/2015 383 | 384 | * [Stranger Danger: Tracking Vulnerabilities in Your Third Party Code](https://www.youtube.com/watch?v=iXA14OFXxZA), Guy Podjarny, 2015 385 | 386 | * [Third Party Performance](https://www.youtube.com/watch?v=I5uhZcJ30SA), Guy Podjarny, 04/2015 387 | 388 | ### The Psychology of Performance 389 | 390 | * [Cheating the UX when there is nothing more to optimize](https://vimeo.com/251825705) ([Slides](https://speakerdeck.com/stephaniewalter/cheating-the-ux-when-there-is-nothing-more-to-optimise)), Stephanie Walter, 01/2018 391 | 392 | * O’Reilly Safaribooksonline: [Perceived Performance: The Only Kind that Really Matters](https://www.safaribooksonline.com/library/view/perceived-performance-the/9781492029953/) ([Slides](http://assets.eli.wtf/talks/perceived-perf-talk/)), Eli Fitch, 11/2017 (34$ / monthly subscription) 393 | This is a really good talk about how humans perceive performance. Eli shares a lot of good tips and tricks how you can improve the perceived performance. 394 | 395 | * [Deconstructing Performance](https://vimeo.com/184659742), Denys Mishunov, 01/2016 396 | The content of this talk is similar to Eli Fitch’s talk, but less technical. 397 | 398 | ### Network and Caching 399 | 400 | * [Building Faster, More Resilient Apps with Service Worker (Chrome Dev Summit 2018)](https://www.youtube.com/watch?v=25aCD5XL1Jk), Phil Walton/Ewa Gasperowicz, 11/2018 401 | 402 | * [Headers for Hackers](https://www.youtube.com/watch?v=k92ZbrY815c) ([Slides](https://speakerdeck.com/triblondon/headers-for-hackers), [Article: Headers we want](https://www.fastly.com/blog/headers-we-want), [Article: Headers we don't want](https://www.fastly.com/blog/headers-we-dont-want)), Andrew Betts, 11/2018 – Performance.now() Conference 403 | 404 | * [Fun with Protocols](https://www.youtube.com/watch?v=WCwzKe4pKxY), Natasha Rooney, 11/2018 – Performance.now() Conference 405 | 406 | * [QUIC: in Theory and Practice](https://www.youtube.com/watch?v=B1SQFjIXJtc), [Slides](http://internetonmars.org/deltav.pdf), Robin Marx, 06/2018 407 | 408 | * [HTTP/2 101](https://www.youtube.com/watch?v=r5oT_2ndjms), Surma, 11/2015 409 | Nice introduction to HTTP2 410 | 411 | * [Yesterday’s perf best-practices are today’s HTTP/2 anti-patterns](https://www.youtube.com/watch?v=yURLTwZ3ehk), Ilya Grigorik, 06/2015 412 | 413 | ### Measure 414 | 415 | * [The Latest in Metrics & Measurement](https://www.youtube.com/watch?v=XvZ7-Uh0R4Q), Paul Irish, 11/2018 – Performance.now() 416 | 417 | * [How I learned to stop worrying and love UX metrics](https://www.youtube.com/watch?v=lLR_nGA5t5g) ([Slides](https://www.slideshare.net/tammyeverts/how-i-learned-to-stop-worrying-and-love-ux-metrics)), Tammy Everts, 11/2018 – Performance.now() Conference 418 | 419 | * [User Experience & Performance: Metrics that Matter](https://www.youtube.com/watch?v=nEHsHioWY1U), [Slides](https://speakerdeck.com/bluesmoon/ux-and-performance-metrics-that-matter-a062d37f-e6c7-4b8a-8399-472ec76bb75e), Philip Tellis, 10/2018 420 | 421 | * [Chrome User Experience Report](https://www.youtube.com/watch?v=wVY3-acLIoI), Inian Parameshwaran, 06/2018 422 | 423 | * [How Fast Is It?](https://vimeo.com/254728119), [Slides](https://www.slideshare.net/patrickmeenan/how-fast-is-it), Patrick Meenan, 02/2018 424 | 425 | * [How’s the UX on the Web, Really?](https://vimeo.com/254834890), Ilya Grigorik, 02/2018 426 | 427 | * [Reliably Measuring Responsiveness in the Wild](https://www.youtube.com/watch?v=y5qPix1tdOE), Shubhie Panicker/Nic Jansma, 07/2017 428 | 429 | * [Web Performance: Leveraging the Metrics that Most Affect User Experience](https://www.youtube.com/watch?v=6Ljq-Jn-EgU), Shubhie Panicker/Philip Walton, 05/2017 430 | 431 | * [Measuring Continuity](https://www.youtube.com/watch?v=dbAise49tWY), Philip Tellis/Nic Jansma, 07/2016 432 | 433 | * [Using Machine Learning to Determine Drivers of Bounce and Conversion](https://www.youtube.com/watch?v=pdTUSZ6cwBY), Tammy Everts/Patrick Meenan, 07/2016 434 | 435 | * [Forensic Tools for In-Depth Performance Investigations](https://www.youtube.com/watch?v=jgGbdoN4l2k), Philip Tellis/Nic Jansma, 06/2016 436 | 437 | * [Visualizing performance data in engaging ways](https://www.youtube.com/watch?v=lEhmmTlbCss), Mark Zeman, 06/2015 438 | 439 | ### Tooling 440 | 441 | * [State of the Union for Speed Tooling (Chrome Dev Summit 2018)](https://www.youtube.com/watch?v=ymxs8OSXiUA), Elizabeth Sween/Paul Irish, 11/2018 442 | 443 | * [What’s new in Chrome Dev Tools](https://www.youtube.com/watch?v=mfuE53x4b3k&index=36&list=PL5jvCmjsPECB2mhJopSB-yryxO473JA1r&t=52s), Paul Irish, 05/2018 444 | 445 | * [The power of Headless Chrome and browser automation](https://www.youtube.com/watch?v=lhZOFUY1weo), Eric Bidelman, 05/2018 446 | 447 | * [Use Lighthouse and Chrome UX Report to optimize web app performance](https://www.youtube.com/watch?v=UvK9zAsSM8Q), 05/2018 448 | Use the new Lighthouse API to integrate it into the Jenkins pipeline. 449 | 450 | * [A Modern Front-End Workflow with DevTools](https://vimeo.com/254733177), Umar Hansa, 02/2018 451 | 452 | * [Charles Proxy](https://www.youtube.com/watch?v=nihC1xW1eNI), Willow Talk, 01/2016 453 | 454 | * [Developer’s Toolbox: What is Charles and why would I want it?](https://www.youtube.com/watch?v=y8Okx-RWK3M), Team Learnable, 05/2014 455 | 456 | ### Image and Video 457 | 458 | * [Building Modern Web Media Experiences: Picture-in-Picture and AV1 (Chrome Dev Summit 2018)](https://www.youtube.com/watch?v=iTC3mfe0DwE), François Beaufort/Angie Chiang, 11/2018 459 | 460 | * [Image Optimization](https://www.youtube.com/watch?v=jTXhYj2aCDU), Kornel Lesiński, 11/2018 – Performance.now() 461 | 462 | * [Beyond the Basics of Image Optimization](https://vimeo.com/254736788) — ([Slides](https://github.com/una/beyond-the-basics-of-image-optimization)), Una Kravets/Martin Splitt, 02/2018 463 | 464 | * [Your Hero Images Need You! Save the Day with HTTP2 Image Loading](https://vimeo.com/163113212), Tobias Baldauf, 04/2016 465 | 466 | * [High Performance Images: Beautiful Shouldn’t Mean Slow](https://www.youtube.com/watch?v=7zgd2OjSoS8), Guy Podjarny, 12/2015 467 | 468 | ### Development 469 | 470 | * [A Quest to Guarantee Responsiveness: Scheduling On and Off the Main Thread (Chrome Dev Summit 2018)](https://www.youtube.com/watch?v=mDdgfyRB5kg), Shubhie Panicker/Jason Miller, 11/2018 471 | * [Speed Essentials: Key Techniques for Fast Websites (Chrome Dev Summit 2018)](https://www.youtube.com/watch?v=reztLS3vomE), Katie Hempenius/Houssein Djirdeh, 11/2018 472 | 473 | * [Raiders of the Fast Start: Frontend Perf Archeology](https://www.youtube.com/watch?v=qts9gPYoANU) ([Slides](https://www.slideshare.net/KatrinaSylorMiller/raiders-of-the-fast-start-frontend-performance-archaeology-performancenow-conference)), Katie Sylor-Miller, 11/2018 - Performance.now() Conference 474 | 475 | * [The Long Tail of Performance](https://www.youtube.com/watch?v=6vMvg38CXFk) ([Slides](https://noti.st/tkadlec/FAqr8X)), Tim Kadlec, 11/2018 - Performance.now() Conference 476 | 477 | * [Optimizing Fonts](https://www.youtube.com/watch?v=FbguhX3n3Uc) ([Slides](https://noti.st/zachleat/KNaZEg/the-five-whys-of-web-font-loading-performance)), Zach Leatherman, 11/2018 – Performance.now() Conference 478 | 479 | * [How I optimized my JavaScript sheet music rendering engine](https://www.youtube.com/watch?v=XH5EtQge_Bg), Adrian Holovaty, 11/2018 – Performance.now() Conference 480 | 481 | * [Debugging UI Performance Issues](https://www.youtube.com/watch?v=JGdIzKcAEkI) ([Slides](https://www.slideshare.net/AnnaMigas1/performancenow-fast-but-not-furious)), Anna Migas, 11/2018 – Performance.now() Conference 482 | 483 | * [Make JavaScript Faster](https://www.youtube.com/watch?v=RwSlubTBnew) ([Slides](https://www.slideshare.net/souders/make-javascript-faster)), Steve Souders, 11/2018 – Performance.now() Conference 484 | 485 | * [Schedule your animations like a pro – with requestAnimationFrame](https://www.youtube.com/watch?v=wSEU7ivOnzc), Paul Lewis, 09/2018 486 | 487 | * [Frontend Resilience](https://www.youtube.com/watch?v=iUfymdAZ1wI) ([Slides](https://speakerdeck.com/ianfeather/building-resilient-frontend-systems-all-day-hey)), Ian Feather, 06/2018 488 | 489 | * [The Event Loop](https://vimeo.com/254947206), Jake Archibald, 02/2018 – [W3C Spec Event Loop](https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model) 490 | 491 | * [Performant Animations: Hitting 60fps](https://vimeo.com/254906131), Emily Hayman, 02/2018 492 | 493 | * [Resource Loading — Past, Present & Future](https://vimeo.com/254861484) ([Slides](https://yoavweiss.github.io/smashing_resource_loading_past_present_future/#1)), Yoav Weiss, 02/2018 494 | 495 | * [Web Fonts are ▢▢▢ Rocket Science](https://vimeo.com/254727749) ([Zach’s lenghty article](https://www.zachleat.com/web/comprehensive-webfonts/)), Zach Leatherman, 02/2018 496 | 497 | * [Front End Center: Caching & CDNs](https://www.youtube.com/watch?v=_QeNLrkPvdI), 10/2017 498 | 499 | * [Fast By Default: Modern Loading Best Practices](https://www.youtube.com/watch?v=_srJ7eHS3IM), Addi Osmani/Ilya Grigorik, 10/2017 500 | 501 | * [Front End Center: Why Latency Matters: Foundations of Web Performance](https://www.youtube.com/watch?v=ak4EZQB4Ylg), 08/2017 502 | 503 | * [Creating UX that “Just Feels Right” with Progressive Web Apps](https://www.youtube.com/watch?v=mmq-KVeO-uU), Owen Campbell-Moore, 05/2017 504 | 505 | * [Solving the Web Performance Crisis](https://channel9.msdn.com/Blogs/msedgedev/nolanlaw-web-perf-crisis), Nolan Lawson, 01/2017 506 | 507 | * [Solving the Web Performance Crisis](https://www.youtube.com/watch?v=yfmqDqmSJXw), Nolan Lawson, 01/2017 508 | 509 | * [Planning for Performance: PRPL](https://www.youtube.com/watch?v=RWLzUnESylc), Sam Saccone, 11/2016 510 | 511 | * [AMP: Does it Really Make Your Site Faster?](https://www.youtube.com/watch?v=dOiGcgw-r8g), Nic Jansma, Nigel Heron, 11/2016 512 | 513 | * [UI Elements at 60fps](https://www.youtube.com/watch?v=ZqdNgn5Huqk), Paul Lewis, 06/2016 514 | 515 | * [Owning your performance: RAIL](https://www.youtube.com/watch?v=w0O2znkSBXA&list=PL5jvCmjsPECB2mhJopSB-yryxO473JA1r&index=6&t=1497s), Paul Irish, 11/2015 516 | 517 | * [HTTP2 and Front-End Performance](https://www.youtube.com/watch?v=GIDXISQs67w), Mark Nottingham, 05/2015 518 | 519 | ## Books 520 | 521 | This are the books I read about web performance and I can highly recommend all of them: 522 | 523 | * [Going Offline](https://abookapart.com/products/going-offline), Jeremy Keith, A Book Apart, 04/2018 524 | 525 | * [High Performance Images](http://shop.oreilly.com/product/0636920039730.do), Colin Bendell/Tim Kadlec/Yoav Weiss/Guy Podjarny/Nick Doyle/Mike McCall, O’Reilly, 11/2016 526 | This book goes really deep and will answer you all the questions you could possible ask about images. 527 | 528 | * [Time is money](http://shop.oreilly.com/product/0636920041450.do), Tammy Everts, O’Reilly, 06/2016 529 | 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. 530 | 531 | * [Using WebPageTest](http://shop.oreilly.com/product/0636920033592.do), Rick Viscomi/Andy Davies/Marcel Duran, O’Reilly, 10/2015 532 | This book gives a deep insight into WebPageTest. You will learn a lot of things you wouldn’t find out reading this book. 533 | 534 | * [Designing for Performance](http://shop.oreilly.com/product/0636920033578.do), Lara Callender Hogan, O’Reilly, 12/2014 535 | 536 | * [Responsible Responsive Design](https://abookapart.com/products/responsible-responsive-design), Scott Jehl, A Book Apart, 11/2014 537 | 538 | * [High Performance Browser Networking](https://hpbn.co/), Ilya Grigorik, O’Reilly, 09/2013 (free) 539 | 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. 540 | 541 | * [High Performance Web Sites](http://shop.oreilly.com/product/9780596529307.do), Steve Souders, O’Reilly, 09/2007 542 | This book is a classic. 543 | 544 | * [Even Faster Web Sites](http://shop.oreilly.com/product/9780596522315.do), Steve Souders, O’Reilly, 07/2009 545 | Another classic book. 546 | 547 | ## Tools 548 | 549 | ### Free tools and services 550 | 551 | * [Lighthouse](https://developers.google.com/web/tools/lighthouse/) 552 | 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. 553 | 554 | * [Chrome Developer Tools](https://developer.chrome.com/devtools) 555 | This is the go to tool for all web developers. Understand how your code gets loaded, parsed and rendered. 556 | 557 | * [Image Analyser](https://webspeedtest.cloudinary.com/) 558 | 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. 559 | 560 | * [WebPageTest](http://www.webpagetest.org/) 561 | 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. 562 | 563 | * [Request Map Generator](https://requestmap.herokuapp.com/) 564 | 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. 565 | 566 | * [Web Performance Heat Map Generator](http://heatmap.webperf.tools/) 567 | 568 | * [What does my site cost](https://whatdoesmysitecost.com/) 569 | 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. 570 | 571 | * [spof-o-matic](https://github.com/pmeenan/spof-o-matic) 572 | Chrome extension for detecting and simulating frontend Single Points Of Failure 573 | 574 | * [CSS Triggers](https://csstriggers.com/) 575 | Which CSS element trigger layout, paint, or composite? 576 | 577 | * [BundlePhobia](https://bundlephobia.com/) 578 | find the cost of adding a npm package to your bundle 579 | 580 | * [FOIT vs FOUT](https://www.zachleat.com/foitfout/) 581 | 582 | * [Source Map Explorer](https://www.npmjs.com/package/source-map-explorer), [Webpback Bundle Analyer](https://www.npmjs.com/package/webpack-bundle-analyzer) 583 | Understand what code you are loading 584 | 585 | * [Ghostery](https://www.ghostery.com/) 586 | See what 3rd party tools are loaded on a site. 587 | 588 | * [https://better.fyi/trackers/](https://better.fyi/trackers/) 589 | 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. 590 | 591 | * [ImageOptim](https://imageoptim.com/) 592 | Image compression 593 | 594 | * [Squoosh](https://squoosh.app) 595 | Upload an image and compare the original with different compressed version to find a good balance between filesize and image quality. 596 | 597 | * [Can I use?](https://caniuse.com/) 598 | Check the browser support for every web technology. 599 | 600 | * [Browser Scope](https://www.browserscope.org/) 601 | 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. 602 | 603 | * [JS Manners](http://jsmanners.com/) 604 | I like this page to audit JS Frameworks and 3rd party tools. 605 | 606 | * [You might not need Javascript](http://youmightnotneedjs.com/) 607 | 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 608 | 609 | * [You might not need jQuery](http://youmightnotneedjquery.com/) 610 | Learn how to get rid of jQuery dependencies in your project. This page shows you how to achieve things with Vanilla Javascript. 611 | 612 | * [Cloud Ping](http://www.cloudping.info/) 613 | See the network latency from your location to all AWS centres in the work. 614 | 615 | * [Charles Web Debugging Proxy](https://www.charlesproxy.com/) (free/$50) 616 | 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. 617 | 618 | * [har.tech](https://har.tech/) 619 | Collection of tools which can be used to inspect HAR files. 620 | 621 | * [httpstat.us](http://httpstat.us/) 622 | 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. 623 | 624 | * [Font Style Matcher](https://meowni.ca/font-style-matcher/) 625 | 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. 626 | 627 | * [3rdParty.io](http://3rdparty.io/) 628 | 3rdParty.io monitors third-party scripts and libraries, and checks that they’re following best practices for performance, reliability and security 629 | 630 | * [3rd Party Audit Google Sheet](https://docs.google.com/spreadsheets/d/1uTcRSoJAkXfIm2yfG5hvCSzvSZD9fAwXNQMVK3HdPMI/edit#gid=0) 631 | A Google Sheet provided by Harry Roberts which gives you a nice overview over your used 3rd Party Tools 632 | 633 | * [Content Security Policy (CSP) Generator](https://report-uri.com/home/generate) 634 | 635 | * [Real User Experience Test (rUXt)](https://ruxt.dexecure.com/) 636 | Access RUM data for 3,237,526 websites accessed by Google Chrome Users 637 | 638 | * [Waterfall Heatmap Bookmarklet](https://github.com/zeman/perfmap) 639 | Prints the timing data on assets. 640 | 641 | * [Test your mobile speed with Google](https://testmysite.withgoogle.com/intl/en-gb) 642 | Test score, benchmark with other pages from the same industry, detailed report 643 | 644 | * [Google Speed Scorecard](https://www.thinkwithgoogle.com/feature/mobile/) 645 | Compare your mobile Site Speed with your competition based on CrUX data 646 | 647 | * [Google Imapct Calculator](https://www.thinkwithgoogle.com/feature/mobile/) 648 | Estimate the revenue impact of performance optimisations 649 | 650 | * [Google Page Speed Industry Benchmarks](https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/) 651 | 652 | * [Performance budget calculator](http://www.performancebudget.io/) 653 | 654 | * [Gzip and Brotli Compression Level Estimator](https://tools.paulcalvano.com/compression.php) 655 | 656 | * [CSS stats](https://cssstats.com/) 657 | 658 | ### Paid tools and services 659 | 660 | These are professional tools which cost money. The cost are usually depends on traffic, server or data. 661 | 662 | * [New Relic](https://newrelic.com/) 663 | 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. 664 | 665 | * [Speedcurve](https://speedcurve.com/) 666 | 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. 667 | 668 | * [Akamai Web Performance Tools](https://www.akamai.com/uk/en/products/web-performance/) 669 | 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). 670 | 671 | * [Cloudinary](https://cloudinary.com/) 672 | Image and video management in the cloud 673 | 674 | ## Open Source Projects 675 | 676 | * [Fast Dom](https://github.com/wilsonpage/fastdom) 677 | Eliminates layout thrashing by batching DOM measurement and mutation tasks. 678 | 679 | * [FutureLink](https://github.com/SamKnows/futurelink) 680 | Calculates the deceleration of the cursor to predict when a link is about to be clicked. 681 | 682 | * [guess.js](https://github.com/guess-js/guess) 683 | Libraries and tools for enabling data-driven user-experiences on the web. 684 | 685 | * [WebPageTest](https://github.com/WPO-Foundation/webpagetest) 686 | Foundation for WebPageTest.org. You can install it locally to run it behind a firewall. 687 | 688 | * [Lighthouse](https://github.com/GoogleChrome/lighthouse) 689 | Codebase of the Google Chrome Lighthouse tool. 690 | 691 | ## Studies 692 | 693 | 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? 694 | 695 | * [Web Performance Optimisation Stats](https://wpostats.com) 696 | Web performance studies. Learn how web performance impacts business KPIs. A good source to convince people to invest money in web performance optimisations. 697 | 698 | * [Progressive Web Apps Stats](https://www.pwastats.com/) 699 | Learn what influence PWA have on business metrics. 700 | 701 | * [http://www.internetlivestats.com/internet-users-by-country/](http://www.internetlivestats.com/internet-users-by-country/) 702 | 703 | * [https://www.productchart.com/smartphones/](https://www.productchart.com/smartphones/) 704 | 705 | * [https://www.gsmaintelligence.com/](https://www.gsmaintelligence.com/) 706 | 707 | * [https://www.ericsson.com/en/mobility-report](https://www.ericsson.com/en/mobility-report) 708 | 709 | * [Open Signal: Global stat of the mobile network](https://opensignal.com/reports/2018/02/global-state-of-the-mobile-network) 710 | 711 | * [https://www.akamai.com/us/en/about/our-thinking/state-of-the-internet-report/](https://www.akamai.com/us/en/about/our-thinking/state-of-the-internet-report/) 712 | 713 | ## Case studies 714 | 715 | * [Who has the fastest website in F1?](https://jakearchibald.com/2019/f1-perf/), Jake Archiblad, 03/2019 716 | 717 | * [How we built the fastest conference website in the world](https://2019.jsconf.eu/news/how-we-built-the-fastest-conference-website-in-the-world/), 03/2019 718 | 719 | * [Nikkei achieves a new level of quality and performance with their multi-page PWA](https://developers.google.com/web/showcase/2018/nikkei), Google, 11/2018 720 | 721 | * [Measuring Web Performance for Wikipedia using synthetic testing tools](https://speakerdeck.com/soulislove/measuring-web-performance-for-wikipedia-using-synthetic-testing-tools), Wikimedia Foundation, 10/2018 722 | 723 | * [A Netflix Web Performance Case Study](https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9), Addy Osmani, 11/2018 724 | 725 | * [How Zalando's overall site speed improved by more than 25% in five months](https://jobs.zalando.com/tech/blog/loading-time-matters/), Zalando, 06/2018 726 | 727 | * [Fast Fashion: Missguided](https://www.youtube.com/watch?v=mLzt23ZVGx0&app=desktop), Mark Leach & Andy Davies, DeltaV, 06/2018 728 | 729 | * [Case study: analyzing the Walmart site performance](https://iamakulov.com/notes/walmart/), Ivan Akulov, 04/2018 730 | 731 | ## Open data sources 732 | 733 | * [HTTP Archive](https://httparchive.org/) / [Loading speed](https://beta.httparchive.org/reports/loading-speed) 734 | 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](https://github.com/HTTPArchive/httparchive.org/blob/master/docs/guided_tour.md) from Paul Calvano and Rick Viscomi is the best way to get started. 735 | 736 | * [Firefox Public Data Report](https://data.firefox.com/), Firefox usage data 737 | 738 | * [Google Transparency Report](https://transparencyreport.google.com/?hl=en) 739 | 740 | * [Chrome UX report](https://developers.google.com/web/tools/chrome-user-experience-report/) 741 | 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. 742 | 743 | * [Chrome UX report dashboard](https://developers.google.com/web/updates/2018/08/chrome-ux-report-dashboard) 744 | 745 | * [Akamai Internet Observatory](https://www.akamai.com/uk/en/solutions/intelligent-platform/visualizing-akamai/internet-observatory/) 746 | Browser stats, Network latency between regions 747 | 748 | * [Open Signal](https://opensignal.com/reports/), Mobile status report worldwide 749 | 750 | * [Pew Research Center](http://www.pewglobal.org/2018/06/19/social-media-use-continues-to-rise-in-developing-countries-but-plateaus-across-developed-ones/) 751 | 752 | * [Ofcom.org.uk](https://www.ofcom.org.uk/research-and-data) 753 | 754 | ## Web Performance Meetups 755 | 756 | 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: 757 | 758 | * Munich: [https://www.meetup.com/Munchen-Web-Performance-Group/](https://www.meetup.com/Munchen-Web-Performance-Group/) 759 | 760 | * Berlin: [https://www.meetup.com/Berlin-Web-Performance-Group/](https://www.meetup.com/Berlin-Web-Performance-Group/) 761 | 762 | * Barcelona: [https://www.meetup.com/Barcelona-Web-Performance/](https://www.meetup.com/Barcelona-Web-Performance/) 763 | 764 | ## Conferences 765 | 766 | This are all conferences with a strong focus on web performance. 767 | They all have a very good lineup: 768 | 769 | * [Smashing Conference London 2018](https://smashingconf.com/london-2018/) 770 | (Ticket: Early Bird: $499 — Conference & Workshop: $922) 771 | 07–08 February 2018, London, UK 772 | 773 | * [#perfMatters](https://perfmattersconf.com/) / [Twitter](https://twitter.com/perfmattersconf) 774 | (Ticket: Blind Bird $239 — Conference & Workshop: $748) 775 | 27–28 March, 2018, Redwood City, California, USA 776 | 777 | * [DeltaV](https://2018.deltavconf.com/) / [Twitter](https://twitter.com/deltavconf) 778 | (Ticket: Early bird £399 + VAT) 779 | 10–11 May 2018, London, UK 780 | 781 | * [Performance.now()](https://perfnow.nl/) / [Twitter](https://twitter.com/perfnowconf) 782 | (Ticket: 550 EUR + VAT) 783 | 8–9 November 2018, Amsterdam, Netherland 784 | 785 | * [We love speed](https://www.welovespeed.com/), Bordeaux, France – Not very international, most of the talks are French 786 | 787 | ## W3C Standards 788 | 789 | The [Web Performance Working Group](https://www.w3.org/webperf/) is providing methods to measure and improve aspects of application performance of user agent features and APIs. 790 | 791 | The [Performance Timing Primer](https://w3c.github.io/perf-timing-primer/) gives a good overview on what the Web Performance Group is working on. 792 | 793 | [All standards and drafts from the Performance Working Group](https://www.w3.org/TR/?tag=performance) 794 | --------------------------------------------------------------------------------