אם השתמשתם בעבר ב-Google PageSpeed Insights אז אני מניח שנתקלתם בשלב כזה או אחר בהערה המציינת כי עליכם "להסיר משאבים החוסמים עיבוד". בלעז הערה זו נקראת "Eliminate Render-Blocking Resources" והיא אחת ההודעות השכיחות בהן נתקלים ב-PSI.
בפוסט זה אסביר מהי אותה הערה ומה הכוונה במשאבים החוסמים עיבוד. אראה גם (כמובן) כיצד ניתן לטפל בהערה זו (לפחות את זו הרלוונטית ל-CSS) על ידי יצירת אותו CSS קריטי המוזכר בכותרת הפוסט.
מהו CSS קריטי (Critical CSS)?
CSS קריטי הוא קוד CSS המיושם עבור אלמנטים בחלקו העליון הקריטי של העמוד (Above the Fold). במילים אחרות, זהו ה-CSS שאחראי לכך שהתוכן בחלקו העליון הקריטי של העמוד יוצג כמה שיותר מהר עבור משתמש שנחת בעמוד כלשהו באתר שלכם.
אם אינכם יודעים, אותו חלק קריטי הוא החלק העליון בעמוד שאותו רואה המשתמש מיידית לפני שהוא מתחיל לגלול. לדוגמה, זה מה שאני רואה כשאני פותח את עמוד הבית ב-eBay:
כל האלמנטים המופיעים בתמונה זו נחשבים כתוכן של חלקו העליון הקריטי של העמוד, ומכאן שה-CSS שאחראי לעיצוב של אותם אלמנטים נחשב ל-CSS קריטי.
הנה דיאגרמה נוספת הממחישה את הרעיון של Above the Fold באתרים:
Above the Fold vs Below the Fold
אותו CSS קריטי אינו מוגדר באתר שלכם כברירת מחדל. עליכם לחלץ אותו באופן ידני או להיעזר בתוסף Cache או כלי כזה או אחר בכדי להגדיר אותו.
גם תוספי ה-Cache המייצרים את אותו CSS קריטי באופן אוטומטי דורשים לפעמים עזרה ידנית.
מדוע CSS קריטי משפר את מהירות הטעינה של העמוד?
דפדפנים חייבים לטעון, לפרוס ולהריץ את כל קבצי ה-CSS הקיימים בעמוד לפני שהם יכולים לרנדר (להציג) את העמוד. זו הסיבה ש-CSS (בדיוק כמו JavaScript) נחשב למשאב החוסם עיבוד כברירת מחדל.
כשקיימים חוקי CSS רבים בעמוד כלשהו אז אותו עמוד יסבול מביצועים פחות טובים. מערכות ניהול תוכן כגון וורדפרס טוענות מספר קבצי CSS במקביל כברירת מחדל ועל הדפדפן להוריד ולפרוס את כולם לפני שהוא מציג את העמוד – פעולה אשר לוקחת זמן מן הסתם ופוגעת בביצועי העמוד.
תנו מבט בתמונה הבאה (משמאל לימין) המראה תוך כמה זמן המשתמש רואה את התוכן בחלקו העליון הקריטי של המסך. איזה מהשניים "מרגיש" לכם מהיר יותר?
למעלה: טעינת העמוד עם משאבים חוסמים עיבוד.
למטה: טעינת העמוד לאחר חילוץ והטמעת ה-CSS הקריטי
אז כפי שאנו מבינים, טעינת CSS חיצוני עלולה לעכב את התוכן בחלקו העליון הקריטי מלהופיע עד לרגע שהדפדפן מרנדר את שאר העמוד, ולכן Google PageSpeed מציין באותה הערה כי עליכם להסיר משאבים החוסמים עיבוד.
לחוסר אופטימיזציה של ה-CSS מבחינה זו גם השפעה שלילית על ה-Perceived Performance, כלומר על תחושת הזמן שלוקח לעמוד להיטען מבחינת המשתמש, דבר העלול להוביל לאחוז נטישה גבוה יותר מכיוון שבני האדם בימינו הם חסרי סובלנות ורוצים שתספקו להם את המידע כמה שיותר מהר.
CSS קריטי משפיע ישירות על שני מדדי Core Web Vitals: Largest Contentful Paint (LCP) ו-First Contentful Paint (FCP). על ידי הטמעת הסגנונות הנדרשים לתוכן שמעל ל-fold, אתם מאפשרים לדפדפן לצבוע תוכן משמעותי מוקדם יותר, מה שמשפר את שני הציונים הללו.
שימו לב – אותו CSS קריטי נקרא בשמות אחרים כמו Optimize CSS Delivery, Critical Rendering Path או פשוט Rendering Path.
וזה כל הרעיון של אותו CSS קריטי
הוספת אותו CSS קריטי בתגית ה-<head> של HTML במקום בקובץ CSS חיצוני תעזור גם מבחינת זמן טעינת העמוד והציון ב-PageSpeed Insights וגם מבחינת אותו Perceived Performance שהזכרנו.
הנה רשימה קצרה של מה שתרוויחו עם שימוש נכון ב-CSS קריטי:
- הדפדפן לא ייאלץ לרנדר את כל העמוד לפני שהוא מציג את התוכן בחלקו העליון הקריטי של הדף.
- אותו CSS קריטי נגיש לדפדפן באופן מיידי מכיוון שאינו נמצא בקובץ CSS חיצוני.
- קובץ ה-CSS החיצוני המכיל את חוקי ה-CSS שאינם קריטיים ישקול פחות ותוכלו לטעון אותו באופן אסינכרוני.
- אתם משפרים את חווית המשתמש בכך שהגולשים באתר יוכלו לצפות בחלקו העליון והראשוני של העמוד באופן מיידי (יחסית).
אך לא הכל טוב ויפה. לצערנו ההגדרה של אותו CSS קריטי אינה פשוטה כפי שאולי גרמתי לכם לחשוב. אז לפני שנראה כיצד לחלץ ולהטמיע את אותו CSS קריטי, בואו נסביר מעט על אפשרויות ההטמעה של CSS באתרים.
אפשרויות ההטמעה של CSS
כפי שאתם בטח יודעים, ניתן להוסיף CSS לעמוד במספר דרכים, ושלושת הדרכים העיקריות הינן:
1. קובץ CSS חיצוני
CSS חיצוני הוא CSS הנמצא בקובץ כלשהו הנקרא stylesheet (או קובץ עיצוב). בכדי להשתמש באותו stylesheet עליכם להוסיף קישור לאותו קובץ בתגית ה-<head> של ה-HTML Markup כבדוגמה הבאה:
השימוש ב-CSS חיצוני הוא סטנדרטי וניתן אף לומר דיפולטיבי בעולם פיתוח האתרים. התחזוקה של CSS הנמצא בקובץ חיצוני היא פשוטה ונוחה יותר לעבודה, אך על הדפדפן להתחבר ולהוריד קובץ CSS זה לפני שיוכל לרנדר את העמוד.
2. Internal CSS
Internal CSS לעומת זאת ממוקם בתגית ה-<head> של העמוד בתוך תגית <style> כבדוגמה הבאה:
3. Inline CSS
קיים שוני בין Inline CSS ל-Internal CSS ורבים נוטים להתבלבל בין שני אלו. Inline CSS, או במילים אחרות Inline Styles הם אותן תכונות CSS המוטמעות ישירות בתגיות ה-HTML עצמן ורלוונטיות אך ורק לאותן תגיות ספציפיות. הקוד הבא יסביר זאת טוב ממני:
בהקשר של תחזוקת הקוד ונוחות עבודה השימוש בקובץ CSS חיצוני היא הנוחה ביותר כפי שציינו. עם זאת, ובהנחה שאתם יודעים מה אתם עושים אז השימוש ב-Internal CSS לחלקו העליון הקריטי של הדף ישפר את זמן טעינת העמוד ומכאן את חווית המשתמש. בואו נראה כיצד.
השימוש ב-Inline CSS אינו פרקטי ועדיף להימנע ממנו ולהשתמש כפי שציינו ב-Internal CSS עבור חלקו הקריטי העליון של העמוד. זה המקום לציין כי רבים הפוסטים ברשת ואף תוספי Cache למיניהם המתייחסים להטמעת Internal CSS בשם Inline CSS.
כיצד לחלץ את ה-CSS הקריטי
ניתן לחלץ את ה-CSS הקריטי של האתר בשתי דרכים. האחת באופן ידני, כלומר מעבר על ה-HTML של חלקו העליון הקריטי וחילוץ הגדרות ה-CSS של כל אחד מהאלמנטים הקיימים בחלק זה.
הדרך השנייה היא שימוש בתוספים כגון WP-Rocket, LiteSpeed Cache או NitroPack.
הגדרת ה-CSS הקריטי באופן ידני
כפי שהסברנו, הרעיון בגדול הוא לחלק את ה-CSS לשני חלקים – ה-CSS הקריטי וה-CSS שאינו קריטי. הדבר הראשון שעליכם לעשות הוא לעבור על כל אלמנט שנמצא בחלקו העליון הקריטי של העמוד ולהבין אילו חוקי CSS מיושמים לחלק זה.
עליכם יהיה לעשות פעולה זו לכל עמוד באתר שלכם. אך זה לא הכל. עליכם לקחת בחשבון את ה-Media Queries השונים וזאת מכיוון שאתרים רספונסיבים מיישמים בדרך כלל חוקי CSS אחרים בהתאם ל-Viewport של המכשיר בו המשתמש צופה באתר שלכם.
לדוגמה, הנה האתר של monday.com בדסקטופ ובמובייל:
ההבדל בין תצוגת מובייל לדסקטופ באתר monday.com
כפי שאתם רואים שתי הגרסאות בעלות אלמנטים שונים ונראות אחרת לגמרי. עליכם יהיה להגדיר את ה-CSS הקריטי עבור כל אחת מהגרסאות וייתכן אף לכל media query הקיים באתר.
כך או כך, כלי המפתחים של כרום יכול לעזור לכם בתהליך האנליזה ובמציאת חוקי ה-CSS הקריטיים של עמוד מסוים. גשו לעמוד שאתם רוצים לבדוק, לחצו על הכפתור הימני של העכבר ובחרו "Inspect".
לחיצה על "Escape" תפתח חלון עם הלשונית "Console", מימינה תמצאו מספר לשוניות כשאחת מהן נקראת "Coverage". אם אינכם רואים לשונית זו לחצו על שלוש הנקודות בצידו השמאלי העליון של אותו חלון שנפתח וסמנו את האפשרות "Coverage" בכדי לראות לשונית זו.
לחצו על כפתור ה-"Reload", ולאחר מספר שניות תקבלו דוח מפורט. אם תלחצו על אחד מקבצי ה-CSS תחת העמודה "URL", תמצאו שתחת העמודה "Usage Visualization" מופיע לכם גרף פשוט בשני צבעים.
הצבע האדום מייצג חוקי CSS שאינם קריטיים והצבע הירוק מייצג חוקי CSS קריטיים. כמו כן, תגלו שלחיצה על קובץ CSS מציגה עבורכם בלשונית "Sources" את כל חוקי ה-CSS המשויכים לקובץ זה ולצידם אחד מהצבעים, בהתאם כמובן לכך אם הוא חוק CSS הרלוונטי לחלקו העליון הקריטי של הדף או לא. זה נראה כך:
חוקי CSS קריטיים לחלקו העליון של הדף – לשונית Coverage
אז אותם חוקים המופיעים בירוק הם חוקים קריטיים. עליכם לחלץ אלו מקובץ ה-CSS המקורי ולהכניס אלו כ-Internal CSS בתגית ה-<head> של העמוד כפי שהסברנו קודם לכן.
שימו לב שעליכם לבצע זאת עבור כל אחד מקבצי ה-CSS שקיימים בעמוד.
אולי זה נראה לכם פשוט אבל האמת שזה דורש המון עבודה. אך אל ייאוש! ישנם כלים שיכולים לעזור לכם לעשות זאת במהירות יחסית.
שימוש בכלים שונים ליצירת ה-CSS הקריטי של העמוד
השימוש בכלים אוטומטיים יכול לחסוך לכם המון זמן בתהליך יצירת ה-CSS הקריטי. ישנם כלים שהדבר היחידי שהם עושים הוא לספק עבורכם את כל חוקי ה-CSS הקריטיים של העמוד לו אתם מבצעים אנליזה.
שימו לב שהדבר היחיד שכלים אלו עושים הוא לייצר את אותו CSS קריטי. הם לא מעלים את אותו CSS לאתר שלכם כך שאת פעולה זו תצטרכו לבצע בעצמכם.
לעומת זאת, ישנם כלים שמבצעים את כל התהליך מא' עד ת' עבורכם כמו NitroPack. ל-NitroPack יש תוכנית חינמית הכוללת יצירת CSS קריטי, לצד תוכניות בתשלום לאתרים עם תעבורה גבוהה יותר.
תוספי Cache לאתרי וורדפרס
אם האתר שלכם הוא אתר וורדפרס אז דעו שתוספי Cache פופולרים כמו WP-Rocket או LiteSpeed Cache גם כן מבצעים את כל התהליך עבורכם וביעילות רבה.
התוסף WP-Rocket למשל יצור עבורכם את חוקי ה-CSS הקריטיים באופן אוטומטי ויטען את ה-CSS שאינו קריטי באופן אסינכרוני בכדי שאותו CSS לא יחסום את העיבוד של חלקו העליון הקריטי ויפגע בביצועים. התוסף גם מציע פיצ'ר "Remove Unused CSS" שהולך צעד נוסף ומסיר חוקי CSS שאינם בשימוש בכל עמוד ספציפי, מה שמצמצם את גודל הקבצים עוד יותר.
התוסף אף מאפשר לכם להוסיף חוקי CSS באופן ידני בהנחה וקיימים חוקים כלשהם שהתוסף פספס מסיבה כזו או אחרת.
התוסף LiteSpeed Cache בו אני משתמש עבור אתר זה גם כן מאפשר לייצר את אותו CSS קריטי באופן אוטומטי עבור כל עמוד ועמוד. LiteSpeed Cache מציע גם פיצ'ר Unique CSS (UCSS) שיוצר קובץ CSS יחיד ומצומצם לכל עמוד, המכיל רק את ה-CSS הנדרש לרנדור של אותו עמוד ספציפי. בדקו את תוצאת Google PageSpeed עבור אתר זה אם בא לכם וראו את התוצאות בעצמכם.
שימו לב למלכודת נפוצה: אם ה-CSS הקריטי לא נוצר בצורה נכונה, המשתמשים עלולים לחוות Flash of Unstyled Content (FOUC) – רגע קצר בו העמוד מופיע ללא עיצוב לפני שה-CSS המלא נטען. בדקו תמיד את העמודים שלכם לאחר הפעלת CSS קריטי כדי לוודא שהתוכן שמעל ל-fold נראה כמו שצריך.
שאלות נפוצות
שאלות נפוצות בנושא CSS קריטי ומשאבים חוסמי עיבוד:
לסיכום
אני מקווה שהפוסט היה ברור ושהצלחתם לטפל באותה הערה המבקשת להסיר משאבים החוסמים עיבוד. שימו לב כי קבצי JavaScript גם כן נחשבים כמשאבים החוסמים עיבוד כפי שציינו במאמר. אתם מוזמנים לתת מבט בפוסט המדבר על עיכוב פריסת JavaScript למידע נוסף.
אגב אם החלטתם לעשות את תהליך יצירת ה-CSS הקריטי באופן ידני אז תמצאו בפוסטים הבאים מידע נוסף על כיצד לעשות אנליזה ואיך לעשות אופטימיזציה לאותו Critical Rendering Path.
ולפני שנסיים נציין כי יישום CSS קריטי אינו הפעולה היחידה שיש לבצע לטובת אופטימיזציה וחווית משתמש טובה יותר. תנו מבט בפוסט שכתבתי על Core Web Vitals בכדי לקבל מידע נוסף.
