הבעיה של סקריפטים חוסמי רינדור בביטריקס
הגדרת טעינה אסינכרונית של JS עבור 1C-Bitrix היא משימה מרכזית באופטימיזציית ביצועים. בלעדיה, האתר סובל ממשאבים חוסמי רינדור. סימפטום אופייני: Lighthouse מציג "Eliminate render-blocking resources", ומפרט את jQuery, Swiper וסקריפטים של רכיבים. הדפדפן מנתח HTML, פוגש את <script src="..."> ללא תכונות, ועוצר את הרינדור עד שהקובץ יורד ומופעל. באתר ביטריקס טיפוסי, יש 5–10 סקריפטים חוסמים כאלה. זה מגדיל את Total Blocking Time ל-2–3 שניות בתצורות ממוצעות, מה שמפחית ישירות את שיעורי ההמרה ואת דירוגי החיפוש. כמפתחים, אנו נתקלים בכך מדי יום ויודעים כיצד לפתור זאת מבלי לשבור פונקציונליות. בנוסף, לפי ויקיפדיה, TBT גבוה נמצא בקורלציה ישירה עם חוויית משתמש ירודה.
מדוע טעינת JS סטנדרטית מאטה את האתר
ביטריקס רושמת סקריפטים דרך CMain::AddHeadScript() ו-Asset::getInstance()->addJs(). השיטה ShowHead() מוציאה אותם ב-<head> ללא defer/async. רכיבים מוסיפים סקריפטים דרך $APPLICATION->AddHeadScript() — אותו דבר. עקיפת התנהגות זו אפשרית רק ברמת התבנית או באמצעות עיבוד חיץ לאחר. ללא התערבות, כל סקריפט הופך לחוסם.
כיצד אנו מגדירים טעינה אסינכרונית בביטריקס
התהליך שלנו מורכב מכמה שלבים:
- ניתוח — איסוף פרופיל טעינה דרך PageSpeed Insights ו-Lighthouse, ותיעוד כל הסקריפטים החוסמים.
- אסטרטגיה — קביעה אילו סקריפטים ניתן לדחות (defer/async) ואילו חייבים להישאר סינכרוניים (jQuery, core.js).
- יישום — פריסת הפתרון הנבחר (OnEndBufferContent או Asset Manager).
- בדיקות — אימות שכל הרכיבים פועלים כראוי, והשוואת מדדים לפני ואחרי.
- פריסה — ביצוע commit לשינויים ותיעוד.
שיטה יעילה אחת היא שימוש באירוע OnEndBufferContent לעיבוד HTML הסופי:
// local/php_interface/init.php AddEventHandler('main', 'OnEndBufferContent', 'deferScripts'); function deferScripts(string &$content): void { // Добавляем defer всем внешним скриптам, кроме явно исключённых $exclude = ['jquery.min.js', '/bitrix/js/main/core/core.js']; $content = preg_replace_callback( '/<script\s([^>]*src=["\'][^"\']+["\'][^>]*)>/i', function (array $m) use ($exclude): string { foreach ($exclude as $ex) { if (str_contains($m[0], $ex)) { return $m[0]; } } if (str_contains($m[1], 'defer') || str_contains($m[1], 'async')) { return $m[0]; } return '<script ' . $m[1] . ' defer>'; }, $content ); } jQuery ו-// local/php_interface/init.php AddEventHandler('main', 'OnEndBufferContent', 'deferScripts'); function deferScripts(string &$content): void { // Добавляем defer всем внешним скриптам, кроме явно исключённых $exclude = ['jquery.min.js', '/bitrix/js/main/core/core.js']; $content = preg_replace_callback( '/<script\s([^>]*src=["\'][^"\']+["\'][^>]*)>/i', function (array $m) use ($exclude): string { foreach ($exclude as $ex) { if (str_contains($m[0], $ex)) { return $m[0]; } } if (str_contains($m[1], 'defer') || str_contains($m[1], 'async')) { return $m[0]; } return '<script ' . $m[1] . ' defer>'; }, $content ); } של ביטריקס אינם נכללים ב-defer — אתחול הרכיבים תלוי בהם. כל השאר מקבל core.js.
Asset Manager וקבוצות תלות
בביטריקס 14+ קיים defer. ניתן לרשום סקריפטים עם מיקום:
\Bitrix\Main\Page\Asset::getInstance()->addJs( '/local/js/mymodule.js', false, // не объединять \Bitrix\Main\Page\Asset::POS_AFTER // после </body> ); \Bitrix\Main\Page\Asset ממקם את הסקריפט לפני \Bitrix\Main\Page\Asset::getInstance()->addJs( '/local/js/mymodule.js', false, // не объединять \Bitrix\Main\Page\Asset::POS_AFTER // после </body> ); — למעשה אנלוגי ל-POS_AFTER עבור מודולים עצמאיים. עבור סקריפטים הנדרשים ב-DOM-ready, זה עדיף על </body>.
מתי defer לא עובד
סקריפטים שלא ניתן לדחות ללא השלכות:
- jQuery, אם סקריפטים אחרים בגוף העמוד קוראים ל-
deferבתוך השורה - core.js ו-ajax.js של ביטריקס — ליבת BX
- מוני אנליטיקה, אם הם מודדים זמן עד אינטראקטיביות
- סקריפטים של בדיקות A/B (הם משנים את ה-DOM לפני הרינדור)
עבור אלה, אנו משתמשים ב-async — הדפדפן מוריד את הקובץ בעדיפות גבוהה, אך סדר הביצוע נשלט על ידי המפתח. אפשרות נוספת היא async, אך רק עבור סקריפטים עצמאיים (מונים, ווידג'טים).
נשווה בין הגישות בטבלה. defer מפחית את TBT פי 7 טוב יותר מאשר טעינה סינכרונית (1,840 ms → 240 ms).
| שיטה | מתי להשתמש | השפעה על ניתוח | סדר ביצוע |
|---|---|---|---|
$() |
סקריפטים הנדרשים לאחר ניתוח DOM | לא חוסם | הסדר נשמר |
<link rel="preload" as="script"> |
מונים וווידג'טים עצמאיים | לא חוסם | לא מובטח |
<script defer> |
סקריפטים קריטיים (jQuery) | לא חוסם, אך טוען מוקדם יותר | נשלט ידנית |
<script async> |
סקריפטים לפני <link preload> |
לא חוסם | הסדר נשמר |
מקרה בוחן: אתר סוכנות נסיעות
סוכנות נסיעות פנתה אלינו: אתר ביטריקס "Start" עם טופס חיפוש בעמוד הבית. TBT ב-Lighthouse היה 1,840 ms. סיבה: 12 סקריפטים ב-POS_AFTER, כולל Swiper 8.1 (120 KB), Fancybox (80 KB), ומפת Yandex (API אסינכרוני, אך האתחול היה חוסם). לאחר הוספת </body> דרך <head> והעברת המפה לאתחול דחוי דרך IntersectionObserver, התוצאות היו:
| מדד | לפני | אחרי |
|---|---|---|
| TBT | 1,840 ms | 240 ms |
| TTI | 6.1 s | 2.8 s |
| ציון ביצועים | 34 | 78 |
זמן הטעינה ירד ב-2.3 שניות. הלקוח ראה עלייה של 15% בהמרות בזכות המהירות, מה שהוביל לחיסכון משמעותי בתקציב הפרסום ולצמיחה בהכנסות. אנו מבטיחים תוצאות דומות בכל פרויקט — הניסיון שלנו כולל למעלה מ-5 שנים באופטימיזציית אתרי ביטריקס.
מה כלול בהגדרת טעינה אסינכרונית?
אנו מספקים מחזור מלא ומפתח ביד:
- ניתוח פרופיל הטעינה הנוכחי — דרך PageSpeed Insights, Lighthouse, WebPageTest. זיהוי כל הסקריפטים החוסמים.
- עיצוב אסטרטגיה — קביעה אילו סקריפטים ניתן לדחות ואילו חייבים להישאר סינכרוניים. התחשבות בתלות בין רכיבים.
- יישום — פריסת defer/async דרך OnEndBufferContent או Asset Manager, העברת סקריפטים לפוטר, הגדרת preload עבור קריטיים.
- בדיקות — אימות פונקציונליות (אינטראקטיביות, אנימציות, טפסים) לאחר השינויים. השוואת מדדים לפני/אחרי.
- פריסה ותיעוד — ביצוע commit לשינויים, מסירת גישה, הדרכת הצוות שלך.
לוח זמנים: מיום אחד לאתר טיפוסי ועד 5 ימים אם נדרש רפקטורינג של רכיבים. העלות מחושבת באופן אישי לאחר ביקורת — צור קשר להערכה חינמית של הפרויקט שלך. הזמן ביקורת ביצועים היום וקבל תוכנית אופטימיזציה מדויקת.
מדוע להפקיד עבודה זו בידי מקצוענים?
אנחנו צוות עם ניסיון של 10+ שנים בפיתוח 1C-Bitrix. השלמנו למעלה מ-50 פרויקטים של אופטימיזציית ביצועים, כולל קטלוגים מורכבים וחנויות מקוונות. אנו מבטיחים ללא קונפליקטים לאחר השינויים — כל סקריפט נבדק ידנית. אנו משתמשים בגישות מוסמכות ובתיעוד רשמי מ-ביטריקס ו-MDN Web Docs. הזמן הגדרת טעינה אסינכרונית — קבל ייעוץ מהיר ותוכנית עבודה מדויקת.
קבל ייעוץ חינמי ותוכנית עבודה מדויקת על ידי יצירת קשר איתנו.
לפי MDN Web Docs, תכונת ה-defer מבטיחה ביצוע סקריפטים בסדר הופעתם לאחר ניתוח ה-HTML, מה שמאשר את נכונות הגישה שנבחרה.