Skip to content

Instantly share code, notes, and snippets.

@radum

radum/A Web performance resources.md

Last active September 4, 2024 21:49
Show Gist options
  • Save radum/5892d4d3336f93ac65960fd7f88107b7 to your computer and use it in GitHub Desktop.
Save radum/5892d4d3336f93ac65960fd7f88107b7 to your computer and use it in GitHub Desktop.
Download ZIP
Web performance resources
Raw
A Web performance resources.md

Articles

NOTICE: I moved most of this content that I no longer maintain within this gist over to its own repo here https://github.com/radum/performance-testing-framework

Performance API

// https://github.com/WICG/paint-timing
performance.getEntries();
performance.getEntriesByType('paint');

// Calculate the time it spends to run something
performance.mark('start');
...
performance.mark('end');
performance.measure('total', 'start', 'end');
const duration = performance.getEntriesByType('measure').slice(-1)[0].duration

// Lib to use for the stuff above
https://github.com/nolanlawson/marky

Checklist

https://imgur.com/a/f8Rfq

Fonts

Video

Metrics

https://developers.google.com/web/tools/chrome-user-experience-report/getting-started

#standardSQL
SELECT
  origin,
  form_factor.name as form_factor,
  ROUND(100*
  SUM((
    SELECT SUM(bin.density)
    FROM UNNEST(first_contentful_paint.histogram.bin) bin WHERE bin.end <= 1000)) /
  SUM((
    SELECT SUM(bin.density)
    FROM UNNEST(first_contentful_paint.histogram.bin) bin))) AS fast_percent
FROM
  `chrome-ux-report.chrome_ux_report.201710`
WHERE origin like '%nissan%'
GROUP BY origin, form_factor
ORDER by fast_percent DESC;

Images

PWA

Other

How does the browser work

Tools

Network tools

Log analyze

Security

Raw
sitespeed.md

Examples on how to run it

Docker

# Generic
## Desktop / Cable

docker run --privileged --shm-size=2g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io --browsertime.chrome.collectTracingEvents --gpsi.key=AIzaSyCc4gnCyYzc2vJOz0a_6SfqparuUcBtecM --webpagetest.key=A.c5845237a089955fb314e4aa6b2d09d8 --webpagetest.location=ec2-eu-west-1 --webpagetest.connectivity=Cable --webpagetest.runs=3 --html.showAllWaterfallSummary=true --gzipHAR -n 3 -c cable -b chrome --firstParty=".*renault.*" --speedIndex --video https://renault.fr/

## Desktop / Mobile
docker run --privileged --shm-size=2g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io --browsertime.chrome.collectTracingEvents --gpsi.key=AIzaSyCc4gnCyYzc2vJOz0a_6SfqparuUcBtecM --webpagetest.key=A.c5845237a089955fb314e4aa6b2d09d8 --webpagetest.location=Dulles_MotoG4 --webpagetest.connectivity=3GFast --webpagetest.runs=3 --html.showAllWaterfallSummary=true --gzipHAR -n 3 -c 3gfast -b chrome --mobile --firstParty=".*renault.*" --speedIndex --video https://renault.fr/

# Desktop
# Cable speed
# Chrome
# Window size
# FirstParty filter (example)
# SpeedIndex
# Video

docker run --privileged --shm-size=2g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io -n 3 -c cable -b chrome --browsertime.viewPort 1920x1080 --firstParty=".*example.*" --speedIndex --video https://example.com/

# Mobile
# 3GFast speed
# Chrome
# FirstParty filter (example)
# SpeedIndex
# Video

docker run --privileged --shm-size=2g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io -n 3 -c 3gfast -b chrome --mobile --firstParty=".*example.*" --speedIndex --video https://example.com/

# Mobile
# 3GFast speed
# Chrome
# User Agent for mobile
# Window size
# FirstParty filter (example)
# SpeedIndex
# Video

docker run --privileged --shm-size=2g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io -n 3 -c 3gfast -b chrome --browsertime.viewPort 412x732 --browsertime.userAgent "Mozilla/5.0 (Linux; Android 5.1.1; Nexus 6 Build/LYZ28E) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3169.0 Mobile Safari/537.36" --firstParty=".*example.*" --speedIndex --video https://example.com/

Normal

This uses your local installed browser

# Desktop
# Cable speed
# Chrome
# FirstParty filter (example)
# SpeedIndex
# Video

sitespeed.io -n 3 -c cable -b chrome --firstParty=".*example.*" --speedIndex --video https://example.com/

# Desktop
# Cable speed
# Firefox
# FirstParty filter (example)
# SpeedIndex
# Video

sitespeed.io -n 3 -c cable -b firefox --firstParty=".*example.*" --speedIndex --video https://example.com/

# Desktop
# Cable speed
# Chrome (headless)
# FirstParty filter (example)
# SpeedIndex
# Video

sitespeed.io -n 3 -c cable -b chrome --headless --firstParty=".*example.*" --speedIndex --video https://example.com/

--videoParams.framerate

Combine videos using ffmpeg

Example script: https://github.com/sitespeedio/sitespeed.io/blob/master/tools/combineVideos.sh

# Add text to video
ffmpeg -i A.mp4 -vf drawtext="fontfile='{PATH_TO_FONT}': text='{TEXT_HERE}': fontcolor=white: fontsize=24: box=1: [email protected]: boxborderw=5: x=(w-text_w)/2: y=(h-text_h)/2" {OUTPUT}.mp4

# H stack 2 videos
ffmpeg -i A.mp4 -i B.mp4 -filter_complex hstack A-B.mp4

# H stack 3 videos
ffmpeg -i A.mp4 -i B.mp4 -i C.mp4 -filter_complex "[0:v][1:v]hstack[leftSide];[leftSide][2:v]hstack" A-B-C.mp4

# H stack 2 videos - sitespeed.io version
ffmpeg \
  -i {input1}.mp4 \
  -i {input2}.mp4 \
  -filter_complex '[0:v]pad=iw*2:ih[int];[int][1:v]overlay=W/2:0[vid]' \
  -map [vid] \
  -c:v libx264 \
  -crf 23 \
  -preset veryfast \
  {output}.mp4

# Slowdown
ffmpeg -i {output}.mp4 -filter:v "setpts=5.0*PTS" {output}-slow.mp4
@etsystoyan
Copy link

images.guide is a casino spam site now :(

@radum
Copy link
Author

radum commented Sep 4, 2024 •
edited
Loading

Aaaa yes they did a redirect to https://web.dev/fast/#optimize-your-images looks like until they let the domain name go.

I moved most of this stuff here https://github.com/radum/performance-testing-framework/blob/main/docs/perf-resources.md#image-and-video-optimization

I will replace the links on both. Thanks for flagging @etsystoyan.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment