Κάθε χαρακτήρας κώδικα που κατεβάζει ένας browser προσθέτει στο μέγεθος μιας σελίδας και η συμπίεση (minification) του CSS και της JavaScript είναι ένας από τους πιο απλούς τρόπους να το μειώσεις. Η συμπίεση αφαιρεί ό,τι περιέχουν τα αρχεία κώδικα και δεν χρειάζεται πραγματικά ο browser για να τα εκτελέσει. Τα κενά, οι αλλαγές γραμμής, τα σχόλια και τα μακριά ονόματα μεταβλητών που κάνουν τον κώδικα ευανάγνωστο για προγραμματιστές αφαιρούνται όλα, μειώνοντας το μέγεθος του αρχείου χωρίς να αλλάζει η λειτουργία του κώδικα. Αυτό το άρθρο εξηγεί τι κάνει η συμπίεση, πώς δουλεύει για CSS και JavaScript, πόσο μειώνει συνήθως το μέγεθος αρχείων και πώς να την ενεργοποιήσεις στην ιστοσελίδα σου.
Τα αρχεία κώδικα γράφονται για να τα συντηρούν προγραμματιστές. Αυτό σημαίνει ότι έχουν εσοχές, χωρίζονται σε ευανάγνωστες γραμμές, συνοδεύονται από σχόλια και δομούνται με περιγραφικά ονόματα. Όλα αυτά είναι χρήσιμα όταν ένας προγραμματιστής διαβάζει ή επεξεργάζεται τον κώδικα. Τίποτα από αυτά δεν είναι χρήσιμο όταν τον αναλύει και τον εκτελεί ένας browser. Η συμπίεση αφαιρεί τα επιπλέον για τον άνθρωπο, ώστε να προκύψει ένα μικρότερο αρχείο που ο browser επεξεργάζεται ακριβώς με τον ίδιο τρόπο. Για το πώς συμβάλλει το μέγεθος αρχείων στην ταχύτητα φόρτωσης, δες το άρθρο για το τι είναι ο χρόνος φόρτωσης σελίδας και πώς μετριέται.
Τι αφαιρεί πραγματικά η συμπίεση από τα αρχεία κώδικα;
Όταν συμπιέζεις CSS και JavaScript, το αποτέλεσμα φαίνεται δυσανάγνωστο σε έναν άνθρωπο αλλά είναι λειτουργικά πανομοιότυπο με το πρωτότυπο. Να τι αφαιρείται.
Κενά και αλλαγές γραμμής
- Οι προγραμματιστές χρησιμοποιούν κενά και αλλαγές γραμμής για να κάνουν τον κώδικα οπτικά οργανωμένο και εύκολο να τον σαρώσεις με το βλέμμα
- Οι browser θεωρούν τα κενά αδιάφορα και τα παραλείπουν εντελώς κατά την ανάλυση
- Η αφαίρεση των κενών από ένα τυπικό αρχείο CSS το μειώνει από μόνη της κατά 15 έως 25 τοις εκατό
Σχόλια
- Τα σχόλια είναι σημειώσεις που γράφονται στον κώδικα για να εξηγούν τι κάνουν τα τμήματα, ποιος τα έγραψε ή πότε ενημερώθηκαν τελευταία φορά
- Ο browser τα αγνοεί εντελώς
- Μια βάση κώδικα με πολλά σχόλια μπορεί να έχει σημαντικό μέρος κάθε αρχείου γεμάτο σχόλια, όλα περιττά στην έκδοση που σερβίρεται
Μακριά ονόματα μεταβλητών και συναρτήσεων
- Στην JavaScript, οι προγραμματιστές ονομάζουν περιγραφικά μεταβλητές και συναρτήσεις, ώστε ο κώδικας να εξηγεί τον εαυτό του. Ονόματα όπως
calculateTotalOrderPriceήuserSessionDurationπερνούν καθαρά το νόημα - Οι minifiers τα αντικαθιστούν με σύντομες εναλλακτικές όπως
aήb, χωρίς να αλλάζουν τι κάνει ο κώδικας - Αυτό λέγεται name mangling και δίνει τη μεγαλύτερη επιπλέον μείωση μεγέθους πέρα από την αφαίρεση κενών
Περιττά μοτίβα κώδικα
- Μερικοί minifiers απλοποιούν και τη δομή του κώδικα: αντικαθιστούν μακρύτερες λογικές εκφράσεις με πιο σύντομες που δίνουν το ίδιο αποτέλεσμα
- Αυτό ξεπερνά την αφαίρεση χαρακτήρων και περιλαμβάνει την επανεγγραφή τμημάτων κώδικα για συντομία, κάτι που λέγεται μερικές φορές βελτιστοποίηση κώδικα ή uglification, εκτός από minification
Πώς λειτουργεί η συμπίεση CSS;
Τα αρχεία CSS ορίζουν την οπτική εμφάνιση κάθε στοιχείου της σελίδας. Ένα τυπικό αρχείο CSS μιας ιστοσελίδας έχει εκατοντάδες ή χιλιάδες κανόνες, καθένας από τους οποίους ορίζει χρώματα, μεγέθη, αποστάσεις, γραμματοσειρές και συμπεριφορά διάταξης.
Τι κάνει ένας minifier CSS
- Αφαιρεί όλα τα κενά ανάμεσα σε selectors, ιδιότητες και τιμές
- Αφαιρεί τα σχόλια
- Συμπτύσσει συντομογραφικές ιδιότητες όπου είναι δυνατό
- Αφαιρεί περιττά ερωτηματικά στο τέλος των μπλοκ κανόνων
- Μετατρέπει τιμές χρωμάτων σε συντομότερες ισοδύναμες όπου υπάρχουν
Πώς μοιάζει το συμπιεσμένο CSS
- Αρχικό: προσεκτικά μορφοποιημένο σε πολλές γραμμές, με κενά και σχόλια ανάμεσα στα τμήματα
- Συμπιεσμένο: όλοι οι κανόνες συμπιεσμένοι σε μία ή λίγες γραμμές, χωρίς κενά ανάμεσα σε ιδιότητες, τιμές ή selectors
- Το οπτικό αποτέλεσμα στον browser είναι πανομοιότυπο. Διαφέρει μόνο το αρχείο που σερβίρεται στον browser
Τυπική μείωση μεγέθους αρχείου CSS
- Η συμπίεση μειώνει συνήθως το μέγεθος του CSS κατά 20 έως 30 τοις εκατό
- Τα αρχεία CSS με πολλά σχόλια ή χαλαρή μορφοποίηση μπορούν να δουν μεγαλύτερες μειώσεις
Πώς λειτουργεί η συμπίεση JavaScript;
Τα αρχεία JavaScript ελέγχουν τη διαδραστική συμπεριφορά μιας σελίδας. Τείνουν να είναι μεγαλύτερα από τα αρχεία CSS και ωφελούνται περισσότερο από τη συμπίεση, εξαιτίας των επιπλέον κερδών από το name mangling.
Τι κάνει ένας minifier JavaScript
- Αφαιρεί όλα τα κενά, τις αλλαγές γραμμής και τα σχόλια
- Μετονομάζει μεταβλητές και συναρτήσεις σε συντομότερες εναλλακτικές
- Απλοποιεί τη λογική του κώδικα όπου είναι δυνατό, χωρίς να αλλάζει το αποτέλεσμα
- Αφαιρεί νεκρό κώδικα: τμήματα κώδικα που δεν μπορούν ποτέ να προσεγγιστούν ή να εκτελεστούν
Τυπική μείωση μεγέθους αρχείου JavaScript
- Η συμπίεση μειώνει συνήθως το μέγεθος της JavaScript κατά 30 έως 50 τοις εκατό
- Τα μεγάλα αρχεία JavaScript με πολλά σχόλια, περιγραφικά ονόματα μεταβλητών και φλύαρη λογική μπορούν να δουν μειώσεις 60 τοις εκατό ή και περισσότερο
- Τα αρχεία JavaScript συμβάλλουν στο Total Blocking Time όταν καθυστερούν το κύριο νήμα. Τα μικρότερα αρχεία JavaScript αναλύονται και εκτελούνται πιο γρήγορα, κάτι που μειώνει το μπλοκάρισμα
Μπορεί να συμπιεστεί και το HTML;
Ναι, μπορεί να συμπιεστεί και το HTML, αν και τα κέρδη είναι συνήθως μικρότερα από ό,τι σε CSS και JavaScript.
Τι αφαιρεί η συμπίεση HTML
- Κενά ανάμεσα σε ετικέτες HTML
- Σχόλια HTML
- Προαιρετικές ετικέτες κλεισίματος και εισαγωγικά, όπου οι browser μπορούν να τα συμπεράνουν
Πρέπει να συμπιέζεις το HTML;
- Για σελίδες που αποδίδονται από τον διακομιστή και παράγουν μεγάλα έγγραφα HTML, η συμπίεση μπορεί να δώσει ουσιαστική μείωση στο μέγεθος κάθε απάντησης
- Για σελίδες με σύντομο HTML, η μείωση είναι ελάχιστη και συχνά δεν αξίζει την επιπλέον πολυπλοκότητα της επεξεργασίας
- Η συμπίεση HTML ενεργοποιείται λιγότερο συχνά από τη συμπίεση CSS ή JavaScript και γίνεται συνήθως σε επίπεδο διακομιστή και όχι ως βήμα build
Επηρεάζει η συμπίεση το πώς φαίνεται ή λειτουργεί μια ιστοσελίδα;
Ο σωστά συμπιεσμένος κώδικας παράγει ακριβώς το ίδιο αποτέλεσμα στον browser με το πρωτότυπο. Ο browser δεν νοιάζεται για τη μορφοποίηση, τα σχόλια ή τα ονόματα μεταβλητών. Επεξεργάζεται τη λογική και εφαρμόζει τα στυλ, όπως κι αν είναι γραμμένος ο πηγαίος κώδικας.
Πότε η συμπίεση μπορεί να προκαλέσει προβλήματα
- Οι κακογραμμένοι minifiers μπορούν μερικές φορές να εισάγουν συντακτικά λάθη που χαλούν τη λειτουργία του κώδικα
- Η JavaScript που βασίζεται στο να διατηρούνται συγκεκριμένα ονόματα μεταβλητών μπορεί να χαλάσει όταν το name mangling τα μετονομάσει
- Η συμπίεση κώδικα τρίτων που δεν σχεδιάστηκε για συμπίεση μπορεί περιστασιακά να δώσει απρόσμενη συμπεριφορά
Πώς να αποφύγεις τα προβλήματα συμπίεσης
- Χρησιμοποίησε καθιερωμένα, καλά συντηρημένα εργαλεία συμπίεσης αντί να γράψεις δικές σου λύσεις
- Δοκίμασε την ιστοσελίδα αφού ενεργοποιήσεις τη συμπίεση, για να επιβεβαιώσεις ότι όλα φαίνονται και λειτουργούν όπως αναμένεται
- Κράτα τις αρχικές, ασυμπίεστες εκδόσεις των αρχείων για ανάπτυξη και επεξεργασία. Σέρβιρε στους επισκέπτες μόνο τις συμπιεσμένες εκδόσεις
Πώς συμπιέζεις τα αρχεία της ιστοσελίδας σου;
Μέσω της πλατφόρμας της ιστοσελίδας σου
- Πολλοί δημιουργοί ιστοσελίδων και συστήματα διαχείρισης περιεχομένου περιλαμβάνουν τη συμπίεση ως ενσωματωμένη ρύθμιση ή επιλογή απόδοσης
- Η ενεργοποίησή της είναι συνήθως ένας μόνο διακόπτης, χωρίς χειροκίνητη επεξεργασία αρχείων
- Είναι η πιο απλή προσέγγιση και το προτεινόμενο σημείο εκκίνησης για χρήστες χωρίς τεχνικές γνώσεις
Μέσω πρόσθετου ή επέκτασης
- Τα συστήματα διαχείρισης περιεχομένου που υποστηρίζουν πρόσθετα έχουν συχνά ευρέως χρησιμοποιούμενα πρόσθετα απόδοσης που περιλαμβάνουν συμπίεση μαζί με άλλες βελτιώσεις ταχύτητας
- Αυτά τα πρόσθετα χειρίζονται τη συμπίεση αυτόματα σε κάθε αίτημα σελίδας ή ως προγραμματισμένη διαδικασία
Ως μέρος μιας διαδικασίας build
- Οι ομάδες ανάπτυξης που δουλεύουν με ιστοσελίδες φτιαγμένες από την αρχή περιλαμβάνουν συνήθως τη συμπίεση ως αυτοματοποιημένο βήμα στη διαδικασία build
- Τα εργαλεία build (bundlers) συμπιέζουν την JavaScript κατά τη διαδικασία build. Οι minifiers CSS μπορούν να προστεθούν ως μέρος της ίδιας ροής εργασίας
- Αυτή η προσέγγιση εξασφαλίζει ότι η συμπιεσμένη έκδοση είναι πάντα αυτή που κάνει deploy, χωρίς επεξεργασία κατά την εκτέλεση
Η συμπίεση είναι ένα μέρος ενός ευρύτερου συνόλου βελτιώσεων ταχύτητας. Για έναν πλήρη οδηγό μείωσης του χρόνου φόρτωσης σε όλες τις βασικές περιοχές, δες το άρθρο για το πώς να μειώσεις τον χρόνο φόρτωσης της ιστοσελίδας σου. Για το πώς συμβάλλει η συμπίεση στις βαθμολογίες Core Web Vitals, ιδιαίτερα στο Total Blocking Time, δες το άρθρο για το τι είναι τα Core Web Vitals. Για να επαληθεύσεις τα αποτελέσματα αφού ενεργοποιήσεις τη συμπίεση, δες το άρθρο για το πώς να δοκιμάσεις την ταχύτητα της ιστοσελίδας σου.
Πώς το WEMASY χειρίζεται τη συμπίεση
Ο δημιουργός ιστοσελίδων του WEMASY συμπιέζει αυτόματα τα αρχεία CSS και JavaScript που σερβίρονται στους επισκέπτες. Αυτό γίνεται σε επίπεδο πλατφόρμας, χωρίς καμία ρύθμιση. Τα αρχικά πηγαία αρχεία διατηρούνται χωριστά για τη δική της διαδικασία ανάπτυξης της πλατφόρμας και μόνο οι συμπιεσμένες εκδόσεις σερβίρονται όταν οι επισκέπτες φορτώνουν σελίδες.
Η συμπίεση περιλαμβάνεται μαζί με άλλες αυτόματες βελτιώσεις ταχύτητας: συμπίεση εικόνων, κεφαλίδες caching του browser και παράδοση μέσω CDN. Αυτά τρέχουν μαζί ως μέρος της προεπιλεγμένης ρύθμισης φιλοξενίας σε κάθε πακέτο του WEMASY.
Δες τι περιλαμβάνεται στον δημιουργό ιστοσελίδων του WEMASY ή δες τις επιλογές πακέτων στη σελίδα τιμών.
Συχνές ερωτήσεις
Τι είναι η συμπίεση (minification) στην ανάπτυξη ιστοσελίδων;
Η συμπίεση είναι η διαδικασία αφαίρεσης περιττών χαρακτήρων από αρχεία κώδικα, όπως κενά, αλλαγές γραμμής, σχόλια και μακριά ονόματα μεταβλητών, ώστε να μειωθεί το μέγεθος του αρχείου χωρίς να αλλάξει η λειτουργία του κώδικα. Τα συμπιεσμένα αρχεία CSS και JavaScript είναι μικρότερα και κατεβαίνουν πιο γρήγορα από τις αρχικές εκδόσεις, κάτι που συμβάλλει σε μικρότερους χρόνους φόρτωσης σελίδας. Ο browser επεξεργάζεται τον συμπιεσμένο κώδικα ακριβώς όπως τον αρχικό. Με τον δημιουργό ιστοσελίδων του WEMASY, μπορείς να το ρυθμίσεις απευθείας στην ιστοσελίδα σου.
Πόσο μειώνει η συμπίεση το μέγεθος των αρχείων;
Η συμπίεση CSS μειώνει συνήθως το μέγεθος αρχείου κατά 20 έως 30 τοις εκατό. Η συμπίεση JavaScript μειώνει συνήθως το μέγεθος κατά 30 έως 50 τοις εκατό, με μεγαλύτερες μειώσεις δυνατές σε αρχεία με πολλά σχόλια ή φλύαρη γραφή. Η ακριβής μείωση εξαρτάται από το πώς γράφτηκε ο αρχικός κώδικας: τα καλά μορφοποιημένα αρχεία με πολλές σημειώσεις βλέπουν τα μεγαλύτερα κέρδη, ενώ ο ήδη συμπαγής κώδικας βλέπει μικρότερες βελτιώσεις.
Αλλάζει η συμπίεση το πώς φαίνεται ή λειτουργεί μια ιστοσελίδα;
Όχι. Ο σωστά συμπιεσμένος κώδικας παράγει το ίδιο οπτικό αποτέλεσμα και την ίδια συμπεριφορά στον browser με την αρχική ασυμπίεστη έκδοση. Ο browser δεν βασίζεται σε μορφοποίηση, σχόλια ή ονόματα μεταβλητών για να εκτελέσει κώδικα. Επεξεργάζεται τη λογική και εφαρμόζει τα στυλ ούτως ή άλλως. Η μόνη φορά που η συμπίεση μπορεί να προκαλέσει προβλήματα είναι όταν εισάγει συντακτικό λάθος ή όταν η JavaScript βασίζεται σε διατηρημένα ονόματα μεταβλητών με τρόπο ασύμβατο με το name mangling.
Πρέπει να συμπιέζεις CSS και JavaScript σε κάθε ιστοσελίδα;
Ναι, σε κάθε ιστοσελίδα όπου μετράει η απόδοση. Η συμπίεση είναι βελτίωση χαμηλού κινδύνου, χωρίς ορατό μειονέκτημα και με σταθερά κέρδη. Είναι ιδιαίτερα απλό να εφαρμοστεί όταν την αναλαμβάνει αυτόματα η πλατφόρμα της ιστοσελίδας. Το κύριο σημείο προσοχής είναι να διατηρούνται χωριστά τα ασυμπίεστα πηγαία αρχεία, ώστε ο κώδικας να μπορεί να διαβάζεται και να επεξεργάζεται κατά την ανάπτυξη.
Ποια είναι η διαφορά ανάμεσα στη συμπίεση (minification) και στην compression;
Η minification αφαιρεί μόνιμα περιττούς χαρακτήρες από αρχεία κώδικα πριν σερβιριστούν. Η compression, όπως το Gzip ή το Brotli, εφαρμόζεται από τον διακομιστή τη στιγμή της παράδοσης και μειώνει το μέγεθος των αρχείων κατά τη μεταφορά. Και τα δύο μειώνουν τον όγκο δεδομένων που μεταφέρεται στον browser, αλλά λειτουργούν διαφορετικά και μπορούν να χρησιμοποιηθούν μαζί. Ένα συμπιεσμένο (minified) αρχείο που συμπιέζεται επίσης κατά τη μεταφορά είναι μικρότερο από ένα αρχείο που χρησιμοποιεί μόνο τη μία από τις δύο μεθόδους.
Μπορεί η συμπίεση να χαλάσει μια ιστοσελίδα;
Μπορεί σε σπάνιες περιπτώσεις. Τα κακοϋλοποιημένα εργαλεία συμπίεσης μπορούν να εισάγουν συντακτικά λάθη και η JavaScript που βασίζεται σε διατήρηση συγκεκριμένων ονομάτων μεταβλητών μπορεί να συμπεριφερθεί απρόσμενα μετά το name mangling. Αν χρησιμοποιείς καθιερωμένα, καλά συντηρημένα εργαλεία, μειώνεις αυτόν τον κίνδυνο σημαντικά. Δοκίμαζε πάντα την ιστοσελίδα αφού ενεργοποιήσεις τη συμπίεση και κράτα τα αρχικά ασυμπίεστα πηγαία αρχεία προσβάσιμα για αντιμετώπιση προβλημάτων ή μελλοντικές επεξεργασίες.