Δωρεάν Συμπιεστής CSS: Συμπίεση & Βελτιστοποίηση CSS Κώδικα Online

Τι είναι ένα εργαλείο ελαχιστοποίησης CSS;

Ένα εργαλείο ελαχιστοποίησης CSS (CSS minifier) είναι ένα εργαλείο που συρρικνώνει ένα αρχείο CSS (Cascading Style Sheets) αφαιρώντας χαρακτήρες που δεν χρειάζονται οι browsers. Αφαιρεί σχόλια, επιπλέον κενά και αλλαγές γραμμής, και συντομεύει μερικά συνηθισμένα μοτίβα, χωρίς να αλλάζει το πώς εμφανίζεται η σελίδα. Το αποτέλεσμα είναι ένα μικρότερο αρχείο που ένας browser μπορεί να κατεβάσει και να επεξεργαστεί πιο γρήγορα.

Πώς λειτουργεί η ελαχιστοποίηση CSS

Οι προγραμματιστές ιστού γράφουν CSS με σχόλια, εσοχές και κενές γραμμές επειδή αυτά κάνουν τον κώδικα πιο εύκολο στην ανάγνωση και την επεξεργασία. Οι browsers αγνοούν εντελώς αυτή τη μορφοποίηση. Ένα εργαλείο ελαχιστοποίησης τη διαγράφει, μαζί με μερικά ακόμη bytes που δεν εξυπηρετούν κανέναν οπτικό σκοπό, και αφήνει ένα συμπαγές αρχείο προορισμένο για χρήση σε παραγωγή και όχι για επεξεργασία.

Αυτό το εργαλείο εφαρμόζει τις εξής αλλαγές:

• Αφαιρεί τα σχόλια. Κάθε μπλοκ /* ... */ διαγράφεται.
• Συμπτύσσει τα κενά διαστήματα. Ακολουθίες κενών, στηλοθετών (tabs) και αλλαγών γραμμής μεταξύ κανόνων μειώνονται στο τίποτα, ή σε ένα μόνο κενό όπου ένα κενό έχει νόημα (για παράδειγμα, μεταξύ .parent και .child σε έναν επιλογέα απογόνου).
• Αφαιρεί τα κενά γύρω από τα σημεία στίξης. Τα κενά δίπλα στα {, }, :, ; και , αφαιρούνται.
• Αφαιρεί τα περιττά ερωτηματικά. Επαναλαμβανόμενα ερωτηματικά συμπτύσσονται σε ένα, και το τελευταίο ερωτηματικό πριν από ένα κλείσιμο } παραλείπεται.
• Συντομεύει τα δεκαεξαδικά χρώματα. Ένα εξαψήφιο χρώμα όπως #ffffff γίνεται #fff όταν κάθε ζεύγος ψηφίων ταιριάζει (κόκκινο, πράσινο και μπλε). Ένα οκταψήφιο χρώμα με άλφα, όπως το #ffaa00cc, συντομεύεται με τον ίδιο τρόπο όταν και τα τέσσερα ζεύγη ταιριάζουν.
• Αφαιρεί τη μονάδα από τιμές μηδενικού μήκους. Τα 0px, 0em και 0rem γίνονται 0. Οι τιμές ποσοστού παραμένουν ανέπαφες, επειδή το 0% δεν είναι πάντα εναλλάξιμο με το απλό 0 (για παράδειγμα, σε ένα flex-basis ή σε ένα βήμα @keyframes).
• Αφαιρεί το αρχικό μηδενικό από δεκαδικούς αριθμούς. Το 0.5 γίνεται .5.

Για να αποφευχθεί η αλλοίωση του αρχείου, το εργαλείο αφήνει τρία είδη περιεχομένου ανέπαφα: το κείμενο μέσα σε εισαγωγικά, την τιμή μέσα σε ένα url() χωρίς εισαγωγικά, και το περιεχόμενο μαθηματικών συναρτήσεων όπως οι calc(), clamp(), min() και max(). Τα κενά μέσα στο calc(100% - 20px) έχουν σημασία για τον browser, οπότε το εργαλείο τα διατηρεί ακριβώς όπως είναι.

Το εργαλείο δεν συγχωνεύει διπλότυπους επιλογείς, δεν διαγράφει κενά μπλοκ κανόνων και δεν μετατρέπει χρώματα rgb() σε δεκαεξαδικά. Αυτές είναι έγκυρες βελτιστοποιήσεις που εκτελούν άλλα εργαλεία, αλλά αυτό το εργαλείο ελαχιστοποίησης εστιάζει στις αλλαγές που αναφέρονται παραπάνω.

Ο τύπος του ποσοστού μείωσης

Το εργαλείο αναφέρει πόσο μικρότερο έγινε το αρχείο ως ποσοστό:

Και τα δύο μήκη μετρώνται σε χαρακτήρες. Το αποτέλεσμα στρογγυλοποιείται σε δύο δεκαδικά ψηφία.

Λυμένο παράδειγμα

Αρχικό CSS (193 χαρακτήρες):

Ελαχιστοποιημένη έξοδος (129 χαρακτήρες):

Εφαρμόζοντας τον τύπο: (193 − 129) / 193 × 100 = 33,16%. Το σχόλιο έχει φύγει, οι εσοχές και οι αλλαγές γραμμής έχουν φύγει, το 0px έγινε 0, και τα #ffffff/#000000 έγιναν #fff/#000.

Το ακριβές ποσοστό εξαρτάται από την είσοδο. Αυστηρά γραμμένο CSS με λίγα σχόλια συρρικνώνεται λιγότερο. Έντονα σχολιασμένο CSS με βαθιές εσοχές μπορεί να συρρικνωθεί περισσότερο. Τυπικά φύλλα στυλ που ελαχιστοποιούνται με αυτό το εργαλείο παρουσιάζουν μείωση περίπου 20% έως 40%.

Πώς να χρησιμοποιήσετε αυτό το εργαλείο

1. Επικολλήστε κώδικα CSS στο πλαίσιο εισαγωγής στα αριστερά.
2. Η ελαχιστοποιημένη έκδοση εμφανίζεται αυτόματα στα δεξιά, χωρίς κουμπί για πάτημα.
3. Ελέγξτε το ποσοστό μείωσης που εμφανίζεται πάνω από την έξοδο.
4. Επιλέξτε «Αντιγραφή στο πρόχειρο» για να αντιγράψετε το ελαχιστοποιημένο CSS, και έπειτα επικολλήστε το σε ένα αρχείο του έργου.
5. Επιλέξτε «Καθαρισμός» για να διαγράψετε και τα δύο πλαίσια και να ξεκινήσετε από την αρχή.

Τίποτα από όσα πληκτρολογούνται στο εργαλείο δεν αποστέλλεται σε διακομιστή· η ελαχιστοποίηση εκτελείται στον browser.

Πότε να ελαχιστοποιείτε CSS

Οι ομάδες ανάπτυξης συνήθως ελαχιστοποιούν CSS ως βήμα στη διαδικασία δημιουργίας (build), χρησιμοποιώντας εργαλεία όπως το Webpack ή scripts npm, ώστε η αλλαγή να γίνεται αυτόματα πριν από κάθε ανάπτυξη (deployment). Το ευανάγνωστο, σχολιασμένο πηγαίο αρχείο παραμένει στο σύστημα διαχείρισης εκδόσεων· μόνο η έκδοση παραγωγής ελαχιστοποιείται. Συνηθισμένα σημεία όπου χρησιμοποιείται ελαχιστοποιημένο CSS περιλαμβάνουν:

• Μεγάλες ιστοσελίδες, όπως ηλεκτρονικά καταστήματα, όπου ένα μικρότερο φύλλο στυλ σημαίνει ταχύτερη φόρτωση σελίδας.
• Εφαρμογές μίας σελίδας (single-page applications) χτισμένες με frameworks όπως το React ή το Vue, όπου το CSS συσκευάζεται μαζί με το JavaScript.
• Σελίδες κινητού ιστού, όπου οι χρήστες είναι πιο πιθανό να έχουν πιο αργή σύνδεση.
• Emails HTML, τα οποία συχνά έχουν αυστηρά όρια μεγέθους.

Ελαχιστοποίηση CSS και ταχύτητα σελίδας

Ένα μικρότερο αρχείο CSS κατεβαίνει και επεξεργάζεται πιο γρήγορα, κάτι που μπορεί να μειώσει τον χρόνο μέχρι μια σελίδα να γίνει ορατή. Η Google έχει δηλώσει ότι η ταχύτητα σελίδας είναι ένα από τα σήματα που χρησιμοποιούνται στην κατάταξη αναζήτησης, οπότε μια ταχύτερη σελίδα μπορεί να είναι ένας μικρός παράγοντας ανάμεσα σε πολλούς για το πώς αποδίδει μια ιστοσελίδα στα αποτελέσματα αναζήτησης. Η ελαχιστοποίηση από μόνη της δεν εγγυάται αλλαγή στην κατάταξη· είναι μία βελτιστοποίηση ανάμεσα σε αρκετές, μαζί με τη συμπίεση εικόνων και τον χρόνο απόκρισης του διακομιστή.

Εργαλείο ελαχιστοποίησης CSS εναντίον εργαλείου μορφοποίησης CSS

Ένα εργαλείο ελαχιστοποίησης συμπιέζει κώδικα για παραγωγή. Ένα εργαλείο μορφοποίησης (beautifier) κάνει το αντίθετο: παίρνει συμπιεσμένο CSS και το αναδιαμορφώνει με εσοχές και αλλαγές γραμμής ώστε ένα άτομο να μπορεί να το διαβάσει ξανά. Ένα εργαλείο μορφοποίησης δεν μπορεί να επαναφέρει σχόλια ή τα αρχικά ονόματα μεταβλητών που αφαιρέθηκαν κατά την ελαχιστοποίηση, επειδή αυτή η πληροφορία χάνεται μόλις διαγραφεί.

Συχνές ερωτήσεις

Πόσο μικρότερο γίνεται το CSS μετά την ελαχιστοποίηση; Με αυτό το εργαλείο, συνήθως 20% έως 40%, ανάλογα με το πόσα σχόλια, κενές γραμμές και εσοχές έχει το αρχικό αρχείο. Ένα αρχείο με λίγη μορφοποίηση εξαρχής θα συρρικνωθεί λιγότερο.

Η ελαχιστοποίηση CSS αλλάζει το πώς εμφανίζεται μια σελίδα; Όχι. Η ελαχιστοποίηση αφαιρεί μόνο χαρακτήρες που οι browsers αγνοούν, όπως σχόλια και επιπλέον κενά, και ξαναγράφει μερικές ισοδύναμες τιμές (όπως το #ffffff σε #fff). Η αποδιδόμενη σελίδα παραμένει ίδια.

Πρέπει το CSS να ελαχιστοποιείται κατά την ανάπτυξη (development); Όχι. Διατηρήστε την ευανάγνωστη, σχολιασμένη έκδοση κατά τη συγγραφή και τον εντοπισμό σφαλμάτων στον κώδικα. Ελαχιστοποιήστε μόνο το αντίγραφο που πηγαίνει σε διακομιστή παραγωγής, συνήθως ως αυτόματο βήμα στη διαδικασία δημιουργίας.

Μπορεί το ελαχιστοποιημένο CSS να μετατραπεί ξανά στο αρχικό αρχείο; Ένα εργαλείο μορφοποίησης μπορεί να αναδιαμορφώσει ελαχιστοποιημένο CSS με εσοχές, αλλά δεν μπορεί να ανακτήσει διαγραμμένα σχόλια ή να επαναφέρει περιγραφικά ονόματα που δεν υπήρχαν ποτέ στην ελαχιστοποιημένη έκδοση. Διατηρήστε το αρχικό πηγαίο αρχείο.

Αυτό το εργαλείο μετατρέπει χρώματα rgb() σε δεκαεξαδικά, ή συγχωνεύει διπλότυπους επιλογείς; Όχι. Συντομεύει τα δεκαεξαδικά χρώματα και αφαιρεί περιττούς χαρακτήρες, αλλά δεν ξαναγράφει τιμές rgb()/hsl() ούτε συγχωνεύει επαναλαμβανόμενους επιλογείς. Μερικά άλλα εργαλεία ελαχιστοποίησης εκτελούν αυτά τα επιπλέον βήματα.

Είναι η ελαχιστοποίηση το ίδιο με τη συμπίεση gzip; Όχι. Η ελαχιστοποίηση αφαιρεί περιττούς χαρακτήρες από τον ίδιο τον πηγαίο κώδικα. Η συμπίεση gzip (ή Brotli) εφαρμόζεται από τον διακομιστή ιστού όταν αποστέλλεται το αρχείο, χρησιμοποιώντας έναν ξεχωριστό αλγόριθμο. Η χρήση και των δύο μαζί παράγει το μικρότερο αρχείο μέσω του δικτύου.