performance.now() conference notes

PERFNOW_up.md

Performance Now Conference

Resource Loading

• Resource Hints
  • <link rel="preload" href="stlye.css" as="style" >
    • rel="dns-prefetch" browser resolves dns asap
    • rel="preconnect" browser resolves dns & TCP handshake ( & TLS negotiation) asap
    • rel="prerender" loads all resources & renders page (like in hidden tab)
    • rel="prefetch" browser requests item and caches - intended for next page resources
    • rel="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
• HTTP/2 Server Push
• 3rd Party
  • Way to compare impact of 3rd party libs
    1. http://requestmap.webperf.tools/
    2. Download CSV
    3. $ awk -F',' '$2 != "Target Site" { print $1 }' cnn.csv
    4. Paste in to webpagetest.org block tab
    5. Compare perf impact of 3rd party
  • Results
    • https://www.webpagetest.org/result/181114_JA_6f83cc6cc274b2845eee71f44f7d28ae/
    • https://www.webpagetest.org/result/181114_8G_d745cb19ac579e8a32f164f404fce21d/
  • Process & Audit of GTM

Images

• 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
• Fastest image delivery server (cloudflare edge worker)
  1. Recieve request
  2. Send first 512 bytes (includes height / width etc)
  3. Wait 20ms
  4. Send first 15% of file (enough to render a low quality image)
  5. Wait for other files to have been loaded
  6. Send the rest of the image

Javascript

• 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

Protocols

• 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

Fonts

• 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 loads
  • font-display: swap; no invisible text, show fallback immediately then font when it is loaded
  • font-display: fallback; show invisible and wait 100ms for font, if still not loaded then show fallback, then show font
  • font-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)

UI Performance

• 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 and opacity 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.