SvelteKit
LinkedIn icon, link to my LinkedIn page

Performance Budgeting

It was imperative to keep AMC v2 as performant as v1, which was routinely scoring above 95 in both lab and field performance metrics. While v1 became as performant as it did through trial and error, with many lessons learned by experimenting in real-time, I established a baseline performance budget that we aimed to adhere to for v2 so that we would establish a culture of building it to achieve performance upfront.

Web.dev describes performance budgets as:
"A performance budget is a set of limits imposed on metrics that affect site performance. This could be the total size of a page, the time it takes to load on a mobile network, or even the number of HTTP requests that are sent. Defining a budget helps get the web performance conversation started. It serves as a point of reference for making decisions about design, technology, and adding features."

goal:

Keep the page file size < 3MB

  • httparchive.org reports that the median transfer size of page requests is 2203.8KB

  • The AMC home page transfer size averages 1700KB 💯

goal:

Keep CSS < 100KB

  • AMC home page CSS = 8.1KB 💯

goal:

Keep JS < 1MB

  • AMC home page JS = 1.3MB⚠️

  • AMC Network page JS = 798KB 💯

goal:

Keep number of requests < 80

  • Only 1 external request (Google Analytics)

  • AMC home page = 47 total requests 💯

goal:

keep total image file size < 2MB

  • AMC home page img file size on load = 918KB
  • Lazy load file size = 1.5MB
  • Total img file size (after lazy load) = ~2.4MB

  • Next.js does a great job optimizing images out of the box during build time, but there are probably opportunities to further reduce this.😐

  • However... some pages are well below the threshold goal. The About page has only 818KB of image file transfer. This helps to offset the overage on image heavy pages.