Speed Optimization in 4 Minutes
Step 3 - Javascript Optimization
Regardless of how tiny javascript may be, it uses client resources and delays interaction. Browsers have come a long way. Do you really need a javascript framework?
- Vanilla JS over frameworks: Native javascript has come a long way, you may not even need jQuery anymore. We were using a special library in order to load a tooltip, but the native 'title' works just fine.
- Custom-compiled libraries: Many libraries load everything by default, but there are ways to 'tree-shake', or custom-compile them to only load what you need.
- Move your javascript to the footer. Or load it asynchronously. Does it really need to block the rendering of the page?
- Consider facades. Third party scripts like chat widgets can often slow down load time even when they're not even in use. Consider using a 'facade' and only loading what's necessary once the user clicks on it
- Minimization: Use the minimized versions of the javascript libraries you're loading
Let's see how this affected our stats:
| 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.