Πώς να μετρήσετε την απόδοση του ιστοτόπου Front-end

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

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

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

Αιτήματα HTTP

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

Μόλις αποσταλεί το αίτημα, το πρόγραμμα περιήγησής σας θα αναλύσει κάθε στοιχείο σελίδας. Ανάλογα με τον μηχανισμό ανάλυσης κάθε δικτυακός τόπος θα φορτώνεται διαφορετικά και τα στοιχεία θα εμφανίζονται με διαφορετική σειρά με βάση τις ταχύτητες μεταφοράς. Για παράδειγμα, ο Internet Explorer θα καταστήσει διαφορετικές τις ιστοσελίδες από το Chrome ή το Safari και όλες αυτές οι μηχανές τρέχουν ελαφρώς διαφορετικές μηχανές αναζήτησης από τον Firefox ή το Opera.

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

Συχνά, οι παράγοντες που συγκρατούν τη βελτιστοποιημένη αναφορά ταχύτητας ενός δικτυακού τόπου σε clunky JavaScript περιλαμβάνουν ή μεγάλα αρχεία εικόνων. Με τη δημοτικοποίηση του Verizon FiOS είναι κοινό για τις ταχύτητες του Διαδικτύου να χτυπήσουν 600kbps και να συνεχίσουν να ανεβαίνουν! Δυστυχώς, αυτό δεν είναι ο κανόνας και ακόμη και με συνδέσεις υψηλής ταχύτητας είναι δυνατόν να βιώσετε βλάβες βελτιστοποίησης.

Διορθωτικά στην απόδοση του ιστότοπου

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

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

Μια άλλη επιλογή για τους χρήστες του Firebug είναι το πρόσθετο YSlow του Yahoo !. Το σενάριο αναλύει κάθε αίτηση ιστότοπου και προτείνει τους πιο συνηθισμένους τρόπους βελτίωσης της απόδοσης. Αυτές οι προτάσεις βασίζονται στο Yahoo! Προγραμματιστής πόρος για τις καλύτερες πρακτικές βελτιστοποίησης στον σχεδιασμό ιστοσελίδων.

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

Οι προγραμματιστές ενδιαφέρονται πάντα να πηδούν πάνω σε ένα έργο για να καταρρεύσουν τον κώδικα, οπότε αυτό δεν πρέπει να είναι ορατό. Για λίγη βοήθεια μπορείτε να δείτε τον οδηγό βοήθειας YSlow.

Τεχνικές ταχύτητας

Υπάρχουν μερικά απλά κόλπα που μπορείτε να εφαρμόσετε στον ιστότοπό σας αμέσως για να επιταχύνετε την απόδοση. Ο πρώτος και ευκολότερος τρόπος είναι να διαχωρίσετε τα αρχεία CSS και JavaScript.

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

Από την άλλη πλευρά, μετακίνηση όλων των αρχείων JavaScript στο υποσέλιδο του ιστότοπού σας μπορεί να λύσει δραματικά τους χρόνους hangup. Πολλά προγράμματα περιήγησης μπλοκάρουν παράλληλες λήψεις, πράγμα που σημαίνει ότι πριν την απόδοση της σελίδας το πρόγραμμα περιήγησης του χρήστη μπορεί να σταματήσει για 4 δευτερόλεπτα για να φορτώσει πλήρως το εξωτερικό JS περιλαμβάνει.

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

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

Μέγεθος αρχείου συμπίεσης

Η συμπίεση μεγάλων αρχείων έχει γίνει πολύ δημοφιλής. Μπορεί πλέον να χρησιμοποιηθεί σε ιστοσελίδες για να μειώσει τους χρόνους φόρτωσης και να διατηρήσει τα μεγέθη των αρχείων πολύ χαμηλά. Πολλά από τα έργα έχουν ήδη γίνει και με εργαλεία όπως τα αρχεία mini-μεγέθους YUI Compressor είναι μια διαδικασία χωρίς ενέργεια.

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

Μπορείτε επίσης να εξετάσετε τη συμπίεση των μεγαλύτερων εικόνων στις ιστοσελίδες σας. Αυτό μπορεί να γίνει με οποιοδήποτε λογισμικό επεξεργασίας φωτογραφιών, όπως το Adobe Photoshop ή το GIMP, με απλή αναδειγματοληψία της εικόνας σε χαμηλότερη ανάλυση. Οι εικόνες PNG θα εξάγουν πολύ μικρότερες από τις μορφές jpg ή TIFF. Υπάρχουν επίσης πολλά ηλεκτρονικά εργαλεία όπως το Image Optimizer για βοήθεια στη διαδικασία συμπίεσης.

Έλεγχος προέλευσης και μετρήσεις

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

Το πιο δημοφιλές εργαλείο Mozilla Firebug είναι ένα plug-in για το πρόγραμμα περιήγησης Firefox. Αυτή η εφαρμογή εγκαθιστά μια μικρή γραμμή εργαλείων στο κάτω μέρος του προγράμματος περιήγησης για να ελέγξει τους χρόνους απόκρισης, τις πληροφορίες κεφαλίδας, τα στοιχεία σελίδας και τα σενάρια για κάθε ιστότοπο. Το σενάριο έχει επίσης ενσωματωθεί στο Firebug Lite ως επέκταση για το Google Chrome.

Apache με mod_pagespeed

Δεν είναι όλες οι ρυθμίσεις να εκτελούν έναν διακομιστή ιστού Apache, οπότε αυτή η επιλογή δεν είναι πάντα διαθέσιμη. Αυτή η ενότητα συνδέεται άμεσα με αυτήν Παρακολούθηση ταχύτητας σελίδας Google που προαναφέρθηκε. Στην πραγματικότητα, ο κώδικας για το mod_pagespeed αρχικά βασίστηκε σε πολλές βιβλιοθήκες από τις βάσεις δεδομένων του Google Code.

Το Apache επιτρέπει στους διαχειριστές διακομιστών να εγκαταστήσουν μικρά πακέτα που ονομάζονται ενότητες για να βελτιώσουν την απόδοση των διακομιστών τους. mod_pagespeed είναι μία από αυτές τις μονάδες που εκτελεί αυτόματα τεχνικές βελτιστοποίησης κατά το χρόνο εκτέλεσης. Υπάρχουν πάρα πολλές διεργασίες για τη λίστα, παρόλο που μερικές από τις κύριες εφαρμογές περιλαμβάνουν τη συμπίεση HTML / CSS / JS on-the-fly και την προσωρινή αποθήκευση εικόνων.

Το έργο φιλοξενείται επί του παρόντος στο Google και είναι ανοικτό για προγραμματιστές. Η Google συνεργάζεται με την GoDaddy για την υλοποίηση του mod_pagespeed σε όλους τους λογαριασμούς φιλοξενίας που εκτελούν διακομιστή HTTP του Apache.

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

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