Small steps to being faster
I’ve been working on a lot of things related to my website lately, but one of them has been to run Lighthouse in Chrome Dev Tools and see where I’m at in the four things it audits. I’m doing great as a PWA, thanks to implementing a service worker. I’ve got good scores for accessibility and SEO as well, so I could leave those things as they are, but my performance score wasn’t the greatest.
First off, I added one line to my
font-display: swap;. (Thanks CSS Tricks for the great article to remind me how that rule works!) I’d read about this in type books and I knew it existed, especially after reading Bram Stein’s Webfont Handbook but had never done any updating to my fonts since I initially bought them and started using them. Well, that one small change gave me a huge bump in my Lighthouse performance score.
Then I started looking at the way I had caching set up in my
.htaccess file. This is an area where I don’t feel the most comfortable, but I’ve googled and usually am able to find people who’ve written articles that point out the exact code that I need. I edited the file and upped my caching by quite a bit and reran Lighthouse and BOOM! The score got better.
Those two things weren’t hard, they didn’t take me a lot of time, but they made a big difference. I still have things from the audits that I want to learn about and see how I can push my site further. HTTP/2 is on my radar now, but I need to read more about it so I can figure out the best solution for my site setup. And I’d like to put back CriticalCSS and get it working the way I want, but that’ll all wait. I have time. And as I just said to a friend, a personal site is never truly done, is it?