אופטימיזציית Preload ו-Prefetch עבור 1C-Bitrix
למה Preload קריטי עבור 1C-Bitrix
דמיינו שמבקר נוחת בחנות המסחר האלקטרוני שלכם המבוססת על Bitrix, והעמוד נטען תוך 5 שניות. שרשרת הבקשות הקריטית חוסמת את העיבוד: כל HTML, CSS, גופן וסקריפט נטענים ברצף. הדפדפן מוריד HTML, מנתח אותו, מוצא את <link rel="stylesheet"> בשורה 5, מביא CSS, ממתין, מנתח CSS, מוצא גופנים ב-/catalog/, מביא גופנים – זו שרשרת הבקשות הקריטית שחוסמת את העיבוד. אנחנו פותרים זאת עם preload, prefetch ו-critical CSS. הניסיון שלנו כולל למעלה מ-20 פרויקטים שבהם קיצרנו את הזמן לציור ראשון (FCP) ב-30–40% ואת LCP ב-25%. לפי מפרט Resource Hints, preload אומר לדפדפן על משאבים נדרשים לפני שהמפענח מגלה אותם. Prefetch טוען משאבים עבור העמוד הבא. Preload עולה על טעינה רגילה פי 2 עבור FCP.
השוואת שיטות Preload
| שיטה | עדיפות | מקרה שימוש | דוגמה |
|---|---|---|---|
| preload | גבוהה | משאבים קריטיים עבור העמוד הנוכחי | CSS, גופנים |
| prefetch | נמוכה | משאבים עבור העמוד הבא | JS עבור קטלוג הקטע הבא |
| preconnect | בינונית | יצירת חיבורי TCP ו-TLS | CDN, Yandex.Metrica |
איך להאיץ ניווט עם Prefetch
אם משתמש נמצא בעמוד הבית, יש סבירות גבוהה שהוא ינווט לקטלוג. Prefetch של ה-JS הראשי של הקטלוג ושל עמוד ה-HTML /bitrix/templates/[template_name]/header.php מכניס אותו למטמון הדפדפן – המעבר הופך למיידי. עם זאת, זה עובד רק אם לעמוד יש כותרות מטמון מתאימות.
| משאבים טיפוסיים עבור Preload | המלצה |
|---|---|
| CSS ראשי של התבנית | תמיד preload |
| גופנים (woff2) | Preload עם crossorigin |
| JS ליבה (jquery, core.js) | Preload בעת הצורך |
איך להוסיף Preload לתבנית Bitrix: קוד ודוגמה
תבנית האתר ב-Bitrix נמצאת ב-<head>. הוסיפו את הבא בתוך <?php // Получаем хеш-версию файла для 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 критического CSS (рендеринг блокируется без него) --> <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 шрифта (as="font" обязателен, иначе приоритет неправильный) --> <link rel="preload" href="/bitrix/templates/.default/fonts/roboto.woff2" as="font" type="font/woff2" crossorigin> <!-- Preconnect к внешним ресурсам --> <link rel="preconnect" href="https://mc.yandex.ru"> <link rel="preconnect" href="https://www.googletagmanager.com"> <!-- DNS-prefetch как fallback для старых браузеров --> <link rel="dns-prefetch" href="//mc.yandex.ru"> </head> לפני תגיות ראשיות:
<?php // Получаем хеш-версию файла для 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 критического CSS (рендеринг блокируется без него) --> <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 шрифта (as="font" обязателен, иначе приоритет неправильный) --> <link rel="preload" href="/bitrix/templates/.default/fonts/roboto.woff2" as="font" type="font/woff2" crossorigin> <!-- Preconnect к внешним ресурсам --> <link rel="preconnect" href="https://mc.yandex.ru"> <link rel="preconnect" href="https://www.googletagmanager.com"> <!-- DNS-prefetch как fallback для старых браузеров --> <link rel="dns-prefetch" href="//mc.yandex.ru"> </head> Preload פרוגרמטי דרך ה-API של Bitrix
Bitrix מספקת שיטות לניהול כותרות Link דרך המחלקה \Bitrix\Main\Page\Asset:
// В компоненте или шаблоне $asset = \Bitrix\Main\Page\Asset::getInstance(); // Preload JS-файла $asset->addJs('/bitrix/js/ui/ui.js', [ 'rel' => 'preload', 'as' => 'script' ]); // Preload CSS $asset->addCss('/bitrix/templates/.default/critical.css', [ 'rel' => 'preload' ]); דרך כותרת HTTP מהמטפל באירוע // В компоненте или шаблоне $asset = \Bitrix\Main\Page\Asset::getInstance(); // Preload JS-файла $asset->addJs('/bitrix/js/ui/ui.js', [ 'rel' => 'preload', 'as' => 'script' ]); // Preload CSS $asset->addCss('/bitrix/templates/.default/critical.css', [ 'rel' => 'preload' ]); :
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 עבור Bitrix: למה זה מספק טעינה מהירה ב-40%?
הקפיצה הגדולה ביותר מגיעה מ-critical CSS מוטבע – סגנונות הנדרשים לתוכן שמעל לקפל המוטמעים ישירות ב-HTML. זה מבטל לחלוטין את בקשת ה-CSS החוסמת. בפרויקט אחד קיצרנו את LCP מ-3.2 שניות ל-1.8 שניות רק עם critical CSS. כלי לחילוץ 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 הכנסו את ה-critical CSS שנוצר לתבנית Bitrix בתוך תג OnPageStart ב-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); }); , וטענו את ה-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 עם <style> כפי שמוצג למעלה. למדו עוד על critical CSS.
תהליך עבודה: מביקורת לניטור
- ניתוח השרשרת הקריטית – אספו את מפל הבקשות באמצעות Chrome DevTools, זהו משאבים חוסמים. בדרך כלל אנו מוצאים 5–8 מועמדים.
- בחירת משאבים עבור preload – בחרו 3–5 קבצים קריטיים (CSS, גופנים, JS ליבה). לדוגמה, בפרויקט עם קטלוג של 50,000 מוצרים, טענו מראש את ה-CSS הראשי והגופנים, וקיצרנו את FCP מ-2.8 שניות ל-1.7 שניות.
-
יישום – הוסיפו תגי
<head>ב-preloadעם גיבובי גרסה או השתמשו ב-Asset API. עבור כותרות HTTP, התחברו ל-onload. - Prefetch לשלב הבא – בעמוד הבית, בצעו prefetch ל-JS של הקטלוג; בעמוד מוצר, בצעו prefetch ל-JS של העגלה. זה מפחית את זמן הניווט בעד 200 אלפיות השנייה.
-
Critical CSS – חלצו סגנונות מוטבעים לתוכן שמעל לקפל, טענו את ה-CSS הראשי באופן אסינכרוני. הכלי
<link>מייצר CSS עבור viewport של 1300x900. - בדיקות – ודאו עם Lighthouse, WebPageTest, בדקו מדדי FCP ו-LCP. שאפו לציון 95+.
- פריסה וניטור – פרסו, נטרו ביצועים אמיתיים דרך Web Vitals.
טעויות נפוצות והערבות שלנו
בהתבסס על 5+ שנות הניסיון שלנו עם Bitrix ו-20+ פרויקטים, אנו מבטיחים ללא רגרסיות: כל שלב מתועד ומגובה. טעויות מפתח שאנו נמנעים מהן:
-
Preload ללא
header.php– הדפדפן לא יודע את סוג המשאב, טוען אותו בעדיפות שגויה, ומטמון אותו בנפרד. המשאב נטען פעמיים: פעם אחת דרך preload, ושוב כשהמפענח מוצא את תגOnPageStartאוcritical. -
Preload של גופנים ללא
as– בקשות CORS לאותו דומיין דורשות<script>עבור גופנים. בלעדיו, הדפדפן טוען את הגופן פעמיים. - יותר מדי preloads – עדיפות שווה להכל משמעותה עדיפות לכלום. הגבילו ל-3–5 preloads לעמוד עבור משאבים קריטיים באמת.
מה כלול בהגדרת Preload
כאשר אתם מזמינים שירות זה, אתם מקבלים:
- ביקורת של שרשרת הבקשות הקריטית הנוכחית עם דוח מפורט.
- הגדרת preload עבור CSS, גופנים ו-JS המותאמת לקטלוג שלכם.
- Prefetch עבור עמודי השלב הבא ומשאבים.
- יישום critical CSS עם יצירה אוטומטית.
- בדיקות ביצועים (Lighthouse, WebPageTest) – השגת FCP < 1.5 שניות ו-LCP < 2.5 שניות.
- תיעוד של כל השינויים שבוצעו.
- ערבות לתאימות לאחור עם עדכוני Bitrix.
ציר זמן: 1 עד 3 ימים. התמחור מותאם אישית לכל פרויקט, אבל החיסכון מהאצת המהירות יכול להיות מאות דולרים – כ-$9–13 בחיסכון לחודש דרך שיעורי המרה גבוהים יותר ושיעורי נטישה נמוכים יותר. ההערכות שלנו מראות שעבור אתר עם 10,000 מבקרים ייחודיים ביום, עלייה של 30% במהירות מגבירה את ההמרה ב-1–2%, ומייצרת הכנסה נוספת של $500–1.5 אלף לחודש. צרו קשר לייעוץ ונעזור לכם להאיץ את ה-Bitrix שלכם. בקשו ביקורת ביצועים עוד היום.