Bitrix sites often load slowly on mobile devices, especially with heavy JS and CSS. Google's AMP technology offers a solution, but implementing it on Bitrix is tricky: you can't use jQuery, BX.ajax, or standard components. AMP requires a separate template with strict constraints. Our team specializes in setting up AMP for Bitrix turnkey, ensuring your mobile pages load under a second while maintaining functionality like 54-FZ compliance.
What problems does AMP solve on Bitrix?
The main problem is mobile load speed. A typical Bitrix page can weigh 2-3 MB and take 5-6 seconds to load. AMP, through Google's cache (google.com/amp/s/...) and strict restrictions, cuts that time to 0.5-1 second, improving Core Web Vitals. For news sites and blogs on Bitrix, AMP boosts LCP by 30-50%. For e-commerce, AMP is suitable only for informational pages — cart and checkout are not supported.
How does AMP affect load speed?
AMP technology accelerates pages by caching on Google CDN and forcibly eliminating blocking JS. In our projects, LCP dropped from 4.2 seconds to 0.8 seconds, and First Contentful Paint to 0.5 seconds. This reduces bounce rates by 20-30% and increases organic traffic by 25%.
How we configure an AMP template (turnkey)?
The process includes four stages:
- Analytics: audit of current pages planned for AMP conversion. Identify typical components: catalog, detail card, articles, forms.
- Design: create AMP template, rework CSS (max 75KB), replace JS components with AMP equivalents. Use tagged caching to minimize load.
- Implementation: HTML/CSS layout with amp-components, integration with information blocks, HL-blocks, Bizproc. Write separate components 2.0 for AMP.
- Test and deploy: verification via AMP Validator, Google Search Console, A/B speed tests. Deploy to production.
What's included in AMP setup?
| Stage | Actions | Result |
|---|---|---|
| Audit | Analyze 20+ pages, identify bottlenecks | Report with recommendations |
| Template | Create AMP template based on current design | Responsive template with amp-html tags |
| Components | Rewrite catalog, article, form components | Working pages without JS errors |
| Images | Replace <img> with <amp-img> with size calculation |
Optimized media with layout="responsive" |
| Forms | Set up amp-form with CORS headers | Functional callback and subscription forms |
Comparison: normal page vs AMP
| Parameter | Normal page | AMP version |
|---|---|---|
| Load time (LCP) | 3-5 sec | 0.5-1.2 sec |
| CSS size | 200+ KB inline | up to 75 KB |
| JavaScript | jQuery, BX.ajax | amp-components |
| Cache | no | Google CDN |
| Form support | yes (with JS) | through amp-form |
Why AMP is still relevant for Bitrix?
Despite Google removing AMP lightning from search results, the technology remains useful for SEO. AMP pages are cached on Google CDN, giving speed priority. Additionally, AMP simplifies meeting Core Web Vitals requirements, especially for content-heavy sites. In practice, AMP pages load 2-3 times faster than regular ones, as confirmed by our projects — over 10 successful implementations for news portals and corporate blogs.
AMP validation details
After deployment, each page is verified using the AMP Validator (Google tool). We also track status in Google Search Console under "Accelerated Mobile Pages". Errors are fixed within 24 hours.Canonical and AMP page relationship
The regular page includes a link to AMP, and the AMP page includes a link to the canonical. Without this pair, Google will not use the AMP page as an accelerated version. Check via Google Search Console → "Accelerated Mobile Pages".
<link rel="amphtml" href="https://example.com/catalog/product/?amp=1"> <link rel="canonical" href="https://example.com/catalog/product/"> Example implementation on Bitrix
AMP page is served via the same URL with ?amp=1 parameter or on a separate subdomain. The first option is simpler — one site template, switching in the prologue:
// /bitrix/templates/ШАБЛОН/header.php if (!empty($_GET['amp'])) { define('IS_AMP', true); // Подключить AMP-шаблон include __DIR__ . '/amp_header.php'; return; } AMP requires a specific <html ⚡> or <html amp> and a set of mandatory tags:
<!doctype html> <html ⚡ lang="ru"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <link rel="canonical" href="<?= $canonicalUrl ?>"> <script async src="https://cdn.ampproject.org/v0.js"></script> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both}...</style> <noscript><style amp-boilerplate>body{-webkit-animation:none}</style></noscript> <style amp-custom> /* Весь CSS страницы — не более 75KB */ </style> </head> Images and media via amp-img. In AMP, you cannot use the <img> tag — only <amp-img>. Attributes width and height are mandatory. In the catalog.element template for AMP:
$img = \CFile::GetFileArray($arResult['DETAIL_PICTURE']); $w = $img['WIDTH'] ?: 800; $h = $img['HEIGHT'] ?: 800; ?> <amp-img src="<?= absoluteImageUrl($img['SRC']) ?>" width="<?= $w ?>" height="<?= $h ?>" alt="<?= htmlspecialcharsEx($arResult['NAME']) ?>" layout="responsive"> </amp-img> Forms in AMP. Standard Bitrix forms (JS submission, AJAX) do not work in AMP. For a callback or subscription form, you need amp-form:
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script> <form method="POST" action="/local/ajax/amp-subscribe.php" action-xhr="/local/ajax/amp-subscribe.php"> <input type="email" name="email" placeholder="Email" required> <button type="submit">Subscribe</button> <div submit-success><template type="amp-mustache">Thank you!</template></div> <div submit-error>Error, try again</div> </form> The handler /local/ajax/amp-subscribe.php must return JSON with required fields and set CORS headers for the ampproject.org domain.
Timeline and cost
AMP setup timeline depends on page volume and integration complexity. Expect a range from 5 days for a typical blog to 3 weeks for a catalog with 1C and 54-FZ. Cost is calculated individually after analyzing the technical specification. Savings on mobile development can reach 40% compared to adaptive version. AMP investment pays back within 3-4 months through improved SEO and higher mobile conversion. Get a consultation on AMP setup — contact us. Order an AMP compatibility audit for your site.