{"id":8334,"date":"2023-03-22T08:31:03","date_gmt":"2023-03-22T08:31:03","guid":{"rendered":"https:\/\/rettenmund.com\/2023\/03\/a-smooth-user-experience-the-science-behind-googles-web-vital-metrics\/"},"modified":"2023-03-22T08:31:03","modified_gmt":"2023-03-22T08:31:03","slug":"a-smooth-user-experience-the-science-behind-googles-web-vital-metrics","status":"publish","type":"post","link":"https:\/\/rettenmund.com\/en\/2023\/03\/a-smooth-user-experience-the-science-behind-googles-web-vital-metrics\/","title":{"rendered":"A smooth user experience: the science behind Google&#8217;s Web Vital Metrics"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" width=\"820\" height=\"547\" class=\"alignnone size-large wp-image-7130\" src=\"https:\/\/rettenmund.com\/wp-content\/uploads\/2023\/03\/pexels-andrea-piacquadio-3763878-820x547.jpg\" alt=\"\" srcset=\"https:\/\/rettenmund.com\/wp-content\/uploads\/2023\/03\/pexels-andrea-piacquadio-3763878-820x547.jpg 820w, https:\/\/rettenmund.com\/wp-content\/uploads\/2023\/03\/pexels-andrea-piacquadio-3763878-250x167.jpg 250w, https:\/\/rettenmund.com\/wp-content\/uploads\/2023\/03\/pexels-andrea-piacquadio-3763878-768x512.jpg 768w, https:\/\/rettenmund.com\/wp-content\/uploads\/2023\/03\/pexels-andrea-piacquadio-3763878-1536x1024.jpg 1536w, https:\/\/rettenmund.com\/wp-content\/uploads\/2023\/03\/pexels-andrea-piacquadio-3763878-2048x1365.jpg 2048w, https:\/\/rettenmund.com\/wp-content\/uploads\/2023\/03\/pexels-andrea-piacquadio-3763878-120x80.jpg 120w\" sizes=\"auto, (max-width: 820px) 100vw, 820px\" \/><\/p>\n<p><strong>Web-Vitals is a Google initiative designed to help business owners, marketers and developers alike identify opportunities to improve the user experience.<br \/>\nThese signals are based on extensive work by many researchers in the fields of human-computer interaction (HCI) and user experience (UX).<br \/>\nHowever, choosing the right metrics and thresholds is not as simple as reading a research paper to find the answer.  <\/strong>  Imagine you are going to an unfamiliar city to reach an important appointment.<br \/>\nYou walk through various streets and city centers along the way.<br \/>\nBut here and there loose cobblestones make you stumble, there are slow automatic doors that you have to open, and unexpected construction sites lead you astray.<br \/>\nAll these events <strong>interrupt your progress<\/strong>, <strong>increase stress<\/strong> and <strong>distract you from your goal<\/strong>.<br \/>\nUsers on the web are also on a journey where each of their actions should represent a step in what would ideally be a <strong>continuous flow<\/strong>.<br \/>\nAnd just as in the real world, they can be interrupted by delays, distracted from their tasks and make mistakes.<br \/>\nThese events can in turn lead to reduced satisfaction and abandonment of a site or the entire journey.<br \/>\nIn both cases, removing interruptions and obstacles is the key to a smooth journey and a satisfied user.<br \/>\nSo, what&#8217;s stopping users on the web?          <\/p>\n<h2>Interruptions due to waiting situations: Avoid long website loading times<\/h2>\n<p>  The most common type of interruption that web users experience is waiting for <strong>pages to load<\/strong>.<br \/>\nTo a developer, loading a page is a discrete process, and some delay may seem inevitable.<br \/>\nHowever, a page load often occurs in the middle of a user journey while they are catching up on current events in the news, researching a new product, or adding items to their cart for purchase.<br \/>\nSo from the user&#8217;s perspective, loading a particular page is not a natural pause: They haven&#8217;t reached their destination yet, which may make them less tolerant of delays.<br \/>\nThis <strong>means that pages need to load quickly<\/strong> for the <strong>user journey<\/strong> to run <strong>smoothly<\/strong>.<br \/>\nHow fast is fast enough?<br \/>\nIn some ways, this is the wrong question.<br \/>\nThere is no single magic number, and there are three main reasons for this.<br \/>\nFirstly, the answer depends on the outcome you are considering, such as abandonment, user satisfaction or task performance.<br \/>\nDifferent studies focus on different outcomes and produce different results.<br \/>\nFurther, the <strong>effect of delays<\/strong> varies enormously <strong>depending on the user&#8217;s personality<\/strong> and previous <strong>experience<\/strong>.<br \/>\nBut how can you minimize the occurrence of obstacles and interruptions on websites?<br \/>\nThe most common type of interruption that web users experience is <strong>waiting for pages to load<\/strong>.<br \/>\nLoading a page unfortunately often happens in the middle of the user&#8217;s journey when they are catching up on current events in the news, researching a new product or adding items to their shopping cart for purchase. So <strong>from the user&#8217;s perspective<\/strong>, waiting for a particular page to load is <strong>not a natural interruption<\/strong>: He has <strong>not yet reached<\/strong> his <strong>destination<\/strong>, which may make him <strong>less tolerant<\/strong> of <strong>delays<\/strong>.<br \/>\nThis means that pages need to load quickly for the user&#8217;s journey to run smoothly.<br \/>\nFinally, the effect of delays varies depending on <strong>context<\/strong> and <strong>situation<\/strong>.<br \/>\nNews sites, shopping sites and travel sites are often part of different types of user journeys, and the overall curve above might look different for each of them.<br \/>\nEven within a context, page design and user behavior can change over time.                   <\/p>\n<h2>Progressive loading of content, avoid layout shifts<\/h2>\n<p>  Most websites need to <strong>load multiple elements<\/strong>, and often this happens <strong>progressively<\/strong>.<br \/>\nThis can actually be an advantage: If some content appears as early as possible, a user can start making progress toward their goal without waiting for everything that needs to load.<br \/>\nHowever, if the position of elements that are already visible changes as other elements load, this can negatively impact the user experience in two ways.<br \/>\nOne basic cause is that it takes the user&#8217;s eyes a few hundred milliseconds to find the new position of an element when it suddenly moves.<br \/>\nIf the element has been moved out of view, it takes much longer and it is more difficult to reorient.<br \/>\nThis kind of disruption slows down the user journey and can be very frustrating.<br \/>\nSo a more serious consequence is that <strong>unexpected layout shifts <\/strong>can lead to errors.<br \/>\nIf the user tries to tap an element that then moves, they may end up tapping something else that has moved to its original position instead.<br \/>\nThis is because the delay from sensing the movement to deciding to cancel the action to actually doing it is impossible for a human.<br \/>\nThis could mean that they inadvertently click on a link, ad or &#8216;buy now&#8217; button and significantly disrupt the intended user journey.<br \/>\n <strong>Cumulative Layout Shift (CLS)<\/strong> measures how often and how severe unexpected layout shifts occur on a page.<br \/>\nFewer shifts mean fewer interruptions and errors.<br \/>\nIt is recommended that websites aim to achieve a <strong>CLS of less than 0.1 for 75% of page views<\/strong>.              <\/p>\n<h2>Closing words<\/h2>\n<p>  The science behind Web Vitals is an important factor in the success of websites in today&#8217;s digital age.<br \/>\nGoogle&#8217;s initiative to improve user experience by identifying interruptions and roadblocks has proven to be very valuable.<br \/>\nWeb developers, designers and business owners can <strong>improve the user experience of their websites<\/strong> by using <strong>metrics<\/strong> such as <strong>LCP<\/strong>, <strong>CLS<\/strong> and <strong>FID<\/strong> to increase user engagement and <strong>conversion rates<\/strong>.<br \/>\nAn important aspect of Web Vitals is that they are user-centric and focus on improving the user experience.<br \/>\nThey measure the performance of the website not only from a technical perspective, but also from the user&#8217;s perspective.<br \/>\nThis allows developers to focus on improving areas that have a direct impact on the user experience, such as loading time or website stability.<br \/>\nAnother important insight from the <strong>Web Vitals<\/strong> is that there is no universal solution.<br \/>\nEvery website has its own specific requirements and target groups that have different expectations of the user experience.<br \/>\nFor this reason, developers and companies must adapt the Web Vitals metrics to the individual needs of their website and review them regularly to ensure that they meet current user requirements.<br \/>\nIn addition, analysis of Web Vitals metrics shows that better performance leads to higher engagement and lower abandonment rates.<br \/>\nWebsites that adhere to the <strong>Web Vitals metrics<\/strong> have a higher chance of increasing user engagement and satisfaction, thus increasing their traffic and conversion rates.<br \/>\nThis is especially crucial for businesses, as an improved user experience can lead to increased sales.<br \/>\nOverall, web vitals are an important factor in the success of websites in today&#8217;s digital age.<br \/>\nGoogle&#8217;s initiative to improve user experience has proven to be extremely valuable as it provides developers and businesses with the tools to improve the user experience of their websites.<br \/>\nBy paying attention to these metrics, businesses and developers can increase their engagement and reduce their abandonment rates, resulting in a better user experience and higher conversion rates.              <\/p>\n","protected":false},"excerpt":{"rendered":"Web-Vitals is a Google initiative designed to help business owners, marketers and developers alike identify opportunities to improve the user experience. These signals are based on extensive work by many researchers in the fields of human-computer interaction (HCI) and user experience (UX). However, choosing the right metrics and thresholds is not as simple as reading","protected":false},"author":2,"featured_media":8177,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1146],"tags":[],"class_list":["post-8334","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-technology"],"acf":[],"_links":{"self":[{"href":"https:\/\/rettenmund.com\/en\/wp-json\/wp\/v2\/posts\/8334","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rettenmund.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rettenmund.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rettenmund.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/rettenmund.com\/en\/wp-json\/wp\/v2\/comments?post=8334"}],"version-history":[{"count":0,"href":"https:\/\/rettenmund.com\/en\/wp-json\/wp\/v2\/posts\/8334\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rettenmund.com\/en\/wp-json\/wp\/v2\/media\/8177"}],"wp:attachment":[{"href":"https:\/\/rettenmund.com\/en\/wp-json\/wp\/v2\/media?parent=8334"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rettenmund.com\/en\/wp-json\/wp\/v2\/categories?post=8334"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rettenmund.com\/en\/wp-json\/wp\/v2\/tags?post=8334"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}