Fixing CLS Layout Shift on Persian Websites; From Font to Image

Why Your Persian Website's CLS is Above 0.1 and Google Penalizes It

You open the product page, the text hasn't loaded yet, and suddenly everything shifts by a few pixels. The "Add to Cart" button you were aiming for is now somewhere else. This is the exact moment a real user experiences, and Google measures it with the CLS (Cumulative Layout Shift) metric. Google's passing threshold for CLS is 0.1. Anything above this means your page fails the Core Web Vitals report and your ranking in search results drops.

On Persian websites, three sources of layout shift are the most common. The Persian font that loads late, an ad that appears after the content, and an image whose dimensions are not specified. Each has a separate solution. Here's where people go wrong: most think the problem is the hosting and go for speed optimization. But CLS has nothing to do with load speed. A page can load in 0.5 seconds but have a CLS of 0.4. The problem is render order, not speed.

Persian Font; The Silent Layout Killer

Persian fonts like Vazirmatn and IRANSans have large file sizes. A single Vazirmatn file with multiple weights can sometimes reach 200 kilobytes. Until the font loads, the browser displays the text with the system's default font. The difference in height and width of Persian characters compared to the default font can sometimes cause up to 15 pixels of vertical shift. This number is disastrous for CLS.

Solution: Using font-display: swap Along with Precise Measurement

The first step is using font-display: swap in the font definition. This makes the browser first display the text with the default font and then replace it with the main font. But this is only half the solution. The problem is that swap alone doesn't eliminate the shift; it only delays it.

The real solution is using size-adjust and ascent-override in the @font-face rule. These properties tell the browser how much space the fallback font should occupy so it doesn't differ from the main font. A practical example:

@font-face {
  font-family: 'Vazirmatn';
  src: url('/fonts/vazirmatn.woff2') format('woff2');
  font-display: swap;
  size-adjust: 98%;
  ascent-override: 90%;
  descent-override: 25%;
}

You need to find the exact numbers using measurement tools. Chrome DevTools in the Performance tab has an option called "Layout Shift Regions" that shows shift areas in red. Here's where people go wrong: many just add font-display: swap and think the job is done. The result is that CLS drops in lab reports but remains high in real user data (CrUX). Because a real user doesn't have the font cached, and the shift happens.

The second approach, which I choose for sensitive projects, is using font-display: optional. This value tells the browser that if the font doesn't load within the first 100 milliseconds, don't use it at all and stick with the default font. Layout shift drops to zero, but the site's appearance is displayed with the system's default font. For news sites where speed is the top priority, this is the right choice. For brand-focused sites where visual identity matters, swap with size-adjust is more appropriate. Test both and decide based on data.

Ads; The Shift Source Beyond Your Control

Google AdSense ads or Iranian ad networks are the worst enemies of CLS. The ad script loads after the main content and suddenly defines the banner's dimensions. The result? The content below the ad jumps down a few pixels. This shift repeats on every visit, and Google records it in the CrUX report.

Solution: Reserving Space with CSS

Before the ad script loads, place a container with specified dimensions in the HTML. If the ad doesn't load in that container, show a fallback message or empty space. Example:

<div class="ad-slot" style="width: 728px; height: 90px;">
  <!-- Ad script goes here -->
</div>

The problem is that ad dimensions aren't always fixed. Google AdSense offers responsive ads whose dimensions change based on screen width. For this case, use min-height and give a specific range:

.ad-slot {
  min-height: 90px;
  max-height: 250px;
}

Here's where people go wrong: they place the ad at the end of the article to "not bother the reader." But from a CLS perspective, the end of the page is the worst location. Because the user is scrolling, and a sudden shift causes them to miss the link they were aiming for. Place the ad in the middle of the content with reserved space. Yes, the click-through rate might drop. But the SEO ranking goes up, and organic traffic increases. This is a trade-off I always make.

Images Without Dimensions; A Mistake Still Being Repeated

An <img> tag without width and height attributes means the browser doesn't know how much space the image will take. Until the image loads, its height is zero. After loading, space suddenly opens up, and content jumps down. This is the simplest source of shift and has the easiest solution.

Solution: width and height Attributes Along with aspect-ratio

In modern HTML, you just need to specify the dimensions in the tag, and CSS does the rest:

<img src="product.jpg" width="800" height="600" alt="Product">

img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
}

The browser uses aspect-ratio to understand the dimension ratio and reserves the necessary space before the image loads. This technique is supported in all modern browsers since 2021. For CSS background images, also use aspect-ratio on the parent container.

An important note: if your image is stretched with CSS and the display dimensions differ from the actual dimensions, make sure to set aspect-ratio based on the display ratio, not the file ratio. Here's where people go wrong: they set the file ratio, the browser reserves space incorrectly, and the shift gets worse. Get the display ratio from a measurement tool, not from the file properties.

Measuring CLS; Before Any Change

Before implementing any solution, you need to know the current number. You have three tools for this:

• PageSpeed Insights — Shows lab reports and CrUX data side by side. A high lab number and low CrUX means the problem occurs in real-world conditions.
• Chrome DevTools — The Performance tab and the Layout Shift Regions option. The most precise way to see where the shift occurs.
• web-vitals JavaScript library — For measuring in real environments and sending data to Analytics.

After each change, measure again. CLS is a cumulative metric, and its number accumulates over the page's lifetime. One large shift at the beginning of load can ruin the entire number, even if the rest of the page is clean.

If you're having issues with your server infrastructure and don't know where the shift originates, perform a technical domain and DNS check. Sometimes the problem is with cache headers or resource load order that can be solved at the server level. For structural changes to your site, ServerNet web design could be a suitable option, but first find the technical problem with free tools.

We also have a more comprehensive guide in the complete website speed optimization guide that covers other Core Web Vitals metrics like LCP and INP. CLS is only one of three metrics, and if you ignore the other two, your ranking will still remain low.

Execution Order; Where to Start

If your website has a CLS above 0.1, follow this order:

1. Check images. Add width and height attributes to all img tags. This is the quickest win.
2. Adjust the font with size-adjust. This is the most time-consuming part but has the biggest impact on Persian websites.
3. Replace ads with reserved space. If the ad network doesn't allow it, at least set a min-height.
4. Measure again with PageSpeed Insights and record the number.

Between each step, test the change in a staging environment. A wrong font change can destroy readability and increase the bounce rate. That's a trade-off not worth making.

If you don't have a technical team and these tasks feel overwhelming, SEO services can manage this part for you. But my recommendation is to at least learn measurement yourself. Check the CLS number once a month. If it goes up, quickly look for the source. This takes 10 minutes and prevents major losses.

Frequently Asked Questions

What is CLS and why is it important for SEO?

CLS stands for Cumulative Layout Shift and measures the amount of sudden movement of page elements during load. Google has made this metric part of Core Web Vitals, and a value above 0.1 causes a drop in search result rankings.

How do I measure my website's CLS?

The simplest way is using PageSpeed Insights. Enter your site's URL and view the report. For real user data, refer to the CrUX section in the same report. If the lab and real numbers differ, the problem is related to specific user conditions.

Does the Persian font cause layout shift?

Yes, Persian fonts have large file sizes and load late. The difference in character height compared to the system's default font creates vertical shift. Using font-display: swap along with size-adjust solves this problem.

How much do Google AdSense ads affect CLS?

A lot. The ad script loads after the content, and the banner's dimensions are suddenly defined. To solve this, reserve empty space with specified dimensions before the script loads. If the ad doesn't load, that space remains empty, but no shift occurs.