Το πόσο γρήγορα φορτώνεται αρχικά ο ιστότοπος ή η εφαρμογή σας είναι η πρώτη εντύπωση που έχουν οι χρήστες σας. Σε αυτόν τον οδηγό, θα παραθέσουμε δοκιμασμένες τεχνικές για να μειώσετε τα πολύτιμα δευτερόλεπτα από την αρχική φόρτωση της σελίδας.
Πίνακας περιεχομένων
Αρχικός χρόνος φόρτωσης
Ο χρόνος που χρειάζεται από τη στιγμή που ο χρήστης ή ο πελάτης σας εισάγει το όνομα τομέα του ιστότοπού σας έως τη στιγμή που βλέπουν περιεχόμενο είναι τα πιο σημαντικά δευτερόλεπτα που έχετε για να κάνετε μια καλή πρώτη εντύπωση.
Η Amazon διαπίστωσε ότι κάθε 100 χιλιοστά του δευτερολέπτου καθυστέρησης της κοστίζει 1% σε πωλήσεις.
Και όμως, πολλοί προγραμματιστές ιστού το αντιμετωπίζουν αυτό ως εκ των υστέρων. Όλο και περισσότερες βιβλιοθήκες προστίθενται για όλο και περισσότερες δυνατότητες και σταδιακά με την πάροδο του χρόνου αρχίζουν να βλέπουν λιγότερες μετατροπές. Ακόμη χειρότερα, αυτές οι απώλειες στη μετατροπή είναι δύσκολο να εντοπιστούν επειδή εγκαταλείπουν μια σελίδα αργής φόρτωσης πριν προλάβει να στείλει μετρήσεις.
Μερικές από αυτές είναι τεχνικές που μπορούν να εφαρμοστούν στο μπροστινό μέρος και κάποιες στο πίσω μέρος. Ανεξάρτητα από αυτό, οι εφαρμογές ιστού πρέπει να φορτώνονται γρήγορα.
Προσθέστε τις σωστές μετρήσεις
Το πρώτο πράγμα που πρέπει να κάνετε είναι να προσθέσετε μετρήσεις. Υπάρχουν πολλά στάδια της διαδικασίας φόρτωσης και δεν θα ξέρετε πού βρίσκεται το σημείο συμφόρησης χωρίς να μετρήσετε τα σωστά τμήματα.
Τα ακόλουθα είναι τα πιο σημαντικά ορόσημα της διαδικασίας φόρτωσης:
Μετρήσεις | Το διάγραμμα δημιουργήθηκε στις Terrastruct
Αυτό σημαίνει ότι θα πρέπει να παρακολουθείτε μετρήσεις για κάθε τμήμα αυτού του διαγράμματος.
Ας δούμε πώς μπορείτε να το κάνετε αυτό.
Εξυπηρετήθηκε αίτημα από το πρόγραμμα περιήγησης για απάντηση:
Μετρήστε αυτό στον διακομιστή σας. Θέλετε να λαμβάνετε τη στιγμή που το API σας λαμβάνει το αίτημα όταν εμφανίζει μια απάντηση. Ανάλογα με το εάν πραγματοποιούνται εξωτερικές κλήσεις, για παράδειγμα, σε βάσεις δεδομένων, αυτό μπορεί να είναι είτε πολύ σύντομο είτε σημαντικό σημείο συμφόρησης.
Η απάντηση επιδόθηκε στην απάντηση που ελήφθη:
Αυτό είναι πιο δύσκολο να μετρηθεί, αλλά ένας τρόπος για να γίνει αυτό είναι να προσθέσετε μια χρονική σήμανση όταν η απάντησή σας φεύγει από τον διακομιστή σας και να τη μετρήσετε με την τρέχουσα ώρα από την πλευρά του χρήστη την πρώτη δυνατή στιγμή (μια ετικέτα σεναρίου στην κεφαλή του HTML σελίδα).
Λήφθηκε απάντηση στην πρώτη περιεχόμενη βαφή:
Η πρώτη περιεχόμενη βαφή αναφέρεται στο πότε αποδίδεται το πρώτο στοιχείο στο DOM. Αυτό μπορεί να είναι κάτι τόσο απλό, όπως κάποιο κείμενο, ή φόντο ή μια περιστροφή φόρτωσης. Αυτό μπορεί να μετρηθεί εκτελώντας το Lighthouse στα εργαλεία προγραμματισμού του Chrome.
Το πρώτο χρώμα με περιεχόμενο έως το μεγαλύτερο περιεχόμενο:
Το μεγαλύτερο περιεχόμενο χρώματος αναφέρεται όταν το μεγαλύτερο στοιχείο αποδίδεται στη θύρα προβολής του προγράμματος περιήγησης του χρήστη. Αυτό συνήθως σηματοδοτεί το τέλος του τμήματος «απόδοσης» της φόρτωσης της σελίδας και ο χρήστης βλέπει μια συμπληρωμένη οθόνη. Αυτό μετριέται επίσης με τη λειτουργία του Lighthouse.
Μεγαλύτερη περιεκτικότητα σε διαδραστικό χρώμα:
Τέλος, το time to interactive αναφέρεται στο πότε ο χρήστης μπορεί να εκτελέσει ενέργειες όπως κύλιση, κλικ και πληκτρολόγηση. Μπορεί να είναι ιδιαίτερα απογοητευτικό αν αυτή η διάρκεια είναι μεγάλη, επειδή θα δουν μια αποδομένη οθόνη μπροστά τους, αλλά δεν μπορούν να κάνουν τίποτα όταν περιμένουν ότι είναι σε θέση! Αυτή είναι μια άλλη μέτρηση που μας βοηθά να μετρήσουμε το Lighthouse.
Μειώστε τον κωδικό
Τώρα που έχετε μετρήσεις, μπορείτε να αρχίσετε να κάνετε βελτιστοποιήσεις. Οι βελτιστοποιήσεις έχουν συμβιβασμούς και οι μετρήσεις θα σας πουν ποιες αξίζουν τον κόπο.
Η πιο γρήγορη σελίδα για φόρτωση είναι μια κενή σελίδα, αλλά μπορεί να προστεθεί πολύς κώδικας σε μια εφαρμογή προτού οποιοσδήποτε μπορέσει να παρατηρήσει τη διαφορά στην ταχύτητα φόρτωσης μεταξύ αυτής και μιας κενή σελίδας. Αυτό που συμβαίνει συχνά είναι ότι οι προσαυξήσεις είναι τόσο μικρές που δεν αντιλαμβάνεσαι τη διαφορά από κατασκευή σε κατασκευή μέχρι μια μέρα, απλά αρχίζει να αισθάνεται αργή. Αντιλαμβάνεστε ότι η εφαρμογή σας είναι φουσκωμένη και είναι σε αυτό το σημείο που η μείωση του κώδικα θα κάνει τη διαφορά.
Λαμβάνετε δύο βελτιώσεις στην ταχύτητα όταν μειώνετε τον κώδικα:
- Η εφαρμογή σας μεταφέρεται μέσω του δικτύου πιο γρήγορα.
- Το πρόγραμμα περιήγησης του χρήστη ολοκληρώνει την ανάλυση του κώδικα πιο γρήγορα.
Η πρώτη επιτάχυνση είναι μικρή. Δεδομένου ότι τα αιτήματα συμπιέζονται μέσω καλωδίου, εάν κόψετε 1 MB πηγαίου κώδικα, μπορεί να εξοικονομήσετε μόνο 10 KB στο εύρος ζώνης. Ωστόσο, η επιτάχυνση από λιγότερη ανάλυση είναι σημαντική. Οι χρήστες σας πιθανότατα εκτελούν την εφαρμογή σας σε ένα ολόκληρο φάσμα προγραμμάτων περιήγησης και υπολογιστών, πολλοί από τους οποίους δεν έχουν την υπολογιστική ισχύ που μπορεί να αναλύσει τον κώδικα τόσο γρήγορα όσο γίνεται μόνοι σας.
Ή θα μπορούσαν να εκτελούνται σε κινητές συσκευές, με ακόμη λιγότερη υπολογιστική ισχύ. Η διαφορά μπορεί να είναι στο μέγεθος των δευτερολέπτων.
Έτσι, όσο λιγότερο κώδικα διαθέτετε, τόσο πιο γρήγορα το πρόγραμμα περιήγησης μπορεί να ολοκληρώσει την ανάλυση και να εκτελέσει την εφαρμογή σας. Ακόμα κι αν θέλετε να εμφανίσετε μια οθόνη φόρτωσης που ελέγχει η Javascript, έχει προηγηθεί η ανάλυση αυτού του κώδικα.
Αλλά δεν θέλετε να κόψετε λειτουργίες ή να διαγράψετε τον κώδικα. Ευτυχώς, υπάρχουν μερικές τυπικές πρακτικές για τη μείωση του κώδικα χωρίς να χρειάζεται να το κάνετε αυτό.
- Εκτελέστε τον κωδικό σας μέσω minifiers. Οι Minifiers εκτελούν βελτιστοποιήσεις, όπως συντόμευση μεγάλων ονομάτων σε σύντομα (signUpDarkModeButton γίνεται ss), αφαιρώντας χαρακτήρες κενού διαστήματος και άλλες για να γίνει ο κώδικάς σας όσο το δυνατόν πιο συμπαγής χωρίς να χάσετε τίποτα.
- Τμηματική εισαγωγή. Οι βιβλιοθήκες είναι συχνά φουσκωμένες με πράγματα που δεν χρειάζεστε, αλλά είναι συσκευασμένα κάτω από ένα πακέτο ομπρέλας. Ίσως θέλετε μόνο μια συγκεκριμένη λειτουργία μιας βιβλιοθήκης βοηθητικού προγράμματος, οπότε αντί να εισάγετε ολόκληρη τη βιβλιοθήκη, μπορείτε να εισαγάγετε μόνο τον κωδικό που χρειάζεστε.
- Δέντρο-κούνημα νεκρός κώδικας. Μερικές φορές αφήνετε κώδικα για σκοπούς εντοπισμού σφαλμάτων ή δεν έχετε καθαρίσει επιμελώς μια λειτουργία που έχει καταργηθεί και, παρόλο που βρίσκεται στον πηγαίο κώδικα, δεν εκτελείται ποτέ. Υπάρχουν εργαλεία στην αλυσίδα εργαλείων JavaScript, όπως το Webpack, που μπορούν να ανιχνεύσουν νεκρό κώδικα ή αχρησιμοποίητες εξαρτήσεις και να τους αφαιρέσουν αυτόματα από τη δημιουργία παραγωγής για εσάς.
Χωρίστε τον κώδικα σε κομμάτια
Αφού μειώσετε όσο περισσότερο κώδικα μπορείτε από τη συνολική εφαρμογή σας, μπορείτε να σκεφτείτε να συμπιέσετε περαιτέρω αυτήν την ιδέα και να μειώσετε τον κωδικό που απαιτείται για την αρχική φόρτωση.
Ας υποθέσουμε ότι το 20% του κώδικά σας τροφοδοτεί κάποια λειτουργία της εφαρμογής σας στην οποία οι χρήστες μπορούν να αποκτήσουν μόνο μετά από μερικά κλικ. Θα ήταν χαμένος χρόνος για το πρόγραμμα περιήγησης να αναλύσει αυτόν τον κώδικα πριν εμφανίσει μια οθόνη φόρτωσης. Ο διαχωρισμός του κώδικά σας σε κομμάτια μπορεί να μειώσει σημαντικά τον χρόνο αλληλεπίδρασης.
Αντί να έχετε ένα αλληλένδετο γράφημα εξάρτησης των εισαγωγών για όλα τα αρχεία Javascript, εντοπίστε περιοχές που κόβονται εύκολα. Για παράδειγμα, ίσως ένα στοιχείο να φορτώνει μερικές βαριές βιβλιοθήκες. Μπορείτε να απομονώσετε αυτό το στοιχείο στο δικό του αρχείο και στη συνέχεια να κάνετε εισαγωγή μόνο όταν ο χρήστης είναι έτοιμος να αλληλεπιδράσει με αυτό το στοιχείο.
Υπάρχουν πολλές βιβλιοθήκες εκεί έξω για αναβολή της φόρτωσης, ανάλογα με το πλαίσιο που χρησιμοποιείτε. Δεν χρειάζεται να το παρακάνετε και να διαχωρίσετε κάθε στοιχείο, επειδή τότε ο χρήστης έχει ένα γρήγορο αρχικό φορτίο και πρέπει να περιμένει για κάθε επόμενη αλληλεπίδραση. Βρείτε τα μεγαλύτερα κομμάτια που μπορείτε να τμηματοποιήσετε και διαχωρίστε τον πηγαίο κώδικα εκεί.
Απόδοση από την πλευρά του διακομιστή
Δεδομένου ότι τα προγράμματα περιήγησης πρέπει να κάνουν όλη αυτή την εντατική ανάλυση και μεταγλώττιση και να έχουν χρήστες σε Chromebook και κινητές συσκευές, μια κοινή τεχνική για να μειώσετε τους χρόνους φόρτωσης είναι να αναθέσετε στους διακομιστές σας μέρος αυτού του φορτίου. Αυτό σημαίνει ότι αντί να δώσετε μια κενή σελίδα και στη συνέχεια να χρησιμοποιήσετε Javascript για να συμπληρώσετε όλο το περιεχόμενο, όπως κάνουν οι περισσότερες εφαρμογές μιας σελίδας αυτές τις μέρες, μπορείτε να εκτελέσετε μια μηχανή Javascript στον διακομιστή σας (συνήθως Node.js) και να συμπληρώσετε όσο περισσότερα από τα δεδομένα και το περιεχόμενο μπορείτε.
Οι διακομιστές σας θα είναι πολύ πιο γρήγοροι και προβλέψιμοι από τα προγράμματα περιήγησης των χρηστών. Αναπόφευκτα, θα πρέπει ακόμα να αναλύσουν κάποιο κώδικα Javascript για να είναι διαδραστική η εφαρμογή. Ωστόσο, η απόδοση από την πλευρά του διακομιστή μπορεί να συμπληρώσει μεγάλο μέρος του αρχικού περιεχομένου, έτσι ώστε όταν ο χρήστης λάβει τη σελίδα, να εμφανίζει ήδη μια οθόνη φόρτωσης ή μια γραμμή προόδου τουλάχιστον.
Και εάν χρειάζονται δεδομένα για την αρχική προβολή, ο πελάτης δεν χρειάζεται να υποβάλει ξεχωριστό αίτημα για να το λάβει. θα έχει ήδη ενυδατωθεί στην εφαρμογή για χρήση από τον πελάτη.
Συμπίεση περιουσιακών στοιχείων
Τα στοιχεία κάνουν μια σελίδα να ζωντανεύει και μια σελίδα δεν αισθάνεται πλήρως φορτωμένη μέχρι να ολοκληρωθεί η απόδοση αυτών των στοιχείων. Αυτό μπορεί να είναι το φόντο σας, τα εικονίδια της διεπαφής χρήστη, μια εικόνα προφίλ χρήστη, ακόμη και ο περιστροφέας φόρτωσης. Συχνά, τα στοιχεία μπορούν επίσης να αλλάξουν τη διάταξη, επομένως, εάν ένας χρήστης αρχίσει να προσπαθεί να αλληλεπιδράσει με κάτι, η σελίδα μπορεί να συνεχίσει να μεταπηδά κατά τη φόρτωση των στοιχείων. Μερικές φορές, αυτά τα στοιχεία είναι το μεγαλύτερο περιεχόμενο.
Αλλά τα στοιχεία είναι επίσης ένα από τα πιο βαριά μέρη μιας εφαρμογής. Μια εικόνα μπορεί να εισέλθει σε πολλά megabyte και η φόρτωση πολλών εικονιδίων μπορεί εύκολα να υπερβεί το μέγιστο όριο ταυτόχρονων αιτημάτων δικτύου του προγράμματος περιήγησης, προκαλώντας μια εκπληκτική ουρά φόρτωσης.
Σχεδόν ποτέ δεν θέλετε να κατεβάσετε μια εικόνα από το διαδίκτυο και στη συνέχεια να την αναφέρετε στην εφαρμογή σας. Οι εικόνες πρέπει να αλλάξουν το μέγεθος στις μικρότερες δυνατές διαστάσεις στις οποίες θα εμφανίζονται. Εάν έχετε ένα προφίλ χρήστη που εμφανίζεται σε ένα μικροσκοπικό στοιχείο 50 pixel επί 50 pixel, χωρίς αλλαγή μεγέθους, η εφαρμογή σας θα αφιερώσει χρόνο για να πραγματοποιήσει λήψη της πλήρους εικόνας που φαίνεται ευκρινής ως ταπετσαρία επιφάνειας εργασίας και στη συνέχεια να αλλάξει το μέγεθός της στο μικροσκοπικό μέγεθος.
Δεύτερον, οι εικόνες μπορούν να συμπιεστούν ανάλογα με τη μορφή τους. Σήμερα, το webm είναι η προτιμώμενη μορφή, αλλά το πεδίο συμπίεσης στον Ιστό βελτιώνεται συνεχώς και πολλές νέες μορφές είναι στον ορίζοντα. Λόγω της μεταβαλλόμενης φύσης των μορφών, ορισμένα προγράμματα περιήγησης ενδέχεται να μην υποστηρίζουν τα νεότερα! Ευτυχώς, η τεχνολογία του προγράμματος περιήγησης μπορεί να επιτρέψει στο πρόγραμμα περιήγησης του χρήστη να φορτώσει οποιαδήποτε μορφή υποστηρίζει.
Επομένως, συμπιέστε στην πιο πρόσφατη και καλύτερη μορφή, αλλά διατηρήστε επίσης μια λιγότερο μοντέρνα έκδοση και χρησιμοποιήστε στοιχεία εικόνας και βίντεο που υποστηρίζουν επαναλαμβανόμενες μορφές.
συμπέρασμα
Αυτές είναι πέντε από τις πιο αποτελεσματικές τεχνικές για να προσφέρετε στους χρήστες σας μια απίστευτη γρήγορη πρώτη φόρτωση στην εφαρμογή σας. Αυτά θα βελτιώσουν τα ποσοστά μετατροπών, την ευτυχία των χρηστών, ακόμη και την κατάταξη αναζήτησης, καθώς το SEO ανταμείβει τους γρήγορους χρόνους φόρτωσης. Στο Terrastructχρησιμοποιούμε αυτές τις τεχνικές και όχι μόνο, ώστε οι χρήστες να μπορούν να δημιουργούν και να προβάλλουν διαγράμματα που βλέπετε σε αυτό το άρθρο το συντομότερο δυνατό.