What is Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) measures visual stability on web pages. It quantifies unexpected layout shifts that occur during the loading process. These shifts can frustrate users and negatively impact their experience.

What Causes Layout Shifts?

Layout shifts happen when elements on a webpage change position unexpectedly. This occurs while the page is loading and new content is being added. For instance, if an image or an advertisement loads after the rest of the page, it can push down existing content, causing the page to jump.

Layout shifts create issues for users. They may lead to accidental clicks, difficulty reading content, or confusion when interacting with the page. To manage this, the web community introduced the Cumulative Layout Shift metric.

How is CLS Calculated?

CLS is calculated by multiplying the impact fraction and the distance fraction for each layout shift event, then summing up the results.

Impact Fraction: This represents the portion of the viewport affected by the layout shift. If a shift moves half of the viewport, the impact fraction is 0.5.
Distance Fraction: This measures how far elements moved relative to the viewport size.

By multiplying the impact fraction and distance fraction for each event and summing the values, you obtain the cumulative layout shift score for the page.

Why is CLS Important?

Cumulative Layout Shift is crucial for user experience. A high CLS score can frustrate users, leading them to abandon a page or website. This is especially important for mobile users, who may have slower connections and be more susceptible to layout shifts.

Search engines consider CLS a ranking factor. Websites with good CLS scores are more likely to rank higher in search results due to better user experiences. Optimizing for CLS enhances user satisfaction and offers SEO advantages.

How to Improve CLS

To enhance CLS, developers can implement several best practices:

Element Sizing: Reserve space for images, ads, embeds, and other dynamic content. Use aspect ratio placeholders to prevent shifts when the actual content loads.
Preloading and Lazy-Loading: Preload critical resources to ensure availability when needed. Lazy-load non-critical resources to prevent initial layout shifts.
Avoid Dynamically Injected Content: If adding new content dynamically, ensure it doesn’t cause layout shifts. Reserve space or adjust the layout accordingly.
Optimize Font Loading: Use font-display descriptors to manage how fonts load. This avoids text shifting during font loading.
Limit Third-Party Content: Third-party scripts and iframes can affect CLS. Include only essential third-party content and ensure it is appropriately sized.

Implementing these practices can help reduce layout shifts and improve the CLS score of web pages.

Cumulative Layout Shift is a key metric for measuring visual stability on web pages. It quantifies layout shifts during loading and helps improve user experience. Optimizing CLS leads to more stable, user-friendly websites with higher user satisfaction and better search engine rankings.

Create your AI Agent

Automate customer interactions in just minutes with your own AI Agent.

Get started for free Chat with AI for fun

Featured posts

How Does a Web Scraper Work?

Web scrapers are tools that collect information from websites and turn it into structured data you can store, search, or analyze. They can be as simple as a short script that reads one page, or as complex as a system that crawls thousands of pages, handles logins, and tracks updates over time.

Hackathons — Innovation Labs or Just Pizza Parties?

Hackathons have become a staple of the modern tech ecosystem, promising bursts of creativity, rapid prototyping, and the thrill of building something from scratch in a matter of hours. At first glance, they appear to be high-energy innovation labs where the next big idea might emerge overnight. But for many participants, the reality can feel quite different—less like a focused sprint toward meaningful outcomes and more like a loosely organized social event fueled by free food and good intentions. This contrast raises an important question: are hackathons truly engines of innovation, or have they evolved into little more than glorified pizza parties?

What Is a PDF Reader?

PDF readers are software applications designed to open and display files saved in the Portable Document Format (PDF). These programs provide an easy way to view, and sometimes interact with, documents that maintain their formatting across different devices and platforms. This article will explore what a PDF reader is, its features, and its common uses.

WhatsApp Business App vs API: It’s Not an All-or-Nothing Choice

Many businesses start with the WhatsApp Business app because it is simple, familiar, and easy to run from a phone. That works well in the early stage. Then the business grows, message volume climbs, more staff need access, and manual replies start slowing everything down. At that point, people often hear a common claim: drop the app, move the number to the WhatsApp Business API, and start scaling. That idea is partly true, but not in the old all-or-nothing way. The real story is about how the app and the API serve different jobs, why growing teams move toward the API, and how the same number can now be part of that shift.

What Is OpenShift Kubernetes Engine, and Why Do Businesses Need It?

OpenShift Kubernetes Engine, often shortened to OKE, is Red Hat’s entry-level enterprise Kubernetes platform for organizations that want the core power of Kubernetes without buying the full OpenShift Container Platform feature set. It gives companies a supported, security-focused way to run containerized applications across on-premises data centers, private clouds, public clouds, and hybrid environments. In simple terms, it is for businesses that want Kubernetes, but also want Red Hat’s enterprise support, tested integrations, automated installation, operating system integration, patching, and lifecycle management instead of building and maintaining everything themselves from open-source components.

How to Write Prompts for Photorealistic Images?

Creating photorealistic images using AI models has become increasingly popular. The quality of the generated images depends heavily on the prompts provided to the AI. Writing effective prompts can significantly improve the realism and detail of the images produced. This article explains how to craft clear and detailed prompts to generate photorealistic images successfully.

How Cloud Providers Stretch 4.3 Billion IPv4 Addresses to Infinity

At first glance, it seems impossible. The entire IPv4 address space contains just over 4.3 billion unique addresses – fewer than the number of people on Earth, let alone the servers, containers, and devices that populate today’s cloud platforms. Yet giants like AWS, Google Cloud, and Microsoft Azure casually offer their customers seemingly inexhaustible supplies of IP addresses, spinning up millions of virtual machines daily without breaking a sweat. How can a fundamentally limited resource support a global ecosystem that grows without apparent bounds? The answer lies not in abandoning IPv4, but in a set of clever, decades-old techniques – private addressing, network address translation (NAT), and dynamic allocation – that stretch every public IPv4 address far beyond its original design, turning scarcity into an engineering superpower.

Why ChatGPT Loves Ending Articles With “Conclusion”

There is a familiar rhythm to AI-written articles. They open with a broad setup, move through neatly labeled sections, and then, almost inevitably, arrive at a final heading: Conclusion. For many readers, that word has become a tell. It feels like the textual equivalent of stock photography: functional, recognizable, and slightly generic. The article may be useful. The points may be sound. But when the final section is simply called “Conclusion,” something about the writing can feel machine-shaped. This is not because ChatGPT has a secret affection for the word. It is because “Conclusion” is safe, conventional, and statistically useful. It solves a structural problem. But it also reveals one of the most common weaknesses of AI writing: the tendency to choose clarity over character.

Achieve more with AI

Enhance your customer experience with an AI Agent today. Easy to set up, it seamlessly integrates into your everyday processes, delivering immediate results.

Try for free Get a demo

Latest posts

AskHandle Blog

Ideas, tips, guides, interviews, industry best practices, and news.

• May 20, 2026

Why AI Is Good at Advanced Data Analytics

When a business has one Excel file for monthly sales, another for customer details, another for product returns, and another for marketing spend, the most valuable insight is usually not sitting clearly in one spreadsheet. It is hidden between them. For example, sales may look strong in the main revenue file, but when AI compares that file with return data and customer complaints, it may reveal that one popular product is driving short-term revenue while also causing a high number of refunds. A human analyst could find this, but only after cleaning the files, matching product names, checking dates, and comparing thousands of rows. AI is good at advanced data analytics because it can connect these separate files quickly, recognize relationships across them, and turn scattered spreadsheet data into practical business insights.

Data AnalyticsExcelAI

• May 9, 2026

The Market for IPv4 Addresses: Who’s Buying, Who’s Selling?

For most internet users, an IP address feels like plumbing: invisible, boring, and always there. For cloud providers, hosting companies, telecom operators, email platforms, VPNs, and fast-growing SaaS businesses, IPv4 addresses have become something else entirely: scarce infrastructure with a real market price. That market exists because IPv4 was built with a hard ceiling. The protocol uses 32-bit addresses, giving the internet roughly 4.3 billion possible IPv4 addresses, many of which are reserved or otherwise unavailable for normal public use. The central global IPv4 free pool was depleted in February 2011, when IANA distributed the last available /8 blocks to the five Regional Internet Registries.

IPv4IPv6IP address

• April 21, 2026

What Is an ISV Partner? A Simple Guide to How Software Companies Work Together

When people hear the term ISV partner, it can sound like a technical label meant only for software executives and channel teams. In plain language, an ISV partner is a software business that builds its own product and works with a much larger software company to make that product fit, sell, and succeed inside a bigger platform or customer ecosystem. That partnership often helps customers get more value from both products at the same time, while giving the smaller software firm a stronger route to market.

ISVPartnerVendor

View all posts