Η απόδοση ενός website είναι σε μεγάλο βαθμό συνδεδεμένη με την ταχύτητα φόρτωσης του. Από το 2010 η ταχύτητα φόρτωσης έχει συνδεθεί και με την κατάταξη στα αποτελέσματα αναζήτησης (SEO) σύμφωνα με αυτό το άρθρο του moz.com και πολύ σωστά καθώς η ταχύτητα στην ανταπόκριση έχει να κάνει με το user experience (UX) και οι μηχανές αναζήτησης στοχεύουν πάντα στο καλύτερο user experience.
Η εμπειρία χρήστη είναι σε ευθέως ανάλογη σχέση με τους χρόνους απόκρισης ενός website και η γρήγορη φόρτωση είναι βασικό συσταστικό ασχέτως συσκευής, λειτουργικού συστήματος ή browser.
Η σημασία του σωστού front-end developing είναι κεντρική. Αν κάθε website τηρεί αυτούς τους κανόνες τότε μειώνεται το φορτίο στα δίκτυα, μειώνονται συνολικά οι καθυστερήσεις, αυξάνεται η απόδοση πιο αργών δικτύων όπως κινητής τηλεφωνίας και το web γίνεται ένας καλύτερος τόπος για όλους.
Σε ανάλογη ερώτηση, οι περισσότεροι software engineers πιστεύουν ότι η βελτίωση έρχεται από το back-end. Ότι η απόδοση του front-end εξαντλείται στη βελτιστοποίηση των εικόνων και στα εξωτερικά αρχεία css και javascript. Και όμως, η αλήθεια είναι ότι η μεγάλη βελτίωση σε αυτόν τον τομέα μπορεί να γίνει στο front-end. Πολλά τεστ που έχουν γίνει όλα τα τελευταία χρόνια έχουν δείξει ότι τα θέματα του front-end development αντιστοιχούν ως και 80% στα προβλήματα αργής φόρτωσης ιστοσελίδων και web apps.
Υπάρχει τεράστια βιβλιογραφία για το πώς μπορεί να βελτιστοποιηθεί η Βάση Δεδομένων ή ο κώδικας και αντίστοιχα πολλές λύσεις. Η πραγματικότητα όμως δείχνει ότι μόνο το 10%-20% του χρόνου ανταπόκρισης τελικού χρήστη (end user response time) έχει να κάνει με το “σερβίρισμα” του HTML document από τον web server στον browser. Που πάει όμως ο υπόλοιπος χρόνος. Τι προκαλεί τον μεγαλύτερο χρόνο αναμονής στη διαδικασία rendering του HTML document από τον browser;
Γιατί όμως αυτή η προσπάθεια για κέρδος έστω και λίγων milliseconds; και γιατί ένα άρθρο (όπως και μεγάλη βιβλιογραφία) για το θέμα; τον λόγο μας τον δίνει η ίδια η ιστορία της επιστήμης και της τεχνολογίας. Κάθε διαδοχικά ανώτερο επίπεδο στη γνώση και στις εφαρμογές (τεχνολογία) κατακτάται μέσα από τις μικροαλλαγές και μικρο-τελειοποιήσεις (tweaks & finetuning) και στο σωρευτικό αποτέλεσμα που όλες μαζί αθροιστικά παράγουν.
Με αρκετά δισεκατομύρια χρήστες (μόνο το Facebook έχει 1,23 δισ εγγεγραμμένους χρήστες) και τεράστιους αριθμούς ωρών και περιεχομένου που καταναλώνεται online, τα χιλιοστά του δευτερολέπτου μεταφράζονται σε χιλιάδες μέρες ή και μήνες ή και χρόνια σε συνολική βελτίωση και για τους χρήστες και για τη συνολική υποδομή (δίκτυα, servers, παροχείς τηλεπικοινωνιακών υπηρεσιών κλπ).
Η ευθύνη του front-end developer σ’ αυτό είναι μεγάλη. Είναι η τελευταία γραμμή άμυνας για τον χρήστη και ο κύριος σύμμαχος του. Οι δικές του αποφάσεις είναι αυτές που καθορίζουν την εμπειρία του χρήστη (UX) και η εφαρμογή τεχνικών που βελτιώνουν την ταχύτητα της σελίδας είναι ίσως η καλύτερη επέμβαση που μπορεί να κάνει και για τους χρήστες και για τον εκάστοτε πελάτη του.
Μετρώντας την απόδοση ενός website
Οι σύγχρονοι browsers προσφέρουν ισχυρά εργαλεία web authoring και debugging, όπως τα Chrome Developer Tools, ή το Firebug. Τα εργαλεία αυτά προσφέρουν πρόσβαση βαθιά στο εσωτερικό της λειτουργίας των browsers και των ιστοσελίδων / εφαρμογών. Οι πληροφορίες που προσφέρουν είναι σημαντικές ακόμη και για έμπειρους web developers.
Για παράδειγμα στην καρτέλα Network των Chrome Developer Tools βλέπουμε ότι γίνεται καταγραφή πληροφορίας χρόνου φόρτωσης σχετικά με HTTP request and response headers, cookies, WebSocket data κλπ. Και από εδώ καταλαβαίνουμε ότι τουλάχιστον το 80% του χρόνου απόκρισης τελικού χρήστη οφείλεται στα components (resources) της σελίδας. Δηλαδή μόνο το 10%-20% του χρόνου απόκρισης οφείλεται στο κατέβασμα του HTML document. Τα υπόλοιπα resources αφορούν κατά βάση scripts, stylesheets και images.
Πιο πολλά συμπεράσματα μπορούμε να βγάλουμε από την καρτέλα Audits όπου μπορούμε να κάνουμε έναν γρήγορο έλεγχο για τυχόν θέματα της σελίδας, είτε σε present state είτε με επαναφόρτωση.
Παρακάτω αναλύσαμε 3 πολύ γνωστά web properties, τα portals τεχνολογίας mashable.com και wired.com και την online έκδοση της Ελευθεροτυπίας. Η ανάλυση γίνεται στους τομείς της χρήσης δικτύου και της απόδοσης του website.
Με έστω και κάποια από τα παρακάτω βήματα μπορούμε να δούμε πολύ μεγάλες διαφορές στους χρόνους φόρτωσης των ιστοσελίδων μας και θεαματικά καλύτερα αποτελέσματα για κάθε είδους web property:
1) Λιγότερα HTTP requests
Το HTTP είναι ένα client/server πρωτόκολλο αποτελούμενο από requests / responses. Με διάφορους τρόπους όπως με τη χρήση image maps, css sprites, με την οργάνωση των scripts και styles σε λιγότερα αρχεία μπορούμε να μειώσουμε τα http requests.
2) Χρήση CDN Network
Όπως είδαμε παραπάνω η φόρτωση των διαφόρων components / resources είναι το κύριο ποσοστό του χρόνου στη φόρτωση της σελίδας. Μία απάντηση οι υπηρεσίες των component web servers όπου βασικά διασκορπίζουμε το περιεχόμενο μας σε διάφορους servers και αυτοί το σερβίρουν ανάλογα με την τοποθεσία του χρήστη και το λιγότερο response time που μπορούν να έχουν. Τα Content Delivery / Distribution Networks (CDN) δεν είναι νέο φαινόμενο, με τις μεγαλύτερες εταιρίας τεχνολογίας και internet να χρησιμοποιούν τις υπηρεσίες τους. Μικρότερα ή μη εμπορικά websites ίσως δεν μπορούν να χρησιμοποιήσουν αυτές τις υπηρεσίες λόγω κόστους. Υπάρχουν όμως και αρκετές πολύ καλές δωρεάν υπηρεσίες CDN. Περισσότερα και ακόμη περισσότερα για CDN providers.
3) Προσθήκη Expires Header
Ένα σημαντικό θέμα για τη βελτιστοποίηση της ιστοσελίδας σε σχέση με το κατέβασμα των resources είναι η μεγιστοποίηση των δυνατοτήτων caching του browser. Όλοι οι browsers χρησιμοποιούν έναν προσωρινό χώρο αποθήκευσης των διαφόρων components ώστε να μειωθούν τα http requests. Ο web server χρησιμοποιεί το Expires header για να ενημερώσει τον browser ότι μπορεί να χρησιμοποιήσει το τρέχον αντίγραφο ενός resource μέχρι ένα συγκεκριμένο χρόνο. Υπάρχουν και εναλλακτικές λύσεις σ’ αυτό όπως το Cache-control με το max-age και το Apache module mod_expires.
4) Εφαρμογή συμπίεσης
Πολύ απλά αν μειώσουμε το μέγεθος του HTTP response τότε και ο χρόνος ανταπόκρισης μειώνεται αντίστοιχα. Οι web clients δείχνουν την υποστήριξη στην συμπίεση με το Accept-Encoding header στο HTTP request. Ο πιο διαδεδομένος και αποτελεσματικός τρόπος συμπίεσης είναι το gzip. Όλα συμπιέζονται, HTML documents, scripts, stylesheets. Το βάρος της σελίδας μπορεί να μειωθεί ως και 70%. Μετρήσεις έχουν δείξει ότι ο χρονος φόρτωσης μπορεί να μειωθεί ως και 55%.
5) Stylesheets στην κορυφή
Όσοι ασχολούνται με την απόδοση επιδιώκουν μία ιστοσελίδα να “φορτώσει” προοδευτικά. Θέλουμε δηλαδή ο browser να εμφανίζει το περιεχόμενο όσο πιο σύντομα γίνεται. Αυτό είναι ιδιαίτερα σημαντικό για websites περιεχομένου (πχ ειδησεογραφικά) και χρήστες με χαμηλές ταχύτητες Internet. Η έννοια του δείκτη προόδου (progress indicator) είναι πολύ σημαντική και συχνά επιδιώκουμε το ίδιο το HTML document να είναι ο δείκτης προόδου. Το πρόβλημα με την τοποθέτηση stylesheets στο τέλος του html document είναι ότι εμποδίζεται αυτό το προοδευτικό rendering σε πολλούς browsers. Επίσης τα styles μπορούν να φορτωθούν είτε με @import rules είτε με το <link> tag. Το δεύτερο έχει σαφή πλεονεκτήματα απόδοσης και πρέπει να προτιμάται.
6) Scripts στον πάτο
Με τα scripts (εξωτερικά αρχεία javascript) συμβαίνει ακριβώς το αντίθετο, επειδή κάθε script μπλοκάρει παράλληλη φόρτωση και επομένως κάθε resource θα πρέπει να περιμένει τη σειρά του μέχρι να φορτώσει το script. Η διαφορά με τα stylesheets είναι ότι σ’ αυτά το προοδευτικό rendering σταματά μέχρι να “κατέβουν” όλα. Γι αυτό το λόγο είναι καλό να τοποθετηθούν στην κορυφή, για να “κατέβουν” όλα και μετά ν’ αρχίσει η διαδικασία rendering. Τα scripts από την άλλη μπλοκάρουν το rendering για ΟΛΟ το περιεχόμενο και resources κάτω από το script. Έτσι μετακινώντας τα στο τέλος του HTML document δεν εμποδίζουμε τη διαδικασία προοδευτικής εμφάνισής του.
7) Scripts και Styles στο αρχείο το εξώτερο…
Σε απόλυτους όρους σε επίπεδο ατομικής σελίδας τα inline scripts / styles φορτώνουν γρηγορότερα. Στον πραγματικό κόσμο όμως τα εξωτερικά αρχεία javascript και css μπορούν να γίνουν cached από τους browsers, ενώ τα inline θα πρέπει να γίνονται download κάθε φορά που θα γίνεται request προς το document.
8) Λιγότερα DNS lookups
Το σύστημα Domain Names απλά χαρτογραφεί τις διευθύνσεις internet με τις διευθύνσεις ip. Έχει κόστος έστω και κάποια milliseconds για τον browser να αναζητήσει τη διεύθυνση ip για μία συγκεκριμένη διεύθυνση internet. Η διαδικασία της φόρτωσης (downloading) δεν μπορεί ν’ αρχίσει αν δεν ολοκληρωθεί η αναζήτηση DNS. Η βελτιστοποίηση που μπορεί να γίνει από την πλευρά του browser είναι να μειωθεί ο χρόνος που γίνονται αυτά τα DNS lookups. Εδώ πρέπει να δούμε τους παράγοντες που επηρεάζουν το DNS caching από την πλευρά του browser και να τους ρυθμίσουμε ώστε να γίνονται όσο το δυνατόν λιγότερες αναζητήσεις DNS.
9) Εφαρμογή Minification (Scripts and Styles)
Στενά συνδεδεμένη με τη συμπίεση που αναφέρθηκε προηγουμένως, η ελαχιστοποίηση scripts και styles έχει να κάνει με το website / εφαρμογή στο στάδιο τελικής παραγωγής (deployment). Η ελαχιστοποίηση αφορά τη αφαίρεση από τον κώδικα όλων των σχολίων καθώς και όλων τα χαρακτήρων whitespace (space, tab κλπ). Αυτό έχει ως αποτέλεσμα μικρότερο αρχείο και ταχύτερη φόρτωση ως resource της σελίδας. Μία τεχνική που το πηγαίνει ακόμη μακρύτερα είναι το obfuscation όπου όχι απλά αφαιρούνται τα παραπάνω αλλά και τα ονόματα functions / variables αλλάζουν στα ελάχιστα δυνατά strings ώσπου ο κώδικας γίνεται κυριολεκτικά μη αναγνώσιμος πράγμα που καταλήγει σε ακόμη μικρότερα αρχεία αλλά και βάζει εμπόδια στις προσπάθειες reverse engineering. Πολλά frameworks όπως πχ το Twitter Bootstrap δίνουν πακέτο και τα κανονικά και τα minified αρχεία των scripts και styles. Ένας καλός πρόχειρος κανόνας είναι να δουλεύουμε με τα κανονικά και στο τελικό production να βάζουμε τα minified. Πολλά καλά δωρεάν εργαλεία ελαχιστοποίησης υπάρχουν online, χρειάζεται μόνο ένα απλό google search. Δες επίσης σύγκριση 4 javascript minifiers.
10) Αποφυγή Redirects
Τα redirect codes που επιστρέφει ο server στον browser είναι της οικογένειας 3xx. Αναλυτικά ο κάθε κωδικός. Τα redirects βλάπτουν την απόδοση γιατί τίποτα δεν εμφανίζεται μέχρι αυτό να ολοκληρωθεί. Στα προηγούμενα παραδείγματα είδαμε πώς εξωτερικά components όπως τα scripts σταματούν την εμφάνιση (rendering) της σελίδας και μπλοκάρουν παράλληλα downloads. Ακόμη χειρότερα τα redirects σταματούν τη φόρτωση ολόκληρου του html document. Τίποτε δεν γίνεται μέχρι την άφιξη του html document και ένα redirect πάντα την καθυτερεί. Τα redirects είναι πολύπλοκο θέμα καθώς έχουν πολλές εφαρμογές και μερικές φορές είναι καλύτερα και απλούστερα να χρησιμοποιηθούν αντί για τις εναλλακτικές. Επίσης έχουν ευρεία χρήση και στο SEO. Θέλει προσοχή και μελέτη πριν την εφαρμογή μιας εναλλακτικής.
11) Διαγραφή διπλότυπων scripts
Τα διπλότυπα scripts συμβαίνουν συχνά και το βλέπουμε όταν κάνουμε audit μία σελίδα με ένα εργαλείο όπως τα developer tools του chrome. Βλάπτουν την απόδοση με 2 τρόπους. Δημιουργούν άχρηστα HTTP requests και σπαταλούν χρόνο για άχρηστη εκτέλεση javascript. Η αντιμετώπιση είναι τεχνική με προσθήκη λειτουργικότητας που διαχειρίζεται dependencies και versioning των scripts.
Όλα τα παραπάνω είναι μερικά μόνο θέματα που μπορούν να βελτιώσουν τους χρόνους φόρτωσης μιας σελίδας / εφαρμογής και η λίστα σε καμία περίπτωση δεν είναι εξαντλητική. Το θέμα της βελτίωσης ενός website είναι πολυπαραγοντικό και χρειάζεται προσεκτική ανάλυση και παρακολούθηση.
Περισσότερα Resources:
Google Developers – Make the Web faster
Chrome Developer Tools – Network Performance
Yahoo Developer Network – Performance Rules
