samarpanda

First input delay(FID)

This is an interactive metric. Collected once user tries to interact with the page.

Using web-vitals npm package

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

samarpanda

Docker cheat sheet

1. Prune unused docker objects - https://docs.docker.com/config/pruning/

samarpanda

Security

1. The search engine for security - https://www.shodan.io/

samarpanda

Talk about performance

• LCP, FID, CLS, Other Perf timing API
• Improving loading experience includes - link rel preload, Priority Hints, Native lazy loading using simple html image attributes etc
• Various performance APIs - UserTiming, LongTask, ElementTiming, ResourceTiming, ServerTiming, PaintTiming etc.
• Tips & Tricks around ChromeDevtools to profile, detect, address issues & repeat i.e overrides, log point, performance profiling.
• Demistify values around webpagetest
• Font optimization techniques
• Explaing browser rendering pipeline
• Progressive Web Apps - ServiceWorker as a reverse proxy

samarpanda

bigbasket 3G Fast optimizing critical rendering path

1. devtools performance comparison - https://bit.ly/bb-perf-01
2. Simply using preload link to prioritize assets in view port
3. Improves cumulative layout shift as well by reducing the content movements
4. link rel preload can also to passed as response header.

samarpanda

We couldn’t find that file to show.

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 })

samarpanda

Cumulative layout shift (CLS)

Using web-vitals npm package

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

samarpanda

Consul

Installing Consul

• brew install consul
• consul -v

Running consul agent

In development mode

samarpanda

Articles on Traefik

1. Traefik as an alternative reverse proxy to nginx for self hosted dockerized applications
2. The mordern reverse proxy
3. Building a scalable highly available, and protable web server
4. Traefik docker hub

Traefik docs

1. Retry config
2. CircuitBreaker