Web Vitals – guidance for delivering a great user experience

  Web Vitals are factors that Google measure to estimate quality of user experience on web pages and includes that results in page ranking. One of way to send good "SEO signals" to google search engine and to improve quality and quantity of website traffic  from search engine for your webpage is to improve the core web vitals. Main aspects of them are: - speed of page loading - speed in which main content on page is loaded (largest contentful paint) - interactivity of page (first input delay) - visual stability   LARGEST CONTENTFUL PAINT It is used for measuring how quickly the main content loads and is visible to users. Based on google's researches, best measurement for this is to track rendition of the largest element on the page (image or text block).  Elements that are relevant for LCP are:
  • image,
  • video,
  • an element with a background image loaded via the url() function ,
  • block-level elements that have text child elements.
Size of element is calculated based on what user see (only inside of the viewport, without margins, paddings or borders). It is considered as most convenient measure for user impression of speed of page loading. If your page loads within 4 or more seconds, users will have bad experience. Good performance assumes that a page is loaded within less than 2.5 seconds and everything more than that means that your page needs improvements.   Some of ways to improve LCP score are to do preload important resources, compress text files or images.   FIRST INPUT DELAY It shows how interactive and responsive is your page. Measures how long user must wait to interact with a web page. That refers to event processing which happens on some user action (click, tap, key presses) and only to first input, because first impression is most important for users and also it happens during page loading, so it can discover some critical point of page. It does not measure duration of event handling or time in which browser update UI, so it should be used in combination with other metrics to get some conclusions. First input delay should be less than 100 ms in the 75th percentile of page loads, which should be tracked on both mobile and desktop devices. Bad results for FID are caused with long JS parsing and execution, which blocks browser's main thread and delay running of event listeners.   To prevent bad core web vitals report, developers should take care to use best practices in writing and organising code. Some of roles that JS developers should follow in writing fast performance code are:
  • put your scripts at the end of body tag if that is possible - if that scripts are not needed for initial render, because while script is executing, other things are blocked (parsing of other scripts, rendering of a page, users actions)
  • If we have external JS file, load time will be longer because that file first must be downloaded and after that executed. In that case use less bigger files instead of many small external files, because each http request that is sent makes additional performance decrease
  • add scripts dinamicaly to the DOM
  • use for in loop only when you do not knew the size of collection in which you iterates, because it is much slower than other loop types
  • create var for conditions before loop execution, to decrease number of comparison that are executed in each iteration
VISUAL STABILITY It refers to unexpected moving of page parts, from one rendered frame to the next, and it is caused by changing position of existing elements. For example: user clicked on some button and just in that moment the button is moved on other position, or even worse, in its place there is other button now and user clicked on unwanted action. To calculate the layout shift score, the browser looks at the viewport size and the movement of unstable elements in the viewport between two rendered frames. The layout shift score is a product of two measures of that movement: the impact fraction and the distance fraction. Impact fraction is part of page in which transition happens (that was covered with moving element before move and that is covered with element after move), expressed in percents of viewport. Distance fraction is distance between first and second element position, measured in percent of the largest viewport dimension. To provide a good user experience, pages should maintain a Cumulative Layout Shift  of less than 0.1. You can achieve it by following next roles:
  • Use CSS aspect ratio boxes to take place for images and video elements, or set size for them in order to reserve space and enable to the browser allocation of document space during elements loading. You can also force this behaviour by using the unsized-media feature policy.
  • The only case in which it is allowed to insert content above the existing one is when it is the result of the user's action, because then the layout shift is expected
  • Animations should be made to provide context and continuity from state to state
  Core web vitals are combined with other search signals to evaluate page experience for search ranking. Additional signals are mobile-friendliness, safe-browsing, https and  complaintments about intrusive interstitials. Data source for this metrics in Google comes from field data (real user metrics) and lab data (used for testing). Tools for measuring this variables are Chrome User Experience Report, PageSpeed Insights and Search Console(Core Web Vitals report). Each of the Core Web Vitals can be measured in JavaScript using standard web APIs.

You may also like

March 21, 2024

Top Psychological Insights for Enhanced Software Solutions

Digging into user behavior for software might seem like tech-savvy sleuthing at first glance, yet it’s really about tuning into your users’ minds. The journey to crafting outstanding software is lined with insights into the peculiar human behaviors that steer our online interactions—clicks, swipes, and all.  Geeky task? Perhaps. But there’s more to it than […]

March 18, 2024

Moral Code: Bridging Tech and Society with Ethics

As new technologies push the limits of achievable, they also intensify challenges related to privacy, data protection, and their impact on society. In this digital frontier, lacking ethical guidance can lead developers astray.  The pursuit of innovation calls to us, yet it requires the beacon of ethics to light the way ahead, ensuring our technological […]

March 14, 2024

Beyond Bitcoin: The Rise of Blockchain in Modern Industries

Blockchain technology transcends its roots as a novel foundation for cryptocurrencies, emerging as a transformative force in the digital domain. It’s a leap from its original purpose, now serving as essential infrastructure for secure and transparent transactions across a spectrum of apps far beyond the confines of virtual currency.  Through the power of self-executing smart […]