Μαθήματα από το React και το Vue Frameworks για την ταχύτητα σελίδας

Στη συνεχή επιδίωξή μας για ταχύτητα σελίδας, συχνά βρίσκουμε τον εαυτό μας να περιστρέφεται στο ίδιο σημείο. Παρά τις προσπάθειες των ομάδων προϊόντων, μάρκετινγκ και ανάπτυξης να παρακινήσουν τις ομάδες τεχνολογίας, οι εργασίες που θα μπορούσαν να βελτιώσουν την απόδοση του ιστότοπου συχνά αναβάλλονται λόγω της ανάγκης για ανακατασκευή, και ακόμη και όταν ολοκληρωθούν, δεν αποδίδουν πάντα πλήρη αποτελέσματα. Σε αυτόν τον κύκλο, είναι ωφέλιμο να εξετάσουμε ορισμένες διορατικές προοπτικές για την επίτευξη πραγματικής απόδοσης. Για παράδειγμα, ποια μαθήματα μπορούμε να μάθουμε από την ταχύτητα του React.js και του Vue.js ή τις επεκτάσεις SSR (απόδοση από την πλευρά του διακομιστή) όπως το Next.js και το Nuxt.js σε σύγκριση με άλλες πλατφόρμες; Δεν είναι καιρός να βελτιστοποιήσετε τα MB των αρχείων jQuery και CSS; Πότε θα ξυπνήσουν οι μεγάλες εταιρείες που θυσιάζουν την απόδοσή τους στον ιστό σε κακώς ενημερωμένους προγραμματιστές front-end; Ας εξετάσουμε αυτά τα ερωτήματα ένα προς ένα.

Γιατί οι ιστότοποι που βασίζονται στο Next.js και το Nuxt.js είναι γρήγοροι;

Οι πλατφόρμες Next και Nuxt, οι οποίες είναι φιλικές προς το SEO δομές που βασίζονται σε React και Vue, ξεχωρίζουν για την απόδοση ταχύτητας. Αλλά γιατί αυτές οι πλατφόρμες είναι τόσο γρήγορες;

React.js και Vue.js είναι πλαίσια βασισμένα σε στοιχεία που αναλύουν κάθε σελίδα σε επιμέρους στοιχεία, όπως φαίνεται παρακάτω.

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

• επικεφαλίδα
• Καταχώρηση
  • Πληροφορίες εισόδου στη λίστα
    • Τίτλος σελίδας
    • Διακεκομμένη
    • Αριθμός προϊόντων
  • Φίλτρα
    • Φίλτρο κατηγορίας
    • φίλτρο Τιμή
    • ...
  • Ταξινόμηση
  • Κάρτες προϊόντων
    • Φωτογραφία προϊόντος
  • Λεπτομέρειες για το προϊόν
    • Όνομα προϊόντος
    • Τιμή προϊόντος
      • Διαγώνια τιμή
      • Τιμή πώλησης
    • Ποσοστό έκπτωσης
    • Πληροφορίες καμπάνιας
  • Σελιδοποίηση
  • Περιεχόμενο κατηγορίας
• Υποσέλιδο

Κατά τη δημιουργία μιας εφαρμογής που βασίζεται σε στοιχεία με το Nuxt.js, καθένα από αυτά τα στοιχεία κωδικοποιείται ξεχωριστά και περιλαμβάνεται στην κύρια σελίδα. Για παράδειγμα, εξετάστε ένα αρχείο με το όνομα ProductPhoto.js. Όποιες και αν είναι οι λειτουργίες που απαιτούνται για τις φωτογραφίες προϊόντων (καρουσέλ, προβολή εικόνων με απόκριση κ.λπ.), ο κώδικας JS είναι γραμμένος σε αυτό το στοιχείο. Ομοίως, μόνο τα αρχεία CSS που χρησιμοποιούνται από αυτό το στοιχείο περιλαμβάνονται σε αυτό. Αυτό σημαίνει ότι μόνο τα αρχεία που απαιτούνται από κάθε στοιχείο εκτελούνται εάν χρησιμοποιείται το στοιχείο.

Πώς αντιμετωπίζεται αυτή τη διαδικασία στις περισσότερες πλατφόρμες Ιστού;

Ένα αρχείο script.js περιλαμβάνει κώδικα για τα πάντα, από τη συνδρομή, τα φίλτρα και τις σελίδες καλαθιού αγορών μέχρι το μενού, το οποίο εκτελείται σε όλες τις σελίδες. Το αποτέλεσμα; 

Ιστοσελίδες με α Αρχείο JS 3 MB και CSS 1.5 MB αρχείο. Το κύριο πρόβλημα δεν είναι μόνο τα μεγέθη των αρχείων, αλλά το γεγονός ότι δεν μπορείτε να περιμένετε από μια μέση CPU κινητής συσκευής Android να εκτελεί χιλιάδες γραμμές κώδικα μέσα σε χιλιοστά του δευτερολέπτου. Εκτελώντας μόνο τον κωδικό που χρειάζεστε, μπορείτε να επιτύχετε κέρδη απόδοσης.

Πώς να εξαλείψετε τους πόρους αποκλεισμού απόδοσης;

Σήμερα, το 32% των κορυφαίων 1 εκατομμυρίων ιστοτόπων χρησιμοποιεί τη βιβλιοθήκη γραμματοσειρών Font Awesome, η οποία είναι κατά μέσο όρο περίπου 250 KB. Λαμβάνοντας υπόψη ότι η ασύγχρονη φόρτωση δεν προτιμάται λόγω του εφέ flick, σκεφτείτε πόσες γραμματοσειρές είναι ορατές στην πρώτη οθόνη μιας σελίδας όταν ανοίγει σε κινητό ή επιτραπέζιο υπολογιστή. Μια σύντομη μελέτη σε 50 διαφορετικές πλατφόρμες βρήκε ότι χρησιμοποιούνται κατά μέσο όρο 3.4 εικονίδια (συνηθέστερα: καλάθι, χρήστης, μενού, ειδοποίηση). Έτσι, για να φορτώσουμε μόνο τέσσερα εικονίδια χωρίς προβλήματα, φορτώνουμε ολόκληρη τη βιβλιοθήκη.

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

Τι μας λέει η χρήση του Bootstrap εναντίον του React JS;

Η βιβλιοθήκη Bootstrap JS έχει μερίδιο αγοράς 26% σε όλους τους ιστότοπους παγκοσμίως, ενώ η χρήση του React είναι περίπου 4%. Το Bootstrap είναι δημοφιλές για την ευελιξία και την ευκολία χρήσης του, επιτρέποντας γρήγορη ανάπτυξη. Ωστόσο, αυτή η ευελιξία έχει κόστος: γενικές λειτουργίες JS, εκτεταμένη κάλυψη κώδικα και λειτουργίες για λειτουργίες που ενδέχεται να μην χρησιμοποιήσετε ποτέ περιλαμβάνονται στο έργο σας.

Λοιπόν, ας ρωτήσουμε: Τι σημαίνει μεγαλύτερη από 100% αύξηση στη χρήση από το υποδεικνύουν οι κορυφαίοι 10,000 έως οι κορυφαίοι 1,000 ιστότοποι? Δείχνει ότι οι καλύτεροι στρέφουν τις λεπτομέρειες προς όφελός τους για να γίνουν ακόμα καλύτεροι.

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