Πώς λειτουργεί η συμπίεση HTML
Ο συμπιεστής διατρέχει την είσοδό σας με ένα μικρό μηχάνημα καταστάσεων.
- Tokenize preserve blocks. Ο σαρωτής διαβάζει την είσοδο χαρακτήρα προς χαρακτήρα και προστατεύει τα
<pre>,<textarea>,<script>,<style>. - Σύμπτυξη επεξεργάσιμων κενών. Στις επεξεργάσιμες περιοχές, κάθε ακολουθία κενών συμπτύσσεται σε ένα μόνο κενό.
- Αφαίρεση σχολίων. Τα μπλοκ
<!-- ... -->αφαιρούνται όταν η επιλογή είναι ενεργή. - Σύμπτυξη boolean ιδιοτήτων. Οι περιττές μορφές όπως
checked="checked"συρρικνώνονται στο απλό όνομα ιδιότητας. - Αναφορά διαφορών bytes. Τόσο το αρχικό όσο και το συμπιεσμένο κείμενο μετρώνται με
new TextEncoder().encode(...).byteLength.
Γιατί να συμπιέσετε HTML
- Ταχύτερη φόρτωση σελίδων. Το μικρότερο HTML φτάνει νωρίτερα στο πρόγραμμα περιήγησης.
- Χαμηλότεροι λογαριασμοί CDN. Μείωση 20% σε εκατομμύρια προβολές μεταφράζεται σε πραγματική εξοικονόμηση.
- Καθαρότερες διαφορές pull request. Το συμπιεσμένο HTML παράγει πιο συμπυκνωμένες διαφορές PR.
- Μικρότερες ενσωματώσεις. Πρότυπα email και widget τρίτων επωφελούνται από την ίδια μείωση.
Κοινές εφαρμογές
Η συμπίεση HTML εμφανίζεται στο τέλος σχεδόν κάθε αγωγού static-site.
- Βήματα δημιουργίας static-site: Eleventy, Hugo, Astro, Next.js.
- Συναλλακτικά email: ESPs περιορίζουν το μέγεθος σώματος HTML.
- Ενσωματωμένα widget: κάθε byte μετράει.
Ένα παράδειγμα
Επικολλήστε ένα απόσπασμα φόρμας 500 byte. Με κάθε επιλογή ενεργή, η έξοδος συμπτύσσεται σε περίπου 300 bytes.
Θα σπάσει η συμπίεση το HTML μου;
Όχι, με τις προεπιλεγμένες ρυθμίσεις. Τα περιεχόμενα των ετικετών προστατεύονται.
Συμπιέζει inline CSS και JS;
Όχι σε αυτό το εργαλείο. Χρησιμοποιήστε ξεχωριστά εργαλεία για CSS και JS.
Πόσα μπορώ να εξοικονομήσω;
Συνήθως 10-30% για χειροποίητο HTML. Έως 40% με πολλά σχόλια.
Διατηρείται το περιεχόμενο pre;
Ναι. Ο συμπιεστής προστατεύει ρητά τα μπλοκ <pre>.
Η συμπίεση HTML από το πρόγραμμα περιήγησης διατηρεί τον αγωγό δημιουργίας σας απλό.