Πώς λειτουργεί το συμπιεσμένο HTML και γιατί μπορεί να το χρειαστείτε

Πώς λειτουργεί το συμπιεσμένο HTML και γιατί μπορεί να το χρειαστείτε

Εάν διαχειρίζεστε έναν ιστότοπο, θα πρέπει ήδη να γνωρίζετε πώς να το κάνετε χρησιμοποιήστε τις σωστές μορφές εικόνας και βελτιστοποιήστε τις εικόνες σας για τον ιστό. Ωστόσο, ενώ η συμπίεση εικόνας είναι μια πολύ γνωστή πρακτική, η συμπίεση HTML τείνει να παραβλέπεται, κάτι που είναι κρίμα γιατί τα οφέλη αξίζουν τον κόπο.





Σε αυτό το άρθρο, θα εξετάσουμε τις δύο κύριες μεθόδους για τη συρρίκνωση των αρχείων HTML, γιατί πρέπει να συρρικνωθούν τα αρχεία HTML και πώς να το κάνουμε.



Συμπίεση έναντι ελαχιστοποίησης

Όσον αφορά τη βελτιστοποίηση αρχείων HTML, υπάρχουν δύο κύριες μέθοδοι για αυτό: συμπίεση και ελαχιστοποίηση Το Ακούγονται παρόμοια στην επιφάνεια, αλλά στην πραγματικότητα είναι δύο διαφορετικές τεχνικές, οπότε μην τις μπερδεύετε.





Ελαχιστοποίηση

Μπορείτε να σκεφτείτε την ελαχιστοποίηση ως την αφαίρεση περιττών χαρακτήρων και γραμμών στον πηγαίο κώδικα. Σκεφτείτε την εσοχή, τα σχόλια, τις κενές γραμμές κλπ. Κανένα από αυτά δεν απαιτείται σε HTML - υπάρχουν για να κάνουν το αρχείο ευκολότερο στην ανάγνωση. Η περικοπή αυτών των λεπτομερειών μπορεί να μειώσει το μέγεθος του αρχείου χωρίς να επηρεάσει τίποτα.

Δείγμα σελίδας HTML:





Your Title Here



Send me mail at support@yourcompany.com .

This is a new paragraph!

This is a new paragraph in bold and italics.

Αρχικό μέγεθος: 354. Ελαχιστοποιημένο μέγεθος: 272. Εξοικονόμηση: 82 (23,16%).

Πολλοί προγραμματιστές ιστού και ιδιοκτήτες ιστότοπων διατηρούν την ελαχιστοποίηση μόνο για αρχεία JS και CSS, αλλά αυτή η ξεπερασμένη πρακτική είναι λάθος. Η ελαχιστοποίηση HTML είναι επίσης σημαντική.



Στη δεκαετία του 2000, τα εργαλεία ελαχιστοποίησης ήταν σπάνια. Έπρεπε να ελαχιστοποιείτε μη αυτόματα αρχεία κάθε φορά που κάτι αλλάζει. Δεδομένου ότι τα αρχεία HTML αλλάζουν συχνότερα από τα αρχεία JS και CSS, ήταν απλά πολύ κουραστικό να ελαχιστοποιούνται κάθε φορά. Στις μέρες μας, είναι ένα αμφιλεγόμενο σημείο.

Συμπίεση

Όταν οι χρήστες επισκέπτονται τον ιστότοπό σας, το κάνουν χρησιμοποιώντας το πρωτόκολλο HTTP. Το πρόγραμμα περιήγησης στέλνει ένα αίτημα στον διακομιστή ιστού για μια συγκεκριμένη σελίδα, ο διακομιστής ιστού σας βρίσκει τη σελίδα και στη συνέχεια στέλνει τα περιεχόμενα αυτής της σελίδας πίσω στο πρόγραμμα περιήγησης του επισκέπτη.



Αλλά επειδή το πρωτόκολλο HTTP υποστηρίζει συμπίεση, ο διακομιστής ιστού σας μπορεί να συμπιέσει τη σελίδα πριν την στείλει στον επισκέπτη (αν υποθέσουμε ότι η συμπίεση είναι ενεργοποιημένη στις ρυθμίσεις του διακομιστή σας) και, στη συνέχεια, το πρόγραμμα περιήγησης του επισκέπτη μπορεί να αποσυμπιέσει τη σελίδα πίσω στην αρχική της κατάσταση.

Το πιο συνηθισμένο σχήμα συμπίεσης είναι GZIP , η οποία είναι μια μορφή αρχείου που χρησιμοποιεί a αλγόριθμος συμπίεσης χωρίς απώλειες ονομάζεται DEFLATE.

Ο αλγόριθμος αναζητά επαναλαμβανόμενες εμφανίσεις κειμένου στο αρχείο HTML και στη συνέχεια αντικαθιστά αυτές τις επαναλαμβανόμενες εμφανίσεις με αναφορές σε προηγούμενο περιστατικό. Κάθε αναφορά είναι απλώς δύο αριθμοί: πόσο πίσω είναι η αναφορά και σε πόσους χαρακτήρες αναφερόμαστε.

Εξετάστε μια σειρά κειμένου όπως αυτό (παράδειγμα από τον ιστότοπο GZIP):

Blah blah blah blah blah.

Ο αλγόριθμος αναγνωρίζει την ακόλουθη επανάληψη:

B{lah b}{lah b}{lah b}{lah b}lah.

Το πρώτο περιστατικό είναι η αναφορά μας, οπότε αφήστε το:

Blah b{lah b}{lah b}{lah b}lah.

Το δεύτερο περιστατικό αναφέρεται πίσω στο πρώτο, το οποίο είναι πέντε χαρακτήρες πίσω και πέντε χαρακτήρες:

Blah b[5,5]{lah b}{lah b}lah.

Αλλά σε αυτή την περίπτωση, ο αλγόριθμος αναγνωρίζει ότι η επόμενη εμφάνιση είναι η ίδια ακολουθία χαρακτήρων, οπότε επεκτείνει το μήκος αναφοράς κατά άλλους πέντε:

Blah b[5,10]{lah b}lah.

Και ξανα:

Blah b[5,15]lah.

Και ο αλγόριθμος είναι αρκετά έξυπνος για να συνειδητοποιήσει ότι οι επόμενοι τρεις χαρακτήρες είναι οι τρεις πρώτοι χαρακτήρες της αναφοράς, οπότε επεκτείνεται κατά τρεις:

Blah b[5,18].

Τώρα σκεφτείτε ένα τυπικό αρχείο HTML και πόση επανάληψη υπάρχει μέσα. Σχεδόν κάθε ετικέτα, όπως π.χ.

, έχει μια αντίστοιχη ετικέτα κλεισίματος, όπως

Το Επιπλέον, πολλές ετικέτες επαναλαμβάνονται καθ 'όλη τη διάρκεια, όπως π.χ.

,

,

,

  • κλπ. Τα χαρακτηριστικά επαναλαμβάνονται επίσης συχνά, συμπεριλαμβανομένων

    class

    ,

    href

    , και

    src

    Το Είναι εύκολο να καταλάβουμε γιατί η συμπίεση GZIP είναι τόσο αποτελεσματική με την HTML.

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

    Γιατί πρέπει να συμπιέσετε και να ελαχιστοποιήσετε

    Υπάρχουν δύο κύρια πλεονεκτήματα, τα οποία είναι και τα δύο ζωτικής σημασίας στο σημερινό τοπίο ιστού με κινητές συσκευές.

    Ταχύτερα φορτία σελίδων

    Κατά μέσο όρο, ένας μειωτής HTML μπορεί να μειώσει το μέγεθος ενός αρχείου κατά περίπου 3 τοις εκατό με βασικές ρυθμίσεις. Με προαιρετικές προηγμένες ρυθμίσεις, ένα αρχείο HTML μπορεί να μειωθεί κατά 3 έως 7 τοις εκατό, για πιθανή μείωση έως και 10 τοις εκατό. Αυτό μεταφράζεται άμεσα σε γρηγορότερους χρόνους φόρτωσης σελίδας.

    Λιγότερο εύρος ζώνης που χρησιμοποιείται

    Ας υποθέσουμε ότι έχετε 10 αρχεία, το καθένα ελαχιστοποιημένο από 50 KB σε 45 KB για συνολική συρρίκνωση 50 KB. Και ας υποθέσουμε ότι ο ιστότοπός σας εξυπηρετεί κατά μέσο όρο 1.000 επισκέπτες κάθε μέρα, όπου κάθε επίσκεψη έχει κατά μέσο όρο δέκα σελίδες. Μόνο η ελαχιστοποίηση HTML μειώνει τη χρήση του εύρους ζώνης σας κατά 50 MB ανά ημέρα (1,5 GB ανά μήνα).

    Συμπίεση + Ελαχιστοποίηση

    Όπως μπορείτε να δείτε, η ελαχιστοποίηση HTML είναι χρήσιμη από μόνη της, ειδικά καθώς ο ιστότοπός σας μεγαλώνει, τα αρχεία γίνονται μεγαλύτερα και η επισκεψιμότητα αυξάνεται. Σημειώστε ότι Οδηγίες PageSpeed ​​της Google προτείνετε τη μείωση του HTML, οπότε αν είστε σκεπτικοί, αφήστε το να σας πείσει για το αντίθετο.

    πώς να τραβήξετε ένα στιγμιότυπο οθόνης χωρίς οθόνη εκτύπωσης

    Αλλά αυτό που είναι υπέροχο στη βελτιστοποίηση HTML είναι ότι δεν χρειάζεται να επιλέξετε ούτε ελαχιστοποίηση ούτε συμπίεση. Μπορείτε να κάνετε και τα δύο! Στην πραγματικότητα, εσείς πρέπει κάνε και τα δύο.

    Κατά μέσο όρο, μπορείτε να περιμένετε ότι η συμπίεση GZIP θα συρρικνώσει ένα αρχείο HTML κατά 70 έως 90 τοις εκατό. Χρησιμοποιώντας το παραπάνω παράδειγμα με μια συντηρητική εκτίμηση συμπίεσης, τα μειωμένα αρχεία HTML θα πήγαιναν από 45 KB σε 13,5 KB το καθένα, για συνολική συρρίκνωση 365 KB. Σε σύγκριση με το απεριόριστο/μη συμπιεσμένο, το εύρος ζώνης του ιστότοπού σας είναι πλέον μειωμένο κατά 365 MB ανά ημέρα (11 GB ανά μήνα).

    Και εκτός από την εξοικονόμηση εύρους ζώνης, κάθε σελίδα φορτώνει δραματικά γρηγορότερα, επειδή το πρόγραμμα περιήγησης του τελικού χρήστη χρειάζεται μόνο να κατεβάσει 13,5 KB έναντι 50 KB ανά σελίδα.

    Πώς να συμπιέσετε και να ελαχιστοποιήσετε την HTML

    Ευτυχώς, κανένα από τα δύο δεν είναι πολύ δύσκολο αυτές τις μέρες και δεν χρειάζεστε μεγάλη τεχνική τεχνογνωσία για να τα ρυθμίσετε.

    WordPress Plugins

    Εάν εκτελείτε έναν ιστότοπο WordPress, το μόνο που χρειάζεται να κάνετε είναι να εγκαταστήσετε ένα πρόσθετο και μπορείτε να αποκομίσετε τα οφέλη τόσο της συμπίεσης όσο και της ελαχιστοποίησης.

    Τα περισσότερα πρόσθετα προσωρινής αποθήκευσης κάνουν περισσότερα από την προσωρινή αποθήκευση σελίδων. Για παράδειγμα, WP Fastest Cache και W3 Total Cache και οι δύο έχουν ρυθμίσεις με ένα κλικ που σας επιτρέπουν να ενεργοποιήσετε την ελαχιστοποίηση HTML και τη συμπίεση GZIP, μεταξύ άλλων χαρακτηριστικών που επιταχύνουν περαιτέρω τη φόρτωση της σελίδας και μειώνουν τη χρήση εύρους ζώνης.

    Αν εσύ μόνο θέλετε ελαχιστοποίηση, προτείνουμε το Ελαχιστοποίηση HTML συνδέω. Είναι απλό, υποστηρίζει HTML/CSS/JS και σας επιτρέπει να τροποποιήσετε λίγο τη μέθοδο ελαχιστοποίησης (π.χ. αν θέλετε να αφαιρέσετε

    http:

    και

    https:

    από διευθύνσεις URL).

    Στατικοί Minifiers HTML

    Εάν τα αρχεία HTML σας είναι στατικά, (δηλαδή δεν δημιουργούνται δυναμικά από ένα CMS ή ένα πλαίσιο ιστού), τότε μπορείτε να διατηρήσετε δύο σύνολα αρχείων HTML: ένα σύνολο 'πηγής', το οποίο δεν έχει επισημανθεί για εύκολη επεξεργασία και ένα σύνολο 'minified', που δημιουργείτε κάθε φορά που κάνετε μια αλλαγή σε ένα αρχείο προέλευσης.

    Για να ελαχιστοποιήσετε, χρησιμοποιήστε ένα από αυτά τα εργαλεία:

    Αυτή είναι μια βιώσιμη τεχνική εάν έχετε απομακρυνθεί από CMS όπως το WordPress και τώρα χρησιμοποιείτε γεννήτριες στατικών ιστότοπων.

    Ενεργοποίηση συμπίεσης GZIP

    Τα βήματα για την ενεργοποίηση της συμπίεσης GZIP ενδέχεται να διαφέρουν ανάλογα με το λογισμικό διακομιστή ιστού που χρησιμοποιείτε. Δεδομένου ότι το Apache είναι η πιο δημοφιλής επιλογή, θα καλύψουμε πώς να το ενεργοποιήσετε χρησιμοποιώντας .htaccess.

    Συνδεθείτε στο διακομιστή ιστού σας χρησιμοποιώντας FTP και, στη συνέχεια, δημιουργήστε ένα αρχείο που ονομάζεται

    .htaccess

    στον ριζικό κατάλογο. Επεξεργαστείτε το αρχείο .htaccess για να έχετε τις ακόλουθες ρυθμίσεις:


    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
    mod_gzip_item_include handler ^cgi-script$
    mod_gzip_item_include mime ^text/.*
    mod_gzip_item_include mime ^application/x-javascript.*
    mod_gzip_item_exclude mime ^image/.*
    mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*


    SetOutputFilter DEFLATE

    Δεν είστε σίγουροι αν η συμπίεση λειτουργεί στον ιστότοπό σας; Δοκιμάστε το με αυτό το εργαλείο Το

    Για την τελική αποτελεσματικότητα, θα πρέπει επίσης μάθετε πώς μπορείτε να ελέγξετε, να καθαρίσετε και να βελτιστοποιήσετε το CSS σας Το

    Μερίδιο Μερίδιο Τιτίβισμα ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ Πρέπει να αναβαθμίσετε αμέσως τα Windows 11;

    Τα Windows 11 έρχονται σύντομα, αλλά πρέπει να ενημερώσετε το συντομότερο δυνατό ή να περιμένετε μερικές εβδομάδες; Ας ανακαλύψουμε.

    Διαβάστε Επόμενο     Σχετικά θέματα
    • Προγραμματισμός
    • HTML
    • Ανάπτυξη διαδικτύου
    Σχετικά με τον Συγγραφέα Τζόελ Λι(Δημοσιεύθηκαν 1524 άρθρα)

    Ο Joel Lee είναι ο αρχισυντάκτης του MakeUseOf από το 2018. Έχει B.S. στην Επιστήμη των Υπολογιστών και πάνω από εννέα χρόνια επαγγελματικής εμπειρίας συγγραφής και επεξεργασίας.

    Περισσότερα από τον Joel Lee

    Εγγραφείτε στο newsletter μας

    Εγγραφείτε στο ενημερωτικό μας δελτίο για τεχνικές συμβουλές, κριτικές, δωρεάν ebooks και αποκλειστικές προσφορές!

    Κάντε κλικ εδώ για εγγραφή