Menu

Subscribe

#SNDMakes: A lightning talk

on opennews, talks, snd, conf

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.