Springtime is a great time to tend to your blog. On a recent 4 hour flight with no WiFi, I got my hands dirty and MURDERED THE HELL outta some things. Here’s the tl;dr on what’s new:
- No more jQuery!
- No more web fonts!
- Using
rel="preload"polyfill - Less hurk-jerk
- Updates to About page
- DayTrip logo in the footer
Departing jQuery-land
When I originally did my series on RWD Bloat I was very curious about the performance effect of removing jQuery from my script-stack. jQuery has served me well for many years, but as I thought critically about my site the 33kb (gzipped) cost of jQuery on every payload couldn’t be justified for how little I use JavaScript. I’d be better off including jQuery as-needed, so I set about on the task of removing it.
Detangling myself from jQuery was quite a chore. Handy utility functions like each() and wrap() are sorely missed. I had to rewrite some plugins, they’re less “modular” but they’ll work for this tiny little blog. But it’s down quite a bit from before.
Last month I got about 12k hits on the site, so I’m already at ~400mb in bandwidth saved.
Let’s talk about “No Web Fonts”
Overwhelmed by the “hurk-jerk” on my site and inspired by the Medium Design Team’s UI system font stack for non-content, I’ve opted to remove Open Sans from my font stack and instead go with system fonts.
System fonts is a hot topic this week, I didn’t mean to pile on.
I still like web typography quite a bit. Open Sans is a thin, geometric sans-serif that I really enjoy. Nowadays, I feel that most mobile and desktop platforms have pretty decent options for similar Sans-serif super-families right on the device. My “brand” isn’t contingent on a typeface, so I think it makes sense to pare things down and abide in my new “light frames” mantra.
If I was using a humanist serif or a condensed typeface I would probably be in a different position and it would be a harder choice.
Let’s check the perf gains
Removed jQuery! Removed web fonts! Using the fancy new rel="preload" attribute for the async’iest CSS available. Let’s see the results…
| Home:before | Home:after | Article:before | Article:after | |
|---|---|---|---|---|
| PageSpeed (Mobile) | 98 | 97 | 96 | 91 |
| PageSpeed (Desktop) | 98 | 98 | 97 | 93 |
| Speed Index (3G Fast) | 728 | 812 | 1065 | 817 |
Well, shit. It’s slower. This is the part of the blog post where I give up completely and quit fucking web design.
I think it’s because of the 3rd party ad latency? I doubled the number of posts on the homepage? Hard to say since WebPageTest has deleted my old test. I should have re-ran the tests just before pushing the new code.
What can you do. I know it’s faster because there’s way less junk, but the data doesn’t really tell me that. Start Render under 1s for both the homepage and article is good, especially for 3G, but damn it all if chasing metrics doesn’t make you want to crawl under a fucking rock.