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.

80% of Bitrix sites slow down due to one table

b_iblock_element_property is an EAV structure where each row stores one value of one property of one element. A catalog of 50,000 products with 30 properties yields 1.5 million rows. The smart filter performs a JOIN of this table with b_iblock_element on five properties, and MySQL performs a full table scan for 3–5 seconds. Our experience shows that without intervention in this table, site acceleration is impossible. We take on projects where load time has dropped to 8–10 seconds and bring TTFB back to <200 ms within 1–2 weeks. Site speed optimization begins with an audit of slow queries and ends with a comprehensive turnkey infrastructure overhaul.

Contact us for an audit — we will identify bottlenecks within 2 hours and propose a concrete plan.

How to achieve TTFB below 200 ms?

Server optimization is the first step. Nginx configuration goes beyond simple gzip. Specifically:

• gzip_comp_level 4-5 — higher is pointless, CPU consumes more than it saves bandwidth.
• brotli on with brotli_static on for precompressed files.
• HTTP/2 with http2_max_concurrent_streams 128.
• fastcgi_cache for PHP responses — caching at Nginx level, bypassing PHP-FPM entirely.
• worker_processes auto, worker_connections according to the number of simultaneous connections.

PHP-FPM tuning: choose between pm = dynamic and pm = static. Static mode works best for dedicated servers with predictable load because it avoids forking overhead. Dynamic saves RAM under low traffic. Calculate pm.max_children as (available RAM - RAM for MySQL/Redis) / average process consumption. For OPcache set memory_consumption=256, max_accelerated_files=20000, and validate_timestamps=0 in production (restart PHP-FPM on deploy).

MySQL/MariaDB: the main bottleneck is almost always the database. Enable slow_query_log with a threshold of 0.5 sec and analyze every query via EXPLAIN. Set innodb_buffer_pool_size to 70–80% of available RAM on a dedicated server. Create composite indexes for faceted search: (IBLOCK_ID, IBLOCK_PROPERTY_ID, VALUE) on b_iblock_element_property. Run OPTIMIZE TABLE b_iblock_element_property after mass operations.

How to configure three-level caching?

Managed component cache. Set TTL individually for each component. Catalog — 3600 sec, news feed — 300 sec, banners — 86400. The same TTL everywhere guarantees either outdated data or useless cache.

Composite cache. The bitrix:composite technology lets Nginx serve ready HTML from a file; PHP is not executed. Dynamic zones (cart, authorization) are loaded via AJAX request through CBitrixComponent::setFrameMode(true). TTFB drops below 50 ms. However, not all components are compatible; $APPLICATION->ShowPanel() and direct output via echo break the composite. We check every page through the panel 'Performance → Composite Site'. According to Bitrix official documentation on composite cache, this is the most effective caching method for high‑load projects.

Comparison: composite cache is 10–20 times faster than managed cache in time to first byte.

Memcached / Redis. Transfer cache from the file system: sessions go to Redis (session.save_handler = redis) — 10–50 times faster than files, plus cluster support. Component cache goes to Memcached via .settings.php: 'cache' => ['type' => 'memcache']. Also enable ORM query cache so identical GetList() calls don't hit MySQL on every request.

What is the fastest way to optimize Bitrix database?

Default MySQL settings are insufficient. Indexes — composite for faceted search, covering for frequent queries. MySQL responds from the index without accessing the data. Partial indexes (MariaDB) for filtering by ACTIVE = 'Y'. Audit unused indexes — each slows down INSERT/UPDATE.

Partitioning. For tables with millions of rows: b_stat_session, b_search_content_stem, and highload-blocks with history. Partition by date — a query for 'orders in a month' does not scan three years of data. Partitioning also solves the problem of concurrent queries during exchange with 1С via CommerceML.

Real case: a catalog of 200,000 products, 50 properties. Filtering by 10 properties took 12 seconds. After creating composite indexes on (IBLOCK_ID, IBLOCK_PROPERTY_ID, VALUE) and partitioning b_iblock_element_property by IBLOCK_ID, execution time dropped to 0.3 seconds. MySQL load decreased by 40 times.

Cleanup. Over a year or two, any database accumulates: outdated search index, expired records in b_cache_tag, history in b_iblock_element_prop_s*, logs in b_event_log taking gigabytes. We set up regular cleanup via agents.

Frontend and CDN

Images account for 60–80% of page weight. Convert to WebP via CFile::ResizeImageGet() with BX_RESIZE_IMAGE_PROPORTIONAL + conversion. Use srcset + sizes — never load a 3000px image into a 400px block. Add loading="lazy" for everything below the fold. AVIF offers another 20–30% savings vs WebP.

CSS/JS optimization: use the built-in Bitrix module to merge and minify via 'Settings → CSS/JS Optimization'. Apply PurgeCSS / UnCSS — in a typical Bitrix project, 60–70% of CSS is unused. Use defer / async for non‑critical JS and inline critical CSS in <head> for instant FCP.

Fonts: add <link rel="preload" as="font" crossorigin> for the main font. Set font-display: swap — text visible immediately. Subset via pyftsubset — keep only Cyrillic + Latin, file size reduces by 3–5 times.

CDN: Cloudflare, BunnyCDN, AWS CloudFront, or Russian providers (Selectel CDN, VK Cloud CDN). Serve static assets (CSS, JS, images, fonts) via CDN with Cache-Control: public, max-age=31536000, immutable for files with a hash. Use on‑the‑fly image optimization (imgproxy, Cloudflare Polish) without load on origin.

Why is load testing necessary?

Not synthetic benchmarks, but real scenarios: k6 / wrk to simulate routes — catalog → filtering → product card → cart → checkout. Measure RPS, response time (p50, p95, p99), error rate. Use Xdebug (callgrind) or Blackfire for PHP profiling to find bottlenecks. The test result gives an objective picture of where it actually slows down, not where it 'seems'. After optimization, run again to record improvements.

Results

What is included in the work?

1. Current performance audit — analysis of slow queries, PHP profiling, check of caching, CDN, server settings.
2. Server configuration — Nginx, PHP-FPM, MySQL, Redis/Memcached, OPcache.
3. Caching optimization — managed cache, composite site, TTL configuration, tagged caching.
4. Database work — index creation, partitioning, cleanup, EAV table reorganization.
5. Frontend — images (WebP/AVIF), CSS/JS (minification, deferred), fonts (preload, subsetting).
6. CDN — connection, caching rule setup.
7. Load testing — real user scenarios, metric report.
8. Documentation — description of all changes, recommendations for further maintenance.
9. Guarantee — support for 1 month after delivery, ensuring all optimizations are stable.

Monitoring

Without monitoring, everything degrades in six months. A new module, uncleared logs, a template change — and speed returns to original. Use web-vitals API for Real User Monitoring from actual visitors. Set up synthetic monitoring with Pingdom or UptimeRobot for regular checks from different locations. Configure alerts — TTFB > 500 ms or LCP > 3 sec triggers notification.

Timelines and cost

Cost is calculated individually after the audit. Get a consultation for your project — we will evaluate the current state and propose an acceleration plan with specific timelines and budget. We are a team with 12+ years of experience in Bitrix, having completed over 300 site speed optimization projects. Contact us to start the performance audit today.