DEV Community: OMOJUWON

Eliminating Frustrating Web Page Jitters: Understanding and Improving Cumulative Layout Shift

OMOJUWON — Thu, 06 Apr 2023 10:27:19 +0000

Have you ever visited a website where, just as you were about to click on a button or read some text, the content suddenly shifted or disappeared from view? This can be a frustrating experience, as it disrupts the user’s reading flow and can even lead to unintentional clicks. Such unexpected layout changes are typically caused by asynchronously loaded resources that are added to a page after the DOM has already been rendered. The culprit could be an image or video with unknown dimensions, a font that renders larger or smaller than its fallback, or a third-party ad or widget that dynamically resizes itself.

Often these problems are not easy to catch during development by engineers. Images most time are already cached by the engineers' browser cache, hence faster load time. API fetched locally runs very faster, so there for layout shifts are not so noticeable.

How then do we measure how many layouts shift our page has and what is an acceptable limit?

CUMULATIVE LAYOUT SHIFT
In web design, a “layout shift” occurs when elements on a webpage unexpectedly move around during page load or user interaction. These shifts can be frustrating for users, leading to accidental clicks or misinterpretation of information.

Cumulative Layout Shift (CLS) is a metric that measures the largest burst of layout shift that occurs before a user interacts with the page. A session refers to a time frame during which all layout shifts that occur no more than one second apart are considered part of the same session window. If layout shifts continue for a period of 5 seconds or less, they are included in the same session window. If the layout shifts stop for more than one second or if new shifts occur after the initial 5-second window, a new session window begins.

The 5-second limit is used to define the duration of a session window for measuring and analyzing the impact of layout shifts on user experience. It helps web designers and developers identify and fix issues that may affect user engagement and satisfaction.

WHAT IS A GOOD CLS SCORE
To ensure a positive user experience, it’s recommended to aim for a good CLS score of 0.1 or less, according to Google Core Web Vitals. A CLS score above 0.1 indicates that there is room for improvement in reducing the frequency and impact of layout shifts on your website. By addressing these issues, you can improve the overall usability and user satisfaction of your website.

HOW THEN IS CLS MEASURED?
The “Cumulative Layout Shift Score” is calculated based on two metrics: the “Impact Fraction” and the “Distance Fraction.”

layout shift score = impact fraction * distance fraction

IMPACT FRACTION
The “Impact Fraction” refers to the total area in the viewport that an unstable element, which causes a layout shift, covers before and after the shift occurs. For example, if a text block initially occupies 50% of the viewport height when the page is rendered from the server, but it shifts 25% more from its original position when some asynchronous data loads, the Impact Fraction will be 75% (50% + 25%).

To clarify, an unstable element refers to an element that causes the page layout to change unexpectedly or without user interaction.

To calculate the Impact Fraction, we add the initial percentage of the viewport area covered by the unstable element to the percentage shift at the final render.

Therefore, in the given example, the Impact Fraction is 0.75 or 75%

DISTANCE FRACTION
The “Distance Fraction” represents the distance that the unstable element, which causes a layout shift, moves from its initial position to the new position. In the previous example, the page moves 25% from its initial rendering, and the distance from the top of the screen to the new position is 25%, or 0.25.

To calculate the Distance Fraction, we divide the distance the unstable element moves by the total viewport height. Therefore, in the given example, the Distance Fraction is 0.25.

CUMULATIVE LAYOUT SHIFT SCORE

layout shift score = impact fraction * distance fraction

0.75 * 0.25 = 0.1875

From this. we observe that improvement has to be made on the web page as it exceeds the recommended Google score on 0.1

IMPACT FACTION
The “Impact Fraction” is the visible area within the user’s immediate viewport that experiences a layout shift. In the case where a text block occupies the same height as it did at the first render, the Impact Fraction remains at 0.5.

It is important to note that the Impact Fraction only considers the visible area within the user’s immediate viewport. Any content that is not visible within the viewport, and does not experience a layout shift, is not factored into the calculation of the Impact Fraction.

DISTANCE FRACTION
The distance fraction was stated to be 0.14

CUMULATIVE LAYOUT SHIFT SCORE

layout shift score = impact fraction * distance fraction

0.5 * 0.14 = 0.07

This is a good score

EXPECTED AND UNEXPECTED LAYOUT SHIFT
It is true that not all layout shifts are bad. In fact, without layout shifts, the web would not be as useful as it is today.

“User-initiated layout shifts”

are layout shifts that occur based on the user’s interaction with the web application, such as scrolling or clicking. For instance, when a user on a mobile device clicks on an input button, the onscreen keyboard pops up, and the content in the viewport moves up to accommodate the keyboard. Similarly, when a user on an e-commerce page selects a category, data is fetched from the database and mapped to the page. The layout might change as the mapping occurs to fill the page up with the data. This is a user-initiated layout shift.

To provide a better user experience, a pacifier, such as a loader, should be displayed on the screen as the mapping occurs and disappears when the data has finished mapping. This will give the user a better experience by providing feedback on the progress of the data loading and preventing unexpected layout shifts.

Animaton and transition

These are great ways to entertain the users and give them a wonderful user experience, However, this should be done in the right manner not abruptly to rattle the users

The following are CSS properties advised to be used when carrying out animation without triggering the layout shift

Instead of changing the height and width properties, use transform: scale().
To move elements around, avoid changing the top, right, bottom, or left properties and use transform: translate() instead.
TOOLS TO MEASURE CLS

There are different tools used to measure the CLS, based on two different conditions (Feild measurement and Lab measurement ).

Lab Testing

When developing features for software, it is not possible to gather information on how this feature will interact with real users. Tests are carried out in the lab, to find out how this tool will interact in the real world. The following tools can be used to carry out this test

Chrome Devtools
Lighthouse
PageSpeed insight
Webpageteest
Field Testing

On the other hand, while testing in the lab is a reasonable proxy for performance, it isn’t necessarily reflective of how all users experience your site in the wild. The performance of the website can vary drastically based on the user’s device and network. The following tools can be used to carry out this test

Chrome User experience report
Search Console (Core Web Vital report )
IN MY NEXT ARTICLE I WILL DISCUSS IN LENGTH HOW TO OPTIMIZE CLS

YOUR SOFTWARE PERFORMANCE IS LOSING YOU MONEY

OMOJUWON — Thu, 02 Mar 2023 13:59:11 +0000

“Software is never completed, it is just abandoned“- is a very popular saying in the tech Ecosystem. What does this mean, no matter how much you try to adapt and optimize it, there will always be something to optimize — Make it faster, smoother, etc. In the Quest for perfection, there are certain metrics that are used to measure the performance of our web application. They are as follows

LARGE CONTENFUL PAINT
FIRST INPUT DELAY
CUMULATIVE LAYOUT SHIFT

These metrics are sometimes overlooked but are big determining factors in your business. Poor user experience due to poor performance on our software may deter users from coming back to use such software
In this blog post, we would be learning how to measure the LARGE CONTENTFUL PAINT, the tools used to measure this, and how we can optimize this, with a tutorial explaining how this can be done.

LARGE CONTENTFUL PAINT

Large contentful paint (LCP) measures the loading performance of a web page by identifying the time it takes for the largest content element in the viewport to become visible. This metric is measured before the user interacts with the webpage, such as by scrolling, clicking, and so on

In previous years engineers use an inbuilt function such as LOAD & DOMCONTENTLOADED to measure this metric

LOAD — This event is fired when all resources such as stylesheet, javascript scripts , dependency, and others have been loaded on a page

DOMCONTENTLOADED — This fires as soon as the dom has loaded, without waiting for the other resource to load

To put into perspective, Say a user sends a request to a server for a webpage. LCP report on the web page will indicate how long it took for the largest content on the page to load and be fully visible to the initial viewport of the user’s device before the user starts interacting with the page.

To provide the best user experience, business owners and web developers should be looking toward hitting 2.5 seconds or less.

What is considered to be large contentful paint are
Images
Texts bloc
in the CSS style sheet, elements with background image URL
elements containing text nodes or other inline-level text elements children.

However, images that occupy the whole of the initial viewport of the user’s device are not considered as Large contentful paint

Why so? if an image occupies the entire viewport, it may not be considered the largest content element because it does not have any other content competing for space. In this case, the browser may consider other elements such as text or videos as the largest content element below the initial viewport, and measure the loading performance based on their visibility.

It is important to note that even if an image occupies the entire viewport, it can still affect the loading performance of the page if it takes a long time to load. In such cases, the loading performance may be measured by other metrics such as the FIRST INPUT DELAY and CUMULATIVE LAYOUT SHIFT.

The word “Initial” has been emphasized in this article

It’s worth noting that the primary goal of the LCP metric is to measure the loading performance of the initial viewport, which is the portion of the page that is visible without scrolling. However, as the user scrolls and new content becomes visible, the browser may measure the loading performance of additional content elements that become visible in the viewport, using other metrics such as the FIRST INPUT DELAY and CUMULATIVE LAYOUT SHIFT.

HOW THEN IS THE LARGEST CONTENTFUL PAGE REPORTED?

When a user requests a web page from the server, the page is loaded in stages. The request might contain images that are asynchronously requested from another server and may not load immediately as another element would load on that page. Some data too also be outsourced from external API and may take longer to load, or a very large video that auto-plays on load might take longer to set up. How then can we measure which of these elements are the largest contentful paint?

Web browser dispatches PerformanceEntry of type largest-contentful-paint, identifying the largest contentful element as soon as the browser starts rendering content. As more and more contents keep loading, the PerformanceEntry of type largest-contentful-paint is dispatched again to record the Largest contentful — paint (the elements that took the longest to load ). This dispatch stops when all elements have been rendered and the last element that is rendered is then recorded as the largest contentful element

The letters A-E indicate the elements that load first when the user requests for CNN homepage. We can see that the Header loads first A, the Main text B , then the texts below at C, the image at D, and finally the hero image at E. For the user to request the CNN web page, it goes through different loading stages from 1–5. The Largest contentful paint recorded by the PerfomaceEntry keeps updating from A — E, E being the largest contentful paint record after the whole page has loaded.

SITAUTION WHEN USERS OPEN DIFFERENT TABS ON THEIR BROWSER HOW THEN CAN WE MEASURE THE LARGEST CONTENFUL ELEMENT?

Since users can open pages in a background tab, it’s possible that the largest contentful paint entries will not be dispatched until the user focuses the tab, which can be much later than when they first loaded it. Google tools that measure LCP do not report this metric if the page was loaded in the background, as it does not reflect the user-perceived load time.

TOOLS TO MEASURE LCP

There are different tools used to measure the LCP, based on two different conditions (Feild measurement and Lab measurement ).

Lab Testing

Chrome Devtools
Lighthouse
PageSpeed insight
Webpageteest
Field Testing

Chrome User experience report
Search Console (Core Web Vital report )
There is a public javascript that enables users, to measure LCP in their application. I wrote an article on “HOW TO USE LARGEST CONTENTFUL PAINT API IN YOUR SOFTWARE”.

My this article “HOW TO IMPROVE LCP” explains how to optimize performance for a better user experience

Other metrics in measuring performance Idiscussed in full detail just like this one you read in full detail. They are as follow, FIRST INPUT DELAY CUMULATIVE LAYOUT SHIFT

Surviving the Storm: Is Your Software Ready to Weather Network Instability?

OMOJUWON — Sun, 26 Feb 2023 16:34:56 +0000

The strength of a person is often measured not by their success during favorable conditions, but by how they react when facing adversity. Similarly, the quality of the software is not fully seen when it is functioning under ideal conditions, but when it is tested by unexpected events such as network instability. In a world where users can access software from anywhere, it is crucial to consider the reliability of software under adverse conditions, as it can greatly affect the user experience and ultimately impact a business.

One way to ensure software reliability is by asking the question “Will my software work when there is a sudden cut to the internet?” or “Will my software load fast enough when the network connectivity is poor, such as with 2G?”. While network instability used to be a significant issue in the past, modern technologies have made it possible to address such challenges.

There are various techniques that can be used to ensure software reliability, including

Service Worker

Service workers are JavaScript files that run in the background of a web application, allowing it to continue functioning even when there is no internet connection. Service workers can intercept network requests, cache responses, and serve content from the cache when the network is not available. This approach is particularly useful for static assets like CSS, JavaScript, and HTML

Progressive Web Apps (PWA)

Progressive Web Apps is a set of web technologies that allow web applications to behave more like native applications. PWAs can work offline, send push notifications, and even be installed on the user’s device. PWAs can be built with Service Workers and other web technologies.

Local Storage

Local storage is another client-side storage mechanism that allows web applications to store data locally. Local storage can be used to store user preferences, data that the application needs to function when the network is not available, and other information.

Lazy loading

Lazy loading is a technique used in web development to improve website performance and reduce page load times. It involves delaying the loading of non-critical resources, such as images, videos, and other media until the user actually needs to view them. This means that the initial page load is faster, as only essential resources are loaded, and subsequent resources are loaded on demand as the user scrolls down the page.

I will be explaining these solutions in more detail in my next blog