Making a cool thing: Step 2 (Make it performant)

After a week of the clawing feeling and a distraction with some other tasks, I got back to the drawing board and admitted I had to make a mobile site too.

People love their phones, and they certainly wouldn’t love me if I took up a load of their data allowance just to show them a cheeky modal.

The cheeky modal of doom

I can avoid the contempt. The question is: how?

I had already discovered that (due to too much re-painting by the browser) the only way to make this SVG animation perform on devices with a lower capacity for rendering was to decrease the number of elements, or use CSS animation.

All of this sounded like way too much work. And it might rip the heart out of the cool thing. This was not supposed to be a mega-keep-you-up-at-night-and-be-totally-consumed-by-it project, either (I had tried that approach with another cool thing and I don’t recommend the development experience).

Then I had an idea that probably should have been obvious from the start:

If they can’t handle the content, don’t serve them the content. Server-side rendering and static site generation have become widespread for a good reason — we shouldn’t be loading up the user’s browser with work that we could do for them ahead of time.

I did a fairly major refactor to make the code more reasonable, and add a bit of mobile-first CSS to pave the way for what was coming. Then I looked into Nuxt.js — as I knew it was the Next to Vue’s React, if you… err, get what I’m saying. And it might just be the answer to my problems — server side rendering and code-splitting right out of the box.

I transplanted the whole site into a scaffolded Nuxt app, messed around with plugins for a few hours, and voila! By using the device module I was able to conditionally render the animation based on a flag that was assigned differently (on the server) for different devices.

For a little extra boost I optimized and lazy-loaded all of my static images. Take a look at the newly optimized site on mobile or desktop, HERE.

Mobile optimization: by serving specific content to mobile devices I saved their data (and bacon?)

There are still some issues to address (alas, tablets are somewhat caught in no-man’s land), but I feel like I salvaged an essence of coolness whilst still serving the important thing to all users — the actual written content.

You could call it cheating, delaying the inevitable (hello WebGL), device discrimination, whatever. I’m calling it fixed.

Stay tuned for part 3: Make it accessible!