How to Fix Cumulative Layout Shift (CLS) on 1С-Битрикс Sites

How to Fix Cumulative Layout Shift (CLS) on 1С-Битрикс Sites

Our team has been helping sites on 1С-Битрикс pass Core Web Vitals for years. One key metric is CLS (Cumulative Layout Shift), which measures visual stability. When a page jumps during loading — users can't read or click comfortably, and Google drops rankings. We've reduced CLS from 0.6 to 0.05 on a catalog with 50,000 products. Let's break down how to do it systematically.

CLS measures visual instability: how much elements shift during loading. Google's threshold is CLS < 0.1. Shifts that make users miss a button or lose their reading spot hurt UX and rankings. Cumulative Layout Shift — Wikipedia

On 1С-Битрикс sites, CLS typically ranges 0.2–0.6. The culprits are predictable and fixable systematically.

Why CLS Is Specifically a Problem for 1С-Битрикс

In standard Bitrix solutions, images often lack size attributes, dynamic blocks (cart, counters, favorites) load asynchronously, and web fonts are set without font-display. All this causes high CLS. Plus, ad widgets and chatbots inserted via JS push content around.

Fixing these manually in each template is labor-intensive. We automate the audit and apply changes across all components at once.

How to Measure CLS on a Bitrix Site

CLS = sum (impact fraction × distance fraction) for each shift. Impact fraction is the portion of the viewport affected. Distance fraction is how far the element moved relative to the viewport. An image 30% tall shifting down 20% gives 0.06 per incident.

Measurement: Chrome DevTools → Performance → record + scroll. The Layout Shift section shows each shift with the element.

What Causes CLS in Standard Bitrix Templates

Let's look at the main sources:

• Images without width and height — the most common cause. When the browser parses <img src="..."> without dimensions, it doesn't know how much space to reserve. Content below renders without a gap, then shifts down when the image loads.

Standard Bitrix component templates often output images without size attributes. Fixing the component template:

// Get image dimensions during rendering $imgFile = \CFile::GetByID($arItem['PREVIEW_PICTURE'])->Fetch(); $width = $imgFile['WIDTH'] ?: 300; $height = $imgFile['HEIGHT'] ?: 300; echo '<img src="' . \CFile::GetPath($arItem['PREVIEW_PICTURE']) . '"' . ' width="' . (int)$width . '"' . ' height="' . (int)$height . '"' . ' loading="lazy"' . ' alt="' . htmlspecialchars($arItem['NAME']) . '">'; 

CSS aspect-ratio as an alternative — when sizes are known and fixed:

.product-card__image-wrapper { aspect-ratio: 4 / 3; overflow: hidden; } .product-card__image-wrapper img { width: 100%; height: 100%; object-fit: cover; } 

This reserves space via CSS, so explicit HTML dimensions aren't needed. Fixed image sizes reduce CLS 10x more effectively than CSS tricks.

• Dynamic blocks: cart, counters, banners — Bitrix sites often have dynamic elements in the header: cart count, total, notification count. These load via AJAX after render. If there is content below the cart, it shifts when cart data loads.

Reserve space via CSS:

.header__cart-count { min-width: 24px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; } 

Set fixed dimensions for all dynamic header and sidebar elements. The empty element occupies space; after data loads, its size doesn't change.

• Ad and banner blocks — a classic CLS source. The block loads via JS, inserts into DOM, and pushes content. Solution: always reserve ad space with min-height.

• Fonts and FOIT/FOUT — without font-display, web fonts cause either FOIT (text hidden until font loads) or FOUT (text first in system font, then repaints with custom font). FOUT causes CLS if the two fonts have different metrics.

@font-face { font-family: 'SiteFont'; src: url('/bitrix/fonts/sitefont.woff2') format('woff2'); font-display: swap; font-style: normal; font-weight: 400; } @font-face { font-family: 'SiteFontFallback'; src: local('Arial'); size-adjust: 105%; ascent-override: 90%; } 

• Animations and transforms — animations using top, left, margin change geometry and cause reflow. Use only transform and opacity:

/* No CLS — only compositing */ .banner { transition: transform 0.3s; } .banner.hidden { transform: translateY(-100%); } 

Step-by-Step CLS Optimization Process

1. Audit: Run PageSpeed Insights and CrUX, identify CLS sources.
2. Fix images: Add width/height to all img tags in component templates.
3. Reserve space: Set min-height/min-width for dynamic blocks.
4. Configure fonts: Add font-display:swap and fallback metrics.
5. Fix ads: Set min-height for ad containers.
6. Migrate animations: Replace layout-triggering properties with transform/opacity.
7. Verify: Re-test with DevTools and PageSpeed Insights.

CLS Optimization Timeline & Cost

After fixes, verify with PageSpeed Insights using real data. CrUX updates with a 28-day delay — you'll see changes in real traffic after about a month.

Our Expertise

We are a certified 1С-Битрикс company with over 5 years of experience, completed 50+ Core Web Vitals projects, and a 98% success rate in reducing CLS below 0.1. Our method is 2x faster than standard fixes because we use automated auditing and batch changes. Typical ROI: a 20% increase in organic traffic within 2 months of optimization. We evaluate your project free of charge — contact us.

What's Included

• Audit current CLS via PageSpeed Insights and CrUX
• Fix images in all component templates (add width/height)
• Reserve space for dynamic blocks (cart, counters)
• Configure font-display and choose fallback fonts
• Fix ad blocks with min-height
• Migrate animations to transform
• Document all changes
• Final CLS measurement and report

Timeline: 3 to 10 days depending on template volume. Starting from $500 for basic optimization.