General Web Performance Process Ideas

Frontend

  • Analyze the waterfall and find gaps in time between loading landmarks. I like WebPageTest
    • Test on different devices and geographic locations
  • Use Search Console to identify pages with bad web vitals metrics.
    • Look for pages that have the same types of issues so the solution is magnified across the site
  • Use CrUX to get bad pages and filter by device, etc.
    • Same process as search console
  • Use PageSpeed to get performance tips and basic metrics.
  • Use Yellow Lab Tools to find issues with compression and requests.
  • Use Treo to see the distribution of CWV data and compare it.
  • Reduce blocking and see if you can self-host critical assets (CSS, JS, Font, LCP element if image).
    • Add measurements with performance observer to measure blocking time for the <head> or individual components
  • Use RUM tools to analyze the last mile
    • Where is it slow?
    • Under what conditions?
  • Profile in DevTools
    • Find and fix long tasks
    • Highlight painting and layout shifts. Throttle it to slow down the shifts and help highlight issues.

Backend

  • Use the page cache hit rate from server side metrics or CDN to find misses and potential improvements
  • Examine server-side performance with APM. See if your server load is spiking or if servers are scaled accordingly.
  • Find slow DB queries. Add anything above a threshold to a searchable log (e.g. > 50ms)
  • Find object cache misses for slow for frequent queries on the backend. Use in-memory caching for these.
  • Add the Server-Timing header and consume on the frontend.