This is my (essentially verbatim) lightning talk on Designing for Performance from #SNDMakes DC.
Designing for Performance
Hi, I’m going to chat for a minute about Designing for Performance – or as I like to call it: Keeping People Happy.
We like to talk a lot about building robust, delightful user experiences. After all, we’ve all spent the last day and a half reimagining visual storytelling.
We're trying to make picture stories more contextual and engaging – and that’s awesome! But what we frequently forget to note is that the easiest way to ruin an awesome interactive experience for your user comes from one pesky, underemphasized problem: Performance...or lack thereof.
So I’m going to go over a list of problematic performance issues and supply some strategies to help keep people happy. These are pretty basic tips, but a quick refresher never hurt!
Problem Area 1: Gigantic Images
As we all know, images are the biggest hit to website performance. There's a couple things you can do to help combat the problem.
First of all, reevaluate the design to see if you really need them. Sometimes they’re necessary; sometimes they’re not. And if you definitely need the whole full-screen immersive experience, make sure you optimize!
- Size your images for both screen width and device type. If your set-up allows you to serve scaled images, you should absolutely do so.
- Consider image quality. Don’t serve images that are a billion times more dense than they need to be. Kraken.io has a free web interface to losslessly compress images. You should use it. It works a heck of a lot better than just saving for web in Photoshop.
- If you have a seriously image-heavy piece, preload your images.
- And don’t forget about caching. Don’t make people download unchanged files over and over again.
Problem Area 2: Fancy-pants Fonts
Web fonts are also big and heavy and slow down your page.
- The number one thing is to keep the number of web fonts to a minimum. This includes different font weights. Loads web fonts just aren’t necessary.
- Subset your font resources so you only deliver the glyphs you actually need on a page.
- Make sure your custom fonts are compressed before you serve them. TrueType formats aren’t compressed by default, so you should GZIP those.
Problem Area 3: CSS
- Preprocessors are awesome, but they can bloat your code pretty significantly, so be careful.
- Always minify.
- Remember to avoid CSS properties that repaint the screen on scroll. These include:
- CSS filters
- overzealous box-shadows and transforms
A note on responsive: The fewer media queries you need the better. If your project can get away with a single-column layout, perfect.
Problem Area 4: JS
- This is a huge one that I’m not going to get into right now.
- But I will say this: Audit your dependencies. Make sure you’re not including unnecessary code on the page – and try to ensure the rest of your code is as efficient as possible.
Key Takeaway: Performance is a Feature
Remember that performance is a feature, and it has a huge impact on user experience. A fast site leads to happy users – let's keep people happy.