FID/INP Optimization for 1C-Bitrix: Accelerating Site Response

Optimizing FID (First Input Delay) for 1C-Bitrix

We've encountered projects where INP reached 1500 ms on a typical Bitrix store. A click on the "Buy" button — and the user waits more than a second. Every 100 ms of delay reduces conversion by 7%. That's direct lost revenue. Our experience shows: a properly configured FID/INP optimization yields INP < 200 ms in 5–10 days turnkey. We'll evaluate your project for free.

FID (First Input Delay) — the time from the first interaction to the browser's response, described in web performance standards (see Wikipedia). Google replaced FID with INP (Interaction to Next Paint), which measures all interactions. Thresholds: FID < 100 ms, INP < 200 ms. On heavy Bitrix sites, INP can reach 500–1500 ms. Optimization reduces latency by 2.5x when implementing code splitting.

Why INP Matters for Business

Every extra millisecond of delay means losing a customer. Google research shows if INP exceeds 200 ms, bounce probability increases by 32%. For an e-commerce store on Bitrix, this means dozens of lost orders per day. On one of our projects, we reduced INP from 800 to 150 ms — conversion increased by 15%. Investment in optimization pays off in 2-3 months.

Why the Browser Doesn't Respond to Clicks

The browser is single-threaded: while the main thread is busy executing JavaScript, it can't process input events. The user clicks a button — the click is queued and waits for JS to finish the current task. Long Tasks with duration > 50 ms are the main cause of high INP.

Sources of Long Tasks in Bitrix:

• Loading and parsing large JS bundles: jQuery + plugins + components = 500 KB – 1 MB
• Initialization of sliders, mask fields, maps, widgets on DOMContentLoaded
• Heavy event handlers: catalog filter, cart recalculation
• Synchronous AJAX requests (block the thread)

How to Diagnose Long Tasks: Step-by-Step Guide

1. Open Chrome DevTools (F12) and go to the Performance tab.
2. Click the Record button (circle icon).
3. Interact with the page: scroll, click a button.
4. Stop recording and look for red bars above the timeline — these are Long Tasks > 50 ms.
5. Click a task to see the call stack: which script occupied the main thread.

For INP, enable 'Web Vitals' in DevTools and repeat the interaction. You can also use console monitoring:

const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
        if (entry.duration > 50) {
            console.warn('Long task:', entry.duration.toFixed(1) + 'ms', entry);
        }
    }
});
observer.observe({ type: 'longtask', buffered: true });

// Example of lazy loading a slider
if (document.querySelector('.main-slider')) {
    import('./swiper.min.js').then(({ default: Swiper }) => {
        new Swiper('.main-slider', { /* ... */ });
    });
}

What is Code Splitting and How It Helps

Standard Bitrix loads all JS on every page: jQuery, catalog plugins, cart scripts, sliders, maps — everything at once. A page with 1 MB JS executes it all on load. Code splitting reduces INP to 200 ms compared to 500+ ms without it — that's 2.5x faster.

In Bitrix context — via \Bitrix\Main\Page\Asset::addJs() in specific component templates, not in header.php.

Defer and Async for Scripts

<!-- Synchronous — blocks HTML parsing -->
<script src="/bitrix/js/plugin.js"></script>

<!-- defer — loaded in parallel, executed after HTML parsing -->
<script src="/bitrix/js/plugin.js" defer></script>

<!-- async — loaded and executed as soon as possible -->
<script src="/bitrix/js/analytics.js" async></script>

defer — for scripts that need the DOM (component initialization). async — for independent scripts (analytics, ad tags). In Bitrix, JS files added via \Bitrix\Main\Page\Asset::addJs() are output without defer. To add the attribute — custom implementation via the OnEndBufferContent hook or overriding the script output template.

Heavy Event Handlers

A click handler that does synchronous DOM recalculations on 200 elements blocks the thread for the duration. INP will equal the handler time. Debounce can reduce latency by up to 300 ms.

Improvement patterns:

Debounce for frequent events (search input, filter change):

let debounceTimer;
searchInput.addEventListener('input', function() {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
        doSearch(this.value);
    }, 300);
});

Breaking heavy operations via setTimeout or scheduler.postTask:

async function processLargeList(items) {
    for (let i = 0; i < items.length; i += 50) {
        const chunk = items.slice(i, i + 50);
        processChunk(chunk);
        await new Promise(resolve => setTimeout(resolve, 0));
    }
}

Web Workers for computations: if an event handler requires heavy computations (sorting, filtering large arrays) — move to a Web Worker. Runs in a separate thread, does not block the UI.

Third-Party Scripts

JivoSite, MetrikaTag, Google Analytics, social media pixels — each adds JS that executes on the main thread. With 5–10 third-party scripts, the total startup load can be 200–500 ms of Long Tasks.

Strategy:

1. Load third-party scripts with async or after the load event
2. Use requestIdleCallback for non-critical scripts
3. Check if all connected widgets are needed — often there are unused ones

// Load analytics after idle
window.addEventListener('load', () => {
    requestIdleCallback(() => {
        const script = document.createElement('script');
        script.src = 'https://analytics-provider.com/tag.js';
        script.async = true;
        document.head.appendChild(script);
    });
});

What's Included in the Optimization Work

Optimization Timelines

A good result for a Bitrix store is INP < 200 ms. This is achieved when the total JS bundle < 200 KB (after parse) and there are no Long Tasks > 100 ms on interaction.

We are a team with 10+ years of Bitrix experience, certified specialists. We've completed 50+ speed optimization projects. We guarantee achieving INP < 200 ms or further refinement at our expense. We provide a checklist and monitoring after implementation.

Contact us for a free evaluation of your project. Order a performance audit today and get a consultation on FID/INP optimization for your Bitrix site.

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.