Webcon 2021 – Web Performance Workshop Summary

On April 7, 2021 I presented a workshop with a coworker Jason Rambeck (Pixo) about Web Performance

https://webcon.illinois.edu/sessions/performance-testing/

https://webcon-performance.pixotech.com

Summary

• Desktop internet speeds are rapidly increasing, and the time to load a page is slowly decreasing around 5 seconds
• Mobile internet speeds are rapidly increasing, and load time are getting much worse
• Even top internet providers are not as fast as they say – https://app.fing.com/internet
• 75% of users say page load times is more important than ease of finding what they are looking for
• Lighthouse is a tool by Google to check for performance issues and does a great job walking you on how to apply improvements
  • You can run it from https://web.dev/measure
  • You can use the original tool PSI (PageSpeed Insight) on larger sites to get anonymous user load time stats
  • You can right-click in a chrome based browser, select inspect, and change to the lighthouse tab to run it
  • You can install it with npm install -g lighthouse and run lighthouse https://steve.zazeski.com from the command line (CLI)
  • You can use the CI tool lhci and create a .lighthouserc config to have your CI system generate, score and upload reports
• Web Metrics
  • FCP (First Contentful Paint) – first time pixels are draw to the white screen
  • LCP (Largest Contentful Paint) – largest percentage of pixel changes
  • FID (First Input Delay) – how long before the website responds to typing or clicking
  • CLS (Cumalative Layout Shift) – If the page shifts after the style sheets load
  • TTI (Time To Interactive)
  • TBT (Time Blocking Time)
• Speedline is a cli tool that calculates the SI (Speed Index)
• Nginx is a web server built to solve the C10K in 2002 by a Russian search engine to avoid forking and using a large amount of memory at the upper limits. For servers not low on memory, page speed is negotiable with Apache’s performance.
• Check to see if your webserver is using HTTP/2 with https://tools.keycdn.com/http2-test
  • HTTP/1 starts a new connection, sends data, then disconnect for each file
  • HTTP/1 keep-alive reuses a connection but still sends files one at a time
  • HTTP/2 opens one connection, requests all files at the start, and can receive multiple streams at once
    • To enable on apache, run a2enmod http2
    • To enable on Nginx, edit your site config and change it to: listen 443 ssl http2;
  • HTTP/3 fixes a concern that HTTP/2 uses TCP and when message order gets mixed up, will slow it down until the message gets resent, HTTP/3 uses something more like UDP called QUIC which does not interrupt the damaged stream but can ask for individual packets to repair the files.
    • Released Feb 2021, not yet available on apache or nginx
• Check to see if your webserver is using compression when sending HTML, CSS, or JS with https://tools.keycdn.com/brotli-test
  • gzip offers ~70% compression while brotli is google’s newer format that offers ~80%
  • This does not affect images or videos as compressing already compressed data doesn’t improve much
• Caching
• Next-Gen Images
  • WebP is a new lossy/lossless format that offers massive improvements over PNG/JPG.
    • Safari doesn’t support it yet (but v14 does)
    • Use srcset or Modernizr to load webp if supported otherwise fallback to PNG/JPG
  • AVIF is a new even greater compression than WebP built from Netflix’s video compression
    • Safari and Edge do not support it yet
  • Don’t want to deal with any of this, use an image CDN that converts for you and serves whatever the requester supports
• Continuous Integration with Lighthouse