Όταν τα CSS συγκεντρώνονται σε ένα μόνο αρχείο, ακόμη και μετά το tree-shaking, εξακολουθεί να περιέχει πολλά αχρησιμοποίητα CSS λόγω διαφορετικών πλαισίων @media (κινητά, tablet, desktop, σκούρα/ανοιχτά/άλλα θέματα κ.λπ.).
Είναι επιζήμιο για τα Core Web Vitals: First Input Delay (FID), Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), καθώς και άλλες ζωτικής σημασίας μετρήσεις απόδοσης και χρηστικότητας: First Contentful Paint (FCP), Total Blocking Time (TBT), Time to Interactive (TTI) και το συμβάν DOMContentLoaded.
Υπάρχει ένας τρόπος να βελτιώσετε σημαντικά τη φόρτωση και την απόδοση των CSS διαχωρίζοντας τα CSS σε διαφορετικά αρχεία, όπου κάθε αρχείο περιέχει μόνο τον κώδικα που χρειάζεται σε αυτό το πλαίσιο.
Διαχωρίστε τα CSS σας σε διαφορετικά αρχεία:
📄main.css - περιέχει CSS που απαιτούνται για όλες τις συνθήκες @media
📄screen.css - περιέχει CSS που απαιτούνται μόνο για τη συνθήκη @media οθόνης
📄print.css - περιέχει CSS που απαιτούνται μόνο για τη συνθήκη @media εκτύπωσης
📂breakpoints
📄x-small.css - περιέχει CSS που απαιτούνται μόνο για το breakpoint X-Small
📄sm.css - περιέχει CSS που απαιτούνται μόνο για το breakpoint Small
📄md.css - περιέχει CSS που απαιτούνται μόνο για το breakpoint Medium
📄lg.css - περιέχει CSS που απαιτούνται μόνο για το breakpoint Large
📄xl.css - περιέχει CSS που απαιτούνται μόνο για το breakpoint Extra large
📄xxl.css - περιέχει CSS που απαιτούνται μόνο για το breakpoint 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)">Με αυτήν την προσέγγιση, οι σύγχρονοι browsers δίνουν προτεραιότητα στη φόρτωση CSS για τις τρέχουσες συνθήκες @media, επομένως η απόδοση της σελίδας ξεκινά πολύ πιο γρήγορα επειδή οι χρήστες δεν χρειάζεται να περιμένουν τη φόρτωση του αχρησιμοποίητου τμήματος των CSS.
Σε περιπτώσεις όπου έχετε συγκεντρώσει όλα τα CSS σε ένα αρχείο και δεν καθορίζετε συνθήκες στα χαρακτηριστικά media των ετικετών link, ο browser περιμένει να φορτωθεί ολόκληρο το σύνολο των CSS πριν ξεκινήσει η απόδοση της σελίδας. Κάτι που επιβραδύνει δραματικά την απόδοση της σελίδας.
Τα Breakpoints σε αυτό το παράδειγμα βασίζονται στο Bootstrap 5. Αυτή η προσέγγιση θα γίνει ακόμη πιο σημαντική για το Bootstrap σύντομα δεδομένου ότι θα προσθέσουν υποστήριξη για ανοιχτά/σκούρα/άλλα θέματα.
Εάν θέλετε να κάνετε τον ιστό καλύτερο και πιο γρήγορο, παρακαλώ:
- μοιραστείτε αυτό το άρθρο,
- στείλτε αυτό το άρθρο στους προγραμματιστές των frameworks που χρησιμοποιείτε,
- εφαρμόστε αυτόν τον διαχωρισμό CSS στους ιστότοπούς σας.
Μοιραστείτε στα μέσα κοινωνικής δικτύωσης ή αποθηκεύστε για αργότερα:
Εάν θέλετε να διαβάσετε περισσότερα για αυτήν τη βελτιστοποίηση και τη συμπεριφορά του browser, δείτε τα ακόλουθα:
- Το άρθρο “Conditionally adaptive CSS. Browser behavior that might improve your performance” από τον Vadim Makeev. Το στιγμιότυπο οθόνης εξωφύλλου για αυτό το άρθρο προέρχεται από το εξαιρετικό άρθρο του, όπου έχει περισσότερα στιγμιότυπα οθόνης και πειράματα.
- MDN Web Docs: Βελτιστοποίηση απόδοσης CSS.