Skip to content

Instantly share code, notes, and snippets.

@samarpanda
samarpanda / Largest-Contentful-Paint.md
Last active Apr 24, 2021
Largest contentful Paint
View Largest-Contentful-Paint.md

Largest contentful paint (LCP)

I wonder if i can see all the lcp elements instead of getting the eventual lcp element from the performance panel. Below script higlights all lcp elements available on the page. After running the script in console / source - snippet it highlight by a dotten blue line for all lcp elements. This uses browser's PerformanceObserver API to get all lcp elements.

By @samarpanda

/**
 * PerformanceObserver
 */
@samarpanda
samarpanda / express-etag-fix.md
Last active Apr 10, 2021
Express - ETag fix for multiple servers
View express-etag-fix.md

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:

View NY-WebPerf-25th-Feb.md

New York WebPerf 25th Feb

Talk by @samarpanda

CLS

try {
  var cumulativeLayoutShiftScore = 0;
  const observer = new PerformanceObserver(list => {
@samarpanda
samarpanda / first-input-delay.md
Last active Jun 26, 2020
First input delay (FID)
View first-input-delay.md

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
samarpanda / docker.md
Created May 26, 2020
Docker cheatsheet
View docker.md
View Talk-about-performance.md

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
samarpanda / case-study-01.md
Last active Apr 26, 2020
Performance case study 25-04-2020 bigbasket.com
View case-study-01.md

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
samarpanda / gist:6d7eecf7ce82b37f598dc6a3ed46babb
Created Apr 25, 2020
Bigbasket performance 3GFast throttled performance profile dump
We couldn’t find that file to show.