Now with Responsive!
When I launched this version of my site, lots of people and organizations had already realized the value of responsive web design. Today, that number is exponentially greater. As someone lucky enough to get flown around the world to talk about and teach it, it’s pretty embarrassing that my own site wasn’t responsive. Until today.
Two years after launching this version, it’s finally responsive.
When I thought about making this change, there was a lot that came along with it. I wanted to do things right—or righter—which meant there was a lot more things to take into consideration. Not only did I have to refactor the code (at least CSS and a bit of HTML), but I wanted to start using SVG where possible, ditch image replacement entirely, GZIP files, move over to a CDN, and many more acronyms. I also wanted a more intricate understanding of how these things affected performance.
Here’s what I found.
Pre-Optimization
I inventoried the major sections of my site before making any changes. I opened Firefox, fired up Firebug, and hopped over to the “Net” tab. I refreshed a few times and averaged the results. (I’m sure there’s a better way to do this, but I’m just a noob.)
| Page | HTTP Requests | Page Weight | Load Time |
|---|---|---|---|
| Home | 50 | 871.5KB | 2.29s |
| Work | 103 | 698.7KB | 2.62s |
| Speaking | 67 | 1.8MB | 2.6s |
| Publications | 46 | 770.4KB | 1.79s |
| Articles | 42 | 529KB | 1.64s |
| About | 49 | 766.1KB | 2s |
| Contact | 44 | 546KB | 1.61s |
Not a bad starting point. Last I saw, the average page weight was about 1MB, so I consider starting under that threshold pretty good.
CSS to Sass
The first thing I did was convert all my CSS to Sass (specifically SCSS). I’ve been working a lot with preprocessors lately, mostly for variables, some light rule nesting, and nested media queries. I could have used something like css2sass, but I really wanted to do it manually so that I could better understand what’s happening.
Here’s what happened when I did the conversion.
| Page | HTTP Requests | Page Weight | Load Time |
|---|---|---|---|
| Home | 48 (2) | 854.1KB (17.4KB) | 1.39s (0.9s) |
| Work | 101 (2) | 726.8KB (28.1KB) | 2.04s (0.58s) |
| Speaking | 65 (2) | 1.8MB (no change) | 1.55s (1.05s) |
| Publications | 44 (2) | 754.9KB (15.5KB) | 1.1s (0.69s) |
| Articles | 40 (4) | 518.7KB (10.3KB) | 1.22s (0.42s) |
| About | 46 (3) | 743.9KB (22.2KB) | 1.64s (0.36s) |
| Contact | 42 (2) | 527.4KB (18.6KB) | 0.975s (0.635s) |
(I wish I could explain some of these numbers, but I just don’t get the inspector well enough. If anyone can point me in the right direction, I’d be oh so grateful.)
J(S)unk in the trunk
Next, I moved all of the JavaScript I could out of the <head> and into the bottom the page. Google’s Head Perfomance Engineer Steve Souders suggests it, so who am I to argue? I also took the opportunity to consolidate a few extraneous scripts hanging around (old versions of jQuery, etc).
| Page | HTTP Requests | Page Weight | Load Time |
|---|---|---|---|
| Home | 45 (3) | 848.1KB (6KB) | 1.29s (0.11s) |
| Work | 101 (no change) | 726.3KB (0.5KB) | 1.84s (0.2s) |
| Speaking | 65 (no change) | 1.8MB (no change) | 1.55s (no change) |
| Publications | 44 (no change) | 754.4KB (0.5KB) | 1.06s (.04s) |
| Articles | 39 (1) | 518.3KB (0.4KB) | 1.28s (0.36s) |
| About | 47 (1) | 743.5KB (0.4KB) | 1.24s (0.4s) |
| Contact | 42 (no change) | 524.5KB (2.9KB) | 0.917s (0.58s) |
(I wish I could explain some of these numbers, but I just don’t get the inspector well enough. If anyone can point me in the right direction, I’d be oh so grateful.)
Converting wholly to webfonts
One of my favorite things about this site is the opportunity to use the beautiful typeface Stag from one of my favorite foundries, Commercial Type. When I launched this version of the site, Stag wasn’t available as a webfont, but earlier this year, they announced that a lot of their collection was ready for use on the web.
Here’s what happened when I ditched image replacement almost entirely and converted wholly to webfonts.
| Page | HTTP Requests | Page Weight | Load Time |
|---|---|---|---|
| Home | 36 (9) | 834.1KB (14KB) | 1.49s (0.20s) |
| Work | 85 (16) | 704.8KB (21.5KB) | 1.48s (0.36s) |
| Speaking | 54 (11) | 1.8MB (no change) | 1.22s (0.33s) |
| Publications | 35 (9) | 735.6KB (18.8KB) | 0.921s (0.139s) |
| Articles | 32 (7) | 515.4KB (2.9KB) | 1.05s (0.23s) |
| About | 40 (7) | 577.9KB (165.6KB) | 1.07s (0.2s) |
| Contact | 32 (10) | 504KB (20.5KB) | 0.895s (0.022s) |
Interesting! Here’s where I’m starting to make some big gains. I’m saving an average of 10 HTTP requests per page. In the case of the About page, I was able to splice out a pretty large image of my photo that included a headline, which saved me 165KB.
However, there’s a pretty noticeable 0.2s addition to load time on the first page, which I’m assuming is the first time the webfonts are downloaded. That said, I’m also averaging a 0.2s savings on load time across the other pages, so I think it’s still worth it to use webfonts
SVG Logo
I also wanted to move towards resolution independent graphics, so I replaced the logo with an SVG version.
| Page | HTTP Requests | Page Weight | Load Time |
|---|---|---|---|
| Home | 36 (no change) | 833.2KB (0.9KB) | 1.48s (0.01s) |
| Work | 85 (no change) | 715.5KB (10.7KB) | 1.54s (0.66s) |
| Speaking | 54 (no change) | 1.8MB (no change) | 1.32s (0.1s) |
| Publications | 35 (no change) | 746.3KB (10.7KB) | 0.925s (0.004s) |
| Articles | 32 (no change) | 515.4KB (10.7KB) | 1.04s (0.04s) |
| About | 40 (no change) | 597.9KB (20KB) | 1.07s (0.18s) |
| Contact | 32 (no change) | 519.3KB (15.3KB) | 0.895s (0.032s) |
Another interesting discovery: while the amount of requests stays the same—which makes sense since I’m swapping one PNG for one SVG—just about every page saw a small increase in page weight and load time.
I guess that’s the price of resolution independence.
Mobile first, responsive web design
“That’s the thing about responsive web design: you can’t just think of it as a sprinkle of pixie dust that can be applied to any site. It requires the right mindset. It requires that sites be built on solid foundations of best practice.”
—Jeremy Keith, A Responsive Mind
It’s worth pointing out that everything I’ve done so far isn’t part of that literal definition of a responsive site: fluid grids, flexible images, and media queries. Those are the foundations Jeremy is talking about. However, getting all those previous things in place—Sass, non-blocking JavaScript, webfonts, SVG—do well to augment the pillars of responsive sites.
With that, I’m ready to actually start making my site responsive.
- The easiest part is flexible images. I drop a
img { max-width: 100%; }into my stylesheet. Done. - Fluid grids. For years, I’ve been building sites with percentage-based grids with fixed-width containers. That future-proofing came in super handy. With a few tweaks to containers—namely doing something like
.container { width: 95%; margin: 0 auto; max-width: 800px; }—does the trick pretty easily. - Media queries were the tough one for me. I originally planned to drop a few
max-widthqueries on top of the existing stylesheet, it felt wrong not to follow the mobile-first approach I’ve been building clients’s sites with for the last few years. I commented out everything in my stylesheet and brought them back piece by piece, trying to follow a mobile-first approach as closely as I could. It also meant changing some markup to make it easier to work with. This was by far the most time consuming part, taking me about a month to do (outside of other projects, of course).
The last piece was that I found some of my designs weren’t easy to make responsive without a significant overhaul. For example, my “Speaking” page—the heaviest page of the bunch at 1.8MB—was a page full of image replacements… 21, to be exact. Perhaps not coincidentally, it got very few visits; for reference, it gets about 2.14% of the visits I get on my most popular post, “Progressive Enhancement. Still Alive and Kickin’.” So, I decided to remove the page from the site until I can redesign it, something I’ve been meaning to do anyway.
Same goes for my “Publications” page. That one is at 2.01%. Later ’gator.
My case study pages like Crayola and Star Warscontain pretty large images that don’t look great on smaller screens. Plus they take a while to download. But, I like them, so they’re staying until I think of something better to do with them. Open to suggestions.
With the addition of fluid grids, flexible images, and media queries, here’s how the site’s looking.
| Page | HTTP Requests | Page Weight | Load Time |
|---|---|---|---|
| Home | 35 (1) | 775KB (58.2KB) | 1.16s (0.32s) |
| Work | 85 (no change) | 722.1KB (6.6KB) | 1.41s (0.13s) |
| Speaking | Killed | ||
| Publications | Killed | ||
| Articles | 31 (1) | 533.9KB (18.5KB) | 0.905s (.135s) |
| About | 40 (no change) | 597.7KB (0.2KB) | 1.07s (0.18s) |
| Contact | 32 (no change) | 522.6KB (3.3KB) | 0.921s (0.026s) |
More to come
When I started, I ran the original site through WebPagetest.
Here are the results after the optimizations.
That’s right: they’re identical. (I swear they’re not the same image.) What does that mean? It means there’s more work to do. There’s always more work to do. However, I feel much more confident that my site is in a better place to be able to improve it. The foundation is there now.
On a related note, this is all an experiment where I’m learning as much about my site (and the web) as I can. If you’re interested in following along more closely, I’ve decided to open source my whole site. It’s now on Github. You can see everything from how I’ve been able to maintain this site without a CMS to all the embarrassing ways I’m doing things.
I’ll be working on a part 2 to this post where I’ll attempt all things I know nothing about: caching, GZIPping, and getting a CDN set up. Stay tuned!
Article Info