כאשר קובצי CSS מאוגדים לקובץ אחד, גם לאחר tree-shaking, הוא עדיין מכיל הרבה CSS שאינו בשימוש בגלל הקשרים שונים של media@ (נייד, טאבלט, דסקטופ, ערכות נושא כהות/בהירות/אחרות וכו').
זה רע ל-Core Web Vitals: השהיית קלט ראשוני (FID), צביעת התוכן הגדולה ביותר (LCP), תזוזת פריסה מצטברת (CLS), כמו גם מדדי ביצועים ושימושיות חיוניים אחרים: צביעת התוכן הראשונה (FCP), זמן חסימה כולל (TBT), זמן לאינטראקטיביות (TTI), ואירוע DOMContentLoaded.
יש דרך לשפר משמעותית את הטעינה והרינדור של CSS על ידי הפרדת CSS לקבצים שונים, כאשר כל קובץ מכיל רק קוד הדרוש בהקשר הזה.
הפרידו את ה-CSS שלכם לקבצים שונים:
📄main.css - מכיל CSS הדרוש לכל תנאי ה-media@
📄screen.css - מכיל CSS הדרוש רק לתנאי ה-screen@ media
📄print.css - מכיל CSS הדרוש רק לתנאי ה-print@ media
📂breakpoints
📄x-small.css - מכיל CSS הדרוש רק לנקודת עצירה X-Small
📄sm.css - מכיל CSS הדרוש רק לנקודת עצירה Small
📄md.css - מכיל CSS הדרוש רק לנקודת עצירה Medium
📄lg.css - מכיל CSS הדרוש רק לנקודת עצירה Large
📄xl.css - מכיל CSS הדרוש רק לנקודת עצירה Extra large
📄xxl.css - מכיל CSS הדרוש רק לנקודת עצירה Extra extra large
📂themes
📄light.css - מכיל CSS הדרוש רק לערכת נושא בהירה
📄dark.css - מכיל CSS הדרוש רק לערכת נושא כההלאחר מכן, כללו קבצי CSS באופן הזה:
<link rel="stylesheet" href="main.css" media="all">
<link rel="stylesheet" href="screen.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="x-small.css" media="(max-width: 575px)">
<link rel="stylesheet" href="sm.css" media="(min-width: 576px)">
<link rel="stylesheet" href="md.css" media="(min-width: 768px)">
<link rel="stylesheet" href="lg.css" media="(min-width: 992px)">
<link rel="stylesheet" href="xl.css" media="(min-width: 1200px)">
<link rel="stylesheet" href="xxl.css" media="(min-width: 1400px)">
<link rel="stylesheet" href="light.css" media="(prefers-color-scheme: light)">
<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">בגישה זו, דפדפנים מודרניים נותנים עדיפות לטעינת CSS עבור תנאי ה-media@ הנוכחיים, כך שרינדור הדף מתחיל הרבה יותר מהר מכיוון שמשתמשים לא צריכים לחכות לטעינה של החלק הלא בשימוש של ה-CSS.
במקרים בהם יש לכם את כל ה-CSS מאוגד לקובץ אחד ואינכם מציינים תנאים במאפייני ה-media של תגי link, הדפדפן מחכה שכל מערך ה-CSS ייטען לפני שהוא מתחיל ברינדור הדף. מה שמוריד את מהירות רינדור הדף באופן דרסטי.
נקודות העצירה בדוגמה זו מבוססות על Bootstrap 5. גישה זו תהפוך לחשובה עוד יותר עבור Bootstrap בקרוב, בהתחשב בכך שהם יוסיפו תמיכה בערכות נושא בהירות/כהות/אחרות.
אם אתם רוצים להפוך את האינטרנט לטוב ומהיר יותר, אנא:
- שתפו את המאמר הזה,
- שלחו את המאמר הזה למפתחי המסגרות שבהן אתם משתמשים,
- יישמו את הפרדת ה-CSS הזו באתרים שלכם.
שתפו ברשתות חברתיות או שמרו למועד מאוחר יותר:
אם אתם רוצים לקרוא עוד על האופטימיזציה הזו ועל התנהגות הדפדפן, אנא עיינו בקישורים הבאים:
- המאמר "CSS מותאם מותנה. התנהגות דפדפן שעשויה לשפר את הביצועים שלכם" מאת Vadim Makeev. צילום המסך של שער המאמר הזה נלקח ממאמרו המצוין, שבו יש לו צילומי מסך וניסויים נוספים.
- MDN Web Docs: אופטימיזציית ביצועים של CSS.