How to Set Up Lazy Load for Images in 1C-Bitrix

A catalog page with 48 product cards — the browser loads all 48 images at once, even though only 12 are visible. Six megabytes of bandwidth go to waste, and LCP exceeds 4 seconds. We've encountered this in every other Bitrix project, so we include lazy load configuration in the basic optimization package. Our experience shows: proper lazy loading reduces traffic by 70–80% and improves Time to Interactive by a factor of two. For example, a building materials store with 15,000 products reduced LCP from 3.8s to 1.9s and initial image volume from 6.2 MB to 1.1 MB. Traffic savings reached 82%, which at 50,000 monthly sessions and an average order of 3,500 ₽ generated additional revenue of about 280,000 ₽ per month due to a 15% decrease in bounce rate.

Why lazy load is critical for online stores

Each image is an HTTP request, decoding, and rendering. Even with HTTP/2, browsers limit the number of simultaneous connections. When all product cards require loading, the queue blocks critical resources: fonts, CSS, analytics scripts. The result is a blank screen and high bounce rate. Our clients typically see a 15–20% reduction in bounce rate after implementing lazy load.

How to add lazy load in 1C-Bitrix

We use a combination of the native loading="lazy" attribute and IntersectionObserver for backward compatibility. Let's look at both approaches.

Native lazy load (recommended)

Supported by all modern browsers. Simply add the attribute to the component template:

<img src="<?= $item['PREVIEW_PICTURE']['SRC'] ?>"
     loading="lazy"
     width="<?= $item['PREVIEW_PICTURE']['WIDTH'] ?>"
     height="<?= $item['PREVIEW_PICTURE']['HEIGHT'] ?>"
     alt="Catalog product – lazy loaded image">

Important: width and height attributes are mandatory — without them the browser does not reserve space, leading to content layout shift (CLS). For above-the-fold images (first 2–4 rows of the grid), we disable lazy load — otherwise they will load with a delay and worsen LCP.

JavaScript implementation for old browsers

If you need support for older browsers or a custom preloader, use IntersectionObserver:

const lazyImages = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            img.removeAttribute('data-src');
            observer.unobserve(img);
        }
    });
}, { rootMargin: '200px' });

lazyImages.forEach(img => observer.observe(img));

rootMargin: '200px' — loading starts 200 pixels before the image enters the viewport. This prevents "flickering" during fast scrolling.

Comparison of lazy load approaches

Native lazy load is 2–3 times faster to start than JavaScript implementations, so we prefer it as the primary method.

Typical metrics before and after implementing lazy load

Case study from our practice

Client: an online building materials store with 15,000 products. Problem: a category page with 60 products loaded 6.2 MB of images, LCP was 3.8 s.

What we did:

• Added loading="lazy" to all product cards except the first row.
• For off-screen cards, set rootMargin: 300px via IntersectionObserver (strategy: load ahead, as products are often compared).
• Optimized images through compression with quality preservation (WebP with fallback).

Result: initial image load dropped to 1.1 MB (82% savings), LCP reduced to 1.9 s. During scrolling, users do not notice any delay. Additional revenue due to reduced bounce rate was about 280,000 ₽ per month at an average order of 3,500 ₽.

Workflow for a project

1. Template audit: check all catalog.section, catalog.element, news.list components — identify places where images are loaded without lazy load.
2. Planning: create an image map — which ones should load immediately (above the fold), which ones lazy. Determine rootMargin for different zones.
3. Implementation: modify template.php, add JS code for old browsers. For CSS background images, use IntersectionObserver with a class marker.
4. Testing: check on real devices (network throttle 3G), measure LCP, CLS, TBT with Lighthouse and Chrome DevTools. Must eliminate content shift on mobile.
5. Deployment and monitoring: push to staging then production. Set up alerts in WebPageTest if LCP degrades by more than 10%.

What's included in the work

• Technical documentation: lazy load integration diagrams, description of modified templates and JS scripts.
• Access: full access to the project code and instructions for your developers.
• Training: a short webinar for your team on maintaining lazy load.
• Post-support: one month of warranty support — we fix bugs and adjust to new requirements.

Timeline and cost

Setup time: from 4 to 16 hours depending on architecture complexity. For complex projects with SSR and custom sliders, time increases. Cost is calculated individually — contact us, we'll evaluate your project. We offer this as a standalone service or as part of a comprehensive performance optimization package including caching, CDN, and compression.

Setting up lazy load is one of the fastest ways to improve user experience. Our specialists are 1C-Bitrix certified with over 7 years of experience — we guarantee results. Order a performance audit of your catalog to get specific recommendations. Get a consultation for your project.

Additional reading:

• MDN Web Docs: Lazy loading
• Wikipedia: Lazy loading image

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.