Η απόδοση της απόδοσης της ιστοσελίδας σας πληροί τα σημερινά πρότυπα; Η απόδοση είναι η διαδικασία μετάφρασης της απόκρισης ενός διακομιστή στην εικόνα που «χρωματίζει» το πρόγραμμα περιήγησης όταν ένας χρήστης επισκέπτεται έναν ιστότοπο. Μια κακή απόδοση απόδοσης μπορεί να μεταφραστεί σε σχετικά υψηλό ποσοστό εγκατάλειψης.

Υπάρχουν διαφορετικές αποκρίσεις διακομιστή που καθορίζουν εάν μια σελίδα αποδίδεται ή όχι. Σε αυτό το άρθρο, θα επικεντρωθούμε στην αρχική απόδοση της ιστοσελίδας, η οποία ξεκινά με την ανάλυση HTML (υπό την προϋπόθεση ότι το πρόγραμμα περιήγησης έχει λάβει επιτυχώς HTML ως απάντηση του διακομιστή). Θα διερευνήσουμε τα πράγματα που μπορούν να οδηγήσουν σε υψηλούς χρόνους απόδοσης και πώς να τα διορθώσουμε.

Κρίσιμη διαδρομή απόδοσης

Η κρίσιμη διαδρομή απόδοσης (CRP) είναι η διαδικασία που περνάει το πρόγραμμα περιήγησής σας για να μετατρέψει τον κώδικα σε εικονοστοιχεία που εμφανίζονται στην οθόνη σας. Έχει διάφορα στάδια, μερικά από τα οποία θα μπορούσαν να εκτελούνται παράλληλα για εξοικονόμηση χρόνου, αλλά ορισμένα μέρη πρέπει να γίνουν συνεπώς. Εδώ απεικονίζεται:

Πρώτα απ 'όλα, μόλις το πρόγραμμα περιήγησης λάβει την απάντηση, αρχίζει να το αναλύει. Όταν συναντά μια εξάρτηση, προσπαθεί να το κατεβάσει.

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

Εάν πρόκειται για σενάριο, το πρόγραμμα περιήγησης πρέπει: να σταματήσει την ανάλυση, να κατεβάσει το σενάριο και να το εκτελέσει. Μόνο μετά από αυτό μπορεί να συνεχίσει την ανάλυση, επειδή τα προγράμματα JavaScript μπορούν να αλλάξουν το περιεχόμενο μιας ιστοσελίδας (συγκεκριμένα HTML). Και για αυτο Το JS ονομάζεται parser blocking .

Μόλις ολοκληρωθεί η ανάλυση, το πρόγραμμα περιήγησης διαθέτει το μοντέλο αντικειμένου Document Object (DOM) και το Cascading Style Sheets Object Model (CSSOM). Ο συνδυασμός τους δίνει το Render Tree. Τα τμήματα της σελίδας που δεν εμφανίζονται δεν τα κατατάσσουν στο Δέντρο απόδοσης, επειδή περιέχει μόνο τα απαραίτητα δεδομένα για τη σχεδίαση της σελίδας.

Το προτελευταίο βήμα είναι η μετάφραση του Render Tree σε Διάταξη. Αυτό το στάδιο ονομάζεται επίσης Reflow. Εκεί υπολογίζεται κάθε θέση κάθε κόμβου του Render Tree, καθώς και το μέγεθός του.

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

Συμπεράσματα σχετικά με τη βελτιστοποίηση

Όπως μπορείτε να μαντέψετε, η διαδικασία βελτιστοποίησης απόδοσης ιστότοπου περιλαμβάνει αλλαγές στον ιστότοπο που μειώνουν:

• Ο όγκος των δεδομένων που πρέπει να μεταφερθούν
• Ο αριθμός των πόρων που πρέπει να κατεβάσει το πρόγραμμα περιήγησης (ειδικά αυτά που αποκλείουν)
• Το μήκος του CRP

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

Πώς να μετρήσετε την απόδοση

Ένας σημαντικός κανόνας βελτιστοποίησης είναι: Μετρήστε πρώτα, βελτιστοποιήστε όπως απαιτείται . Τα εργαλεία προγραμματισμού των περισσότερων προγραμμάτων περιήγησης έχουν μια καρτέλα που ονομάζεται Εκτέλεση και εκεί συμβαίνουν οι μετρήσεις. Κατά τη βελτιστοποίηση για την ταχύτερη αρχική (πρώτη) απόδοση, το πιο σημαντικό πράγμα που πρέπει να προσέξετε είναι η ώρα των ακόλουθων συμβάντων:

• Πρώτο χρώμα
• Πρώτη ικανοποιητική βαφή
• Πρώτο νόημα βαφής

Εδώ, 'Paint' σημαίνει επιτυχημένη απόδοση μιας σελίδας, το τελευταίο στάδιο στην κρίσιμη διαδρομή απόδοσης. Μερικές αποδόσεις ενδέχεται να συμβούν το ένα μετά το άλλο, επειδή τα προγράμματα περιήγησης προσπαθούν να εμφανίσουν κάτι ASAP και να ενημερώσουν αργότερα.

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

Στρατηγικές βελτιστοποίησης απόδοσης

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

1. Ελαχιστοποίηση του όγκου των δεδομένων που θα μεταφερθούν μέσω του καλωδίου,
2. Μείωση του συνολικού αριθμού πόρων που θα μεταφερθούν μέσω του καλωδίου, και
3. Συντομεύοντας την κρίσιμη διαδρομή απόδοσης

1. Ελαχιστοποιήστε την ποσότητα δεδομένων προς μεταφορά

Καταρχάς, καταργήστε όλα τα αχρησιμοποίητα μέρη, όπως λειτουργίες που δεν είναι προσβάσιμες σε JavaScript, στυλ με επιλογείς που δεν ταιριάζουν ποτέ με κανένα στοιχείο και ετικέτες HTML που είναι πάντα κρυμμένες με CSS. Δεύτερον, καταργήστε όλα τα αντίγραφα.

Στη συνέχεια, προτείνω να εφαρμόσετε μια αυτόματη διαδικασία ελαχιστοποίησης. Για παράδειγμα, θα πρέπει να αφαιρέσει όλα τα σχόλια από αυτό που εξυπηρετεί το back-end (αλλά όχι τον πηγαίο κώδικα) και κάθε χαρακτήρα που δεν περιέχει πρόσθετες πληροφορίες (όπως χαρακτήρες κενών διαστημάτων στο JS).

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

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

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

Φυσικά, οι πολιτικές προσωρινής αποθήκευσης πρέπει να καθορίζονται ανά πόρο. Κάποιοι μπορεί σπάνια να αλλάξουν ή να μην αλλάξουν καθόλου. Άλλοι αλλάζουν γρηγορότερα. Ορισμένα περιέχουν ευαίσθητες πληροφορίες, άλλα θα μπορούσαν να θεωρηθούν δημόσια. Χρησιμοποιήστε το «Ιδιωτική» οδηγία για να αποτρέψετε τα CDN από την προσωρινή αποθήκευση προσωπικών δεδομένων.

Θα μπορούσε επίσης να γίνει η βελτιστοποίηση εικόνων ιστού, αν και τα αιτήματα εικόνων δεν αποκλείουν ούτε την ανάλυση ούτε την απόδοση.

2. Μειώστε τον συνολικό αριθμό κρίσιμων πόρων

Το 'Critical' αναφέρεται μόνο σε πόρους που απαιτούνται για την σωστή απόδοση της ιστοσελίδας. Επομένως, μπορούμε να παραλείψουμε όλα τα στυλ που δεν εμπλέκονται άμεσα στη διαδικασία. Και όλα τα σενάρια επίσης.

Φύλλα στυλ

Για να πούμε στο πρόγραμμα περιήγησης ότι δεν απαιτούνται συγκεκριμένα αρχεία CSS, πρέπει να ορίσουμε media χαρακτηριστικά σε όλους τους συνδέσμους που αναφέρονται στα φύλλα στυλ. Με αυτήν την προσέγγιση, το πρόγραμμα περιήγησης θα χειρίζεται μόνο τους πόρους που ταιριάζουν με την τρέχουσα media (τύπος συσκευής, μέγεθος οθόνης) όπως απαιτείται, ενώ μειώνεται η προτεραιότητα όλων των άλλων φύλλων στυλ (θα υποστούν επεξεργασία ούτως ή άλλως, αλλά όχι ως μέρος της κρίσιμης διαδρομής απόδοσης). Για παράδειγμα, εάν προσθέσετε το media='print' χαρακτηριστικό στο style ετικέτα που αναφέρεται στα στυλ για εκτύπωση της σελίδας, αυτά τα στυλ δεν θα επηρεάσουν την κρίσιμη διαδρομή απόδοσης όταν τα μέσα δεν είναι print (δηλαδή, κατά την προβολή της σελίδας σε πρόγραμμα περιήγησης).

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

Σενάρια

Όπως αναφέρθηκε παραπάνω, τα σενάρια αποκλείουν το parser επειδή μπορούν να αλλάξουν το DOM και το CSSOM. Επομένως, τα σενάρια που το κάνουν δεν να τα αλλάξετε δεν πρέπει να είναι ανάλυση μπλοκ, εξοικονομώντας έτσι χρόνο.

Για να εφαρμοστεί αυτό, όλες οι ετικέτες σεναρίων πρέπει να επισημαίνονται με χαρακτηριστικά - είτε async ή defer.

Σενάρια που σημειώνονται με async μην αποκλείσετε την κατασκευή DOM ή το CSSOM, καθώς μπορούν να εκτελεστούν πριν από την κατασκευή του CSSOM. Λάβετε υπόψη, ωστόσο, ότι τα ενσωματωμένα σενάρια θα αποκλείσουν το CSSOM ούτως ή άλλως, εκτός αν τα τοποθετήσετε πάνω από το CSS.

Αντίθετα, σενάρια που σημειώνονται με defer θα αξιολογηθεί στο τέλος της φόρτωσης της σελίδας. Επομένως, δεν θα πρέπει να επηρεάζουν το έγγραφο (διαφορετικά, θα προκαλέσει εκ νέου απόδοση).

Με άλλα λόγια, με defer, το σενάριο δεν εκτελείται παρά μόνο μετά την ενεργοποίηση του συμβάντος φόρτωσης σελίδας, ενώ async επιτρέπει στο σενάριο να εκτελείται στο παρασκήνιο ενώ το έγγραφο αναλύεται.

3. Συντομεύστε το μήκος διαδρομής κρίσιμης απόδοσης

Τέλος, το μήκος CRP πρέπει να μειωθεί στο ελάχιστο δυνατό. Εν μέρει, οι προσεγγίσεις που περιγράφονται παραπάνω θα το κάνουν.

Τα ερωτήματα πολυμέσων ως χαρακτηριστικά για τις ετικέτες στυλ θα μειώσουν τον συνολικό αριθμό πόρων που πρέπει να ληφθούν. Τα χαρακτηριστικά της ετικέτας σεναρίου defer και async θα αποτρέψει την παρεμπόδιση της ανάλυσης των αντίστοιχων σεναρίων.

Οι πόροι ελαχιστοποίησης, συμπίεσης και αρχειοθέτησης με το GZIP θα μειώσουν το μέγεθος των μεταφερόμενων δεδομένων (μειώνοντας έτσι τον χρόνο μεταφοράς δεδομένων).

Η επικύρωση ορισμένων στυλ και σεναρίων μπορεί να μειώσει τον αριθμό των επιστροφών μεταξύ του προγράμματος περιήγησης και του διακομιστή.

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

Συμπέρασμα: Η βελτιστοποίηση καλύπτει ολόκληρη τη στοίβα σας

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

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

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

Χρήσιμοι πόροι και περαιτέρω ανάγνωση:

• Insights PageSpeed
• Λίστα ελέγχου προσωρινής αποθήκευσης
• Ενας τρόπος να δοκιμή εάν το GZIP είναι ενεργοποιημένο για τον ιστότοπό σας
• Δικτύωση προγράμματος περιήγησης υψηλής απόδοσης : Ένα βιβλίο της Ilya Grigorik

Κατανόηση των βασικών

Τι είναι η βελτιστοποίηση ιστότοπων;

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

Πώς μπορώ να ελέγξω την απόδοση του ιστότοπού μου;

Δοκιμάστε να χρησιμοποιήσετε διαδικτυακά εργαλεία όπως το PageSpeed ​​Insights της Google. Θα μπορούσατε επίσης να χρησιμοποιήσετε το πρόγραμμα περιήγησής σας σε λειτουργία «Ιδιωτική περιήγηση» για να φορτώσετε τον ιστότοπο χωρίς να έχει αποθηκευτεί τοπικά κανένα από τα δεδομένα. Ορισμένα προγράμματα περιήγησης σάς επιτρέπουν επίσης να χρησιμοποιείτε το γκάζι, το οποίο σας βοηθά να προσομοιώσετε την αργή ταχύτητα σύνδεσης.

Τι είναι η ταχύτητα του ιστότοπου;

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

Πόσο γρήγορα πρέπει να φορτώνεται ένας ιστότοπος;

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

Ποια είναι η λειτουργία ενός κινητήρα απόδοσης;

Στο πλαίσιο των προγραμμάτων περιήγησης, μια μηχανή απόδοσης είναι ένα κομμάτι λογισμικού που είναι υπεύθυνο για τη συλλογή δεδομένων στο παράθυρο του προγράμματος περιήγησης. Δείτε το Critical Rendering Path παραπάνω για να δείτε τις λεπτομέρειες.

Τι είναι ο αποκλεισμός απόδοσης;

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