samarpanda

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

samarpanda

Observable

Working with asynchronous user interface API. Preparing the lego for handling asyn and concurent apis.

samarpanda

const parallelFetch = async (urls) => {
  var data = await Promise.all(
    urls.map((fetchParams) => {
      const { url, options = {} } = fetchParams;
      return fetch(url, options).then((response) => response.json());
    })
  );
  return data;
}

samarpanda

New York WebPerf 25th Feb

Talk by @samarpanda

CLS

try {
  var cumulativeLayoutShiftScore = 0;
  const observer = new PerformanceObserver(list => {

samarpanda

Express Etag fix (Multiple servers)

Etag uses information from file system stat. Including the modified time similar to nginx & apache. This can't calculate the hash of the contents. Doing so that would require reading the file from the file system twice for every single request scope.

Files usually have slightly different modification timestamp between multiple servers. Similarly apache/nginx would do the same.

Simple way to calculate ETag for the static files:

samarpanda

Meet for SPEED - 29th Oct 2020 - Online

1. We profiled quikr.com/jobs using wpt
2. Preconnect resource hint crossorigin attribute
3. Discussion on resource benefited from preconnect?
4. WebPageTest and cloudflare workers - By Andy Davies - London webperf meetup
5. Cumulative layout shift what it measures, when it works and how to use it - By Tammy everts
6. Akamai real user measurement solution - mPulse
7. Speedcurve real user measurement - lux 1

samarpanda

Increase the speed of HTML5 videos

document.getElementsByTagName('video')[0].playbackRate = 2

Works in frontendmasters

samarpanda

Design pattern cheatsheet

Credit source

samarpanda

Cumulative layout shift (CLS)

Using web-vitals npm package

import {getCLS} from 'web-vitals';
getCLS(console.log);

samarpanda

Largest contentful paint

const po = new PerformanceObserver(list => {
  const entries = list.getEntries();
  const lastEntry = entries[entries.length - 1];
  console.log(`LCP is: ${lastEntry.startTime}`);
});
po.observe({ type: 'largest-contentful-paint', buffered: true })