אתרי ביטריקס נטענים לעיתים קרובות לאט במכשירים ניידים, במיוחד עם JS ו-CSS כבדים. טכנולוגיית AMP של גוגל מציעה פתרון, אך הטמעתה בביטריקס מסובכת: לא ניתן להשתמש ב-jQuery, BX.ajax או ברכיבים סטנדרטיים. AMP דורש תבנית נפרדת עם אילוצים מחמירים. הצוות שלנו מתמחה בהקמת AMP לביטריקס במפתח מלא, ומבטיח שדפי הנייד שלך ייטענו תוך פחות משנייה תוך שמירה על פונקציונליות כמו עמידה בדרישות 54-FZ.
אילו בעיות AMP פותר בביטריקס?
הבעיה העיקרית היא מהירות הטעינה הניידת. דף ביטריקס טיפוסי יכול לשקול 2-3 מגה-בייט ולהיטען תוך 5-6 שניות. AMP, דרך המטמון של גוגל (google.com/amp/s/...) והמגבלות המחמירות, מקצר זמן זה ל-0.5-1 שנייה, ומשפר את Core Web Vitals. עבור אתרי חדשות ובלוגים בביטריקס, AMP משפר את LCP ב-30-50%. עבור מסחר אלקטרוני, AMP מתאים רק לדפי מידע — עגלת קניות ותשלום אינם נתמכים.
כיצד AMP משפיע על מהירות הטעינה?
טכנולוגיית AMP מאיצה דפים על ידי שמירה במטמון ב-CDN של גוגל וביטול כפוי של JS חוסם. בפרויקטים שלנו, LCP ירד מ-4.2 שניות ל-0.8 שניות, ו-First Contentful Paint ל-0.5 שניות. זה מפחית את שיעור הנטישה ב-20-30% ומגדיל את התנועה האורגנית ב-25%.
כיצד אנו מגדירים תבנית AMP (במפתח מלא)?
התהליך כולל ארבעה שלבים:
- אנליטיקה: ביקורת של הדפים הנוכחיים המתוכננים להמרת AMP. זיהוי רכיבים טיפוסיים: קטלוג, כרטיס פרטים, מאמרים, טפסים.
- עיצוב: יצירת תבנית AMP, עיבוד מחדש של CSS (מקסימום 75KB), החלפת רכיבי JS ברכיבי AMP מקבילים. שימוש במטמון מתויג למזעור העומס.
- הטמעה: בניית HTML/CSS עם amp-components, אינטגרציה עם בלוקי מידע, HL-blocks, Bizproc. כתיבת רכיבים נפרדים 2.0 עבור AMP.
- בדיקה והשקה: אימות באמצעות AMP Validator, Google Search Console, בדיקות מהירות A/B. השקה לסביבת הייצור.
מה כלול בהקמת AMP?
| שלב | פעולות | תוצאה |
|---|---|---|
| ביקורת | ניתוח 20+ דפים, זיהוי צווארי בקבוק | דוח עם המלצות |
| תבנית | יצירת תבנית AMP על בסיס העיצוב הנוכחי | תבנית רספונסיבית עם תגי amp-html |
| רכיבים | שכתוב רכיבי קטלוג, מאמרים וטפסים | דפים עובדים ללא שגיאות JS |
| תמונות | החלפת <img> ב-<amp-img> עם חישוב גודל |
מדיה אופטימלית עם <link rel="amphtml" href="https://example.com/catalog/product/?amp=1"> <link rel="canonical" href="https://example.com/catalog/product/"> |
| טפסים | הגדרת amp-form עם כותרות CORS | טפסי התקשרות חוזרת והרשמה פונקציונליים |
השוואה: דף רגיל לעומת AMP
| פרמטר | דף רגיל | גרסת AMP |
|---|---|---|
| זמן טעינה (LCP) | 3-5 שניות | 0.5-1.2 שניות |
| גודל CSS | 200+ KB מוטבע | עד 75 KB |
| JavaScript | jQuery, BX.ajax | amp-components |
| מטמון | אין | Google CDN |
| תמיכה בטפסים | כן (עם JS) | דרך amp-form |
מדוע AMP עדיין רלוונטי לביטריקס?
למרות שגוגל הסירה את סמל ההבזק של AMP מתוצאות החיפוש, הטכנולוגיה נשארת שימושית לקידום אורגני. דפי AMP נשמרים במטמון ב-CDN של גוגל, מה שמעניק עדיפות במהירות. בנוסף, AMP מפשטת את עמידה בדרישות Core Web Vitals, במיוחד עבור אתרים עתירי תוכן. בפועל, דפי AMP נטענים פי 2-3 מהר יותר מדפים רגילים, כפי שמאושר בפרויקטים שלנו — למעלה מ-10 הטמעות מוצלחות לפורטלי חדשות ובלוגים ארגוניים.
פרטי אימות AMP
לאחר ההשקה, כל דף נבדק באמצעות AMP Validator (כלי של גוגל). אנו גם עוקבים אחר הסטטוס ב-Google Search Console תחת "Accelerated Mobile Pages". שגיאות מתוקנות תוך 24 שעות.יחסי דף קנוני ודף AMP
הדף הרגיל כולל קישור ל-AMP, ודף ה-AMP כולל קישור לקנוני. ללא צמד זה, גוגל לא תשתמש בדף ה-AMP כגרסה מואצת. בדוק דרך 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/"> דוגמת הטמעה בביטריקס
דף AMP מוגש דרך אותו URL עם פרמטר ?amp=1 או בתת-דומיין נפרד. האפשרות הראשונה פשוטה יותר — תבנית אתר אחת, מעבר בפרולוג:
// /bitrix/templates/ШАБЛОН/header.php if (!empty($_GET['amp'])) { define('IS_AMP', true); // Подключить AMP-шаблон include __DIR__ . '/amp_header.php'; return; } AMP דורש // /bitrix/templates/ШАБЛОН/header.php if (!empty($_GET['amp'])) { define('IS_AMP', true); // Подключить AMP-шаблон include __DIR__ . '/amp_header.php'; return; } או <html ⚡> ספציפיים ומערכת תגים חובה:
<!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> תמונות ומדיה דרך amp-img. ב-AMP, לא ניתן להשתמש בתג <html amp> — רק ב-<!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> . המאפיינים <img> ו-<amp-img> הם חובה. בתבנית width עבור 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> טפסים ב-AMP. טפסי ביטריקס סטנדרטיים (שליחת JS, AJAX) אינם עובדים ב-AMP. עבור טופס התקשרות חוזרת או הרשמה, יש צורך ב-height:
<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">Подписаться</button> <div submit-success><template type="amp-mustache">Спасибо!</template></div> <div submit-error>Ошибка, попробуйте снова</div> </form> ה-handler catalog.element חייב להחזיר JSON עם שדות נדרשים ולהגדיר כותרות CORS עבור הדומיין $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> .
לוח זמנים ועלות
לוח הזמנים להקמת AMP תלוי בהיקף הדפים ובמורכבות האינטגרציה. צפה לטווח של 5 ימים לבלוג טיפוסי עד 3 שבועות לקטלוג עם 1C ו-54-FZ. העלות מחושבת באופן אישי לאחר ניתוח המפרט הטכני. החיסכון בפיתוח נייד יכול להגיע ל-40% בהשוואה לגרסה אדפטיבית. ההשקעה ב-AMP מחזירה את עצמה תוך 3-4 חודשים באמצעות שיפור בקידום האורגני והמרות ניידות גבוהות יותר. קבל ייעוץ על הקמת AMP — צור קשר. הזמן ביקורת תאימות AMP לאתר שלך.