Speed Optimization in 4 Minutes
Step 0 - Example Page
This is our example web page. It's using basic libraries, has a nice photo gallery, and is mobile-friendly. Unfortunately this standard functionality comes at a cost of 3.4 MB of bloat. It's heaver than the average 2.2 MB web page of 2023 (that's still a lot!), and it could use a diet.
- 1,900 KB of images
- 800 KB of javascript
- 340 KB of CSS
Its load time is reflected in the table below, and fortunately we'll be able to optimize it over the next few minutes.
Take a moment to understand the metrics in the table below, and then proceed to the next step where we will attempt to make it faster one strategy at a time.
| Metric | This Load | Versus Last Step | Versus Baseline |
|---|---|---|---|
| Time to First Byte (TTFB) | - | - - | - - |
| Largest Contentful Paint (LCP) | - | - - | - - |
| Page Complete | - | - - | - - |
| Page Weight (transferred) | - | - - | - - |
Questions about these metrics?
Hover over the metrics above to see descriptions of each. Why didn't we choose other metrics, such as First Input Delay (FID) or Cumulative Layout Shift (CLS)? Simply because they were hard to represent in this demo. FID requires user interaction, which is tricky to fake. CLS is a lifetime metric (measured the whole time you're on the page, not just during load), so we can't report that until you leave the page. There are a lot of very important speed metrics and it's encouraged to get to know more than the few here.
Compared to the baseline, all the optimizations so far have affected the complete page load by -.
To ensure valid comparisons, we've placed a specific amount of hidden html comments here so the textual content of every step is the same length.
Optimization not as great as you think? Good observation. Sometimes speed optimization is trial and error. Not all steps work well for every website.