Speed Optimization in 4 Minutes
Step 4 - CSS Optimization
Rendering is highly dependent on CSS. A little optimization here can go a long way
- Inline Above-the-fold: If you really want your page to feel snappy, inline the css that it used above the fold. Luckily there are lots of tools to help with this.
- Consider minimal frameworks: There are some pretty impressive minimal CSS frameworks, that are under 20 K - a big improvement considering minimized Bootrap is 140 K.
- Minimization: Use the minimized versions of the CSS frameworkds you're loading.
- Fonts: If you use a font that is already installed on browsers, that's a huge win. Fonts cause the entire page to re-render once they're loaded. At a minimum, use font-display:swap.
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.