Στα sites συνήθως ισχύει ο κανόνας 80/20, όπου το 20% αντιστοιχεί στον χρόνο που κάνει ο server να απαντήσει μια σελίδα και το 80% στον χρόνο που χρειάζεται για να φορτώσει ο browser ολόκληρη την σελίδα (γραφικά, css, javascript, rendering). Ας αναλύσουμε λοιπόν που "χάνεται" όλος αυτός ο πολύτιμος χρόνος και πώς μπορούμε να επέμβουμε.
Ελαχιστοποίηση HTTP requests.
Πλέον μια σύγχρονη σελίδα ακόμα κι από το πιο προσεγμένο CMS, χρησιμοποιεί πολλές εικόνες, javascript και φύλα στυλ (CSS). Όλα αυτά σε συνδυασμό με τον περιορισμό πολλών browsers να ανοίγουν connections μετρημένα στα δάχτυλα του ενός χεριού προς ένα domain οδηγούν σε αρκετή καθυστέρηση.
Ένας τρόπος για να γίνει το site μας πιο γρήγορο μειώνοντας τα HTTP requests είναι να ενώσουμε τα αρχεία. Για τις εικόνες που χρησιμοποιούνται μέσα σε ένα site, μπορούν να χρησιμοποιηθούν CSS Sprites, όπου όλα τα εικονίδια και φόντα που χρησιμοποιούνται σε ένα site σερβίρονται σαν μια εικόνα, και στην συνέχεια με τις ιδιότητες background-image και background-position της CSS, εμφανίζουμε μόνο ένα κομμάτι της συνολικής εικόνας μας.
Ο παραπάνω τρόπος, ισχύει φυσικά και για CSS και Javascript, με ένα επιπλέον χαρακτηριστικό, την ελαχιστοποίηση (minification). Για παράδειγμα αντί να έχουμε διαφορετικά φύλα στυλ layout.css, style.css, print.css κλπ με την βοήθεια είτε εργαλείων στο Ίντερνετ, είτε με την χρήση plugins για το CMS μας. Μπορούμε όχι μόνο να σερβίρουμε ένα αρχείο .css και javascript για όλο το site, αλλά να επωφεληθούμε από την ελαχιστοποίηση, όπου αφαιρούνται τα επιπλέον κενά που κάνουν ευανάγνωστο τον κώδικα για έναν developer, αλλά είναι άχρηστη πληροφορία για έναν browser.
Ένας άλλος τρόπος είναι το να σερβίρονται τα γραφικά, οι εικόνες, η CSS και η Javascript (στατικά αρχεία) από ένα Content Delivery Network (CDN) ή σε πιο απλές περιπτώσεις από ένα "διαφορετικό domain". (Θυμηθείτε ένας browser μπορεί να ανοίγει περίπου 2-4 connections σε ένα domain), αλλά έχοντας μερικά subdomain της μορφής images1.mydomain.gr, images2.mydomain.gr, images3.mydomain.gr, images4.mydomain.gr αμέσως επιτρέπουν στον browser να κατεβάζει παράλληλα τις εικόνες από το site μας με 12+ connections αντί για 2-4 αφού τα θεωρεί διαφορετικό domain.
Συμπίεση
Η λογική υπαγορεύει ότι αν είναι πιο μικρά τα αρχεία, θα είναι και πιο γρήγορα. Φυσικά ισχύει, αν έχουμε εξασφαλίσει με τα προηγούμενα βήματα, ότι δεν θα είναι κι αδικαιολόγητα πολλά. Στην περίπτωση ενός site που θέλουμε να το κάνουμε πιο γρήγορο, ξεκινάμε πρώτα από τις εικόνες που συνήθως αποτελούν και το μεγαλύτερο κομμάτι μια σελίδας.
Η συμπίεση των εικόνων γίνεται με διάφορους τρόπους, αυτό όμως δεν σημαίνει κι ότι συνήθως επιλέγεται κι ο σωστός. Υπάρχουν αρκετοί αλγόριθμοι Lossless (.gif, .png) και lossy (.jpg), οι πρώτοι δεν χάνουν τίποτα από πληροφορία ενώ οι τελευταίοι θυσιάζουν λίγη ποιότητα για το τελικό μέγεθος του αρχείου. Αν χρησιμοποιηθούν σωστά ωστόσο το σύνολο σχεδόν των χρηστών δεν μπορεί να αντιληφθεί την διαφορά ανάμεσα σε αρχικό και συμπιεσμένο αρχείο εικόνας. Εδώ ισχύει ο γενικός κανόνας ότι, χρησιμοποιούμε .jpg για φωτογραφίες, πρόσωπα, τοπία, κλπ Ενώ .png για γραφήματα, σχεδιαγράμματα κλπ.
Αναφερθήκαμε ήδη στην συμπίεση της CSS & Javascript. Μας μένει η συμπίεση όλης της σελίδας, που επιτυγχάνεται από την εφαρμόζοντας συμπίεση gzip στον webserver μας (Apache, Nginx). Αυτό οδηγεί σε μια μείωση της τάξης περίπου 70%, άλλωστε μια σελίδα που στέλνεται σε έναν χρήστη, αποτελείται από κείμενο και η συμπίεση του κειμένου έχει πολύ υψηλή απόδοση.
"Προσωρινή αποθήκευση" - cache
Έχετε παρατηρήσει ποτέ ότι μια σελίδα αργεί λίγο την πρώτη φορά που την ανοίγετε, αλλά καθώς την χρησιμοποιείτε πάει όλο και πιο γρήγορα; Το πιο γρήγορο απ'όλα φυσικά είναι να μην κατεβάσει ο χρήστης μια εικόνα, ένα αρχείο CSS ή Javascript που έχει κατεβάσει ήδη. Τα λεγόμενα στατικά αρχεία, αυτά τα οποία δεν αλλάζουν συχνά, έως καθόλου. Εφαρμόζοντας λοιπόν τεχνικές caching λέμε στον browser του χρήστη να κρατήσει για τουλάχιστον 1 βδομάδα, 1 μήνα, 6 μήνες (όσο κρίνουμε ασφαλές) το ίδιο αρχείο αν δεν έχει αλλάξει στον server.
Αυτό το άρθρο φυσικά καλύπτει γενικά ένα πολύ σημαντικό κεφάλαιο του Web, αυτό της βελτιστοποίησης ενός site, ώστε να φορτώνει πιο γρήγορα, θα εμβαθύνουμε σε επόμενα άρθρα ξεχωριστά σε κάθε κομμάτι που αναφέραμε. Μείνετε συντονισμένοι!
