{"id":5486,"date":"2017-01-13T11:52:52","date_gmt":"2017-01-13T11:52:52","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=5486"},"modified":"2021-02-15T07:06:35","modified_gmt":"2021-02-15T07:06:35","slug":"a-designers-guide-to-perceived-performance","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/a-designers-guide-to-perceived-performance\/","title":{"rendered":"A Designer\u2019s Guide to Perceived Performance"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A well-designed site isn\u2019t how easy it is to use or how elegant it looks. A site isn\u2019t well-designed unless the user is satisfied with their experience. An overlooked aspect of this experience is performance. A slow, beautiful site will <em>always<\/em> be less satisfying to use than an inelegant fast site. It takes a user just three seconds to decide to abandon a website.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">&quot;To the typical user, speed doesn\u2019t only mean performance. Users\u2019 perception of your site\u2019s speed is heavily influenced by their overall experience, including how efficiently they can get what they want out of your site and how responsive your site feels.&quot; - <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/developers.google.com\/speed\/articles\/usability-latency\" target=\"_blank\" rel=\"noopener noreferrer\">Roma Shah, User Experience Researcher<\/a><\/span> <\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"A slow, beautiful site will always be less satisfying to use than an inelegant fast site.\"<\/p><\/span><\/blockquote>\n<div id='gallery-1' class='gallery galleryid-5486 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Perceived-Performance-Eye.png'><img loading=\"lazy\" decoding=\"async\" width=\"920\" height=\"380\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Perceived-Performance-Eye.png\" class=\"attachment-full size-full\" alt=\"perceived-performance-eye\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Perceived-Performance-Eye.png 920w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Perceived-Performance-Eye-600x248.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Perceived-Performance-Eye-768x317.png 768w\" sizes=\"auto, (max-width: 920px) 100vw, 920px\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">At the surface, performance is achieved through compression, cutting out extra lines of code and more, but there are limits to what can be achieved at a technological level. Designers need to consider the <em>perceived performance<\/em> of an experience to make it feel fast.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"There are two kinds of time: clock time and brain time.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">There are two kinds of time: <em>clock time<\/em> and <em>brain time<\/em>. The former is the objective measure of time; the latter is how a person <em>perceives<\/em> time. This is important to people involved in human-computer interaction, because we can <em>manipulate<\/em> a person\u2019s perception of time. In our industry, this manipulation is called the perception of performance.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">How Quick is Appropriate?<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This visual demonstrates how we perceive time. Anything less than one second is perceived as \u2018instant\u2019 behaviour, it is almost unnoticeable. Up to one second is immediate, anything more than this is when the user realises they are waiting.<\/p>\n<div id='gallery-2' class='gallery galleryid-5486 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Perceived-Performance-Timeline.png'><img loading=\"lazy\" decoding=\"async\" width=\"920\" height=\"300\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Perceived-Performance-Timeline.png\" class=\"attachment-full size-full\" alt=\"perceived-performance-timeline\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Perceived-Performance-Timeline.png 920w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Perceived-Performance-Timeline-600x196.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Perceived-Performance-Timeline-768x250.png 768w\" sizes=\"auto, (max-width: 920px) 100vw, 920px\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Instant behaviour<\/strong> could be an interface providing feedback. The user should not have to wait for this, they should get a message within 0.2s of clicking a button.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Immediate behaviour<\/strong> could be a page loading. The user should not have to wait any more than 1 or 2 seconds for the results they want to load.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If an interface <em>needs<\/em> that extra time, we should say \u2018this may take a few more seconds\u2019 and provide feedback on how long it will take. Don\u2019t leave the user asking too many questions.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Active & Passive Modes<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Humans do not like waiting. We need to consider the different modes a person is in when using a website or application: the <em>active<\/em> and <em>passive<\/em> modes. During the <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">active mode<\/strong> users do not realise they are waiting at all; during the <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">passive mode<\/strong> their brain activity drops and they get bored.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"It takes a user just three seconds to decide to abandon a website.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">You can keep people in the <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">active mode<\/strong> by pre-loading content. Modern browsers do this while you are typing in a URL or searching in the address bar. Instagram achieves this by beginning to upload photographs in the background the moment you choose a photograph and starting creating the post to make the upload feel instant.<\/p>\n<div id=\"attachment_5489\" style=\"width: 959px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-5489\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/01\/Instagram.png\" alt=\"instagram\" width=\"949\" height=\"520\" class=\"size-full wp-image-5489\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Instagram.png 949w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Instagram-600x329.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Instagram-768x421.png 768w\" sizes=\"auto, (max-width: 949px) 100vw, 949px\" \/><p id=\"caption-attachment-5489\" class=\"wp-caption-text\">Instagram also shows an obscured preview of images that have not yet loaded.<\/p><\/div>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"As designers, we should do everything we can to keep our users in the active mode.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Display content as soon as you can to reduce the amount of time a user is in the <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">passive mode<\/strong>. YouTube does this by streaming the video to the user despite it not being 100% downloaded. Instead, it estimates how fast the user can stream, and waits for that portion of the video to load, automatically chooses a bitrate, and starts playing it. Only buffering when absolutely necessary.<\/p>\n<div id='gallery-3' class='gallery galleryid-5486 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Perceived-Performance-YouTube.png'><img loading=\"lazy\" decoding=\"async\" width=\"850\" height=\"477\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Perceived-Performance-YouTube.png\" class=\"attachment-full size-full\" alt=\"perceived-performance-youtube\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Perceived-Performance-YouTube.png 850w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Perceived-Performance-YouTube-600x337.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Perceived-Performance-YouTube-768x431.png 768w\" sizes=\"auto, (max-width: 850px) 100vw, 850px\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Both methods require us to prioritise the content we want, and load the rest of the page around it.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Your page needs to load 20% faster for your users to notice any difference.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Your page needs to load 20% faster for your users to notice any difference. If your page takes 8s to load today, a new version needs to take 6.4s to load for it to <em>feel<\/em> faster. Anything less than 20% is difficult to justify.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Helping Developers<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Even if you understand all aspects of page speed, you should be thinking about it the moment you start creating a design system for a UI, working with the development team to fine-tune performance and figure out where marginal gains can be had.<\/p>\n<div id='gallery-4' class='gallery galleryid-5486 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Perceived-Performance-States.png'><img loading=\"lazy\" decoding=\"async\" width=\"920\" height=\"441\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Perceived-Performance-States.png\" class=\"attachment-full size-full\" alt=\"perceived-performance-states\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Perceived-Performance-States.png 920w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Perceived-Performance-States-600x288.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Perceived-Performance-States-768x368.png 768w\" sizes=\"auto, (max-width: 920px) 100vw, 920px\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This could be as simple as ensuring you provide loading states and fallbacks (failed states) to your developers so the user doesn\u2019t have to wait for the entire page to load before they can read anything.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Here\u2019s a short step-by-step guide to ensuring you are considering performance when designing:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Research the priority content that should load in your interface. If it\u2019s a news article, the text content should load first, allowing the user to start reading before the experience has even finished loading.<\/li>\n<li>Provide a loading state (e.g. placeholder content) and a fallback (e.g. un-styled text) for all elements you design and use.<\/li>\n<li>Work with the developers to fine tune performance and work out what technologies can be used to ensure quick loading (e.g. <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/modpagespeed.com\/doc\/filter-cache-extend\" target=\"_blank\" rel=\"noopener noreferrer\">browser caching<\/a> and <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/optimus.keycdn.com\/support\/progressive-jpeg\/\" target=\"_blank\" rel=\"noopener noreferrer\">progressive jpegs<\/a>).<\/li>\n<\/ul>\n<div id=\"attachment_5517\" style=\"width: 1210px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-5517\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/01\/Slack-placeholder-content.png\" alt=\"slack-placeholder-content\" width=\"1200\" height=\"823\" class=\"size-full wp-image-5517\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Slack-placeholder-content.png 1200w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Slack-placeholder-content-600x412.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Slack-placeholder-content-768x527.png 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><p id=\"caption-attachment-5517\" class=\"wp-caption-text\">Slack take a common approach of placeholder content to imply what the user is going to see, making progress feel faster than it is. A blank screen here would be frustrating.<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">These tasks may seem complete, but it is important to revisit your work and fine-tune to make as many marginal gains as possible.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Measuring Performance<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A way to measure perceived performance is by inviting users to navigate your site and asking them to estimate how long it took to load. Another option is to provide multiple experiences and ask which is faster.<\/p>\n<div id=\"attachment_5518\" style=\"width: 887px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-5518\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/01\/perceived-performane-survey.png\" alt=\"perceived-performance-survey\" width=\"877\" height=\"305\" class=\"size-full wp-image-5518\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/perceived-performane-survey.png 877w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/perceived-performane-survey-600x209.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/perceived-performane-survey-768x267.png 768w\" sizes=\"auto, (max-width: 877px) 100vw, 877px\" \/><p id=\"caption-attachment-5518\" class=\"wp-caption-text\">A survey can be as simple as a scale like this one. Get enough answers, and you have a clear average.<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The sample should be large enough to gather a realistic average that takes into account different perceptions and, if remote, the varying connection speeds of your participants.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"A site isn\u2019t well-designed unless the user is satisfied with their experience.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Once you have measured the perceived performance, you should continue to tweak it, perform research, and make further improvements. Things can only get better. Keep tweaking until it\u2019s at a point you\u2019re happy with it, then tweak again.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Further Reading<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If you want to dig deeper into the perception of speed, check out the following resources:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/analyse-your-designs-with-heatmaps\/\">Analyse your designs with heatmaps<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/animated-transitions-in-mobile-apps\/\">Animated Transitions in Mobile Apps<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/psychology-principles-every-uiux-designer-needs-know\/\">The Psychology Principles Every UI\/UX Designer Needs to Know<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/design-principles-reducing-cognitive-load\/\">Design Principles for Reducing Cognitive Load<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"http:\/\/blog.teamtreehouse.com\/perceived-performance\" target=\"_blank\" rel=\"noopener noreferrer\">Perceived Performance - Treehouse<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.keycdn.com\/blog\/perceived-performance\/\" target=\"_blank\" rel=\"noopener noreferrer\">Perceived Performance - KeyCDN<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"http:\/\/dev.mobify.com\/blog\/beginners-guide-to-perceived-performance\/\" target=\"_blank\" rel=\"noopener noreferrer\">Beginners Guide To Perceived Performance - Mobify<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.smashingmagazine.com\/2015\/09\/why-performance-matters-the-perception-of-time\/\" target=\"_blank\" rel=\"noopener noreferrer\">Why Performance Matters - The Perception of Time - Smashing Magazine<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/blog.codinghorror.com\/actual-performance-perceived-performance\/\" target=\"_blank\" rel=\"noopener noreferrer\">Actual Performance, Perceived Performance - Coding Horror<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.nngroup.com\/articles\/website-response-times\/\" target=\"_blank\" rel=\"noopener noreferrer\">Website Response Times - Nielsen Norman Group<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/a><\/li>\n","protected":false},"excerpt":{"rendered":"<p>A well-designed site isn\u2019t how easy it is to use or how elegant it looks. A site isn\u2019t well-designed unless the user is satisfied with their experience. An overlooked aspect of this experience is performance. A slow, beautiful site will always be less satisfying to use than an inelegant fast site. It takes a user just three seconds to decide&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/a-designers-guide-to-perceived-performance\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":18,"featured_media":5519,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-5486","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-viewpoint"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"description\" content=\"A site isn\u2019t well-designed unless the user is satisfied with their experience, the overlooked aspect of this experience is performance.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marvelapp.com\/blog\/a-designers-guide-to-perceived-performance\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Designer\u2019s Guide to Perceived Performance\" \/>\n<meta property=\"og:description\" content=\"A site isn\u2019t well-designed unless the user is satisfied with their experience, the overlooked aspect of this experience is performance.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/a-designers-guide-to-perceived-performance\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2017-01-13T11:52:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-02-15T07:06:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Time-Perception-Header.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"5 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/marvelapp.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/a-designers-guide-to-perceived-performance\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Time-Perception-Header.png\",\"width\":2000,\"height\":800,\"caption\":\"time-perception-header\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/a-designers-guide-to-perceived-performance\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/a-designers-guide-to-perceived-performance\/\",\"name\":\"A Designer\\u2019s Guide to Perceived Performance\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/a-designers-guide-to-perceived-performance\/#primaryimage\"},\"datePublished\":\"2017-01-13T11:52:52+00:00\",\"dateModified\":\"2021-02-15T07:06:35+00:00\",\"description\":\"A site isn\\u2019t well-designed unless the user is satisfied with their experience, the overlooked aspect of this experience is performance.\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/a-designers-guide-to-perceived-performance\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/a-designers-guide-to-perceived-performance\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/a-designers-guide-to-perceived-performance\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/3e766734a20212d7ac6a1a6bfd4b6f65\"},\"headline\":\"A Designer\\u2019s Guide to Perceived Performance\",\"datePublished\":\"2017-01-13T11:52:52+00:00\",\"dateModified\":\"2021-02-15T07:06:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/a-designers-guide-to-perceived-performance\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/a-designers-guide-to-perceived-performance\/#primaryimage\"},\"articleSection\":\"Viewpoint\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/a-designers-guide-to-perceived-performance\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/3e766734a20212d7ac6a1a6bfd4b6f65\",\"name\":\"Luke\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c23fbd997b10319666ff30f54606f3ff32d84cb56a2fb259f372273c3533c5f0?s=96&d=mm&r=g\",\"caption\":\"Luke\"},\"description\":\"UI \/ Visual designer with a focus on user-centred design and research. Currently working at Hudl. Follow me on Twitter @lukejones and check out my work.\",\"sameAs\":[\"http:\/\/lukejones.me\/portfolio\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/5486","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=5486"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/5486\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/5519"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=5486"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=5486"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=5486"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}