Speed Optimization in 4 Minutes
Step 2 - Network Optimization
The less we transfer over the network, the better. There are many ways to reduce the amount on the wire:
- Use a CDN (content delivery network) for static assets. These are servers distributed worldwide that replicate your static content near your users, thus shortening the distance they have to travel.
- Consider your host location. For your dynamic content, think about where your users reside. If most of your users reside in a specific geographic region, use a host who has a datacenter central to them.
- Ensure your host supports the latest HTTPS versions. The latest protocols are optimized for speed, allowing multiple streams of content as opposed to just a few.
- Compression: Did you know that just like a 'zip' file, servers compress and then clients decompress content? It saves a ton of bandwidth, and the most recent methods are gzip and brotli. Ensure your web server supports them.
- Reduce redirects: Having automatic 301 or 302 redirects prevent 404s, but it's better to prevent the redirect altogether. Update your links to prevent unnecessary redirections.
- Preconnect: The preconnect keyword for the rel attribute of the element is a hint to browsers that the user is likely to need resources from the target resource's origin, and therefore the browser can likely improve the user experience by preemptively initiating a connection to that origin.
- Less is more: Ultimately, the less you use the better. Are there any resources that aren't absolutely necessary? We accidentally had loaded javascript libraries twice.
Network bandwidth spans multiple devices across the entire journey it travels. The less transferred. The better.
| 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.