5 τρόποι για να βελτιώσετε το PageSpeed του ιστοτόπου σας χρησιμοποιώντας το HTTP / 2
Διαφήμιση
Το πρωτόκολλο μεταφοράς HyperText έκδοσης 2 ή HTTP / 2 είναι το πιο πρόσφατο πρότυπο HTTP. Οι ενημερώσεις του πρωτοκόλλου θα βελτιώσουν την ταχύτητα, την αποτελεσματικότητα και την ασφάλεια της κυκλοφορίας ιστού. Ωστόσο, η μετάβαση δεν είναι αυτόματη.
Αυτό το άρθρο στοχεύει να σας δώσει κάποια εικόνα για το τι σημαίνει HTTP / 2 για εσάς και πώς να διαμορφώσετε τον ιστότοπο ή τον διακομιστή σας για να επωφεληθείτε από τα νέα χαρακτηριστικά.
Τι σημαίνει HTTP / 2 για εσάς
Για τους τακτικούς χρήστες, οι αλλαγές από το HTTP / 1.1 σε HTTP / 2 θα είναι αρκετά αόρατες.
Όλα τα προγράμματα περιήγησης θα απαιτούν πιστοποιητικό έγκυρης ασφάλειας μεταφορών (TLS) για την προβολή ιστότοπων μέσω HTTP / 2. Έτσι πέρα από την ταχύτερη φόρτωση της σελίδας, θα υπάρξει επίσης αύξηση της ασφάλειας του ιστότοπου.
Για τους σχεδιαστές ιστοσελίδων και τους ιδιοκτήτες, το HTTP / 2 μπορεί να βελτιώσει την ταχύτητα φόρτωσης του ιστότοπού σας σε όλες τις συσκευές.
Κάθε σύγχρονο πρόγραμμα περιήγησης υποστηρίζει ήδη το πρότυπο του νέου πρωτοκόλλου (αν και αυτά τα προγράμματα περιήγησης για κινητά δεν υποστηρίζουν HTTP / 2). Ωστόσο, σε περιπτώσεις όπου το πρόγραμμα περιήγησης ή ο διακομιστής δεν υποστηρίζει HTTP / 2, το πρότυπο HTTP / 1.1 θα χρησιμοποιηθεί αυτόματα.
Πώς θα επηρεάσει το HTTP / 2 Website Design;
Οι αλλαγές που εισάγονται στο HTTP / 2 θα επηρεάσουν τον τρόπο βελτιστοποίησης των ιστότοπων και των διακομιστών για αποτελεσματικότητα και ταχύτητα.
Οι νέες λειτουργίες που εισάγονται στο HTTP / 2 θα μας επιτρέψουν να αγνοήσουμε πολλούς τρόπους αντιμετώπισης και τεχνικές βελτιστοποίησης του HTTP / 1. Αυτό δεν περιλαμβάνει πλέον τοποθέτηση σεναρίων σε HTML ή συνδυασμό αρχείων για τη μείωση των αιτημάτων διακομιστή. Δεν είναι πλέον χρήσιμο και η αποκομιδή του τομέα.
Σε ορισμένες περιπτώσεις, οι λύσεις αυτές θα επηρεάσουν αρνητικά την ταχύτητα της σελίδας σας εάν είναι σε υπηρεσία HTTP / 2.
Η πλειοψηφία της κίνησης στο Διαδίκτυο βασίζεται σε κινητά, επομένως εξετάστε τις ταχύτητες του κινητού Διαδικτύου και διατηρήστε τα αρχεία πολυμέσων σας μικρά και βελτιστοποιημένα για αυτές τις συσκευές. Θα πρέπει επίσης να συνεχίσετε να οριοθετείτε το JavaScript (JS), το HTML και το CSS.
Εάν δεν είστε σίγουροι για το λόγο που πρέπει να διαγράψετε τα αρχεία σας, μια καλή αρχή θα είναι το άρθρο μας σχετικά με το πώς και γιατί να ελαχιστοποιήσετε το JavaScript. JavaScript συμπιεστές: Πώς και γιατί να ελαχιστοποιήσετε τους JS συμπιεστές σας JavaScript: Πώς και γιατί να ελαχιστοποιήσετε το JS σας Minification javascript σας είναι ένας τρόπος για να επιταχύνει τους χρόνους απόκρισης ιστοσελίδα, και ευτυχώς για σας, είναι μια εύκολη διαδικασία. Σήμερα θα σας δείξω όλα όσα πρέπει να γνωρίζετε. Διαβάστε περισσότερα
HTTP Έννοιες που πρέπει να ξέρετε
Σε περίπτωση που δεν είστε εξοικειωμένοι με τους όρους που αναφέρονται σε αυτό το άρθρο, εδώ είναι μια γρήγορη εισαγωγή
Το Inlining Script είναι να προσθέσετε το JavaScript απευθείας σε ένα έγγραφο HTML με την ετικέτα. Στο HTML / 1.1 αυτό απαλλάσσει από τα μικρά αρχεία JavaScript και θα μειώσει τα αιτήματα διακομιστή και τα σενάρια φόρτωσης πιο γρήγορα.
Η μείωση του αριθμού των αρχείων δεν είναι πλέον τόσο μεγάλη από ένα πρόβλημα για την ταχύτητα σελίδας στο HTTP / 2, χάρη στο Multiplexing, Stream Prioritization και Server Push .
Η πολυπλεξία είναι μια νέα δυνατότητα στο HTML / 2 που επιτρέπει πολλαπλές ροές δεδομένων μέσω μιας σύνδεσης TCP (Transmission Control Protocol).
Τα ρεύματα δεδομένων είναι ένας όρος HTML / 2 που χρησιμοποιείται για αμφίδρομες ροές δεδομένων. Μπορούμε να δώσουμε προτεραιότητα σε κάθε ροή χάρη στο μοναδικό αναγνωριστικό τους, το οποίο θα μας βοηθήσει να βελτιστοποιήσουμε την παράδοση δεδομένων.
Η ιεράρχηση ροής είναι μια άλλη νέα δυνατότητα στο HTML / 2. Αυτό μας δίνει τη δυνατότητα να πούμε σε ένα διακομιστή να κατανείμει πόρους και εύρος ζώνης σε προτεραιότητες Data Streams . Έτσι διασφαλίζοντας τη βέλτιστη απόδοση περιεχομένου υψηλής προτεραιότητας στους πελάτες.
Το Sharpening Domain είναι η πράξη του διαχωρισμού των πηγών του ιστότοπου σε πολλαπλούς ιστότοπους ή τομείς για να προσεγγιστεί ο περιορισμός ταυτόχρονης λήψης σε HTML / 1.1.
Σε HTML / 2, το Multiplexing και το Push Server θα κάνουν τα ταυτόχρονα λήψεις ταχύτερα και πιο αποτελεσματικά από το Sharpening Domain . Στην πραγματικότητα, αυτή τη στιγμή δεν υπάρχει υποστήριξη για τη χρήση αυτών των λειτουργιών σε πολλούς τομείς.
Το Push Server θα επιτρέψει σε έναν διακομιστή να στείλει πολλαπλές απαντήσεις για ένα αίτημα ενός πελάτη. Με λίγα λόγια, ο διακομιστής μπορεί να κάνει υποθέσεις ως προς τα αρχεία που χρειάζεται ένα πρόγραμμα περιήγησης για να φορτώσει μια σελίδα, χωρίς να το ζητήσει ειδικά το πρόγραμμα περιήγησης.
Θα επικεντρωθούμε τώρα σε κάποιες από τις αλλαγές που πρέπει να κάνουν οι ιδιοκτήτες των ιστοτόπων για τη βελτιστοποίηση των ιστότοπων για το HTTP / 2. Για μια βαθύτερη κατανόηση αυτών των εννοιών, διαβάστε το προηγούμενο άρθρο μας: "Τι είναι το HTTP / 2 και πώς επηρεάζει το μέλλον του Διαδικτύου; Τι είναι το HTTP / 2 και πώς επηρεάζει το μέλλον του Διαδικτύου; Τι είναι το HTTP / 2 και πώς επηρεάζει το μέλλον του Διαδικτύου; Το διαδίκτυο έχει στόχο να καταστεί πιο αποτελεσματικό χάρη στην άφιξη του HTTP / 2. Αλλά τι είναι αυτό και πώς βελτιώνεται με το HTTP; Διαβάστε περισσότερα ".
5 Αλλαγές ιστοτόπων για τη βελτιστοποίηση του HTTP / 2
Οι κύριες αλλαγές που πρέπει να γνωρίζετε ως ιδιοκτήτες ιστότοπων σχετίζονται με τον τρόπο αντιμετώπισης των πόρων ιστοτόπου. Συγκεκριμένα όσον αφορά τον τρόπο με τον οποίο ο διακομιστής του ιστοτόπου σας θα μιλήσει σε ένα πρόγραμμα περιήγησης και τον τρόπο παράδοσης των αρχείων.
Ακολουθούν οι πιο συνηθισμένες αλλαγές που πρέπει να εξετάσετε για να βελτιστοποιήσετε τον ιστότοπό σας HTTP / 2.
1. Μην συνδυάζετε το CSS ή το JavaScript
Δεν θα πρέπει πλέον να αλληλοσυμπληρώσετε ή να συνδυάσετε τους πόρους του ιστότοπού σας. Στο HTTP / 1.1, αυτό θα μειώσει τον αριθμό των αιτήσεων HTTP, και τα αρχεία που πρέπει να ληφθούν για να εμφανιστεί ο ιστότοπός σας.
Κάθε αίτημα HTTP θα προσθέσει καθυστέρηση, οπότε σε HTTP / 1.1 η λήψη ενός μόνο αρχείου είναι συχνά πιο αποτελεσματική από τη λήψη πολλών αρχείων. Λιγότερα αρχεία βοηθούν επίσης να φτάσετε το όριο στις ταυτόχρονες λήψεις σε HTTP / 1.1.
Καθώς το HTTP / 2 επιτρέπει πολλαπλές λήψεις χωρίς πολλαπλές απαιτήσεις διακομιστή, ο αριθμός των αρχείων είναι λιγότερο σημαντικός όταν βελτιστοποιείται για ταχύτητα. Σε συνδυασμό με την προσωρινή αποθήκευση, τα συγκεκριμένα αρχεία είναι καλύτερα στο HTTP / 2.
Στην πραγματικότητα, πιο συγκεκριμένα αρχεία σας επιτρέπουν να εξυπηρετήσετε το μεγαλύτερο μέρος του ιστότοπού σας από το Δίκτυο εμφάνισης περιεχομένου (CDN) και την προσωρινή μνήμη του προγράμματος περιήγησης του χρήστη. Σημαίνει επίσης ότι το πρόγραμμα περιήγησης δεν θα χρειαστεί να κατεβάσετε και να αναλύσετε ένα μεγάλο αρχείο από το διακομιστή σας όταν κάνετε μικρές τροποποιήσεις στον ιστότοπό σας.
2. Μην Inline Scripts σε HTML
Η ενσωμάτωση των αρχείων CSS και JS στο έγγραφο HTML θα βελτιώσει την ταχύτητα φόρτωσης σελίδας σας στο HTTP / 1.1. Όπως και με το συνδυασμό αρχείων, θα μειώσει τους αριθμούς αρχείων και τις απαιτήσεις διακομιστή.
Η ενσωμάτωση σεναρίων σε HTML κατά τη χρήση του HTTP / 2 θα μειώσει τη βελτιστοποίηση της ταχύτητας σελίδας από την προσωρινή μνήμη, αφαιρώντας την ικανότητα του προγράμματος περιήγησης να αποθηκεύει χωριστά τα στοιχεία ενεργητικού.
Επίσης, θα σπάσει οποιαδήποτε βελτίωση από την Προτεραιότητα ροής, καθώς όλα τα ενσωματωμένα σενάρια και το περιεχόμενο θα έχουν το ίδιο επίπεδο προτεραιότητας με το περιεχόμενο HTML.
Αντί να εισάγετε στοιχεία για να μειώσετε τις αιτήσεις HTTP, επωφεληθείτε από την πολυπλεξία και την ώθηση διακομιστή. Αυτό θα επιτρέψει στα προγράμματα περιήγησης να κατεβάσουν περισσότερους πόρους με λιγότερα αιτήματα και να βελτιώσουν την ταχύτητα φόρτωσης της σελίδας σας.
Εν ολίγοις, κρατήστε τους πόρους σας ξεχωριστούς και μικρούς όταν είναι δυνατόν.
3. Σταματήστε να χρησιμοποιείτε το CSS Image Sprites
Image Sprites είναι εικόνες που αποτελούνται από πολλές μικρότερες εικόνες (όπως η παραπάνω). Στη συνέχεια, το CSS καθορίζει ποια τμήματα της εικόνας θα εμφανιστούν.
Όπως συμβαίνει με τις περισσότερες λύσεις HTTP / 1.1, χρησιμοποιούμε μερικά είδωλα εικόνας για να μειώσουμε τα αιτήματα των διακομιστών. Στο HTTP / 2, μπορείτε να χρησιμοποιήσετε με ασφάλεια ξεχωριστές εικόνες χωρίς να επηρεάσετε αρνητικά την ταχύτητα φόρτωσης της σελίδας σας.
Τα μικρότερα αρχεία θα κατεβάζονται ταχύτερα και πιο αποτελεσματικά χάρη στην πολυπλεξία και την ώθηση του διακομιστή.
4. Μην χρησιμοποιείτε το Sharpening Domain
Η σκίαση τομέα χρησιμοποιείται για να παρακάμψει τους περιορισμούς ταυτόχρονης λήψης σε HTTP / 1. Αυτός ο περιορισμός είναι συνήθως μεταξύ τεσσάρων και οκτώ ανά τομέα και ρυθμίζεται από τους browsers εν μέρει για να μειώσει τις επιθέσεις DDOS.
Η απόσπαση του ιστότοπού σας σε τέσσερις τομείς, για παράδειγμα, μπορεί θεωρητικά να εξυπηρετεί τους πόρους σε ένα τέταρτο του χρόνου στο HTTP / 1.1.
Η σκίαση τομέα δεν είναι πλέον απαραίτητη χάρη στην πολυπλεξία HTTP / 2.
Σημειώστε ότι τα προγράμματα περιήγησης δεν μπορούν να επωφεληθούν από πολλαπλές και παράλληλες λήψεις σε πολλούς τομείς σε HTTP / 2. Το Sharing θα διακόψει επίσης την ιεράρχηση ροής του HTTP / 2, μειώνοντας περαιτέρω τα οφέλη από τη χρήση του HTTP / 2.
5. Επωφεληθείτε από το Push του διακομιστή
Ενδεχομένως η πιο σημαντική βελτίωση του HTTP / 2 είναι η ώθηση του διακομιστή.
Στο HTTP / 1.1, όταν ζητάτε να προβάλετε μια σελίδα, ο διακομιστής θα στείλει πρώτα το έγγραφο HTML. Στη συνέχεια, το πρόγραμμα περιήγησης θα ξεκινήσει να αναλύει αυτό το ζήτημα και θα ζητήσει χωριστά τα αρχεία CSS, JS και πολυμέσων που αναφέρονται στο έγγραφο.
Στο HTTP / 2, η ώθηση διακομιστή επιτρέπει σε ένα διακομιστή να προωθήσει τους απαιτούμενους πόρους σε ένα πρόγραμμα περιήγησης χωρίς ξεχωριστό αίτημα για αυτούς. Αυτό περιλαμβάνει αρχεία CSS και JavaScript, καθώς και μέσα ενημέρωσης, και θα μειώσει τις αιτήσεις HTTP και θα επιταχύνει τη φόρτωση σελίδων.
Το Smashing Magazine διαθέτει έναν εξαιρετικό ολοκληρωμένο οδηγό για το push server του HTTP / 2 με γνώση του πώς λειτουργεί και πώς να το ενεργοποιήσει.
Πώς να ρυθμίσετε το διακομιστή σας για HTTP / 2
Οι περισσότερες υλοποιήσεις διακομιστών υποστηρίζουν ήδη το HTTP / 2. Ωστόσο, εάν χρησιμοποιείτε κοινόχρηστο κεντρικό υπολογιστή, θα πρέπει να ελέγξετε με το διαχειριστή του διακομιστή σας εάν έχουν ενεργοποιήσει το HTTP / 2. Εάν είστε περίεργοι, το GitHub διαθέτει μια λίστα υλοποιήσεων διακομιστών που υποστηρίζουν το HTTP / 2.
Οι διακομιστές Nginx έχουν εγγενή υποστήριξη για HTTP / 2, ενώ ίσως χρειαστεί να διαμορφώσετε τους διακομιστές Apache για να ενεργοποιήσετε την υποστήριξη HTTP / 2.
Εάν ο ιστότοπός σας είναι ενεργοποιημένος με HTTPS (απαίτηση HTTP / 2), μπορείτε να ελέγξετε εάν ο ιστότοπός σας παραδίδεται με HTTP / 2 στο http2.pro. Τούτου λεχθέντος, εάν χρησιμοποιείτε το Cloudflare ως το CDN σας, οποιοδήποτε περιεχόμενο από τους διακομιστές του θα προβάλλεται μέσω HTTP / 2 χωρίς να χρειάζεται να κάνετε αλλαγές.
Οι συγκεκριμένοι κεντρικοί υπολογιστές του WordPress μερικές φορές θα περιορίσουν τις αλλαγές διαμόρφωσης που μπορείτε να κάνετε, ειδικά στις χαμηλότερες υπηρεσίες. Δηλαδή, συνιστούμε το Bluehost για τους ιστότοπούς σας στο WordPress. Το Bluehost προσφέρει δωρεάν SSL και CDN και θα εξυπηρετήσει τους ιστότοπούς σας μέσω HTTP / 2.
Το HTTP / 2 είναι μόνο το πρώτο βήμα
HTTP / 2 είναι μια τεράστια βελτίωση σε σχέση με το προηγούμενο πρότυπο, και τώρα θα πρέπει να έχετε κάποια εικόνα για τα οφέλη που μπορείτε να πάρετε από την εφαρμογή του.
Οι ενεργοποιημένοι ιστότοποι θα φορτώνονται γρηγορότερα και θα είναι πιο ασφαλείς, γεγονός που θα ενισχύσει επίσης την κατάταξη αναζήτησης. Το HTTP / 3 είναι ήδη στο δρόμο και η διαμόρφωση του ιστότοπού σας για HTTP / 2 θα κάνει την ενδεχόμενη μεταπήδησή σας σε HTTP / 3 πολύ πιο ομαλή.
Πέρα από τη δημιουργία της ιστοσελίδας σας για HTTP / 2, θα πρέπει επίσης να χρησιμοποιήσετε εξετάστε αυτούς τους τρόπους για να φτιάξετε τον ιστοχώρο σας να φορτίζεται γρηγορότερα 7 τρόποι να κάνετε την ιστοσελίδα σας ή το blog σας φορτώστε γρηγορότερα για τους επισκέπτες 7 τρόποι να φτιάξετε τον ιστοχώρο ή το blog σας φορτώστε γρηγορότερα για τους επισκέπτες τις κορυφαίες συμβουλές για να επιταχύνετε τον ιστότοπό σας και να βεβαιωθείτε ότι οι επισκέπτες σας μένουν γύρω. Διαβάστε περισσότερα .
Εξερευνήστε περισσότερα σχετικά με: HTTP / 2, Web Development.
