davidbgk
/
larlet-fr-david-cache

title: Designing for actual performance
url: https://adamsilver.io/articles/designing-for-actual-performance/
hash_url: 4f3420365156f407064711f8cc0f45d6

<p>This is how it goes. We put a load of shit into a single web page. This makes the page slow. Slow to load, slow to render. Slow.</p>
<p>Instead of getting rid of the shit, we blame the page refresh. There's only one way to avoid the page refresh and that's AJAX.</p>
<p>However, AJAX still needs to render new (parts of) screens. More crucially it still has to make a request to the server. That's not all—there are penalties in using AJAX and it doesn't necessarily result in faster experiences.</p>
<p>Firstly, making requests; handling different responses; traversing the document tree; and injecting HTML requires <em>more</em> code to be sent initally. This also needs to be evaluated and executed on the client.</p>
<p>Secondly, AJAX engineers away progressive rendering—which by the way—browsers do for free. To reinstate this functionality we resort to <a href="https://jakearchibald.com/2016/fun-hacks-faster-content/">hacks</a> that need yet more code. (Plus nobody uses the hack anyway.)</p>
<p>Thirdly, using AJAX means we have to give users another way of knowing that something is being loaded. Again, browsers give us a really good loading indicator for free.</p>
<p>With AJAX, we need to design and build a custom one. Not only is this more work and more code, but they are an inferior replacement for those provided by browsers.</p>
<p>This is because a browser's indicator displays progress. That is, a user can tell how long until the request finishes. Custom loading indicators or <em>spinners</em> don't display progress, so users get frustrated and click again causing further delays.</p>
<p>And custom indicators are unfamiliar as the look and placement differs from site to site. Conversely, the browser's indicator appears in the same place and behaves the same for every website. This creates a familiar and informative experience that we should be loathed to forgo.</p>
<p>This doesn't mean AJAX is <em>bad</em>. AJAX is useful depending on the situation as it avoids requesting the same assets over and over and may well render faster if updating a small segment of the page. But it's not a solution to slow-loading pages. At best it patches over the problems that lie beneath.</p>
<p>The real problem is that we've designed something that can never be fast. Therefore the question really is <em>how do we design for performance?</em></p>
<h2 id="1.-simplify-the-interface">1. Simplify the interface</h2>
<p>The best way to make pages fast, is to have less stuff in them. You'd be forgiven for wanting to punch me in the face as this is obvious. And yet <a href="https://www.keycdn.com/support/the-growth-of-web-page-size/">web pages keep getting fatter and fatter</a>.</p>
<p>Do we need background videos, modal dialogs and social media buttons plastered everywhere? The answer from the people is a resounding <em>no</em>. The fastest feature is one we never build.</p>
<p>What about the way we design components? Hamburger menus, tabs, carousels, accordions, image galleries and expanding panels. All these things have one thing in common. They hide stuff.</p>
<p>Designers are obsessed with patterns that save space and look clean. A clean interface is good but not at the cost of clarity. If pages only contain the essential, then there should be little and maybe even nothing to hide.</p>
<p>Effort aside, designing fully responsive and inclusive components results in <em>more</em> code. More code that users rarely appreciate. After all, it slows the page down and requires the user to exert energy revealing the hidden content.</p>
<p>Heydon Pickering coined the seemingly satirical term <em>Unprogressive Non-enhancement</em>. This is how he explains it:</p>
<blockquote>
<p>You take some structured content, which follows the vertical flow of the document in a way that everyone understands.<br/><br/><br/>
Which people traverse easily by either dragging their scroll bar with their mouse, or operating the keyboard using the up and down keys, or using the spacebar.<br/><br/><br/>
Or if they're using a touch device, simply flicking backwards and forwards in that easy way that we've all become used to. <strong>What you do is you take that, and you fucking well leave it alone.</strong></p>
</blockquote>
<p>Letting things stack naturally is a good start. Not only does this embrace the way the web works—it makes for a remarkably inclusive and fast experience.</p>
<p><em>A fast experience, by the way, is a vital aspect of designing inclusive experiences. Some people don't have fast connections and this shouldn't cause exclusion.</em></p>
<p>Letting things stack isn't our <em>only</em> option. We can chunk stuff across multiple pages. Once pages have little on them the page refresh ‘problem’ is no longer a problem. Pages are fast by design. Sometimes to the point where the <a href="http://uncrate.com">page refresh is unnoticeable</a>.</p>
<p>With regards to longish complex forms (or even shortish ones) there is <a href="https://www.smashingmagazine.com/2017/05/better-form-design-one-thing-per-page/">One Thing Per Page</a> which I've spoken and written about before.</p>
<p>But this pattern isn't reserved for forms. A typical product page contains an image carousel, description, add to basket form, other details, shipping information, related products, ratings and comments. We can split this up too.</p>
<p>Most users don't read every single aspect of a product, every time they visit the page. Instead give users a lightweight page and the choice to drill down further.</p>
<p>Give users one high-definition image <em>without</em> a carousel. Then let users click <em>show all</em> which would show all the images in a page of its own. No Javascript is needed either, saving yet more code. Let the content flow.</p>
<p>This uses the natural building blocks of the web as a form of <a href="https://medium.muz.li/design-technique-progressive-disclosure-1980def8dc97?gi=361cf4735361">progressive disclosure</a>. Ultimately, this speeds things up drastically.</p>
<p>People on expensive data contracts benefit too. They can choose to see all the images by following the link or they can wait until they are connected to WI-FI.</p>
<p>It's easier to share page content or imagery this way too. Sending users to a page where most of the stuff is hidden is problematic.</p>
<p>Tabs: If stuff is hidden by default, how important is its existence on this page? Or if the tab contains a small amount of content just show it. Or consider putting it on a separate page.</p>
<p>If you're feeling brave, put your site's <a href="http://yaronschoen.com/table-of-contents/">navigation menu on a separate page</a> too. The page is light and loads quickly. Maybe this is too far. Maybe not.</p>
<p>Modal dialogs are often misused. All too often they contain too much content that would be better off as a new page anyway. This improves performance and doesn't break the back button (like a dialog often does).</p>
<p>Less code, less problems and a faster, better experience. I'm seeing a theme here. Scroll jacking, <a href="/articles/floating-labels-are-problematic/">floating labels</a>, <a href="http://adrianroselli.com/2016/12/dont-re-create-browser-features.html">font-size widgets</a>, <a href="http://usabilitygeek.com/ux-designers-ditch-sidebar-2016/">side bars</a>, custom select boxes—kill.</p>
<h2 id="2.-reduce-code">2. Reduce code</h2>
<p>By simplifying the interface we've already reduced the code by literally not writing any. But coding the remaining features brings forth a different opportunity—to write less code.</p>
<h3 id="create-lean-html">Create lean HTML</h3>
<p>Sometimes developers use the wrong element. A <code>&lt;button&gt;</code> is half the size of <code>&lt;div role="button" tabinidex="0"&gt;</code> and doesn't require script to make it accessible again.</p>
<p><a href="https://csscreator.com/divitis">Divitus</a> is an antiquated buzzword but its still prevalent today. We often use <a href="http://getbootstrap.com/components/#navbar-brand-image">additional elements unncessarily</a>. These make the request longer to make, parse and render. We should be able to justify the existence of every element.</p>
<p>Classitus is the use of extra classes. Extra classes may decrease the size of CSS but they signifcantly increase the size of HTML.</p>
<p>Ensuring HTML is small is important. Unlike CSS, it can't be easily cached. This is because it's likely to contain personalised and dynamic content. This in turn encourages the <a href="/articles/dont-use-ajax-for-personalised-content/">misuse of AJAX</a>.</p>
<p>We may also find ourselves adding various <a href="(https://silktide.com/i-thought-title-text-improved-accessibility-i-was-wrong/)">attributes in the name of accessibility</a>. But, they aren't always necessary or valuable, and they add further weight to the page.</p>
<p>Similarly, the first rule of ARIA is not to use it. To associate errors to a form control we might use <code>aria-describedby</code>:</p>
<pre><code>&lt;label for="age"&gt;
  Age
&lt;/label&gt;
&lt;div id="age_error"&gt;Enter your age&lt;/div&gt;
&lt;input id="age" aria-describedby="age_error"&gt;
</code></pre>
<p>Instead putting the error in the label is more performant <em>and</em> more inclusive:</p>
<pre><code>&lt;label for="age"&gt;
  Age
  &lt;div&gt;Enter your age&lt;/div&gt;
&lt;/label&gt;
&lt;input id="age"&gt;
</code></pre>
<p>Using <a href="/articles/dont-initialise-javascript-automagically/">HTML attributes to automagically initialise script</a> increases the HTML (and has other problems too).</p>

<p>Don't add HTML hooks just for automated functional tests. <a href="https://maintainablecss.com/chapters/semantics/">Semantic hooks serve everyone's purpose equally</a>.</p>
<h3 id="simplify-your-design-system">Simplify your design system</h3>
<p>Government Digital Services design simple websites. Most things are left aligned and stack naturally. In this case we may be able to <a href="https://www.smashingmagazine.com/2016/11/css-inheritance-cascade-global-scope-new-old-worst-best-friends/">avoid CSS classes altogether</a> which further proves that a simple interface is a performant one.</p>
<h3 id="use-less-script">Use less script</h3>
<p><a href="http://openmymind.net/2012/5/30/Client-Side-vs-Server-Side-Rendering/">Single pages applications don't necessarily render faster</a> and come with a whole <a href="/articles/the-disadvantages-of-single-page-applications/">bunch of problems</a>. But it's not just rendering. It takes a lot of code to create a robust client-side application, that typically prompts developers to use a large framework.</p>
<p>But maybe we don't need the whole framework. Putting that burden on the user is an act of negligence. Starting with an entire framework or library puts you on the back foot.</p>
<p><a href="http://www.heydonworks.com/article/look-at-this-shitty-tweet-button">Twitter's tweet button script weighs 50k</a>. We can do the same thing with 0 bytes of script by using a simple link.</p>
<h3 id="use-preprocessors-responsibly">Use preprocessors responsibly</h3>
<p><a href="https://jaketrent.com/post/cons-css-preprocessors/#file-size-is-deceiving">Preprocessors are deceitful because they can generate large CSS</a>.</p>
<h3 id="use-content-breakpoints">Use content breakpoints</h3>
<p>Often a module may need just one breakpoint or even no breakpoints. Designing to a predefined set of breakpoints encourages the unnecessary tweaking of a design that results in more code.</p>
<h2 id="3.-images">3. Images</h2>
<p>Not everyone has access to the <a href="https://www.smashingmagazine.com/2017/03/world-wide-web-not-wealthy-western-web-part-1/">world western web</a>. Not everybody is on high-end devices either. So, if you really need that high resolution image help the user by:</p>

<h2 id="4.-backend-stuff">4. Backend stuff</h2>
<p>Enable <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Transfer-Encoding#Chunked_encoding">chunking</a> and progressive rendering. Don't engineer it away.</p>
<p>Use Command Query Responsibility Segregation to make database queries fast (good for sites that have more reads than writes).</p>
<p>Use a Content Delivery Network for your static resources. And cache HTML and AJAX responses too.</p>
<p>Cache assets with long expiry dates so that users don't have to download assets again.</p>
<p>Place scripts at the bottom and use <code>async</code> and <code>defer</code> attributes. Async is good for completley independent scripts that can run later like analytics.</p>
<p>Use <a href="https://www.troyhunt.com/i-wanna-go-fast-https-massive-speed-advantage/">HTTPS over HTTP2</a> with Gzip compression. Gzip, by the way, works better with a well-designed and consistent design system—the more HTML is repeated the better the compression.</p>
<p>Use <a href="https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf">preload and prefetch</a> where appropriate. Addy Osmani says <em>preload resources you have high-confidence will be used in the current page. Prefetch resources likely to be used for future navigations across multiple navigation boundaries.</em></p>
<h2 id="summary">Summary</h2>
<p>You know what's better than perceived performance? Actual performance. Avoid techniques that merely provide a mirage of speed.</p>
<p>Instead, declutter and optimise the foundations of your design system which will result in less weight, less complexity, less distraction, less hassle and ultimately, less <a href="http://deathtobullshit.com/">bull shit</a>.</p>
<p>Together, these techniques produce fast and simple experiences that make users feel awesome.</p>