Εισαγωγή στην Απόδοση Ιστού και στην Κρίσιμη Πορεία Απόδοσης

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

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

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

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

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

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

Το Critical Rendering Path αποτελείται από πέντε διαφορετικά βήματα, τα οποία εξηγούνται καλύτερα σε ένα γραφικό.

Δημιουργία του DOM και του CSSOM

Οι περισσότερες ιστοσελίδες αποτελούνται από HTML, CSS και JavaScript, που όλα αποτελούν κρίσιμο μέρος στο CRP. Για να διαβάσετε και να επεξεργαστείτε το HTML σας, το πρόγραμμα περιήγησης θα κατασκευάσει το μοντέλο αντικειμένου εγγράφου (DOM). Το πρόγραμμα περιήγησης εξετάζει τις ετικέτες HTML (

,

,

και

κ.λπ.) στη σήμανση σας και τα μετατρέπει σε διακριτικά τα οποία με τη σειρά τους δημιουργούνται σε κόμβους παράλληλα. Με την επεξεργασία αυτών των διακριτικών StartTag και των διακριτικών EndTag με τη σειρά και βλέποντας τα πρώτα, το πρόγραμμα περιήγησης μπορεί να δημιουργήσει την ιεραρχία τους και να δημιουργήσει γονείς και παιδιά.

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

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

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

Μετά την κατασκευή του DOM, το πρόγραμμα περιήγησής σας θα επεξεργαστεί το CSS και θα δημιουργήσει το CSS Object Model (CSSOM). Αυτή η διαδικασία είναι πολύ παρόμοια με την κατασκευή του DOM. Αλλά σε αυτήν τη διαδικασία, σε αντίθεση με πριν, οι θυγατρικοί κόμβοι κληρονομούν τους κανόνες στυλ των γονικών κόμβων τους - εξ ου και το όνομα Cascading Style Sheets (CSS).

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

Το δέντρο DOM και το δέντρο CSSOM θα περιέχουν όλους τους κόμβους και τις εξαρτήσεις που έχουμε στη σελίδα μας.

Συγκέντρωση όλου του ορατού περιεχομένου - The Render Tree

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

Αρχίζουμε να κατασκευάζουμε το Render Tree αναγνωρίζοντας τον ριζικό κόμβο και στη συνέχεια αντιγράφοντας όλες τις ορατές πληροφορίες από το DOM και το CSSOM. Για αυτό ελέγχουμε επίσης ότι αναζητούμε ετικέτες που έχουν τον ίδιο επιλογέα. Τα μεταδεδομένα, οι σύνδεσμοι και ούτω καθεξής δεν αντιγράφονται στο δέντρο απόδοσης. Το ίδιο ισχύει και για το CSS που περιέχει το "display: none;" καθώς είναι επίσης ένα μη ορατό αντικείμενο.

Μόλις ολοκληρώσουμε αυτήν τη διαδικασία, λαμβάνουμε κάτι παρόμοιο με το παρακάτω (παρατηρήστε πώς δεν γίνεται αντιγραφή της «απόδοσης ιστού»)

Το Render Tree είναι μια αρκετά ακριβής περιγραφή του τι πραγματικά εμφανίζεται στην οθόνη, καταγράφοντας τόσο το περιεχόμενο όσο και τα σχετικά στυλ. Φυσικά, αυτό θα φανεί πολύ πιο περίπλοκο στα παραδείγματα της πραγματικής ζωής.

Καθιστώντας το σωστό - Διάταξη

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

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

Χρωματίστε τα Pixel

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

Ας συνοψίσουμε

Τώρα ας συγκεντρώσουμε όλες αυτές τις πληροφορίες ξανά, ώστε να δούμε ότι έχουμε καταλάβει όλα τα βήματα που πρέπει να περάσουμε στο Critical Rendering Path (CRP).

  1. Το πρόγραμμα περιήγησης ξεκινά δημιουργώντας το DOM αναλύοντας όλο το σχετικό HTML.
  2. Στη συνέχεια προχωρά στην εξέταση των πόρων CSS και JavaScript και τους ζητά, κάτι που συμβαίνει συνήθως στο κεφάλι όπου συνήθως τοποθετούμε τους εξωτερικούς μας συνδέσμους.
  3. Το πρόγραμμα περιήγησης στη συνέχεια αναλύει το CSS και κατασκευάζει το CSSOM ακολουθούμενο από την εκτέλεση του JavaScript.
  4. Στη συνέχεια, το DOM και το CSSOM συγχωνεύονται στο Render Tree.
  5. Στη συνέχεια εκτελούμε το βήμα Διάταξη και Ζωγραφική για να παρουσιάσουμε τη σελίδα στον χρήστη.

Εντάξει, είναι καλό να γνωρίζουμε - αλλά γιατί έχει σημασία;

Τώρα αυτό είναι όλα τακτοποιημένο να γνωρίζουμε και έχουμε αποκτήσει καλύτερη κατανόηση του τι κάνει πραγματικά το πρόγραμμα περιήγησης στο παρασκήνιο. Αλλά γιατί έχει σημασία; Πρέπει όλοι να γνωρίζουμε τι συμβαίνει κάτω από την κουκούλα;

Ναι, το κάνουμε!

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

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

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

Βελτιστοποίηση απόδοσης

Υπάρχουν πολλές στρατηγικές που μπορούμε να αξιοποιήσουμε για να κάνουμε τις σελίδες μας πιο γρήγορες και καλύτερες στη χρήση για τους χρήστες μας. Αυτό είναι ιδιαίτερα σημαντικό για τους χρήστες που μπορεί να βρίσκονται σε πιο απομακρυσμένες τοποθεσίες όπου το γρηγορότερο Διαδίκτυο δεν είναι ο κανόνας ή όπου οι σελίδες είναι συνήθως προσβάσιμες μέσω κινητού Διαδικτύου.

Όταν μιλάμε για στρατηγικές βελτιστοποίησης, έχουμε περίπου τρεις τεχνικές στη διάθεσή μας.

Ελαχιστοποίηση, συμπίεση και προσωρινή αποθήκευση

Αυτές οι τεχνικές μπορούν να εφαρμοστούν σε HTML, CSS και JS. Στη συνέχεια, μέσω του μικρότερου μεγέθους τους, θα μειώσουν την ποσότητα δεδομένων που στέλνουμε μπρος-πίσω μεταξύ του πελάτη και του διακομιστή. Όσο λιγότερα byte πρέπει να στείλουμε, τόσο πιο γρήγορα το πρόγραμμα περιήγησης θα πάρει τα δεδομένα και θα ξεκινήσει την επεξεργασία και την απόδοση της σελίδας.

Ελαχιστοποιήστε τη χρήση πόρων αποκλεισμού απόδοσης (CSS)

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

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

Ελαχιστοποίηση της χρήσης πόρων αποκλεισμού αναλυτών (πρόγραμμα ανάλυσης εγγράφων JS)

Μπορούμε επίσης να αναβάλουμε την εκτέλεση του JavaScript και να χρησιμοποιήσουμε τα χαρακτηριστικά ασύγχρονης στο σενάριό μας για να το επιτύχουμε. Αυτό σημαίνει ότι η υπόλοιπη σελίδα μπορεί να επεξεργαστεί και στο μεταξύ ο χρήστης βλέπει μια ένδειξη ότι κάτι συμβαίνει στη σελίδα. Αυτό σημαίνει επίσης ότι δεν χρειάζεται να περιμένουμε τη φόρτωση του JavaScript.

Σε γενικές γραμμές, αυτό μας αφήνει με 3 μοτίβα βελτιστοποίησης:

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

Δοκιμάστε το μόνοι σας

Εάν θέλετε να δοκιμάσετε και να αρχίσετε να βελτιστοποιείτε, μπορείτε να μετρήσετε την απόδοση του ιστότοπού σας ή άλλων με διάφορα εργαλεία. Τα ευκολότερα είναι πιθανώς προϊόντα Google όπως το PageSpeedInsights ή το Google Lighthouse, μια εύχρηστη επέκταση Google Chrome που μπορείτε εύκολα να εγκαταστήσετε μέσω του Chrome App Store.

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

Στη συνέχεια, μπορείτε να συγκρίνετε την απόδοσή σας με μια σειρά μετρήσεων, όπως το First Pixel Painted to the Screen, First Interactive, Visual Completeness του ιστότοπού σας και πολλά άλλα.

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

συμπέρασμα

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

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

Πόροι

Οι περισσότερες από τις γνώσεις μου που έχω μοιραστεί εδώ έχω αποκτήσει μέσω των εξής:

  1. Βελτιστοποίηση απόδοσης ιστότοπου στο Udacity
  2. Γιατί η απόδοση έχει σημασία στο Google Developers
  3. Δικτύωση προγράμματος περιήγησης υψηλής απόδοσης από την Ilya Grigorik (//hpbn.co/)
  4. Ιστότοποι υψηλής απόδοσης: Βασικές γνώσεις για μηχανικούς front-end από τον Steve Souders