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;
- To enable on apache, run
- 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
- WebP is a new lossy/lossless format that offers massive improvements over PNG/JPG.
- Continuous Integration with Lighthouse
openanalytics 3295 views
Continuous Integration
Next Post
Jenkins SSH Errors and How to Fix Them
Linux