Add more resources and some funky google sheets sorcery

Author: radum

docs/perf-1-liners.md

@@ -53,3 +53,13 @@ time_total: 0.164
 This will get time to first byte, which is the time_starttransfer line.
 
 The other timing details include DNS lookup, TCP connect, pre-transfer negotiations, redirects (in this case there were none), and of course the total time.
+
+## CrUX Data
+
+### Use a Google chrome search engine to find CrUX data for an origin
+
+In Google Chrome go to settings and add a custom search engine:
+
+Search engine: CrUX
+Keyword: crux
+Query URL: https://datastudio.google.com/c/u/0/reporting/bbc5698d-57bb-4969-9e07-68810b9fa348/page/keDQB?params=%7B%22origin%22:%22%s%22%7D

docs/perf-resources.md

@@ -18,6 +18,7 @@
     - [Javascript and Render Performance](#javascript-and-render-performance)
     - [Perceived performance](#perceived-performance)
     - [Tooling Articles](#tooling-articles)
+    - [Energy Consumption and sustainability](#energy-consumption-and-sustainability)
   - [Online courses](#online-courses)
     - [Free Web Courses](#free-web-courses)
     - [Free Video Courses](#free-video-courses)
@@ -35,6 +36,7 @@
     - [Meta](#meta)
   - [Books](#books)
   - [Podcasts](#podcasts)
+  - [Video Formats](#video-formats)
   - [Tools](#tools)
   - [Open Source Projects](#open-source-projects)
   - [Studies](#studies)
@@ -67,6 +69,8 @@
 - [Ask Me Anything - Core Web Vitals](https://www.youtube.com/watch?v=HWm6WNkHs90&t=615s), Google I/O 2021, [05/2021]
 - [Optimizing Web Vitals using Lighthouse](https://web.dev/optimize-vitals-lighthouse/), Addy Osmani, [05/2021]
 - [Cumulative Layout Shift: Measure and Avoid Visual Instability](https://calibreapp.com/blog/cumulative-layout-shift), Karolina Szczur, [05/2021]
+- [The do’s and don’ts of Core Web Vitals](https://contentsquare.com/blog/the-dos-and-donts-of-core-web-vitals-with-iprospect/), Ric Riley, [06/2021]
+- [Towards a better responsiveness metric](https://web.dev/better-responsiveness-metric/), Nicolás Peña Moreno & Annie Sullivan & Hongbo Song, [06/2021]
 - [More time, tools, and details on the page experience update](https://developers.google.com/search/blog/2021/04/more-details-page-experience), Jeffrey Jose (Google), [04/2021]
 - [The Almost-Complete Guide to Cumulative Layout Shift](https://jessbpeck.com/posts/completecls/), Jess B Pack, [04/2021]
 - [An In-Depth Guide To Measuring Core Web Vitals](https://www.smashingmagazine.com/2021/04/complete-guide-measure-core-web-vitals/), Barry Pollard, [04/2021]
@@ -97,6 +101,7 @@
 
 ### General
 
+- [Fast load times Techniques for improving site performance.](https://web.dev/fast/)
 - [Resource Fetch Prioritization and Scheduling in Chromium](https://docs.google.com/document/d/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc/edit) - [08/2015]
 - [How To Perform An SEO Audit Using Google Search Console](https://seosly.com/how-to-audit-site-with-google-search-console/), Olga Zarzeczna, [06/2021]
 - [Website Speed: Advice from the trenches](https://www.cmg.digital/website-speed-advice-from-the-trenches), Bojan Basrak, [05/2021]
@@ -148,6 +153,8 @@
 
 ### Image and Video Optimization
 
+- [Web Performance: Trends and Insights from 4 Top Performance Experts](https://cloudinary.com/products/media_optimizer/web-performance-guide), cloudinary, [07/2021]
+- [GIFS on the web: A new way to bloat](https://dougsillars.com/2021/06/21/gifs-on-the-web-a-new-way-to-bloat/), Doug Sillars, [06/2021]
 - [Serving sharp images to high density screens](https://jakearchibald.com/2021/serving-sharp-images-to-high-density-screens/), Jake Archibald, [06/2021]
 - [The Humble <img> Element And Core Web Vitals](https://www.smashingmagazine.com/2021/04/humble-img-element-core-web-vitals/), Addy Osmani, [04/4021]
 - [Time for Next-Gen Codecs to Dethrone JPEG](https://cloudinary.com/blog/time_for_next_gen_codecs_to_dethrone_jpeg), Jon Sneyers, [02/2020]
@@ -174,13 +181,17 @@
 - [A New Way To Reduce Font Loading Impact: CSS Font Descriptors](https://www.smashingmagazine.com/2021/05/reduce-font-loading-impact-css-descriptors/), Barry Pollard, [05/2021]
 - [5 steps to faster web fonts](https://iainbean.com/posts/2021/5-steps-to-faster-web-fonts/), Iain Bean, [05/2021]
 - [How I set up Glyphhanger on macOS for optimizing and converting font files for the Web](https://www.sarasoueidan.com/blog/glyphhanger/), Sara Soueidan, [03/2021]
+- [More than you ever wanted to know about font loading on the web](https://deploy-preview-15--upbeat-shirley-608546.netlify.app/posts/high-performance-web-font-loading/), Malte Ubl, [01/2021]
 - [The importance of `@font-face` source order when used with preload](https://nooshu.github.io/blog/2021/01/23/the-importance-of-font-face-source-order-when-used-with-preload/), Matt Hobbs, [01/2021]
 - [How to avoid layout shifts caused by web fonts](https://simonhearne.com/2021/layout-shifts-webfonts/), Simon Hearne, [01/2021]
 - [Preloading Fonts and the Puzzle of Priorities](https://andydavies.me/blog/2019/02/12/preloading-fonts-and-the-puzzle-of-priorities/), Andy Davies, [02/2019]
 - [The font loading checklist](https://www.zachleat.com/web/font-checklist/), Zach Leatherman, [08/2018]
 
 ### Measure Performance
 
+- [Reducing variability in web performance metrics](https://www.debugbear.com/blog/web-performance-test-variability), debugbear, [11/2020]
+- [Why is my Lighthouse score different from PageSpeed Insights?](https://www.debugbear.com/blog/why-is-my-lighthouse-score-different-from-pagespeed-insights), debugbear, [08/2019]
+- [Measure the performance of a web application with Lighthouse CI in a GitLab CI pipeline](https://medium.com/tuimm/measure-performance-web-app-with-lighthouse-ci-in-a-gitlab-pipeline-dd292842e40d), Aurelio Merenda, [06/2021]
 - [Benchmarking JavaScript Memory Usage](https://blog.webpagetest.org/posts/benchmarking-javascript-memory-usage/), Tim Kadlec, [06/2021]
 - [How Real User Monitoring will improve GOV.UK for everyone](https://insidegovuk.blog.gov.uk/2021/06/16/how-real-user-monitoring-will-improve-gov-uk-for-everyone/), Matt Hobbs, [06/2021]
 - [How Lighthouse 8 Changes Affect Your Metrics](https://calibreapp.com/blog/lighthouse-8), Karolina Szczur, [06/2021]
@@ -267,6 +278,7 @@
 
 ### Javascript and Render Performance
 
+- [The real cost of Javascript dependencies (and the state of JS package quality)](https://medium.com/voodoo-engineering/the-real-cost-of-javascript-dependencies-and-the-state-of-js-package-quality-a8dacd74c0ec), Vincent Vallet, [06/2021]
 - [Scheduling Scripts Intuitively and Performantly](https://docs.google.com/document/d/16rHWLu-0abC9WWLhLBFlIRtbSnOFzhKAXsCamsp0oAs/edit#)
 - [The Cost of Javascript Frameworks](https://timkadlec.com/remembers/2020-04-21-the-cost-of-javascript-frameworks/) - [04/2020]
 - [JavaScript Loading Priorities in Chrome](https://addyosmani.com/blog/script-priorities/) - [02/2019]
@@ -326,6 +338,7 @@
 
 ### Tooling Articles
 
+- [WebPageTest Sorcery Using Google Sheets](https://blr.design/blog/webpagetest-in-google-sheets/), Brian Louis Ramirez, [06/2021]
 - [Using Chrome Local Overrides To Optimize Page Speed](https://blr.design/blog/local-overrides/), Brian Louis Ramirez, [05/2021]
 - [WebPageTest API](https://css-tricks.com/webpagetest-api/), Chris Coyier, [05/2021]
 - [Profiling site speed with the Chrome DevTools Performance tab](https://www.debugbear.com/blog/devtools-performance), DebugBear, [04/2021]
@@ -335,6 +348,10 @@
 - [Cloudflare Workers](https://github.com/pmeenan/cf-workers), Pat Meenan, Collection of Cloudflare Worker scripts, generally focused on performance optimizations
 - [Chrome Flags for Tooling](https://github.com/GoogleChrome/chrome-launcher/blob/master/docs/chrome-flags-for-tools.md), Paul Irish
 
+### Energy Consumption and sustainability
+
+- [Green Energy Efficient Progressive Web Apps](https://devblogs.microsoft.com/sustainable-software/green-energy-efficient-progressive-web-apps/), David Rousset, [11, 2020]
+
 ## Online courses
 
 These are excellent courses for web developer to gain a lot of insights about web performance.
@@ -369,6 +386,8 @@ Not 100% related to Web Performance. A few of the trainings are available for fr
 
 ## Videos
 
+- [Top 10 performance pitfalls - HTTP 203](https://www.youtube.com/watch?v=Lh9q3h2khlc), Jack Archibald & Surma, [06/2021]
+
 ### 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.
@@ -436,6 +455,7 @@ This is a really good talk about how humans perceive performance. Eli shares a l
 
 ### Measure
 
+- [How to test site speed optimizations with Compute@Edge](https://www.fastly.com/blog/how-to-test-site-speed-optimizations-with-compute-edge), Leon Brocard, [06/2021]
 - [WebPageTest and Cloudflare Workers – A Performance Consultant’s Dream Combo?](https://www.youtube.com/watch?v=YSS0a0uaDvk), Andy Davies, 20/2020 – 🚀
 - [How website speed can impact digital ad revenue](https://www.youtube.com/watch?v=EwlmYec3M-s) ([Slides](https://simonhearne.github.io/presentations/digital-revenue/#/)), Simon Hearne, 06/2019
 - [Crash Course in CrUX](https://www.youtube.com/watch?v=YUD5mDOJmhE), [Slides](https://gist.github.com/rviscomi/250bee3c02d1bf9e6e1f528c8813c535), Rick Viscomi, 04/2018 - perfmatters
@@ -479,6 +499,7 @@ This is a really good talk about how humans perceive performance. Eli shares a l
 
 ### Development
 
+- [Web Performance Tuning with browser APIs](https://www.youtube.com/watch?v=ALN1v_sBe2g), Yaser Adel Mehraban, [06/2021]
 - [Transitioning to modern JavaScript](https://www.youtube.com/watch?v=cLxNdLK--yI) ([Article](https://web.dev/publish-modern-javascript/)), Houssein Djirdeh, Jason Miller, Chrome Dev Summit 2020, 12/2020
 - [When JavaScript Bytes](https://www.youtube.com/watch?v=JvJ0v5OohNg) ([Slides](https://noti.st/tkadlec/MC0Bvy/when-javascript-bytes)), Tim Kadlec, 11/2019
 - [Adaptive Loading — Improving the UX for millions on low-end devices](https://www.youtube.com/watch?v=puUPpVrIRkc), Addy Osmany, 11/2019
@@ -543,6 +564,11 @@ Another classic book.
 
 - ...
 
+## Video Formats
+
+- [WebPageTest - Twitch](https://www.twitch.tv/webpagetest): Bi-weekly live show on Twitch by Tim Kadlec around Webpagetest topics (Catchpoint)
+- [Speed@Scale](https://www.youtube.com/hashtag/speedatscale): Web Performance audits by Tracy Lee (@ladyleet) and guests
+
 ## Tools
 
 - [Curated list of web performance tools](perf-tools.md)

docs/perf-tools.md

@@ -2,6 +2,23 @@
 
 > Performance related tools used to measure, test, report and debug performance.
 
+- [Performance tools](#performance-tools)
+  - [Tools](#tools)
+    - [Free tools and services](#free-tools-and-services)
+      - [Performance Audits](#performance-audits)
+      - [Webpagetest](#webpagetest)
+      - [Lighthouse & CrUX & Core Web Vitals](#lighthouse--crux--core-web-vitals)
+      - [Images & Video](#images--video)
+      - [Thirdparty](#thirdparty)
+      - [Development Tools](#development-tools)
+      - [Network Tools](#network-tools)
+      - [Load testing](#load-testing)
+      - [Benchmarking](#benchmarking)
+      - [Fonts](#fonts)
+      - [Other Tools](#other-tools)
+    - [Paid tools and services](#paid-tools-and-services)
+  - [Needs sorting](#needs-sorting)
+
 ## Tools
 
 ### Free tools and services
@@ -29,6 +46,8 @@ The Request Map Generator is the go to place to understand what 3rd party tools
 
 #### Lighthouse & CrUX & Core Web Vitals
 
+- [Multihouse](https://github.com/samdutton/multihouse)
+Multiple Lighthouse runs for multiple URLs
 - [Lighthouse](https://developers.google.com/web/tools/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](https://github.com/cloudfour/lighthouse-parade)
@@ -75,6 +94,8 @@ Image analysis tool. This tool gives you insight about how you can optimise your
 Easily generate the optimal responsive image dimensions
 - [ImageOptim](https://imageoptim.com/)
 Image compression
+- [ImageAlpha](https://pngmini.com/)
+Free png optimizer for MacOS
 
 #### Thirdparty
 
@@ -128,6 +149,7 @@ Find out how much turning on modern JS could save.
 Compares the HTTP archive data of different JavaScript Frameworks
 - [Source Map Explorer](https://www.npmjs.com/package/source-map-explorer), [Webpack Bundle Analyer](https://www.npmjs.com/package/webpack-bundle-analyzer)
 Understand what code you are loading
+- [Bundle per page type/entry point](https://bundlers.tooling.report/code-splitting/multi-pages/)
 - [You might not need Javascript](http://youmightnotneedjs.com/)
 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](http://youmightnotneedjquery.com/)
@@ -136,6 +158,11 @@ Learn how to get rid of jQuery dependencies in your project. This page shows you
 Browserscope is a community-driven project for profiling web browsers. The goals are to foster innovation by tracking browser functionality and to be a resource for web developers.
 - [CSS stats](https://cssstats.com/)
 
+**Chrome dev tools Extensions**
+
+- [DOM Treemap](https://github.com/Schepp/dom-treemap-devtools-extension)
+A Chrome Devtools extension that helps you explore the distribution of DOM nodes in the document tree.
+
 #### Network Tools
 
 - [https://httpstatus.io/](https://httpstatus.io/)
@@ -163,8 +190,12 @@ Find the CDN which is right for you.
 
 #### Load testing
 
-- https://github.com/locustio/locust
-- https://github.com/Blazemeter/taurus
+- [locust](https://github.com/locustio/locust)
+Locust is an easy to use, scriptable and scalable performance testing tool. You define the behaviour of your users in regular Python code.
+- [taurus](https://github.com/Blazemeter/taurus)
+Hides the complexity of performance and functional tests with an automation-friendly convenience wrapper. Taurus relies on JMeter, Gatling, Locust.io, Grinder and Selenium WebDriver as its underlying tools. Free and open source under Apache 2.0 License.
+- [plow](https://github.com/six-ddc/plow)
+Plow is a HTTP(S) benchmarking tool, written in Golang.
 
 #### Benchmarking
 
@@ -203,6 +234,10 @@ Prints the timing data on assets.
 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
 - [SERP Speed](https://reddico.co.uk/tools/serp-speed/)
 Compare your page speed at keyword level with the rest
+- [NPM dependency graph](https://npmgraph.js.org/)
+Generates the NPM dependency graph by uploading a package.json file
+- [HAR Analyzer](https://github.com/kevinfarrugia/hara)
+HAR Analyzer is a Node.js-based tool for performing simple analysis on HTTP Archive (.har) files.
 
 ### Paid tools and services
 

docs/wpt-sorcery-using-google-sheets.md

@@ -0,0 +1,69 @@
+# WebPageTest Sorcery Using Google Sheets
+
+How to pull JSON from the Web and work with it directly in Google Sheets
+
+- https://twitter.com/rick_viscomi/status/1408991312729284609
+- https://blr.design/blog/webpagetest-in-google-sheets/
+
+1. Run a test in WebPageTest
+
+First off, you need to run a test in WebPageTest and wait for the results.
+
+Once the results page appears, grab the test ID, which is the hash in the address bar URL.
+
+```
+https://www.webpagetest.org/result/210630_AiDcXH_a17de95b32287d0a8c9c23afb0cee637/
+# '210630_AiDcXH_a17de95b32287d0a8c9c23afb0cee637' is the test ID.
+```
+
+2. Set up Google Sheets
+
+You can add a header row for the Test ID and the metric (i.e. JSON path) that you want to look up.
+
+```
+Test ID	Run	["chromeUserTiming.LargestContentfulPaint"]	["bytesIn"]	requests[0].dns_ms	TTFB	["base_page_dns_server"]
+```
+
+If you want to paruse the results JSON for metrics, just click on “View JSON result” in the WebPageTest results view. It’ll open up a page such as this:
+
+```
+https://www.webpagetest.org/jsonResult.php?test=210630_AiDcXH_a17de95b32287d0a8c9c23afb0cee637&pretty=1
+```
+
+3. Add a Custom Function
+
+With Custom Functions, you can fetch content from the Web and perform whatever computations you can dream of.
+
+In your Google Sheet, select the menu item Tools > Script editor.
+
+Delete any code in the script editor and replace it with this:
+
+```js
+/**
+ * Fetches a metric from WebPageTest.
+ *
+ * @param {string} testId The WebPageTest ID of the test.
+ * @param {string} run The WebPageTest RUN of the test.
+ * @param {string} metric The name of the metric (as it appears in the results).
+ * @return The value of the metric in the test results.
+ * @customfunction
+ */
+function WEBPAGETEST_RESULT_RUN(testId, run, metric) {
+  const response = UrlFetchApp.fetch(`https://webpagetest.org/result/${testId}/?f=json&average=0&standard=0&console=0&lighthouse=0&rv=0&requests=0`).getContentText();
+  const results = JSON.parse(response);
+
+  return eval(`results.data.runs[${run}].firstView${metric.replace(/^([^\[]+)/, ".$1")}`);
+}
+```
+
+Important:
+
+Make sure you include JSDoc meta information – the text at the beginning of the snippet that looks like a CSS comment – so that the custom function appears in Sheet’s autocomplete. Without it, you won’t find your function again that easily!
+
+Rename the Apps Script document, e.g. wpt, then click on the Save icon.
+
+4. Use a Custom Function
+
+Now go back to your Google Sheet and refresh it.
+
+Select an empty cell where you want to display a metric value and enter =web and you’ll see the custom function WEBPAGETEST_RESULT_RUN appear in the autocomplete menu.