- Resource Hints
<link rel="preload" href="stlye.css" as="style" >
rel="dns-prefetch"
browser resolves dns asaprel="preconnect"
browser resolves dns & TCP handshake ( & TLS negotiation) asaprel="prerender"
loads all resources & renders page (like in hidden tab)rel="prefetch"
browser requests item and caches - intended for next page resourcesrel="preload"
browser requests item and caches - intended for current page resources- Can be added to HTTP Headers:
Link: <thing_to_load.js>;rel="preload";as="script"
- Nginx can be configured to automatically add these with HTTP/2 server push
- Can be added to HTTP Headers:
- HTTP/2 Server Push
- 3rd Party
- Way to compare impact of 3rd party libs
- http://requestmap.webperf.tools/
- Download CSV
$ awk -F',' '$2 != "Target Site" { print $1 }' cnn.csv
- Paste in to webpagetest.org block tab
- Compare perf impact of 3rd party
- Results
- Process & Audit of GTM
- Way to compare impact of 3rd party libs
- Progressive encoding
- Image can render before it has fully loaded
- Image looks OK at 15%
- MozJPEG
- AV1 Video offers best image compression - not well supported yet
- could embed a single frame AV1
<video>
for a large hero image - A new image format will do this
- could embed a single frame AV1
- Fastest image delivery server (cloudflare edge worker)
- Recieve request
- Send first 512 bytes (includes height / width etc)
- Wait 20ms
- Send first 15% of file (enough to render a low quality image)
- Wait for other files to have been loaded
- Send the rest of the image
- Bit field - for storing large number of bools (which are 8Bytes each in JS)
- Google Closure compiler (and ADVANCED_OPTIMMIZATIONS)
- Tree shaking / Dead code elimination
- HTTP/2
- Header Compression
- Multiplexing
- Server Push
- Requires TLS
- Head of line blocking (client needs to reviece all packets in order)
- Internet infrastructure is old/brittle, new technologies must use existing protocols
- QUIC (now officially HTTP/3)
- Based on UDP
- Multiplexing
- No Head of line blocking
- currently live in chrome to google servers (youtube)
- Can have 0 round trips! https://blog.chromium.org/2015/04/a-quic-update-on-googles-experimental.html
- TCP 1 round trip
- TCP + TLS 3 round trip (2 if seen before)
- QUIC 1 round trip (0 if seen before)\
- Biggest gains for slow connections e.g. 3g
- WOFF2, offers best compression, ~82% supported, still need fallbacks (ie11 & android browser)
- Link rel={preconnect,preload}
- Self Host (same origin reduces connect time)
- Font Display Timeline
- Font block - if font is not loaded text is shown invisible
- Font swap - if font is not loaded fallback font rendered
- CSS
font-display
https://font-display.glitch.me/font-display: block;
show invisible until font loadsfont-display: swap;
no invisible text, show fallback immediately then font when it is loadedfont-display: fallback;
show invisible and wait 100ms for font, if still not loaded then show fallback, then show fontfont-display: optional;
show invisible for 100ms, then show fallback
- Font synthesis, only load base font weight & style at page load
- This can be used to show text, and minimise motion during reflow when page loads
- Font Loading API https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API
- Can load 2+ fonts in JS then add them to the document once both have downloaded
- Only single reflow
- Sample Code https://github.com/zachleat/performance-sometime/blob/master/css-font-loading.js
- Subsetting
- Network information API https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API
- Variable fonts (allow variables in single font, quite heavy)
- Perceived performance (jank)
- css
will-change
- reflow (layout) -> repaint -> composite
- qucker if we only need to repaint (and composite)
- quicker still if we only need to composite
- CSS
transform
andopacity
properties are fastest as they only - https://csstriggers.com/
- Passive event listeners for scroll events https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Improving_scrolling_performance_with_passive_listeners
- CSS
contain: layout;
Indicates that nothing outside the element may affect its internal layout and vice versa.