Speed Matters: Designing for Mobile Performance - A summary
Tags: webdev, webperf
Published: 2020-03-30 15:38:31

<p><a href="https://www.awwwards.com/"><strong>Awwwards</strong></a>, in collaboration with <strong>Google</strong>, produced a great eBook called <a href="https://www.awwwards.com/brainfood-mobile-performance-vol3.pdf"><strong>Speed Matters. Designing for Mobile Performance</strong></a><strong>.</strong> It explains what mobile web users expect and how they behave, and then provides great insights on how to <strong>optimize your sites to provide a better experience</strong>.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/819/1*P8zxZGHwOeg9y9NaOBewmw.png" /><figcaption>The cover page of the eBook Awwwards produced in collaboration with Google</figcaption></figure><p>This article is a summary of that eBook, which contains the things that I considered to be interesting and useful. Please <strong>read </strong><a href="https://www.awwwards.com/brainfood-mobile-performance-vol3.pdf"><strong>the full eBook</strong></a><strong> for more details</strong>. On the last pages you’ll also find an extensive list of articles, videos and tools for more information.</p><h3>The need for speed</h3><blockquote><em>53% of mobile site visits are abandoned if the pages take longer than 3 seconds to load.</em></blockquote><p><strong><em>The need for speed</em></strong> is a research carried out by Google which studies the relation between <strong>real and perceived performance</strong> by users.</p><p>The most important insight this study provides is this one:</p><blockquote><em>Speed matters on the mobile web, but </em><strong><em>perception</em></strong><em> of speed is just as important.</em></blockquote><h4>How important is speed for users?</h4><p>Speed was rated as <strong>the most important UX factor</strong> for users when visiting a website: <strong>75% </strong>of them mentioned it 🏆</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/437/1*bDJlbAOAAym20Quy8vYc9w.png" /><figcaption>The list of UX factors considered most important by the users</figcaption></figure><p>In general, <strong>real downloading speed is quite fast</strong>. 7 out of 10 sites loaded in less than 4 seconds, and around <strong>33% </strong>loaded in less than 1 second.</p><blockquote>Google’s <a href="https://developers.google.com/speed/pagespeed/insights/">PageSpeed Insights</a> is a great tool where you can test your website and get results for several speed metrics, both for desktop and mobile</blockquote><h4>Mobile browsing in context</h4><p><strong>Mobile web browsing mainly happens at home</strong> (<strong>82%</strong> of the total) by people that are relaxed and calmed 😮 This fact was very surprising to me. If someone had asked me, I would have answered the opposite.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/445/1*cYqEWYSj7-0hZBwXEKCI3A.png" /><figcaption>Distribution of mobile web browsing by location</figcaption></figure><p>Which is not surprising is that in this context, <strong>page load speeds are perceived as being faster</strong>. For people that are at work or traveling/elsewhere, load times are perceived as being slower.</p><p>But even for fast loading sites, <strong>29% of people still don’t actually perceive them as fast 🤔</strong></p><h4>So what affects the perception of speed?</h4><p>These are the 4 external factors that affect speed:</p><p><strong>Effective use of the site 👆</strong></p><p>Web visits where actual speed was slow but felt to be fast tended to be retail sites. We know that <strong>long scroll sites are designed to populate the page “above the fold”</strong>, giving the impression that the page is complete, even though loading is still ongoing “below the fold”.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/333/1*sENjldwHcot-UfQrWJ29nQ.gif" /><figcaption>This GIF shows how Amazon loads content above the fold first</figcaption></figure><p>This can explain some of the distortion between the real and the perceived speed: <strong>the difference between the time after which a site can effectively be used <em>vs</em>. the time it takes to fully load.</strong> This is a prime example of design thought to optimize the perception of performance.</p><p><strong>Age 👴</strong></p><p>Younger users are more demanding. <strong>Users between 18 and 24 years old only perceived 50% of the sites as fast loading sites</strong>. This number goes up to <strong>73%</strong> for users between 35 and 44 years old.</p><p><strong>State of mind 💆‍♂</strong></p><p>As previously said, <strong>when users are calm and relaxed, sites are perceived as being faster</strong>. In this context around <strong>80%</strong> of the sites were perceived as fast loading sites.</p><p>When users are feeling rushed or anxious, the perceived speed slows down. In this context only around <strong>40%</strong> of the sites were perceived as fast loading sites.</p><p><strong>Place of activity 🏠</strong></p><p><strong>On the move things feel slower</strong>. For people sat down, <strong>75%</strong> of the sites were perceived as fast. But for people on the move, only <strong>52%</strong> of them. When we’re not at home and need the information as soon as possible, things feel slower.</p><h4>Outcomes of speed</h4><p>When perceptions of speed were thought to be fast, a higher percentage of users reported that:</p><ul><li>They could <strong>achieve their goals</strong> (<strong>92%</strong> vs <strong>73%</strong> for slow perceived sites)</li><li>They were more likely to <strong>return to the website again</strong> (<strong>95%</strong> vs <strong>62%</strong> for slow perceived sites)</li></ul><p>Speed also significantly impacted <a href="https://www.netpromoter.com/know/"><strong>brand NPS (Net Promoter Score)</strong></a>: an average of <strong>92</strong> points vs <strong>44</strong> for slow perceived sites.</p><h3>Improve the perception of speed 🏃</h3><h4>Understanding interface response time</h4><p>Not only the waiting time during loading is important, but also <strong>the time that the interface takes to respond to each interaction of the user</strong>. If the user has to wait <strong>8</strong> <strong>seconds</strong> for anything, he/she will most probably <strong>abandon the task 😰</strong></p><p>Users have less patience when they first enter a site than when they make successive interactions within the same site. Some users will tolerate waiting up to <strong>5 seconds</strong> for tasks that are part of the <strong>user flow</strong>.</p><h4>First Meaningful Paint and Time to interactive</h4><p>· <strong>First Meaningful Paint</strong> is the time required to show something useful in the screen to engage the user.</p><p>· <strong>Time to interactive</strong> is the time required by the browser to finishing building the DOM so the user can begin to interact with the application.</p><p>As we already discussed, most retail sites use a very good trick that addresses these two metrics: they produce a <strong>quick FMP</strong> and prioritize the load of <strong>necessary scripts</strong> so that the content becomes interactive.</p><h4>Put the user in active mode</h4><blockquote>SOME years ago, executives at a Houston airport faced a troubling customer-relations issue. Passengers were lodging an inordinate number of complaints about the long waits at baggage claim. In response, the executives increased the number of baggage handlers working that shift. The plan worked: the average wait fell to eight minutes, well within industry benchmarks. But the complaints persisted.</blockquote><blockquote>Puzzled, the airport executives undertook a more careful, on-site analysis. They found that it took passengers a minute to walk from their arrival gates to baggage claim and seven more minutes to get their bags. Roughly 88 percent of their time, in other words, was spent standing around waiting for their bags.</blockquote><blockquote>So the airport decided on a new approach: instead of reducing wait times, it moved the arrival gates away from the main terminal and routed bags to the outermost carousel. Passengers now had to walk six times longer to get their bags. Complaints dropped to near zero.</blockquote><p><em>You can see the full story </em><a href="https://www.nytimes.com/2012/08/19/opinion/sunday/why-waiting-in-line-is-torture.html"><em>here</em></a><em>.</em></p><p>There are two forms of waiting: passive and active. In <strong>passive waiting</strong>, the user simply watches something loading, <strong>without doing anything</strong>. When this happens, <strong>people overestimate waiting times by 36%</strong>.</p><p>You want to get people to active mode. Just like in the Houston airport story, you have to <strong>occupy users to hack their perception</strong>. If you make them wait while interacting with a game or answering a little questionnaire, the same amount of waiting time <strong>will feel shorter.</strong></p><h4>Create instant interactions</h4><p><strong>Instant feedback </strong>from the interface make the experience feel <strong>fluid</strong> and generate the illusion of <strong>continuity</strong>. They entertain the user while the “real” action is pushed into the <strong>background</strong> on a second thread.</p><blockquote>Check these <a href="https://www.awwwards.com/awwwards/collections/animation/"><strong>UI animations and microinteractions</strong></a><strong> </strong>for some prime examples.</blockquote><h4>Use the right loader ⏳</h4><p>Use <strong>spinners</strong> for short waiting times, and <strong>progress bars</strong> for longer ones.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/572/1*E1EEhKfWt2ZM2I8UEfKZTw.png" /></figure><p>It can also be more informative to <strong>show the length of the remaining waiting</strong> <strong>time</strong> than the percentage of data still to be loaded.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/682/1*2n7OvJAOaIQy7MOv6wLVjQ.png" /><figcaption>Alitalia does this when you search for a flight</figcaption></figure><h4>UX Patterns</h4><p>You can also use the following UX patterns to <strong>improve speed perception</strong> and <strong>minimize time in passive wait</strong>.</p><p><strong>Preemptive start</strong></p><p>It is the realization of the beginning of a task <strong>before the user demands it</strong>. For example, by showing a questionnaire you distract the user while other assets are loaded.</p><p>Other examples are:</p><ul><li>Loading assets on login screen</li><li>Preload assets on rollover</li><li>Preload content on previous states (preload the content of the next screen)</li><li>Preload assets while the user is on a multi-step forms</li></ul><p><strong>Early completion 🕐</strong></p><p>In this case we partially <strong>show content that is not yet complete</strong>. The most common example is video streaming.</p><p>🖼 Other techniques regarding images include:</p><ul><li><strong>Progressive images</strong>. Images are loaded in successive states. The user can see a low resolution representation of the image that continues downloading.</li><li><strong>Placeholders</strong> <strong>or low-res blurred images</strong> like used here in Medium.</li></ul><p><strong>Optimistic UI</strong></p><p>Optimistic design, which can sometimes be dangerous, is a model where <strong>an incomplete task is presented as complete</strong>. It is based on the fact that <strong>only</strong> <strong>between 1% and 3% of client requests get a server error 🎉 </strong>It helps to create a smooth and interrupted experience for the user.</p><blockquote>Only between 1% and 3% of client requests get a server error</blockquote><p>A great example of this are <strong>Instagram likes</strong>. When you like a post, the action <strong>appears to be immediate</strong>, but in reality it is stored in the database at a later stage.</p><h4>Smooth and optimized animations</h4><p>To get a smooth motion, animations must maintain <strong>60fps</strong> and each frame needs to be <strong>rendered in less than 16ms</strong>.</p><h4>Easing functions</h4><p>Choosing the right “easing” is decisive to produce a smooth animation. Easing functions are <strong>curves that describe the acceleration or deceleration</strong> of a motion in a period of time.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/752/1*gHhGE7_MukeOBVodJCSw6g.png" /><figcaption>The different ease functions curves</figcaption></figure><ul><li>Use <strong>Ease-out</strong> for <strong>UI elements</strong></li><li>Avoid <strong>Ease-in and Ease-in-out</strong> with long times. They are perceived as too slow for the users. Use them only for <strong>short times</strong></li><li>For <strong>Ease-out and Ease-in</strong> use a duration of between <strong>200–500ms</strong></li><li>For <strong>Bounce and Elastic effects</strong> use a duration of <strong>800–1200ms</strong></li></ul><h4>Animation optimization</h4><p><strong>Animate the correct properties 🎯</strong></p><p>When using <strong>CSS transitions or animations</strong>, try to <strong>only use opacity and transform</strong> properties. All other properties are very slow to animate, especially on mobile devices.</p><p><strong>CSS or JS animations?</strong></p><ul><li>Use <strong>CSS</strong> <strong>for</strong> <strong>simple</strong> <strong>animations</strong>, transitions and to animate DOM elements.</li><li>Use <strong>JS for complex animations</strong>, to animate sequences, independent transformations and path animations.</li></ul><h3>Designing for mobile performance</h3><h4>Content strategy ✍️</h4><p>Optimization isn’t just about compressing assets, optimizing server architecture or cache. It should begin in the <strong>analysis part of the project</strong>, where you understand <strong>the user path and the way the users will interact</strong> with the site. This way you can establish viable goals and design the content based on your <strong>target audience behavior and needs</strong>.</p><p>A very useful tip is to always create a <strong>Performance Budget</strong> to avoid an excess of unnecessary resources.</p><h4><strong>The performance budget 💰</strong></h4><p>Establish a series of <strong>limitations</strong> based on the analysis of our target, their devices and possible access conditions to the site.</p><p>The performance budget should include the following data:</p><ul><li><strong>Page weight</strong> in kilobytes, including all assets</li><li><strong>Percentage</strong> assigned to each <strong>type</strong> of asset (images, CSS, JS, etc.)</li><li>Number of <strong>HTTP requests</strong></li><li><strong>Max time</strong> to load over <strong>3G connections</strong></li></ul><h4>Image strategy 🖼</h4><p>A very high percentage (around <strong>70%</strong>) of a site is <strong>composed of images</strong>. You really need to <strong>understand which graphic material is actually useful </strong>or significant for your brand.</p><p>Separate your images in these 4 categories:</p><ul><li>Navigation and action images</li><li>Branding and priority images</li><li>Decorative images</li><li>Informative images</li></ul><p>The first two types are very important and are the images that <strong>need to be always present</strong>. You need to work on <strong>decorative and informative images</strong>. While they’re nice to have, they are <strong>not critical</strong>, so try to<strong> replace them whenever possible</strong> with alternative designs (color blocks, text, etc.).</p><h4><strong>Deliver the minimal code needed</strong></h4><p>Most websites ship all the JavaScript a website needs upfront. This is bad, because all that also needs to be parsed, compiled and executed by the browser. This is especially important when working with mobile devices.</p><p>You want to deliver the <strong>minimal code to make a page useful upfront</strong>. Consider <strong>splitting your JS</strong> and only serve down the minimal code to make the current page useful for the user. <strong>Non-critical code</strong> should be <strong>lazily loaded </strong>in or <strong>added on the pages that absolutely need it</strong>.</p><h4>Preload critical resources ❗️</h4><p>Browsers like Chrome load resources like JS, fonts and images with <strong>different priorities</strong>. They try to guess what the user’ll need first.</p><p>But nobody knows more about your assets than you, the author of the site. You need to know which of them are <strong>critical to load early</strong> on each page, and design/code them according to that.</p><h4>Inline critical CSS</h4><p>Try to put the CSS that you expect the current page to use (critical CSS) inside a<strong> style tag in the header section</strong>. This allows the browser to paint the page without any network call and therefore it’s <strong>super quick</strong>.</p><h4>Eliminate render-blocking resources in above-the-fold content</h4><p>In web development, the term “above the fold” refers to the portion of a webpage that is <strong>visible without scrolling</strong>.</p><p>Loading contents that are not directly involved in the rendering of this prioritized visible content causes a delay that directly <strong>impacts conversion rates and user’s speed perception of the website</strong>.</p><h3>So… What do you think? 😃</h3><p>I found these insights and tips really interesting and useful. Some of the data was even surprising to me. What are your thoughts? Please leave a comment and let me know!</p><p>Thanks for reading ❤️</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=ed5d04c3b208" width="1" height="1">