Performance as brand

For the past few years, a conversation has been building around website performance — and about the benefits a highly-optimized site can bring its visitors.

One of the more interesting ideas the client-side community has been bouncing around is that of the performance budget. Setting a strict performance budget for page weight is a straightforward way to guide decision-making for a web project: set a budget early, continuously evaluate each page or feature in relation to that budget, and make necessary adjustments to deliver the necessary results without breaching it.

I can’t voice strongly enough how beneficial a performance budget is for a project of any significant size. Establishing the metric of a budget provides a clear commitment to performance that benefits stakeholders, team members, and a project in whole. A budget also leads to a better experience for users, regardless of network or device constraints. These are things front-end developers are, for the most part, on the same page about.

Tackling a page-weight or load-time budget is great. It’s a large step in the right direction, and for some companies it’s the best option. But there’s an opportunity to take performance even more seriously — to take the thought of a performance budget one step stricter. After all, there’s only so far technical rigor can take performance.

When a company takes performance with complete seriousness, it becomes part of a brand identity. A strong brand can be built from the foundation of prominent typography, minimalist aesthetics, and lightweight imagery — if any.

Integrating performance into this brand is simple, yet provides a touchpoint for differentiation. This is a brand that doesn’t need full-page splash photography; it communications its message more concisely. This is a brand that’s light and fast.

The brand I picture views performance as a core principle and opportunity to excel, not an unwelcome constraint.

Related articles

How to integrate build-time or server-side syntax highlighting for markdown code fences with two libraries: markdown-it and Highlights (Atom’s syntax highlighting engine).


January 5, 2017 — I’ll be giving a talk about Front-End development practices for Nerd Interface.

Best practices

Used thoughtfully, animation can inform a user of change or hint at how to interact with an interface. Here is a set of guidelines for using animation cleanly and clearly, while reducing disruption to users.