Διαφήμιση

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

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

Συμπίεση έναντι Εξόρυξη

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

Εξόρυξη

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

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

Πρόκειται για Header
Στείλτε μου αλληλογραφία στο [email protected].
Αυτή είναι μια νέα παράγραφο!
Αυτή είναι μια νέα παράγραφο με έντονη και πλάγια γραφή.

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

Πρόκειται για Header
Στείλτε μου αλληλογραφία στο [email protected].
Αυτή είναι μια νέα παράγραφο!
Αυτή είναι μια νέα παράγραφο με έντονη και πλάγια γραφή.

Αρχικό μέγεθος: 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 και πόση επανάληψη υπάρχει μέσα. Σχεδόν κάθε ετικέτα, όπως, έχει μια αντίστοιχη ετικέτα κλεισίματος, όπως. Επιπλέον, πολλές ετικέτες επαναλαμβάνονται καθ 'όλη, όπως, , ,, και τα λοιπά. Χαρακτηριστικά επαναλαμβάνονται συχνά, μεταξύ άλλων τάξη, href, και src. Είναι εύκολο να καταλάβεις γιατί η συμπίεση GZIP είναι τόσο αποτελεσματική με το HTML.

Το μόνο μειονέκτημα είναι ότι ο διακομιστής web χρειάζεται λίγο περισσότερη CPU για να εκτελέσει τη συμπίεση κάθε φορά που ζητείται μια σελίδα. Αλλά δεδομένου ότι η CPU δεν είναι πολύ ανησυχητική στις μέρες μας, είναι σχεδόν πάντα καλύτερο να ενεργοποιήσουμε το GZIP παρά να πάμε χωρίς, ακόμα και αν έχετε φιλοξενία ιστού σε αρχικό επίπεδο Οι καλύτερες υπηρεσίες φιλοξενίας Ιστού: Κοινόχρηστο, VPS και ΑφιερωμένοΨάχνετε για την καλύτερη υπηρεσία φιλοξενίας ιστοσελίδων για τις ανάγκες σας; Εδώ είναι οι καλύτερες προτάσεις μας για το blog ή την ιστοσελίδα σας. Διαβάστε περισσότερα .

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

Υπάρχουν δύο βασικά οφέλη, τα οποία και τα δύο είναι κρίσιμα για το σημερινό κινητό βαρύ web site.

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

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

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

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

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

Όπως μπορείτε να δείτε, το minification 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, το μόνο που χρειάζεται να κάνετε είναι να εγκαταστήσετε ένα plugin και να αποκομίσετε τα πλεονεκτήματα τόσο της συμπίεσης όσο και της μικροποίησης.

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

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

Στατική Μινιατούρες HTML

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

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

• HTMLCompressor
• HTML Minifier
• HTML Minifier (διαφορετική από την παραπάνω)

Αυτή είναι μια βιώσιμη τεχνική αν έχετε απομακρυνθεί από CMSes όπως το WordPress και τώρα χρησιμοποιείτε γεννήτριες στατικών τοποθεσιών 7 λόγοι για να χαλαρώσετε το CMS σας και να εξετάσετε μια στατική γεννήτρια ιστότοπωνΓια πολλά χρόνια, η δημοσίευση ενός ιστοτόπου ήταν δύσκολη για πολλούς χρήστες. Τα CMS, όπως το WordPress, άλλαξαν, αλλά εξακολουθούν να προκαλούν σύγχυση. Μια άλλη εναλλακτική λύση είναι μια γεννήτρια στατικών ιστότοπων. Διαβάστε περισσότερα .

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

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

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

 mod_gzip_on Ναι mod_gzip_dechunk Ναι mod_gzip_item_include αρχείο (html? | txt | css | js | php | pl) $ mod_gzip_item_include χειριστής ^ 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 ^ Περιεχόμενο-Κωδικοποίηση:. * Gzip. *
 SetOutputFilter DEFLATE. 

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

Για την απόλυτη αποτελεσματικότητα, θα πρέπει επίσης μάθετε πώς να ελέγχετε, να καθαρίζετε και να βελτιστοποιείτε το CSS 11 Χρήσιμα εργαλεία για τον έλεγχο, καθαρισμό και βελτιστοποίηση αρχείων CSSΘέλετε να βελτιώσετε τον κώδικα CSS; Αυτά τα πούλια και βελτιστοποιητές CSS θα σας βοηθήσουν να βελτιώσετε τον κώδικα CSS, τη σύνταξη και να ελαχιστοποιήσετε τις ιστοσελίδες σας. Διαβάστε περισσότερα .