Performance

performance.md

Performance matters

1. https://speedcurve.com/blog/
2. https://calendar.perfplanet.com/2017/an-audit-of-boomerangs-performance/
3. Time to interactive - Measuring more of the user experience - https://calendar.perfplanet.com/2017/time-to-interactive-measuring-more-of-the-user-experience/
4. PERCEPTION MATTERS: MAKING RUM MORE REAL - https://blogs.akamai.com/2018/04/perception-matters-measure-perceived-performance.html
5. Web performance made easy - https://developers.google.com/web/updates/2018/08/web-performance-made-easy
6. Url not working - https://developer.akamai.com/blog/2017/04/12/gauge-user-experience-time-interactive/
7. Github containing most suggestions around perf - https://github.com/fabkrum/web-performance-resources
8. Frontend performance checklist - https://github.com/thedaviddias/Front-End-Performance-Checklist
9. PWA metrics using lightouse - https://github.com/paulirish/pwmetrics
10. Web performance made easy By developers.google.com - https://developers.google.com/web/updates/2018/08/web-performance-made-easy
11. Reduce javascript payload with code splitting - https://developers.google.com/web/fundamentals/performance/optimizing-javascript/code-splitting/
12. https://www.igvita.com/2015/08/17/eliminating-roundtrips-with-preconnect/
13. https://blog.mozilla.org/services/2016/08/23/sending-vapid-identified-webpush-notifications-via-mozillas-push-service/
14. https://wpostats.com/
15. https://calendar.perfplanet.com/2017/tracking-cpu-with-long-tasks-api/
16. Hero image custom metrics (Stevesouders.com) - https://bigquery.cloud.google.com/table/quikr-analytics:55267520.ga_sessions_20181127?tab=schema
17. User timing & custom metrics (stevesouders.com) - https://speedcurve.com/blog/user-timing-and-custom-metrics/
18. Rendering metrics explaining all metrics (stevesouders) - https://speedcurve.com/blog/rendering-metrics/

Parse & Compile time of JS

1. https://medium.com/reloading/javascript-start-up-performance-69200f43b201
2. https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/javascript-startup-optimization/
3. Adding naive timers to figure out parsing & execution time - https://speakerdeck.com/desp/unpacking-the-black-box-benchmarking-js-parsing-and-execution-on-mobile-devices?slide=24

Handling SPA applications

1. https://engineering.linkedin.com/blog/2017/02/measuring-and-optimizing-performance-of-single-page-applications

Few blog posts

1. https://calendar.perfplanet.com/2014/driving-webpagetest-from-a-google-docs-spreadsheet/
2. https://har.tech/
3. https://wpostats.com/
4. Page life cycle API - https://developers.google.com/web/updates/2018/07/page-lifecycle-api

Graph explorer

1. Speedscope - Inteactive flamegraph explorer - https://developers.google.com/search/reference/robots_meta_tag

Timings

1. http://www.stevesouders.com/blog/2014/08/21/resource-timing-practical-tips/
2. https://www.stevesouders.com/blog/2014/11/25/serious-confusion-with-resource-timing/
3. https://www.w3.org/TR/resource-timing/#duration-attribute
4. https://www.w3.org/TR/resource-timing/#processing-model
5. Resource timing - https://github.com/akamai/boomerang/blob/master/plugins/restiming.js
6. https://developer.mozilla.org/en-US/docs/Web/API/Resource_Timing_API/Using_the_Resource_Timing_API
7. https://developers.google.com/web/tools/chrome-devtools/network-performance/understanding-resource-timing
8. Logging activity with the web beacon API - https://www.smashingmagazine.com/2018/07/logging-activity-web-beacon-api/

My RUM library should track

1. Input latency

const btn = document.querySelector('btn')
btn.addEventListener('click', (event) => {
  const lag = performance.now() - event.timeStamp;
  if(lag > 100)
    sendDataToAnalytics('Input latency', lag)
})

2. Measuring TTI

import ttiPolyfill from './path/to/tti-polyfill.js'
ttiPolyfill.getFirstConsistentlyInteractive().then((tti) => {
  sendDataToAnalytics('Time to Interactive', tti)
})

3. Holding third parties accountable - longtask api's

4. Using user timing API

performance.mark("mySetTimeout-start");

// Wait some time.
setTimeout(function() {
  // Mark the end of the time.
  performance.mark("mySetTimeout-end");

  // Measure between the two different markers.
  performance.measure(
    "mySetTimeout",
    "mySetTimeout-start",
    "mySetTimeout-end"
  );

  // Get all of the measures out.
  // In this case there is only one.
  var measures = performance.getEntriesByName("mySetTimeout");
  var measure = measures[0];
  console.log("setTimeout milliseconds:", measure.duration)

  // Clean up the stored markers.
  performance.clearMarks();
  performance.clearMeasures();
}, 1000);

Other references

• https://www.html5rocks.com/en/tutorials/webperformance/usertiming/
• Using mark & measure user timing APIs

5. Boomerang akamai docs (mpulse)

• https://developer.akamai.com/tools/boomerang/docs/BOOMR.plugins.ResourceTiming.html
• https://developer.akamai.com/tools/boomerang/docs/index.html
• https://developer.akamai.com/tools/boomerang/docs/tutorial-building.html
• https://developer.akamai.com/tools/boomerang/docs/BOOMR.html

6. https://github.com/sergeychernyshev/ux-capture (Nework meetup material)

Timing-Allow-Origin sample urls

1. https://use.typekit.net/previewkits/pk-v1.js
2. http://c.go-mpulse.net/boomerang/CEN2P-NP9AH-JM5WW-J3WEF-62YQE

Useful devtools snippets

1. http://bgrins.github.io/devtools-snippets/

More about chrome devtools

1. https://medium.com/frontmen/art-of-debugging-with-chrome-devtools-ab7b5fd8e0b4
2. Timeline Profiling with Chrome DevTools - http://blog.librato.com/posts/chrome-devtools

Discussions

1. User timing rum - https://gist.github.com/pmeenan/5902672 (Support routine for adding W3C user timing events to a site. Includes some basic polyfill support for browsers that don't support user timing or navigation timing)

Performance blogs

1. https://pagebuildersandwich.com/increased-plugins-performance-200/
2. What forces layout reflows by PaulIrish - https://gist.github.com/paulirish/5d52fb081b3570c81e3a
3. Jake archibald - https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/

Interested repos

1. https://github.com/imagekit-developer/network-based-image-optimization

Image optimization app url recommended

1. https://squoosh.app/

Webpagetest usage articles

1. https://css-tricks.com/use-webpagetest-api/