אופטימיזציה של CSS קריטי עבור 1C-Bitrix
תרחיש טיפוסי: אתר Bitrix טוען שלושה עד ארבעה קבצי CSS בהיקף כולל של 300–600 KB. הדפדפן חוסם את העיבוד עד שכל ה-CSS נטען — זה נקרא חסימת עיבוד (render-blocking). כתוצאה מכך, FCP מגיע ל-3–5 שניות בחיבור נייד גם עם מטמון. אנו פותרים בעיה זו על ידי חילוץ CSS קריטי והטמעתו בתוך הדף. העריכו את הפרויקט שלכם — צרו קשר לייעוץ.
מדוע מתרחשת חסימת עיבוד של CSS ב-Bitrix?
Bitrix מייצר רשימה של קבצי CSS דרך CMain::AddCSS() ומפיק אותם ב-<head> כ-<link rel="stylesheet">. כל הקבצים חוסמים את העיבוד. הממזג המובנה (/bitrix/cache/css/) מאחד CSS אך אינו מפריד בין קריטי ללא-קריטי. רכיבים כמו bitrix:catalog.section מוסיפים סגנונות משלהם דרך $APPLICATION->SetAdditionalCSS(). הכל מגיע לנתיב החוסם. כתוצאה מכך, גם עם מטמון, המסך הראשון מעוכב בעיבוד.
מהו CSS קריטי בפועל?
CSS קריטי הוא הסגנונות הנדרשים לתוכן מעל לקפל ללא בקשות נוספות. עבור אתר Bitrix, זה כולל: איפוס (box-sizing, מרווחים בסיסיים), גריד של הכותרת והבלוק הראשון, טיפוגרפיה של H1–H2, תפריט ניווט, סגנונות באנר ראשי. השאר — כרטיסי מוצר, עגלה, מסננים, פוטר — נטענים באופן אסינכרוני. הטמעת CSS קריטי מפחיתה את FCP ב-40–60%, כפי שאושר על ידי מדידת web.dev של Google.
טכניקה להטמעת CSS קריטי
שלב 1: חילוץ סגנונות קריטיים
השתמשו בכלי critical (Node.js):
npm install -g critical critical https://example.com --width=1300 --height=900 \ --css=public/bitrix/templates/main/template_styles.css \ --inline \ --output=critical.css עבור תצוגת מובייל, הוסיפו ריצה שנייה עם פרמטרים npm install -g critical critical https://example.com --width=1300 --height=900 \ --css=public/bitrix/templates/main/template_styles.css \ --inline \ --output=critical.css . התוצאה המשולבת היא קובץ של 15–40 KB.
שלב 2: שילוב בתבנית Bitrix
בקובץ --width=375 --height=812 של התבנית:
<?php $criticalCss = file_get_contents(__DIR__ . '/critical.css'); ?> <style><?= $criticalCss ?></style> <link rel="preload" href="/local/templates/main/template_styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript> <link rel="stylesheet" href="/local/templates/main/template_styles.css"> </noscript> header.php עם מעבר דרך <?php $criticalCss = file_get_contents(__DIR__ . '/critical.css'); ?> <style><?= $criticalCss ?></style> <link rel="preload" href="/local/templates/main/template_styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript> <link rel="stylesheet" href="/local/templates/main/template_styles.css"> </noscript> הוא תבנית LoadCSS הסטנדרטית. rel="preload" as="style" הוא פתרון גיבוי לדפדפנים ללא JavaScript.
שלב 3: עבודה עם ממזג ה-CSS של Bitrix
אם הממזג מופעל (onload), הוא מיירט את הפלט של <noscript>. או השביתו אותו עבור קבצים מבוקרים:
define('BX_COMPOSITE_BUFFER_ON_CSS', false); או השתמשו באירוע BX_COMPOSITE_BUFFER_ON_CSS כדי להחליף תגי <link> חוסמים בתגים אסינכרוניים.
PurgeCSS ו-PostCSS: הפחתת CSS ב-60–80%
בפרויקטים עם Gulp או Webpack, הוסיפו:
const purgecss = require('@fullhuman/postcss-purgecss'); postcss([ purgecss({ content: ['./local/templates/**/*.php', './local/components/**/*.php'], defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [] }) ]) PurgeCSS מנתח תבניות PHP ומסיר כללים שאינם בשימוש. בערכות נושא של Bootstrap/Foundation, ה-CSS מתכווץ מ-250 KB ל-30–60 KB. שילוב של CSS קריטי מוטמע עם PurgeCSS נותן את התוצאה הטובה ביותר — לפי MDN, FCP יורד ב-1–2 שניות בממוצע.
מקרה מבחן: פורטל ארגוני על Bitrix24 (מהניסיון שלנו)
פורטל חברה עם כ-300 עובדים: הדף הראשי טען 7 קבצי CSS (480 KB). FCP ב-Lighthouse (Desktop, Fast 3G) — 4.2 שניות. המטרה הייתה להגיע ל-1.5 שניות ללא שינוי התבנית. המהנדס שלנו עם ניסיון של למעלה מ-5 שנים ביצע:
- הרצת
define('BX_COMPOSITE_BUFFER_ON_CSS', false);עבור הדף הראשי, מדור החדשות והמסמכים — שלוש קבוצות שונות של CSS קריטי. - ב-
OnEndBufferContent, הוספת לוגיקה לקביעת סוג הדף וטעינת ה-CSS המוטמע המתאים. - המרת קבצי CSS הנותרים ל-
<link>+ טעינה אסינכרונית. - PurgeCSS הסיר כ-60% מהכללים שאינם בשימוש מ-
const purgecss = require('@fullhuman/postcss-purgecss'); postcss([ purgecss({ content: ['./local/templates/**/*.php', './local/components/**/*.php'], defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [] }) ]).
תוצאה: FCP — 1.3 שניות, משקל CSS כולל "מעל לקפל" — 18 KB מוטמע, 90 KB הנותרים נטענים אסינכרונית לאחר הציור.
כיצד לאוטומט עדכוני CSS קריטי?
CSS קריטי דורש עדכון בכל שינוי עיצובי. שלבו בפריסה (deployment):
#!/bin/bash node ./scripts/generate-critical.js php artisan cache:clear הסקריפט critical (Puppeteer) מייצר CSS קריטי עבור רשימת דפים מרכזיים וכותב קבצים לתיקיית התבנית.
אבחון יעילות
ב-Chrome DevTools → Coverage (Shift+Ctrl+P → Coverage), ראו את אחוז ה-CSS שאינו בשימוש. ערך >70% במסך הראשון מצביע על צורך באופטימיזציה. ב-Lighthouse, המדד "Reduce unused CSS" מציג חיסכון פוטנציאלי ב-KB. אנו מבטיחים: לאחר האופטימיזציה שלנו, CSS שאינו בשימוש יורד ל-10–15%.
מה כולל השירות "מפתח-ביד"
| רכיב | פרטים |
|---|---|
| ביקורת CSS נוכחית | בדיקת Coverage, זיהוי קבצים חוסמי עיבוד |
| חילוץ CSS קריטי | עבור 3–5 דפים טיפוסיים עם viewports שונים |
| שילוב בתבנית | הטמעה ב-header.php, טעינה אסינכרונית של השאר |
| PurgeCSS (אופציונלי) | הגדרה ב-pipeline, הסרת כללים שאינם בשימוש |
| בדיקות | אימות FCP, LCP, CLS על מכשירים אמיתיים |
| תיעוד | הוראות לעדכון CSS קריטי בעת שינויים |
לוח זמנים ועלות
| היקף | תחום עבודה | משך |
|---|---|---|
| בסיסי | חילוץ CSS ידני + הטמעה ב-header.php | 2–3 ימים |
| בינוני | אוטומציה דרך critical + קישור אסינכרוני + פריסה | 4–6 ימים |
| מלא | PurgeCSS ב-build, מספר קבוצות CSS קריטי לסוגי דפים שונים, שילוב CI | 7–10 ימים |
דוגמת קוד ליצירת CSS קריטי דרך Puppeteer
const puppeteer = require('puppeteer'); const critical = require('critical'); async function generateCritical(url, cssPath, outputPath) { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto(url, { waitUntil: 'networkidle0' }); const css = await critical.generate({ inline: false, css: [cssPath], width: 1300, height: 900, }); require('fs').writeFileSync(outputPath, css); await browser.close(); } הזמינו אופטימיזציה של CSS קריטי לאתר Bitrix שלכם. המומחים המוסמכים שלנו (ניסיון של 5+ שנים, 50+ פרויקטים) יורידו את FCP ל-1.5 שניות. קבלו ייעוץ — כתבו לנו!