Από τη δημιουργία του Διαδικτύου, τα μέσου μεγέθους αρχεία έχουν αυξηθεί σταθερά. Αυτό που ξεκίνησε ως kilobytes έχει προχωρήσει σε megabytes (ναι, πληθυντικός), και τα αρχεία μας είναι μόνο αυξάνεται ακόμα.
Ενώ αυτό το φαινόμενο δεν είναι απογοητευτικό με την πρώτη ματιά, ο αντίκτυπος που έχει στην απόδοση και στη συντηρησιμότητα είναι φοβερός. Προσθέστε σε συσκευές ηλικίας, περιορισμοί εύρους ζώνης ή γενικά αργές ταχύτητες ... και έχουμε ένα πολύ μεγαλύτερο πρόβλημα.
Ευτυχώς, έχουμε τον έλεγχο όχι μόνο των μεγεθών των αρχείων μας, αλλά και του τρόπου με τον οποίο οι σελίδες μας αποδίδονται στο πρόγραμμα περιήγησης. Αυτό το είδος ελέγχου δίνει στους προγραμματιστές ιστού, όπως εμείς οι ίδιοι, την ευκαιρία να βοηθήσουμε να διευκολύνουμε αυτό το πρόβλημα και να βελτιστοποιήσουμε τον κώδικα μας για καλύτερες επιδόσεις στη διαδικασία.
Κατανοώ πλήρως την έλλειψη ενδιαφέροντος όταν οι περισσότερες συνδέσεις στο Διαδίκτυο στις ΗΠΑ είναι αρκετά γρήγορες αυτές τις μέρες. Θέλω να πω, αν όλα λειτουργούν καλά ήδη γιατί ενοχλούν;
Η απόδοση και η βελτιστοποίηση αφορούν περισσότερο από το πόσο γρήγορα μπορούμε να κατεβάσουμε περιεχόμενο. Υπάρχουν επίσης αρκετά SEO και UX οφέλη που έπρεπε να έχουν με το χρόνο να εξετάσουμε τον κώδικα μας. Για να μην αναφέρουμε, η μείωση του μεγέθους των αρχείων βελτιστοποιώντας τον κώδικα μας για καλύτερη απόδοση έχει το πρόσθετο πλεονέκτημα ότι μειώνει το κόστος εύρους ζώνης ως κεντρικούς υπολογιστές και μειώνει τη χρήση του εύρους ζώνης σε επίπεδο χρήστη.
Ο αρθρωτός κώδικας συνήθως προσθέτει φούσκωμα με τη μορφή περισσότερων επιλογών. Εδώ, θέλουμε να σκεφτούμε τη δομική προσέγγιση όσον αφορά τον συνδυασμό όσο το δυνατόν περισσότερων κοινών στοιχείων του κώδικα μας. Εάν μπορούμε να συνδυάσουμε δύο κατηγορίες CSS σε ένα και να χρησιμοποιήσουμε λιγότερο κώδικα για να δώσουμε το ίδιο αποτέλεσμα, θα πρέπει.
Η modularity δεν είναι τόσο σημαντική όταν πρόκειται για βασικά HTML και CSS, αλλά όταν μπαίνεις στον πιο περίπλοκο κόσμο του JavaScript, το να έχεις πάρα πολύ πρήξιμο μπορεί να σε βλάψει - ειδικά στο κινητό.
Τα αιτήματα εξάρτησης είναι μακράν ο μεγαλύτερος παράγοντας που επιβραδύνει τις περισσότερες ταχύτητες φόρτωσης σελίδων. Κάθε πρόσθετο αίτημα προσθέτει φούσκωμα και ένα άλλο επίπεδο πολυπλοκότητας στη διαδικασία ανάλυσης και λήψης. Είναι συχνά εύκολο να ξεχνάμε ότι και οι εικόνες κλήσης από το φύλλο στυλ σας μετράνε επίσης, οπότε φροντίστε να τις περιορίσετε και να χρησιμοποιήσετε εναλλακτικές μεθόδους βελτιστοποίησης όπως sprites ή SVG όταν είναι δυνατόν.
Ενώ είμαστε σχετικά με το θέμα των εξωτερικών εξαρτήσεων, εάν ο ιστότοπός σας είναι αρκετά μεγάλος ώστε να απαιτεί τουλάχιστον μερικές δωδεκάδες αιτήσεις στο ελάχιστο ... Μπορεί να είναι καιρός να εξετάσετε τη χρήση ενός CDN. Η χρήση ενός CDN για τη διανομή του περιεχομένου σας δεν θα μειώσει τα μεγέθη των αρχείων ή / και τους χρόνους φόρτωσης όσο θα αφαιρέσει επιπλέον αιτήσεις HTTP όλα μαζί, αλλά μπορεί πιθανότατα να απομακρύνει τυχόν αργές συνδέσεις διακομιστή εκτός της εξίσωσης τουλάχιστον.
Θα πρέπει να υπάρχει μια πολύ μεγάλη διαφορά κατά τη σύγκριση των βάσεων ανάπτυξης και παραγωγής σε επίπεδο παραγωγής. Κάνοντας αυτό το μόνο βήμα μπορεί να δει μερικές φορές τη μεγαλύτερη μείωση στα μεγέθη των αρχείων σε όλο το σκάφος.
Είναι τυπικό σήμερα που βλέπεις οι προγραμματιστές να αναφέρουν το περιβάλλον "παραγωγής" ή "ανάπτυξης", ειδικά σε έργα μεγάλης κλίμακας. Αλλά είναι επίσης χρήσιμο και στο μικρότερο τέλος των πραγμάτων. Η μεγαλύτερη διαφορά μεταξύ των δύο περιβαλλόντων μπορεί να παρατηρηθεί με τη συμπίεση της εικόνας και την ελαχιστοποίηση / συμπίεση του κώδικα. Στο τέλος, θέλουμε το περιβάλλον παραγωγής μας να είναι όσο το δυνατόν πιο φτωχό και γρήγορο, ενώ το αναπτυξιακό μας περιβάλλον θα πρέπει να είναι το ίδιο, μόνο μείον τη βελτιστοποίηση της συμπίεσης εικόνας / κώδικα.
Η χρήση των ενσωματωμένων εργαλείων, όπως η συμπίεση "Save for web" του Photoshop, μπορεί να αποτελέσει ένα καλό σημείο εκκίνησης για τις εικόνες. Υπάρχει πληθώρα γνώσεων διερευνήθηκε αλλού καθώς και συζητήσεις σχετικά με τις μορφές εικόνας, τους αλγόριθμους συμπίεσης, τον ποιοτικό έλεγχο και τις βέλτιστες πρακτικές.
Για τον κώδικα, η καλύτερη χρήση της συμπίεσης εξαρτάται συνήθως από τη γλώσσα με την οποία εργάζεστε. Είναι επίσης εξαιρετικά αμφισβητήσιμο εάν η συμπίεση του κώδικα βοηθά ή πονάει άλλους ανθρώπους που προσπαθούν να κατανοήσουν τον κώδικα σας, αλλά αυτή είναι μια συζήτηση για μια άλλη φορά. Όταν πρόκειται για απλό HTML και CSS, χρησιμοποιώ υπηρεσίες όπως Τον htmlcompressor της Google και το YUI Συμπιεστής για το CSS.
Μερικές φορές ο ίδιος ο κώδικας που γράφουμε είναι ο πιο αργός σύνδεσμος στην αλυσίδα. Ανεπαρκής CSS ή φουσκωμένο JavaScript μπορεί να βλάψει τους χρόνους φόρτωσης περισσότερο από ό, τι μπορεί να σκεφτείς. Αυτό Mozilla η θέση μεταφράζεται σε μεγάλη λεπτομέρεια σχετικά με τη σημασία της γραμμής επιλογών CSS και εξηγώντας πώς τα προγράμματα περιήγησης τους αποδίδουν. Εν ολίγοις, γράφοντας το ακριβές μονοπάτι κάτω από μια αλυσίδα επιλογών είναι πολύ λιγότερο αποτελεσματική απ 'ό, τι απλά χρησιμοποιώντας τον μικρότερο μοναδικά αναγνωρίσιμο επιλογέα. Και οι δύο κατευθύνουν το στυλ στο ίδιο στοιχείο, ο τελευταίος απλά κάνει τη δουλειά πολύ, πολύ πιο γρήγορα.
Το JavaScript μπορεί να είναι ακόμη χειρότερο από το κακά γραπτό CSS και σε πολλές περιπτώσεις είναι εύκολα παραβλεφθεί. Πόσες φορές έχετε αντιγράψει και επικολλήσει μια εξωτερική βιβλιοθήκη JS στο έργο σας χωρίς πραγματικά να ψάξετε σε βάθος στην ίδια την πηγή; Το Typekit είναι ένα θαυμάσιο παράδειγμα αυτού, καθώς όταν οι διακομιστές τους σταματήσουν, μπορεί να φέρουν μια ιστοσελίδα χρησιμοποιώντας τις γραμματοσειρές τους στα γόνατά τους και να προκαλέσουν επιπλέον 30 δευτερόλεπτα ή ακόμα και λεπτά επιπλέον χρόνου φόρτωσης.
Ευτυχώς, τέτοιου είδους συμβάντα συμβαίνουν σπάνια, αλλά εξακολουθεί να είναι καλή πρακτική η τελευταία κλήση του JavaScript, αν είναι δυνατόν, όπως συμβαίνει με το Google Analytics. Με αυτόν τον τρόπο, επιτρέπει στο πρόγραμμα περιήγησης να αναλύει τα αρχεία κεφαλής (CSS, αιτήσεις HTTP κ.λπ.) και να εμφανίζει τη σήμανση, προτού αρχίσει η JavaScript να επιβραδύνει τα πράγματα.
Σύμφωνα με το στόχο μας να γράψουμε πιο ευέλικτους επιλογείς CSS και να διατηρήσουμε το bloat στο ελάχιστο, η καταγραφή αποτελεσματικών HTML θα πρέπει επίσης να αποτελέσει προτεραιότητα.
Οι επαναφορές CSS συχνά στοχεύουν σε όλα τα κοινά στοιχεία και επιβάλλουν την "επαναφορά" στυλ σε αυτά. Έτσι, ακόμα και αν δεν στοχεύετε αυτό το επιπλέον div, είναι πιθανό ακόμα να επιβραδύνει τα πράγματα κάτω από την ανάγκη να έχει το padding και το περιθώριο του να επαναφέρεται στο ελάχιστο. Συνήθως, ένα επιπλέον div ή δύο δεν θα βλάψει τίποτα. Μόνο όταν ξεκινάτε να τελειώνετε με δεκάδες από αυτούς, τα πράγματα γίνονται τρελά. Με την εισαγωγή περισσότερων στοιχείων στο spec HTML5, έχουμε επίσης μεγαλύτερη ευελιξία και σε αυτόν τον τομέα.
Η Google έχει καταστήσει την προτεραιότητα να κτυπήσει το Διαδίκτυο συλλογικά σε σχήμα. Προκειμένου να καταλαμβάνουν εξέχουσες θέσεις στα αποτελέσματα αναζήτησης, οι σελίδες πρέπει τώρα να δώσουν ιδιαίτερη προσοχή σε πολλά διαφορετικά χαρακτηριστικά σχετικά με τον τρόπο με τον οποίο εκδίδονται. Κλήση πάρα πολλούς εξωτερικούς πόρους, που έχουν παράλογα μεγάλες εικόνες, ή ακόμη και έχουν κακώς γραπτή JavaScript μπορεί να τραβήξει ένα site κάτω στην κατάταξη.
Ευτυχώς όμως, όλα αυτά έχουν καλή πρόθεση καθώς οι απαιτήσεις τους για μια καλή κατάταξη αναζήτησης βασίζονται σε καλές πρακτικές ανάπτυξης. Η Google προσφέρει επίσης ένα πολύ σε βάθος οδηγό στη βελτιστοποίηση των διαφορετικών πτυχών του ιστότοπού σας για καλύτερη SEO - η οποία επίσης συμβαίνει για την προώθηση φανταστικών πρακτικών ανάπτυξης ταυτόχρονα.
Όταν βελτιστοποιούμε τον κώδικα μας, πρέπει όχι μόνο να σκεφτόμαστε τα μεγέθη των αρχείων αλλά και να εξετάζουμε πώς θα διαβαστεί. είτε από προγράμματα περιήγησης είτε από άλλους ανθρώπους. Θα πρέπει επίσης να ληφθεί υπόψη η χρήση κινητής τηλεφωνίας, δεδομένου ότι πολλοί πάροχοι υπηρεσιών επιβάλλουν αυτές τις μέρες πολύ περιοριστικά ανώτατα όρια δεδομένων.
Έτσι, αν και μπορεί να χρειαστεί περισσότερος χρόνος για να εκτελέσετε όλη αυτή τη βελτιστοποίηση, είναι σίγουρα μια πολύτιμη προσπάθεια, αφού όχι μόνο προσφέρει καλύτερες επιδόσεις στο πρόγραμμα περιήγησης και στο κινητό, αλλά έχει επίσης την ευκαιρία να προωθήσει καλύτερες πρακτικές ανάπτυξης και ακόμη και να αποκτήσει το περιεχόμενό σας υψηλότερη κατάταξη στις μηχανές αναζήτησης όπως το Google.
Την επόμενη φορά που θα προετοιμαστείτε να ξεκινήσετε, ρίξτε τις εικόνες σας σε μια μηχανή συμπίεσης ... Μπορεί να εκπλαγείτε πόσα megabytes μπορεί να ξυρίσει!
Προτεινόμενη εικόνα, αρθρωτή εικόνα ταχύτητας μέσω Shutterstock.