Speed Optimization in 4 Minutes
Step 1 - Image Optimization
BOOM! We just magically shaved off over a MB of images. Did you notice? Hopefully the appearance is the same, but your experience was faster, proven by the diffs in the metrics table.
What did we do?
- Scaled down the size of the images. We didn't need images that were there original size (most were 1280x850), when we were only showing them in container 1/4 of the page width. Scaling them to 525x350 trimmed 1.5 MB
- Chose better file types. JPGs are good for photos, PNGs for transparency and high quality, and SVGs for icons and logos. Switching our logo to SVG cut 5 KB (that doesn't sound like much, but for something on every page of your website, it adds up).
- Compressed them with a tool that uses smart lossy compression techniques to reduce the file size without sacrificing a noticieable difference in quality.
- Lazy loaded the images outside of the viewport with the simple loading='lazy' attribute. No need to load something that the user may not even see (eliminated another 230 KB)
Images are one of the easiest things to optimize, so you should always start with them first.
BTW - you may think that this loaded faster because resources were cached. Normally you'd be right, however we spent great effort to ensure the headers tell your browser that the responses expire immediately, hence allowing you to go through this process without the advantage of caching (til the very end!)
| 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.