I saved 65 KB on this site. Basically, I removed two web-fonts and cut out some CSS. Overall, I went from 93.8 KB to 28.8 KB.
I rewrote my styles using vanilla CSS. Originally, I was using a SCSS because of its nesting capability. Another benefit of SCSS is that you can split your styles among multiple files. By default, CSS doesn't perform well in that respect[1]. An advantage of using CSS, was that it forced me to write my styles more succinctly. By limiting myself to one file, I gave myself a practical reason to keep the file size to a minimum.
I also started loading fewer web-fonts. I removed the body and display web-fonts, opting for local fonts instead. I was using Roboto (sans-serif) for the body text, and Lora (serif) for the headings. I switched them both to a single, local-only, "catch-all" font stack. I can hardly tell the difference.
Otherwise, I made minimal changes to the website's visual design. In the process of rewriting the CSS, I made some stylistic decisions. For example, I changed the theme of my code blocks from "Nord" (a dark theme) to "GitHub Light". I also removed the CSS reset I was using, which was normalize.css by Nicolas Gallagher.
| Before | After | |
|---|---|---|
| Roboto font | 15.4 KB | 0 |
| Lora font | 34.5 KB | 0 |
| Google Fonts CSS ** | 11.4 KB | 2.4 KB |
| Normalize & code-block theme ** | 4.2 KB | 854 B |
| Sitewide CSS ** | 5.4 KB | 3.4 KB |
| Print CSS | 801 B | 748 B |
** Uncompressed size
Oh, and the best part is... my site is now only 100 ms faster. 326% smaller, 8.3% faster. Go figure. đ¤ˇââī¸
Think about it. Every time you request a CSS file, whether using a
<link/>tag or@includesyntax, you make a network request. As every network request has a cost, it's much more practical to combine your CSS into one file. âŠī¸
