What is preload and how does it work in 1C-Bitrix?

Preload is an HTML attribute that tells the browser to start loading a resource before the parser discovers it in the HTML. In Bitrix, preload is implemented via ` ` tags in `header.php` or through the Asset API. It speeds up loading of critical CSS and fonts, reducing time to first paint.

How is preload different from prefetch?

Preload has high priority and is meant for resources needed immediately on the current page. Prefetch has low priority and is for resources that will be needed on the next page. Prefetch loads data in the background and caches it in the browser, ensuring instant navigation.

Which resources should be preloaded in Bitrix?

Critical CSS (e.g., main stylesheet), fonts in woff2 format, and essential JS files (core.js, jquery). Preloading images is not recommended – use lazy loading instead. Avoid overdoing it: limit to 3–5 preload directives per page.

How do I add preload to a Bitrix template via PHP?

Use the `\Bitrix\Main\Page\Asset::getInstance()` class with `addJs` and `addCss` methods, passing the `'rel' => 'preload'` option. Alternatively, manually add ` ` tags in `header.php` with file version hashes. For HTTP headers, use an `OnPageStart` event handler.

How long does preload/prefetch configuration take?

Typically 1 to 3 days, depending on project complexity. This includes auditing the critical request chain, implementing via template or API, testing with Lighthouse, and deployment. The result is a 20–40% reduction in load time.

What is preload and how does it work in 1C-Bitrix?

Preload is an HTML attribute that tells the browser to start loading a resource before the parser discovers it in the HTML. In Bitrix, preload is implemented via ` ` tags in `header.php` or through the Asset API. It speeds up loading of critical CSS and fonts, reducing time to first paint.

How is preload different from prefetch?

Preload has high priority and is meant for resources needed immediately on the current page. Prefetch has low priority and is for resources that will be needed on the next page. Prefetch loads data in the background and caches it in the browser, ensuring instant navigation.

Which resources should be preloaded in Bitrix?

Critical CSS (e.g., main stylesheet), fonts in woff2 format, and essential JS files (core.js, jquery). Preloading images is not recommended – use lazy loading instead. Avoid overdoing it: limit to 3–5 preload directives per page.

How do I add preload to a Bitrix template via PHP?

Use the `\Bitrix\Main\Page\Asset::getInstance()` class with `addJs` and `addCss` methods, passing the `'rel' => 'preload'` option. Alternatively, manually add ` ` tags in `header.php` with file version hashes. For HTTP headers, use an `OnPageStart` event handler.

How long does preload/prefetch configuration take?

Typically 1 to 3 days, depending on project complexity. This includes auditing the critical request chain, implementing via template or API, testing with Lighthouse, and deployment. The result is a 20–40% reduction in load time.

Preload and Prefetch Optimization for 1C-Bitrix

Preload and Prefetch Optimization for 1C-Bitrix ## Why Preload Is Critical for 1C-Bitrix Imagine a visitor lands on your Bitrix-based e-commerce store, and the page takes 5 seconds to load. The critical request chain blocks rendering: every HTML, CSS, font, and script loads sequentially. The b

11+Years of workmore info 900+Completed projectsmore info 100+In house employeesmore info 19+Partnersmore info

Services we offer

Showing 1 of 1All 1626 services

Preload and Prefetch Optimization for 1C-Bitrix

Simple

~1 day

Our competencies:

Free consultation

Book a free consultation if you have any questions. A dedicated specialist will advise you.

Cost calculation

If you know what exactly you need to develop, or you already have a ready-made technical task.

Frequently Asked Questions

Preload and Prefetch Optimization for 1C-Bitrix

Why Preload Is Critical for 1C-Bitrix

Imagine a visitor lands on your Bitrix-based e-commerce store, and the page takes 5 seconds to load. The critical request chain blocks rendering: every HTML, CSS, font, and script loads sequentially. The browser downloads HTML, parses it, finds <link rel="stylesheet"> on line 5, fetches CSS, waits, parses CSS, finds fonts in @font-face, fetches fonts – this is the critical request chain that blocks rendering. We solve this with preload, prefetch, and critical CSS. Our experience spans over 20 projects where we cut time to first paint (FCP) by 30–40% and LCP by 25%. According to the Resource Hints specification, preload tells the browser about needed resources before the parser discovers them. Prefetch loads resources for the next page. Preload outperforms ordinary loading by 2× for FCP.

Comparison of Preloading Methods

Method	Priority	Use Case	Example
preload	High	Critical resources for the current page	CSS, fonts
prefetch	Low	Resources for the next page	JS for the next catalog section
preconnect	Medium	Establish TCP and TLS connections	CDN, Yandex.Metrica

How to Speed Up Navigation with Prefetch

If a user is on the homepage, there's a high probability they'll navigate to the catalog. Prefetching the catalog's main JS and the HTML page /catalog/ puts it in the browser cache – the transition becomes instantaneous. However, this only works if the page has proper caching headers.

Typical Resources for Preload	Recommendation
Main template CSS	Always preload
Fonts (woff2)	Preload with crossorigin
Core JS (jquery, core.js)	Preload when needed

How to Add Preload to a Bitrix Template: Code and Example

The site template in Bitrix is at /bitrix/templates/[template_name]/header.php. Add the following inside <head> before main tags:

<?php // Get file version for cache busting $cssVersion = filemtime($_SERVER['DOCUMENT_ROOT'] . '/bitrix/templates/.default/styles.css'); $jsVersion = filemtime($_SERVER['DOCUMENT_ROOT'] . '/bitrix/js/main/core/core.js'); ?> <head> <meta charset="utf-8"> <!-- Preload critical CSS (rendering is blocked without it) --> <link rel="preload" href="/bitrix/templates/.default/styles.css?v=<?=$cssVersion?>" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript> <link rel="stylesheet" href="/bitrix/templates/.default/styles.css?v=<?=$cssVersion?>"> </noscript> <!-- Preload font (as="font" is mandatory, otherwise wrong priority) --> <link rel="preload" href="/bitrix/templates/.default/fonts/roboto.woff2" as="font" type="font/woff2" crossorigin> <!-- Preconnect to external resources --> <link rel="preconnect" href="https://mc.yandex.ru"> <link rel="preconnect" href="https://www.googletagmanager.com"> <!-- DNS-prefetch as fallback for older browsers --> <link rel="dns-prefetch" href="//mc.yandex.ru"> </head>

Programmatic Preload via the Bitrix API

Bitrix provides methods to manage Link headers via the \Bitrix\Main\Page\Asset class:

// In a component or template $asset = \Bitrix\Main\Page\Asset::getInstance(); // Preload a JS file $asset->addJs('/bitrix/js/ui/ui.js', [ 'rel' => 'preload', 'as' => 'script' ]); // Preload CSS $asset->addCss('/bitrix/templates/.default/critical.css', [ 'rel' => 'preload' ]);

Via HTTP header from the OnPageStart event handler:

AddEventHandler('main', 'OnPageStart', function() { header('Link: </bitrix/templates/.default/styles.css>; rel=preload; as=style', false); header('Link: </bitrix/templates/.default/fonts/roboto.woff2>; rel=preload; as=font; crossorigin', false); });

Critical CSS for Bitrix: Why It Delivers 40% Faster Loads?

The biggest boost comes from inline critical CSS – styles needed for above-the-fold content embedded directly in the HTML. This eliminates the blocking CSS request entirely. In one project we cut LCP from 3.2s to 1.8s solely with critical CSS. Tool to extract critical CSS:

npm install -g critical critical --base /var/www/bitrix/public_html \ --src index.html \ --css bitrix/templates/.default/styles.css \ --width 1300 --height 900 \ --inline --extract

Insert the resulting critical CSS into the Bitrix template inside a <style> tag in <head>, and load the main CSS asynchronously via preload with onload as shown above. Learn more about critical CSS.

Workflow: From Audit to Monitoring

Analyze the critical chain – Collect the waterfall of requests using Chrome DevTools, identify blocking resources. Typically we find 5–8 candidates.
Select resources for preload – Pick 3–5 critical files (CSS, fonts, core JS). For instance, on a project with a 50,000-product catalog, we preloaded the main CSS and fonts, cutting FCP from 2.8s to 1.7s.
Implementation – Add <link> tags in header.php with version hashes or use the Asset API. For HTTP headers, hook into OnPageStart.
Prefetch for the next step – On the homepage, prefetch the catalog JS; on a product page, prefetch the cart JS. This reduces navigation time by up to 200 ms.
Critical CSS – Extract inline styles for above-the-fold, load main CSS asynchronously. The critical tool generates CSS for a 1300x900 viewport.
Testing – Verify with Lighthouse, WebPageTest, check FCP and LCP metrics. Aim for a score of 95+.
Deploy and monitor – Roll out, monitor real performance via Web Vitals.

Common Mistakes and Our Guarantee

Based on our 5+ years with Bitrix and 20+ projects, we guarantee no regressions: every step is documented and backed up. Key mistakes we avoid:

Preload without as – The browser doesn't know the resource type, loads it with wrong priority, and caches it separately. The resource is loaded twice: once via preload, again when the parser finds the <script> or <link> tag.
Preload fonts without crossorigin – CORS requests to the same domain require crossorigin for fonts. Without it, the browser loads the font twice.
Too many preloads – Equal priority for everything means priority for nothing. Limit to 3–5 preloads per page for truly critical resources.

What's Included in Preload Configuration

When you order this service, you receive:

Audit of the current critical request chain with a detailed report.
Preload setup for CSS, fonts, and JS tailored to your catalog.
Prefetch for next-step pages and resources.
Critical CSS implementation with automatic generation.
Performance testing (Lighthouse, WebPageTest) – achieving FCP < 1.5s and LCP < 2.5s.
Documentation of all changes made.
Guarantee of backward compatibility with Bitrix updates.

Timeline: 1 to 3 days. Pricing is customized per project, but the savings from speed gains can be hundreds of thousands of rubles per month through higher conversion rates and lower bounce rates. Our estimates show that for a site with 10,000 unique visitors per day, a 30% speed increase boosts conversion by 1–2%, generating additional revenue of 50,000 to 150,000 rubles per month. Contact us for a consultation and we'll help speed up your Bitrix. Request a performance audit today.

1C Bitrix presentation 1C Bitrix24 presentation 1C Enterprise presentation