Πώς λειτουργεί η συμπίεση CSS
Ο συμπιεστής διατρέχει το φύλλο στυλ σας με έναν tokeniser που γνωρίζει την κατάσταση και διακρίνει προστατευμένες περιοχές από επεξεργάσιμα κενά.
- Προστασία συμβολοσειρών και URLs. Πριν από οποιονδήποτε άλλο μετασχηματισμό, ο tokeniser αναγνωρίζει κάθε συμβολοσειρά και κάθε όρισμα url(…) και τα αποθηκεύει αυτούσια. Τα επόμενα περάσματα δεν αγγίζουν ποτέ αυτά τα bytes.
- Αφαίρεση σχολίων. Τα μπλοκ
/* … */αφαιρούνται όταν η επιλογή είναι ενεργή. Αν η επιλογή διατήρησης σχολίων άδειας είναι επίσης ενεργή, τα μπλοκ/*! … */επιβιώνουν. - Σύμπτυξη κενών. Κάθε ακολουθία κενών, στηλοθετών και νέων γραμμών συμπτύσσεται σε ένα μόνο κενό και στη συνέχεια τα κενά γύρω από τους δομικούς χαρακτήρες CSS
{,},;,:και,αφαιρούνται εντελώς. - Βελτιστοποίηση τιμών. Προαιρετικά περάσματα μετατρέπουν δεκαεξαδικά χρώματα σε πεζά, συμπτύσσουν ζευγαρωτά 6-ψήφια δεκαεξαδικά σε 3-ψήφια συντομογραφία και αφαιρούν μονάδες διαστάσεων από μηδενικές τιμές.
- Αναφορά εξοικονόμησης bytes. Τόσο το αρχικό όσο και το συμπιεσμένο κείμενο μετρώνται με
new TextEncoder().encode(…).byteLength, τον ίδιο αριθμό bytes UTF-8 που βλέπει ένα CDN ή HTTP διακομιστής.
Γιατί να συμπιέσετε CSS
- Ταχύτερη φόρτωση που μπλοκάρει την απόδοση. Τα προγράμματα περιήγησης δεν ζωγραφίζουν ούτε ένα pixel μέχρι να ολοκληρωθεί η ανάλυση του CSS. Μια μείωση 30% στο φύλλο στυλ συντομεύει αυτό το μπλοκάρισμα και βελτιώνει το First Contentful Paint.
- Χαμηλότεροι λογαριασμοί CDN. Το CloudFront, το Cloudflare και το Fastly χρεώνουν ανά gigabyte εξόδου. Η μείωση 20% σε ένα φύλλο στυλ που αποστέλλεται σε κάθε προβολή σελίδας γίνεται πραγματική γραμμή στον λογαριασμό.
- Μικρότερες ενσωματώσεις και CSS email. Τα πρότυπα συναλλακτικών email ενσωματώνουν το CSS τους και κάθε επιπλέον byte σας φέρνει πιο κοντά στο όριο των 102 KB του Gmail.
- Χωρίς εξάρτηση από εργαλεία δημιουργίας. Γρήγορες εργασίες, παλαιού τύπου αποθετήρια χωρίς αγωγό δημιουργίας και απομονωμένα περιβάλλοντα δεν έχουν πάντα χώρο για μια εργαλειοθήκη Node.
Κοινές εφαρμογές
Η συμπίεση CSS εμφανίζεται στο τέλος σχεδόν κάθε αγωγού δημιουργίας front-end.
- Αγωγοί δημιουργίας παραγωγής: Webpack, Vite, Rollup και Parcel περιλαμβάνουν βήμα συμπίεσης CSS στα προεπιλεγμένα προφίλ παραγωγής τους.
- Ενσωμάτωση CSS σε ετικέτες
<style>: πλαίσια που ενσωματώνουν κρίσιμο CSS στο HTML έγγραφο επωφελούνται από την ίδια εξοικονόμηση bytes. - Συναλλακτικά και μάρκετινγκ email: το HTML email ενσωματώνει όλο το CSS, οπότε κάθε kilobyte στο φύλλο στυλ προστίθεται στο συνολικό μέγεθος μηνύματος.
Ένα παράδειγμα
Επικολλήστε ένα σύνολο κανόνων 1 KB με εσοχή δύο κενών, κενές γραμμές μεταξύ επιλογέων, μπλοκ σχολίου άδειας στην κορυφή και περιττά δεκαεξαδικά χρώματα. Με κάθε επιλογή ενεργή, η έξοδος συμπτύσσεται σε περίπου 600 bytes — εξοικονόμηση 40%.
Αλλάζει η συμπίεση τη συμπεριφορά του CSS μου;
Όχι, με τις προεπιλεγμένες ρυθμίσεις. Ο συμπιεστής αφαιρεί μόνο bytes που ο αναλυτής CSS ήδη απορρίπτει — κενά, σχόλια, το προαιρετικό τελικό ερωτηματικό.
Λειτουργεί με SCSS ή LESS;
Μόνο αφού τα μεταγλωττίσετε σε απλό CSS. Η σύνταξη SCSS και LESS δεν είναι έγκυρο CSS και ο συμπιεστής θα την καταστρέψει.
Γιατί αφαιρούνται τα σχόλια άδειας μου;
Η «Αφαίρεση σχολίων» είναι ενεργή από προεπιλογή και καθαρίζει κάθε μπλοκ /* … */. Ενεργοποιήστε τη «Διατήρηση σχολίων άδειας /*!» για να διατηρηθούν τα μπλοκ που αρχίζουν με /*!.
Πόσα μπορώ να εξοικονομήσω;
Το χειροποίητο CSS συνήθως μειώνεται κατά 15 έως 35%. Αρχεία με πολλά σχόλια ή βαθιά εσοχή μπορούν να φτάσουν το 40%.
Εκτελέστε συμπίεση CSS σε μια καρτέλα προγράμματος περιήγησης και παρακάμπτετε εντελώς την εργαλειοθήκη Node. Επικολλήστε το φύλλο στυλ παραπάνω, ρυθμίστε τις επιλογές και αντιγράψτε ή κατεβάστε την έξοδο.