Performance is more than page load time

I've already made the bold claim in the headline that website performance is more than just page load time. And, we'll get to that in a second. But, first, I want to convince you why you should care.

Think about your own experience as a reader, a buyer, or a browser. Will you sit there for 4 or 5 seconds while a site you've never been to before loads? Or, will you stare at a background color while giant images slowly appear onscreen? How about when some well-intentioned designer added a heavy-handed animation that requires seconds of boring load time with nothing for you to do?

Why would you want to put your name on any of that? We assume you wouldn't. So, read on. This vocab lesson will help you talk the talk with your dev team, and we'll throw in some tips on how you can do it better.

What is fast, anyway?

Some of the fastest websites still take around 4 seconds to fully load. If [Google recommends less than 2 seconds] how can that be?

This could get real technical, real fast. So, instead of doing that, here are some terms to help you understand performance better and broaden your list of website performance metrics:

• Time-to-first-byte (aka TTFB) is the time it takes a web server to respond to a URL request
• First paint is the time when the first pixel is painted onto the screen, like a background color.
• First contentful paint is the time when the first piece of content can be seen.
• First meaningful paint is the time when the content the user cares about finally loads.
• Time-to-interactive (commonly referred to as TTI) is the time it takes for a website to be usable. For instance, it's quite common that content will load before interactive elements that might lean on JavaScript to work, like buttons, menus, etc.

The fastest sites you experience have a fast first meaningful paint, and sometimes even a fast time-to-interactive. These events probably occur within the 2-second threshold. But some things like tracking scripts, images, and content outside the initial viewport may linger beyond that. Since those things aren't negatively affecting your audience's experience yet, search engines are okay with it and won't penalize you. This doesn't happen by default and does require some careful optimization. Usually, you'll find that the fast sites are:

• Hosted with a web host that values great performance
• Deferring any marketing tracking scripts like Hubspot, Google Analytics, Hotjar, Facebook, Drift, and the like to initialize after important content has loaded, usually by placing these at the end of your web page instead of in the head or making sure any scripts are called asynchronously (whenever there is time after important stuff has been loaded)
• Preventing images and videos that are outside what is initially visible from loading until the user scrolls and shows intent to view.

It's common for this optimization to never occur, leaving you with a slow first meaningful paint and time-to-interactive. Images and marketing scripts that haven't deferred loading are generally the main culprits, but there are a few other 'gotchas' to look out for:

• Loading unused CSS and JavaScript, usually done by packing an entire site's CSS and JavaScript into single files, of which only a small percent may be used to render a given page.
• Depending on 'expensive' (from a performance perspective) plugins to achieve UI functionality that could be more elegantly written custom, like carousels, drawers, or other neat effects. Many plugins will load these scripts even if these interactive elements aren't on a particular given page. This is common in slow WordPress sites and one of the downsides to a rich custom plugin market.
• Images or videos that can't be deferred are unoptimized. If you've failed to run media through any kind of optimization process, chances are you're trying to serve assets that are way bigger than they need to be.

You may have noticed some apps you use are able to achieve a fast first paint by offering a "skeleton view" of the UI with only simple shapes and colors. If you've noticed this happening, it's likely because the first contentful paint is taking longer than the design team would like. This is common practice among apps that deliver a lot of video and image content, like YouTube, Netflix, Medium, Twitch, and many others.

Skeleton views are basically placeholders that allow visitors to visualize incoming content. A lot of contemporary apps use them, but you can be inspired by skeleton views as you're designing any digital experience. Check out how Stink Studios defers the loading of important images by embracing a phased loading approach inspired by skeleton views.

However, the most egregious example of poor website performance is a totally blank white page, which is usually due to a slow time-to-first-byte. Blame that on a shitty or poorly-configured web host. If you're a designer working on a team in this situation, you may feel helpless to change it. Here are some things you can do within your organization to get the results you want:

• Get buy-in from internal decision-makers to value performance. Hint: they'll make more money.
• Make sure any "minimum server requirements" by your CMS are well-exceeded.
• Ensure you're working with a web host who values performance like you do. It'll be all over their marketing with examples and good reviews.
• Run diagnostics on your own and provide actionable results to your development partner.
• Ask technical teams if exploring static sites or progressive web apps is an option.

It's important to keep in mind that just having a fast web host isn't enough to make sure you're killing the game from a performance perspective. However, it is a critical first step to take to make sure any further optimizations have a legit chance at making an impact.

What beautiful and fast performance looks like

Pentagram

Pentagram loaded really fast for me, even with cleared cache on a hard refresh. You can see they're deferring the loading of offscreen images, often called "lazy-loading". They're even doing a smooth animation between pages to make the site feel even more responsive. A lot of attention to the details are why this site is so fast despite being so image-heavy.

firstborn

Sometimes firstborn's website takes longer between pages than I'd like, but their intro has been executed amazingly. They're starting off by flooding a brand color, cleverly buying time as fonts and images are loaded in the background. Once the fonts and first image have loaded, the color flood disappears revealing useful content. As you scroll, you'll notice there is a 3D effect happening to incoming content. Getting that level of performance with so much going on is quite the task, and it's so exciting when it all comes together.

Hugo & Marie Creative Agency

Hugo & Marie's creative agency landing page loads so quickly it's unreal. I'm imagining the design team deliberately prioritized performance by choosing an 'above-the-fold' view that was simple typography and color only. As you scroll, you'll see that images come in soon after. My favorite part is the interstitial animations between navigating pages. It's so fast and uncommon that it really stands out.

What bad performance looks like

I couldn't bring myself to show actual examples of "bad" work. There are always so many factors at play that restrict the people responsible for a website's production. Plus, I think this is an art deserving of reverence. Not all websites need to be fast (unless they need to make money). Many make sites that are beautiful experiments trying to push the boundaries of what is possible to do with web technology.

That said, bad performance probably looks like your site, and—don't worry—your competitor's. Nearly all websites have something they can improve to be faster, and it's something we should be continuously striving for. The benefits range anywhere from increased conversion to a reduction of carbon waste from chucking your big ass website around all day.

If you want to learn more about how to fairly assess your own website's performance, we've got more content coming! Sign up for our e-newsletter (form in footer) to get alerts when we publish new articles. Don't worry. We won't spam you. Once or twice a month - tops.