Critical CSS הוא קוד העיצוב המינימלי שהדפדפן צריך כדי להציג את המסך הראשון של העמוד. במקום לחכות לכל קובצי העיצוב של האתר, הדפדפן מקבל את המעט הזה בתוך העמוד עצמו ומציג תוכן מיד. כאן אני מסביר איך זה עובד, מה הגישה שבחרתי באתר הזה ומה המחיר שלה.
אל תתנו למהירות לעכב אתכם. השאירו פרטים לשדרוג האתר.
למה קובצי עיצוב מעכבים את העמוד
דפדפן לא מציג שום דבר עד שהוא מוריד ומעבד את כל קובצי העיצוב שבראש העמוד. התיעוד של Lighthouse מכנה אותם משאבים חוסמים. באתר וורדפרס עם בונה עמודים ותוספים, אלה יכולים להיות עשרות קבצים, וכל אחד מהם מוסיף זמן עד שהגולש רואה משהו.
הבעיה חריפה במיוחד בטלפון, שבו כל קובץ דורש בקשה נוספת ברשת איטית יחסית. העמוד עצמו כבר הגיע, הטקסט כבר שם, והגולש עדיין מסתכל על מסך לבן כי קובץ עיצוב של תוסף שלא קשור למסך הראשון עוד לא ירד.
איך Critical CSS פותר את זה
מפרידים את העיצוב לשני חלקים. החלק שנדרש למסך הראשון מוטמע בתוך קוד העמוד, ולכן מגיע יחד איתו בלי בקשה נוספת. כל השאר נטען אחר כך, בלי לחסום את ההצגה. לפי web.dev, כדאי שהחלק המוטמע יהיה קטן, כדי שייכנס בסבב הראשון של הנתונים מהשרת.
ההפרדה של Critical CSS נעשית בכלי אוטומטי שטוען את העמוד, בודק אילו כללי עיצוב משמשים את המסך הראשון ומוציא אותם. בוורדפרס עושים את זה תוספי מהירות כמו Perfmatters ו WP Rocket, בלי לכתוב קוד.
מה עשיתי באתר הזה
באתר הזה בחרתי בגישה קרובה: Perfmatters בונה לכל עמוד קובץ עיצוב רק עם הכללים שהעמוד באמת משתמש בהם, ומטמיע אותו בתוך העמוד. בדף הבית אין אף קובץ עיצוב חוסם, וכל העיצוב, כ-225 קילובייט, מגיע בתוך העמוד עצמו.
היתרון הוא שאין בקשה נוספת לפני ההצגה. המחיר הוא שקוד העמוד שוקל כ-430 קילובייט לפני דחיסה, והעיצוב לא נשמר בדפדפן בין עמודים. לפני שניקיתי את רשימת החריגות של התוסף, החלק המוטמע הגיע ל-413 קילובייט. זה ההבדל בין Critical CSS אמיתי, שמטמיע רק את המסך הראשון, לבין הטמעה של כל מה שהעמוד צריך.
טעויות נפוצות
מסך ראשון שנראה שבור לרגע
אם הכלי פספס כלל עיצוב שנדרש למסך הראשון, הגולש רואה לרגע עמוד בלי עיצוב, ואז הכל קופץ למקום. זה קורה בעיקר עם תפריטים, סליידרים ואלמנטים שמופיעים רק בטלפון. בודקים את המסך הראשון בטלפון ובמחשב אחרי כל שינוי.
קוד מוטמע ענק
כשמטמיעים יותר מדי, העמוד עצמו נהיה כבד ונטען לאט יותר. רשימת חריגות רחבה מדי בתוסף היא הסיבה הנפוצה, וזו בדיוק אחת התקלות שמצאתי באתר הזה. כדאי לבדוק כמה שוקל העיצוב המוטמע, ולצמצם כללים רחבים שמשאירים בפנים כמעט הכל.
עיצוב שלא מתעדכן
אחרי שינוי עיצובי באתר, הקובץ שנוצר מראש לא תמיד מתעדכן לבד. אם שינוי לא מופיע באתר, מנקים את המטמון של תוסף המהירות ואת קובצי העיצוב שהוא יצר, ובודקים שוב.
שאלות ותשובות על עיצוב קריטי
האם עיצוב מוטמע משפר את הציון ב PageSpeed?
בדרך כלל כן, כי הוא מקצר את ההופעה הראשונה ואת הופעת התוכן הראשי, ומעלים את האזהרה על משאבים חוסמים. השיפור גדול יותר באתרים עם הרבה קובצי עיצוב חיצוניים.
האם אפשר לכתוב אותו ידנית?
אפשר, אבל באתר וורדפרס זה לא מעשי. כל עמוד שונה, וכל שינוי בעיצוב מחייב לכתוב מחדש. כלי אוטומטי בתוך תוסף המהירות עושה את זה לכל עמוד ומתעדכן לבד.
מה ההבדל בינו לבין הסרת עיצוב שלא בשימוש?
עיצוב קריטי מפריד בין המסך הראשון לשאר. הסרת עיצוב שלא בשימוש מוחקת כללים שהעמוד לא משתמש בהם בכלל. הרבה תוספים משלבים את שתי השיטות, וזה מה שקורה באתר הזה.
האם זה עובד עם אלמנטור?
כן, אבל צריך לבדוק היטב. אלמנטור טוען הרבה עיצוב לכל ווידג'ט, ותפריטים או חלונות קופצים שמופיעים רק אחרי לחיצה עלולים לאבד את העיצוב שלהם אם הכלי לא זיהה אותם.
הצעד הבא
האתר שלכם מציג מסך לבן לפני שהתוכן מופיע? שלחו לי את הכתובת. אבדוק אילו קובצי עיצוב חוסמים את ההצגה, כמה שוקל העיצוב המוטמע, ומה ההגדרה שתתאים לאתר שלכם.
