Τι πρέπει να γνωρίζει ο κάθε προγραμματιστής Ιστού για την απόδοση του Front-End
Πολύ συχνά ως προγραμματιστές, αγνοούμε ένα κρίσιμο τελευταίο βήμα προτού ξεκινήσετε μια ιστοσελίδα: βελτιστοποιώντας την απόδοση .
Οι περισσότεροι προγραμματιστές αναγνωρίζουν τώρα ότι ο οργανωμένος, έγκυρος κώδικας εξασφαλίζει τη δυνατότητα συντήρησης και συμβατότητας.
Όποιος αμφιβάλλει για αυτό, απλά πρέπει να μιλήσει με έναν προγραμματιστή που έχει πάρει την εργασία σε έναν παλιό ιστότοπο που είναι γεμάτος από ανοργάνωτους, μη συνηγμένους κώδικες σπαγγέτι.
Ακριβώς όπως προετοιμάζεται ο κώδικας μας για να το διαβάσετε από άλλους προγραμματιστές είναι σημαντικό, έτσι ετοιμάζεται ο κώδικας μας να διαβάζεται από προγράμματα περιήγησης. Μεγάλη ανάπτυξη Ιστού μπορεί να ξεκινήσει με μεγάλη οργάνωση, αλλά τελειώνει με μεγάλη βελτιστοποίηση.
Αυτό το άρθρο εισάγει τις βέλτιστες πρακτικές της απόδοσης του front-end.
Η ιστορία ενός αιτήματος στο Web
Όταν ένας επισκέπτης ζητά μια σελίδα από τον ιστότοπό σας, συμβαίνουν πολλά πράγματα:
- Ο διακομιστής ιστού σας επιστρέφει ένα έγγραφο HTML.
- Το πρόγραμμα περιήγησης του επισκέπτη αναζητά και ζητά συνδεδεμένα αρχεία (CSS, JavaScript, εικόνες).
- Ο διακομιστής ιστού σας επιστρέφει τα συνδεδεμένα αρχεία.
- Το πρόγραμμα περιήγησης του επισκέπτη εμφανίζει αυτά τα αρχεία, τα εκτελεί ή τα κοιτάζει για περισσότερα πράγματα που ζητούν (π.χ. εικόνες φόντου CSS).
Ενώ αυτή η διαδικασία φαίνεται αρκετά απλή, μια σειρά από επιπλοκές θα μπορούσαν πραγματικά να επιβραδύνουν:
- Κάθε αρχείο που ζητείται έχει κεφαλίδες που πρέπει επίσης να σταλούν. Η αποστολή πολλών μικρών αρχείων δημιουργεί περιττές επιβαρύνσεις, τις οποίες αποφεύγετε με μερικά μεγάλα αρχεία.
- Τα περισσότερα προγράμματα περιήγησης είναι περιορισμένα στον αριθμό των αρχείων που μπορούν να μεταφορτώσουν από έναν τομέα τη φορά. Εάν έχετε 24 αρχεία για λήψη από τον ίδιο τομέα, η ένατη δεν θα ξεκινήσει η λήψη έως ότου ολοκληρωθεί η πρώτη.
- Πολλά προγράμματα περιήγησης εμποδίζουν όλες τις παράλληλες λήψεις κατά τη φόρτωση του εξωτερικού JavaScript.
Ενώ όλα αυτά μπορεί να ακούγονται κάπως περίπλοκα, υπάρχουν οι βέλτιστες πρακτικές που πρέπει να ακολουθήσετε για να το καταστήσετε πολύ πιο απλό. Τόσο η Google όσο και το Yahoo προσφέρουν αρκετά ολοκληρωμένες οδηγίες σχετικά με τη βελτιστοποίηση του ιστότοπου στο άκρο:
Πολλές από τις συστάσεις τους απαιτούν λίγη δουλειά. Παρακάτω είναι τα πέντε καλύτερα πράγματα που μπορείτε να κάνετε σήμερα για να βελτιώσετε την απόδοση του ιστότοπού σας με ελάχιστη προσπάθεια.
5 γρήγορες αλλαγές για να βελτιώσετε την απόδοση του ιστοτόπου σας
1. Μετακινήστε το JavaScript στο Υποσέλιδο
Η μετακίνηση των αρχείων σας JavaScript στο υποσέλιδο σελίδας είναι το ταχύτερο και ευκολότερο πράγμα που μπορείτε να κάνετε για να βελτιώσετε την απόδοση. Πολλά προγράμματα περιήγησης εμποδίζουν παράλληλες λήψεις κατά τη φόρτωση εξωτερικών αρχείων JavaScript. βάζοντας τα αρχεία σας στο υποσέλιδο, τα προγράμματα περιήγησης θα αρχίσουν να φορτώνουν πρώτα τα άλλα πράγματα.
Προσέξτε, ωστόσο, για παρενέργειες στο χρονοδιάγραμμα και την εμφάνιση. Εάν χρησιμοποιείτε το JavaScript για να αλλάξετε την εμφάνιση ενός στοιχείου, δεν θα εκτελείται παρά μετά από μεγαλύτερο χρονικό διάστημα.
2. Τοποθετήστε πρώτα το CSS
Η πρώτη φόρτωση του CSS είναι εξίσου σημαντική με τη θέση του JavaScript στο τέλος του εγγράφου HTML, για δύο λόγους:
- Το CSS περιέχει συχνά εικόνες φόντου που απαιτούν έναν άλλο γύρο αιτημάτων. Το να ξεκινάτε αυτό το ASAP είναι σημαντικό.
- Οι σελίδες εμφανίζονται μόλις το CSS είναι έτοιμο.
Τοποθετώντας το CSS στην κορυφή του εγγράφου διασφαλίζετε ότι όλες οι εικόνες φόντου αρχίζουν να φορτώνουν αμέσως και ότι ο ιστότοπός σας θα γίνει όσο το δυνατόν γρηγορότερα.
3. Συμπίεση και ελαχιστοποίηση του CSS και του JavaScript
Όταν γράφετε κώδικα για συντηρησιμότητα, η χρήση πολλών διαφορετικών φύλλων στυλ και αρχείων JavaScript συχνά έχει νόημα. Όταν βελτιστοποιείτε την απόδοση, αυτό είναι σχεδόν το χειρότερο πράγμα που μπορείτε να κάνετε. Με κάθε αρχείο που προσθέτετε, χρειάζεται να αποστέλλεται μια κεφαλίδα και ένα επιπλέον αίτημα πρέπει να κάνει το δρόμο προς και από το διακομιστή.
Συνδυάστε όλα τα CSS σε ένα αρχείο και ολόκληρο το JavaScript σας σε ένα άλλο και, στη συνέχεια, ελαχιστοποιήστε και τα δύο. (Μην ξεχάσετε να βάλετε το CSS στην κορυφή του εγγράφου HTML και το JavaScript στο υποσέλιδο.)
Αν και η ανασυγκρότηση και η μικρογραφία των αρχείων σας μετά από κάθε αλλαγή μπορεί να ακούγεται σαν πόνος, η διαφορά απόδοσης είναι πραγματικά δραματική.
Πόροι σύνταξης και ελαχιστοποίησης:
- Online CSS συμπιεστή και μινιατούρα ,
- Online Συμπιεστής JavaScript ,
- WordPress WP Minify συνδέω,
- PHP5 βιβλιοθήκη ,
- Η Google Apache Module .
4. Προσοχή σε δέσμες ενεργειών τρίτου μέρους
Πολλοί ιστότοποι σήμερα περιέχουν δέσμες ενεργειών και γραφικά τρίτων κατασκευαστών που φορτώνουν δεδομένα από άλλους διακομιστές. Παραδείγματα είναι το κουμπί "κουμπιά" "Tweet", το κουτί ανεμιστήρων Facebook, το κουμπί "Μοιραστείτε αυτό το" ή ακόμα και το Google Analytics. Θα σκεφτόσαστε ότι όλα αυτά θα είναι καλά κατασκευασμένα, αλλά πολλά δεν είναι. Για παράδειγμα, το Το widget Digg κάνει εννέα αιτήματα , είναι 52 KB και αποκλείει την κύρια σελίδα από τη λήψη!
Χρησιμοποιήστε αυτά τα widgets με σιγουριά, μετρήστε την απόδοσή τους και αναζητήστε ασύγχρονες εναλλακτικές λύσεις. Υπάρχουν διαθέσιμες εναλλακτικές λύσεις για τα πιο δημοφιλή widget. η εγκατάστασή τους είναι λίγο πιο περίπλοκη, αλλά έχουν πολύ καλύτερη απόδοση. Μπορείτε να τα βρείτε συνήθως με ένα μικρό σκάψιμο.
Ασύγχρονοι πόροι widget:
- Google Analytics ,
- Tweet Κουμπί ,
- WordPress Ασύγχρονα γραφικά στοιχεία συνδέω,
5. Μετρήστε τα αποτελέσματά σας
Μερικά από τα εξαιρετικά εργαλεία εκεί έξω καθιστούν εύκολη τη μέτρηση της απόδοσης της ιστοσελίδας σας. Ορισμένα μπορούν να χρησιμοποιηθούν στο πρόγραμμα περιήγησης. άλλοι είναι συνδεδεμένοι:
- Firebug Firebug
Ελέγξτε την καρτέλα Net στο Firebug για να δείτε ένα οπτικό χρονοδιάγραμμα για το πόσο διάστημα χρειάζεται ο ιστοχώρος σας για φόρτωση και γιατί συμβαίνει αυτό. - YSlow για Firebug
Η Yahoo κυκλοφόρησε ένα plug-in για το Firebug που αναλύει έναν ιστότοπο ενάντια στις συστάσεις YSlow του και προτείνει τρόπους βελτίωσης της απόδοσης. - PageSpeed για το Firebug
Αυτό λειτουργεί ακριβώς όπως το YSlow αλλά βασίζεται στις συστάσεις του PageSpeed της Google. - GTMetrix
Αυτό το εργαλείο λαμβάνει μια διεύθυνση URL και παρέχει μια πλήρη έκθεση σχετικά με την απόδοση του ιστότοπου με βάση τα YSlow και PageSpeed. Είναι βολικό όταν το Firebug δεν είναι διαθέσιμο ή θέλετε να μοιραστείτε τα αποτελέσματα μέσω ενός συνδέσμου.
Πηγαίνοντας ένα βήμα πιο πέρα
Οι περισσότεροι προγραμματιστές ιστού θα μπορούσαν να εφαρμόσουν τις πέντε συμβουλές παραπάνω αρκετά εύκολα. Τούτου λεχθέντος, πολλά άλλα πράγματα αξίζει να κάνετε εάν θέλετε να σκάψετε λίγο βαθύτερα και να βελτιστοποιήσετε τη διαμόρφωση του διακομιστή σας.
Η Προσθήκη λήγει στις κεφαλίδες
Συμπεριλάβετε μια κεφαλίδα λήξης με κάθε αρχείο που στέλνει ο διακομιστής σας. Αυτό δείχνει στο πρόγραμμα περιήγησης πόσο καιρό είναι καλό το αρχείο. Με αυτό τον τρόπο, το πρόγραμμα περιήγησης ξέρει να αποθηκεύει το αρχείο για την επόμενη φορά που αναφέρεται, έτσι ώστε το πρόγραμμα περιήγησης να μην χρειάζεται να το επαναφέρει ξανά από το διακομιστή.
Πολλοί ιστότοποι περιλαμβάνουν το ίδιο αρχείο CSS σε κάθε σελίδα, αλλά δεν υπάρχει κανένας λόγος για τον οποίο ο επισκέπτης θα πρέπει να το κατεβάσει για κάθε σελίδα. το πρόγραμμα περιήγησης θα πρέπει να γνωρίζει την προσωρινή μνήμη του.
Χρησιμοποιήστε τη συμπίεση Gzip
Οι υπολογιστές του σήμερα είναι πολύ γρήγοροι. Η συμπίεση Gzip εκμεταλλεύεται αυτό ζητώντας από το διακομιστή να συμπιέσει κάθε αρχείο πριν την αποστείλει στον επισκέπτη.
Το πρόγραμμα περιήγησης του επισκέπτη στη συνέχεια μεταφορτώνει και αποσυμπιέζει. Στο παρελθόν, έπρεπε να εξετάσουμε πόρους διακομιστή για να αποφασίσουμε αν θα το ενεργοποιήσουμε. Σήμερα, δεν υπάρχει ουσιαστικά κανένα μειονέκτημα για την ενεργοποίηση του gzip.
Εξετάστε την εγκατάσταση του mod_pagespeed
Η Google μόλις κυκλοφόρησε μια λειτουργική μονάδα Apache που ονομάζεται mod_pagespeed . Αυτόματα εφαρμόζει σχεδόν όλες τις τεχνικές σε αυτό το άρθρο.
Η κατανόηση των τεχνικών πριν από την εφαρμογή αυτής της ενότητας εξακολουθεί να είναι σημαντική. αν γνωρίζετε πώς λειτουργεί ο ιστότοπος, θα μπορείτε να εκμεταλλευτείτε τα πολλά φίλτρα της mod_pagespeed. Ένα τέτοιο φίλτρο, Συνδυάστε το CSS , βρίσκει, συνδυάζει και εξομαλύνει όλα τα CSS που αναφέρονται στο HTML.
Η ενότητα διαθέτει έναν αριθμό φίλτρων και ρυθμίσεων που θα μπορούσαν να βελτιώσουν την απόδοση του ιστότοπού σας. Όλα αξίζουν την προσοχή.
συμπέρασμα
Αν και δεν είναι το πιο λαμπερό θέμα, η βελτιστοποίηση αξίζει περισσότερη προσοχή. Η δουλειά μας ως προγραμματιστές είναι να μάθουμε τις βέλτιστες πρακτικές του κλάδου για να προσφέρουμε την καλύτερη ποιότητα εργασίας στους πελάτες και στους χρήστες μας.
Αυτή η ανάρτηση γράφτηκε αποκλειστικά για το Webdesigner Depot από τον Joel Sutherland, ιδρυτή και web developer στο Καμπάνιες νέων μέσων . Είναι μέλος της ομάδας που μόλις ξεκίνησε HiFi , ένα σύγχρονο σύστημα διαχείρισης περιεχομένου που έχει σχεδιαστεί για τους σχεδιαστές με τους πελάτες τους. Ακολουθήστε τον Joel στο Twitter ή επικοινωνήστε μαζί του στην ιστοσελίδα HiFi.
Γνωρίζετε έναν εύκολο τρόπο βελτίωσης της απόδοσης ενός ιστότοπου που δεν αναφέρεται σε αυτό το άρθρο; Παρακαλώ μοιραστείτε και την εμπειρία σας στα παρακάτω σχόλια.