שיפור מהירות אתר וורדפרס עם Critical CSS

אחד הדברים החשובים כשמדברים על שיפור מהירות אתר וורדפרס וביצועים באתרים באופן כללי הוא מהירות התצוגה של החלק הראשון באתר שהמשתמש רואה. או כמו שגוגל מכנים זאת – FCP – First Contentful Paint. דבר נוסף בהקשר זה הוא LCP – Largest Contentful Paint.

ההיגיון מאחורי זה הוא רושם ראשוני ונוחות של הגולש בעת כניסה לאתר, ולגוגל זה מה שחשוב. גם אם מדובר בדף עמוס ו"שמן" אם נצליח לגרום לתצוגה הראשונית להופיע מהר מצבנו בסדר. כמובן שברקע נמשיך לטעון את הדף הגדול שלנו אבל העיקר שהגולש יכול כבר להתחיל להשתמש באתר.

כמה זה מהר? על פי גוגל אלו המספרים

מה זה Critical CSS

באתר סטנדרטי יש קבצי CSS שעל הדפדפן להוריד ולנתח לפני שהוא יכול לרנדר את הדף המבוקש. דבר זה גורם לחסימת רינדור מה שגורם לאיטיות בטעינת הדף ולאתר איטי. מכירים את זה שגוגל ממליץ לכם "הימנעו ממשאבים שחוסמים רינדור"? זו בדיוק הכוונה. הדף לא יוכל להיות מוצג בצורה תקינה לפני שכל הפעולות על ה CSS יושלמו (נזכיר פה שהבעיה קיימת גם ב JS כמובן ושם הפתרון אחר אבל במאמר זה אנחנו מדברים רק על CSS. לגבי JS ודברים נוספים כנסו למאמר הכללי על שיפור מהירות בוורדפרס).

פתרון נאיבי אבל גרוע הוא לומר מה אני צריך CSS כבר בהתחלה? בואו נראה את הדף קודם ואז נוריד CSS ונעדכן את המראה שלו. אבל זה כמובן לא מתקבל על הדעת. מי שלא מבין למה, שינסה לעשות את זה ולראות איך הדף שלו יראה. חווית גלישה כזו היא מהגרועות שיש והתוצאה היא מה שנקר FOUC. לרוב זה גם יגרום ל CLS וגוגל מודדים את זה.

אבל יש עוד פתרון. אם נחשוב על זה החסימה הזאת ברינדור הדף לא לגמרי מוצדקת. אם יש לי דף עם המון CSS (שאגב עוד בעיה שהרבה פעמים במיוחד מי שמשתמש בתבניות לא רזות או בבוני אתרים יקבל CSS מנופח הרבה מעבר לצורך של דף ספציפי וגם על זה אני מדבר במאמר על שיפור ביצועים בוורדפרס) אבל בשביל לראות את התוכן בראש העמוד נדרש ממש קצת CSS, כי יש שם רק כותרת, פסקת טקסט ותמונה נניח, למה לחכות להורדה ופרסור של כל ה CSS? מספיק לי חלק מזערי ממנו. וזה בדיוק Critical CSS!

הרעיון הוא ליצור CSS כזה אותו נכניס בהדר והוא יהיה הכי מינאמלי בשביל תצוגה מקסימלית. כלומר חשוב לנו שיהיה המינימום הדרוש כדי להציג את התוכן הראשוני בצורה תקינה. אותו חלק ראשון של הדף שהגושלים רואים ברגע שנכנסו לאתר לפני שהתחילו לגלול את העמוד. תוכן זה נקרא גם above the fold. את שאר ה CSS נטען בצורה שלא תחסום רינדור.

אתגרים ביצירת Critical CSS

כמו שהבנו, אנחנו אמורים לזהות את מה ה CSS שדרוש לראש האתר. אבל איך עושים את זה?

אם אנחנו בונים אתר מאפס ויודעים בדיוק איזה CSS דרוש למה ולא ממשתמשים בתבניות חיצוניות זה עוד אפשרי לעשות את זה ידנית. אבל אם אנחנו משתמשים בתבניות ותוספים שונים ובטח אם התבנית גדולה או אם משתמשים בבונה אתרים, לעשות את הפעולה הזאת ידנית זוהי עבודה קשה מאוד (אפשר לעבוד בשיטת אלימינציה או כמו חיפוש בינארי עד שמגיעים למצב שהעמוד נראה טוב אבל זה לא כיף). לכן יש כל מיני כלים שנותנים אפשרות לעשות את זה.

אבל יש אתגרים שצריך לקחת בחשבון:

• לא כל עמוד באתר צריך את אותו CSS בשביל להציג בצורה תקינה את ההתחלה שלו
• כל עמוד יכול להיות מוצג במכשירים שונים בצורה אחרת, לדוגמה, מחשב, טאבלט וטלפון נייד

ניתן לפתור בעיות אלו באמצעות יצירת Critical CSS לכל עמוד בנפרד ובנוסף לכל מכשיר בנפרד.

מתי ליצור Critical CSS

לפי מה שהסברנו עד עכשיו התשובה צריכה להיות ברורה, תמיד ניצור כדי לקבל מהירות טעינה טובה יותר. אבל האמת שלא כל כך בטוח. ליצירת Critical CSS יש גם בעיות ואם נוכל להסתדר בלעדי זה, מה טוב.
למה אני מתכוון:

• Critical CSS עלול לשבור את תצוגת האתר. כמו שהסברתי זה לא תמיד פשוט ליצור אותו ולפעמים, במיוחד באתרים עם המון CSS, יצירה שלו תגרום לאתר להיות מוצג לא טוב.
• צריך לזכור שאנחנו מכניסים את ה Critical CSS בהדר (נקרא גם inline), מה שאומר שגדול דף ה html שנוריד יגדל בהתאם. עכשיו אם האתר שלנו לא מפוצץ ב CSS כנראה לא נוסיף הרבה אוברהד (אבל גם אז היתרון של Critical CSS יהיה פחות משמעותי) אבל באתר עם הרבה CSS יכול להיות שנגיע לגדול דף גדול מדי. שימו לב שאם הבקשה הראשונית שלנו (שהיא דף ה html במקרה הזה) תהיה מעל 14.6kb (אחרי כיווץ) נצטרך לבצע קריאה נוספת. (כך זה עובד שבחיבור TCP חדש השליחה הראשונה תהיה של מקסימום 10 פקטות שהם בערך 14kb).
• בעיה נוספת שנגרמת בגלל ה inline היא שאין קאש ל CSS הזה. קבצי CSS כמו שאר הקבצים הסטטים שלכם מוגשים מהקאש ונשמרים בקאש של הדפדן. לעומת זאת דף ה HTML לא. לכן ה Critical CSS שלנו לא יהיה בקאש. (יש אפשרות שגם דף ה HTML עצמו יגיע מקאש אבל זה נושא אחר).
• דבר נוסף הוא הצורך ביצירת Critical CSS מחדש בכל פעם שמשהו השתנה בדף. אם עושים את זה באמצעות כלים ברשת, זה אומר לזכור לעשות שוב בעצמנו ולהדביק בהדר מחדש. אם עושים באמצעות תוסף קאש, זה אומר שיקח לקאש יותר זמן ומשאבים ליצור את הקאש לדף.

בנוסף לבעיות שהעליתי יש עוד סיבה למה לא חובה לעשות זאת לכל דף באתר. משום שברגע שמשתמש הגיע לדף באתר שהוא דף הכניסה שלכם (דף הבית, דף נחיתה או דף אחר), רוב הסיכויים שכל קבצי ה css כבר יהיו לו בקאש ולכן לא יצטרכו להורידם מחדש מה שיחסוך את הזמן הזה לפחות. בנוסף ניתן להתמש בפיצ'ר של pre load pages שיגרום לשאר הדפים להיטען ברקע כך שברגע שנכנסו לדף הזה והוא כן נטכן מהר, שאר הדפים יטענו מהר גם הם גם ללא Critical CSS.

לכן ההמלצה היא לעשות בזהירות. הדפים החשובים ביותר באתר שצריכים את זה הם דף הבית ואם יש לכם דף נחיתה כלשהו. משום שלדפים אלה משתמשים לרוב יגיעו פעם ראשונה. כמובן שחוק זה נכון גם לדפים אחרים חשובים שיש לכם באתר וכל אתר מכיר את צרכיו. לשאר הדפים, ההחלטה שלכם.

איך יוצרים Critical CSS

האמת שכבר הזכרתי את זה בדרך אגב אבל נכתוב את זה ברור יותר. אם נדלג על האפשרות ליצירה ידנית נשארנו עם שתי אפשרויות.

1. באמצעות כלים ברשת
2. באמצעות תוסף (בדרך כלל תוסף קאש)

כלים ברשת הכוונה לאתרים כמו Sitelocity, Pagesaas או באתר של Jonas Sebastian Ohlsson. בשיטה זו אתם יוצרים את ה Critical CSS לעמוד ואז אתם צריכים לעשות 2 דברים חשובים.

1. להוסיף את ה Critical CSS להדר.
2. לעשות defer לשאר קבצי ה CSS.

את הדברים האלה תוכלו לעשות בעצמכם או להשתמש בתוספים כמו Autoptimize ואחרים.

אפשרות נוספת היא כאמור באמצעות תוסף. תוספי קאש כמו WP-Rocket, Swift Performance ונוספים נותנים את האפשרות לייצר Critical CSS באופן אוטומטי. בחלק מתוספים אלה יש גם אפשרויות מתקדמות כמו את מה להחריג, את מה לכלול בכל מקרה וכו'.

סיכום

Critical CSS הוא נדבך חשוב בהאצת מהירות טעינה של האתר שלכם. דבר זה יתן לכם ציונים טובים יותר במדדי מהירות של גוגל וכמו כן ישפר את חווית הגלישה באתר שלכם.

הדרך הקלה ביותר להשיג את זה היא באמצעות שימוש בתוסף. המומלצים שלי הם WP-Rocket או Swift Performance. (השימוש ב WP-Rocket פשוט יותר ומבחינת יכולות הם שווים בערך).