Conferences

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

openanalytics 3295 views

I'm a 35 year old UIUC Computer Engineer building mobile apps, websites and hardware integrations with an interest in 3D printing, biotechnology and Arduinos.


View Comments
There are currently no comments.

This site uses Akismet to reduce spam. Learn how your comment data is processed.