Στο 1ο μέρος του άρθρου για τη ταχύτητα ιστοσελίδας αναφέραμε κάποια βασικά πράγματα που αφορούν την ταχύτητα φόρτωσης μιας ιστοσελίδας. Συγκεκριμένα, είδαμε:
- Γιατί είναι σημαντικό το πόσο γρήγορα φορτώνει μια ιστοσελίδα.
- Τι είναι η ταχύτητα ιστοσελίδας και τι μετράμε όταν αναφερόμαστε σε αυτήν.
- Κάποια από τα βασικά εργαλεία μέτρησης της ταχύτητας ιστοσελίδας.
- Πως η γρήγορη φόρτωση ενός site βελτιώνει την εμπειρία του επισκέπτη του.
Εδώ, θα δούμε τι πρέπει να προσέξουμε για να μη κάνουμε το site μας αργό, καθώς και τι πρέπει να προσέξουμε κατά τη κατασκευή του ώστε να του δώσουμε τη μέγιστη δυνατή ταχύτητα φόρτωσης.
5 συμβουλές για να αυξήσετε τη ταχύτητα της ιστοσελίδας σας
1. Συμπίεση εικόνων.
Μια φωτογραφία τραβηγμένη από τελευταίας γενιά κινητή συσκευή μπορεί να έχει διαστάσεις 4χιλ. pixel και όγκο 5Mb. Κάτι τέτοιο είναι ιδανικό αν θέλουμε να εκτυπώσουμε αφίσα, αν την ανεβάσουμε όμως στο site μας αυτό δεν θα φορτώσει ποτέ. Το πρώτο που προσέχουμε είναι να συμπιέζουμε τις εικόνες που χρησιμοποιούμε.
Το εργαλείο που θα μας βοηθήσει στην επεξεργασία των εικόνων μας είναι το PhotoShop. Ή, αν δεν το διαθέτουμε, μπορούμε να ανοίξουμε το δωρεάν pixlr που έχει παρόμοια λειτουργία.
Δύο είναι τα σημεία που πρέπει να προσέξουμε κατά την επεξεργασία.
1.1. Σωστή προσαρμογή μεγέθους
Κάθε φώτο στο site εμφανίζεται με κάποια διάσταση, ανάλογα με το μέρος που τοποθετείται. Οι εικόνες του slider έχουν μέγιστο πλάτος 1920px, ανάλογα με την οθόνη του επισκέπτη της σελίδας. Απεναντίας, μια εικόνα που βρίσκεται σε μια στήλη (grid) ή ένα box και δεν απαιτείται να μεγαλώσει κατά το κλικ, μπορεί να καταλαμβάνει μέγιστο πλάτος έως 550px.
Όσο μεγάλο ή μικρό κι αν είναι το μήκος της εικόνας που θα ανεβάσουμε, το μέγεθός της θα προσαρμοστεί αυτόματα στο χώρο που θα τη βάλουμε. Από τη πλευρά μας, φροντίζουμε η περικοπή της εικόνας να γίνει στο κατάλληλο μέγεθος. Η εικόνα δεν πρέπει να είναι ούτε μεγαλύτερη από το απαραίτητο, ώστε να επιβαρύνει τη ταχύτητα φόρτωσης, ούτε όμως μικρότερη, ώστε να χάνεται η ανάλυσή της και να εμφανίζεται θαμπή.
Προσοχή! κατά τη κατασκευή της σελίδας, δεν λαμβάνουμε υπ΄ όψιν μας μόνο το μέγεθος της οθόνης που εργαζόμαστε, αλλά όλα τα δυνατά μεγέθη που μπορεί να διαθέτουν οι χρήστες!
1.2. Ανάλυση εικόνας
Στη διαδρομή images -> image size του photoshop προσαρμόζουμε το μέγεθος της εικόνας μας. Στο ίδιο σημείο μπορούμε να δούμε και την ανάλυσή της (resolution). Τα 72px/inch είναι υπεραρκετά για τη τέλεια απόδοση μιας φωτογραφίας στο web, αν όμως η εμφάνιση εικόνας δεν είναι αυτό που θέλουμε πρωτίστως να αναδείξουμε, δεν φοβόμαστε να μειώσουμε την ανάλυση ακόμη και στα 60px/inch. Κάτι τέτοιο δεν θα το κάνουμε όταν πχ θέλουμε να αναδείξουμε το χώρο του εστιατορίου που παρουσιάζουμε στη σελίδα μας. Θα χρησιμοποιήσουμε όμως άφοβα τη μειωμένη ανάλυση στη σελίδα που παρουσιάζει εικόνες από το menu με τα φαγητά.
Σημείωση: υπάρχουν τεχνικές επεξεργασίας εικόνας με τις οποίες το μέγεθός της σε px και η χωριτηκότητά της παραμένουν αμετάβλητα, ακόμη κι αν η ανάλυσή της είναι σχετικά υψηλή!
Αποθηκεύουμε την προσαρμοσμένη εικόνα και πριν την ανεβάσουμε, ελέγχουμε το μέγεθός της. Μια photo που είναι προσαρμοσμένη για το slider πρέπει να βρίσκεται κοντά στα 100-150 kb για μια συνηθισμένη παρουσίαση. Οι φωτογραφίες του gallery που θα πρέπει να ανοίγουν κατά το κλικ δεν υπερβαίνουν τα 80kb, ενώ οι απλές φώτο που πιάνουν το μισό ή λιγότερο πλάτος της οθόνης κυμαίνονται από 15-40 kb. Αν δεν είμαστε ικανοποιημένοι από το μέγεθός τους, υπάρχει ένα ακόμη βήμα που μπορούμε να κάνουμε.
Το (επίσης δωρεάν διαθέσιμο) εργαλείο compressor συμπιέζει ακόμη περισσότερο την εικόνα, χωρίς να αλλοιώσει την εμφάνισή της. Το ανοίγουμε, “πετάμε” την εικόνα μας στο σημείο που ζητάει και η υπόλοιπη δουλειά γίνεται αυτόματα. Αποθηκεύουμε τη φώτο και διαπιστώνουμε ότι ο όγκος της έχει μειωθεί ακόμη περισσότερο, χωρίς καμία εμφανή μεταβολή στη ποιότητα!
Ένας καλός τρόπος αποθήκευσης της εικόνας από το photoshop είναι με την επιλογή save for web. Επιλέγουμε την ανάλυση που μας ενδιαφέρει και κατά την αποθήκευση γίνεται αυτόματη συμπίεση της εικόνας.
Ένα πέρασμα της εικόνας από τον compressor θα δείξει σχεδόν πάντα ότι δεν απαιτείται καμία επιπλέον συμπίεση!
2. Ελαχιστοποίηση Javascript, CSS.
Οι εντολές Jacascript και CSS είναι υπεύθυνες για την εμφάνιση και τα λειτουργικά μέρη της σελίδας μας. Είναι βασικά συστατικά του κώδικα της ιστοσελίδας μας και δεν μπορούμε να ορίσουμε πάντα ποια μέρη τους θα κρατήσουμε και ποια θα ξεφορτωθούμε. Μπορούμε όμως να προσέξουμε κατά τη κατασκευή κάποια βασικά πράγματα.
Κατ΄ αρχάς, αν η σελίδα μας στηρίζεται σε κάποιο έτοιμο θέμα, προσέχουμε την επιλογή του θέματος αυτού. Υπάρχουν “βαριά” θέματα με πληθώρα (περιττού;) κώδικα που δίνουν εντυπωσιακή εμφάνιση αλλά περιέχουν χαώδη και εν τέλει δυσλειτουργικό κώδικα, ενώ υπάρχουν και θέματα με στρωτό, συμπαγή κώδικα τα οποία αποδίδουν εξίσου το αισθητικό αποτέλεσμα που θέλουμε να φτάσει στον επισκέπτη.
Πέρα από την επιλογή του θέματος όμως. Για τη προσαρμογή του στις ανάγκες της επιχείρησης χρειάζεται συχνά να καταφύγουμε σε προσθήκη jacascript και CSS. Τοποθετούμε μόνο εντολές απαραίτητες για τη λειτουργία, και όχι έτοιμα προγράμματα που κάνουν 100 διαφορετικά πράγματα για να πετύχουμε το ένα που θέλουμε. Φροντίζουμε η javascript να βρίσκεται στο τέλος του κώδικα ώστε να φορτώνει τελευταία και αφού έχει ήδη εμφανιστεί η σελίδα στον επισκέπτη.
Όποτε χρειάζεται μεγάλο πλήθος CSS, τη φορτώνουμε όλη σε ξεχωριστό αρχείο και δεν αναγκάζουμε τον browser να χάνει χρόνο διαβάζοντας κάθε φορά διαφορετική εντολή σε κάθε τμήμα που πρέπει να φορτώσει. Ενώ, τέλος, δεν δημιουργούμε περιττό κώδικα html για τη διαμόρφωση ενός πλήθους αντικειμένων (όπως πχ επικεφαλίδων). Προτιμάμε να μπουν και αυτές σε ένα τμήμα του CSS της σελίδας ώστε να διαβαστούν όλες μαζί.
Οπτικά effects – κίνηση
Τα οπτικά effects χρησιμοποιούν JavaScript. Και η js επιβραδύνει το χρόνο φόρτωσης της σελίδας.
Πολλές φορές μας συναρπάζει η παρουσία διαφόρων οπτικών εφέ που δίνουν κίνηση και εντυπωσιάζουν τον επισκέπτη. Δίνουν όμως πάντα το καλύτερο συνολικά αποτέλεσμα στην ιστοσελίδα μας.
Η ιστοσελίδα μας από την άλλη, πρέπει να περιέχει στοιχεία που να τραβούν τη προσοχή του επισκέπτη. Όπως έχουμε ξαναπεί διάφορα call to action πρέπει να είναι στρατηγικά τοποθετημένα στη σελίδα. Για όσον αφορά το πως θα τα παρουσιάσουμε όμως, πρέπει να πάρουμε μια απόφαση. Να ζυγίσουμε και να ισορροπήσουμε τη λειτουργικότητα με την εμφάνιση. Να δούμε πότε είναι απαραίτητο το εφέ κίνησης, και πότε δεν προσθέτει παρά βάρος στη σελίδα, οπότε θα πρέπει να το απομακρύνουμε. Για παράδειγμα,
μια προτροπή προς μια ενέργεια μπορεί να γίνει με ένα pop-up, ένα παράθυρο που να ανοίγει όταν ο χρήστης έχει βρεθεί σε συγκεκριμένο τμήμα της σελίδας μας ή μετά από κάποιο χρόνο αφού την έχει ανοίξει. Εναλλακτικά, μπορεί να φτιαχτεί απλά, είτε με τη προσθήκη ενός πρόσθετου προγράμματος είτε με τη συγγραφή απλών και γνωστών εντολών. Ακόμη κι αν αγνοήσουμε το αν είναι ενοχλητικό ή όχι για το χρήστη η ξαφνική εμφάνιση ενός πλαισίου, πρέπει να αναρωτηθούμε: θέλουμε να επιβαρύνουμε όμως τη σελίδα μας με επιπλέον javascript; ή μας αρκεί μια απλή τοποθέτηση της πρόκλησης για την ενέργεια που θέλουμε να κάνουμε;
3. Plugins.
Υπάρχει ένα πανέμορφο πρόσθετο πρόγραμμα που έχει την εξής λειτουργία: αλλάζει την επιφάνεια του login του διαχειριστή της σελίδας, μεταβάλει τη σελίδα εισαγωγής από αυτή
σε κάτι σαν κι αυτή:
Δεν θα σχολιάσουμε εδώ για το πόσο χρήσιμο (ή παντελώς, εντελώς όμως άχρηστο) είναι να επιβαρύνουμε τη σελίδα με προγράμματα που δεν προσφέρουν στη λειτουργικότητά της. Αλλά αν επιθυμούμε κάτι που είναι απλά όμορφο, είναι κατά πολύ προτιμότερο να γράψουμε 10 εντολές στη php της σελίδας παρά να προσθέσουμε ένα σύνολο αρχείων που θα επιβραδύνουν τη φόρτωσή της.
Γενικότερα, προσέχουμε τα plugins που προσθέτουμε στη σελίδα μας. Τοποθετούμε μόνο τα απαραίτητα, διαγράφουμε τα υπόλοιπα. Αν χρειαστούμε κάποιο πρόσθετο για μια συγκεκριμένη λειτουργία που θα γίνει μια φορά, το διαγράφουμε (και δεν το απενεργοποιούμε απλά!) όταν εκτελέσουμε τη λειτουργία που θέλουμε. Προτιμάμε για τα “εύκολα” να ενσωματώνουμε ένα απόσπασμα κώδικα στο κατάλληλο αρχείο της σελίδας μας και όχι να τη φορτώσουμε με ένα plugin που περιέχει δεκάδες αρχεία και εκατοντάδες εντολές.
Και βέβαια, ζυγίζουμε τι δεν μπορούμε να αποφύγουμε και τι όχι. Κάποια πρόσθετα μπορεί μεν να επιβραδύνουν τη σελίδα μας, αλλά να κρίνουμε ότι είναι απαραίτητα για τη λειτουργία της. Εγκαθιστούμε αυτά και μόνο αυτά, αγνοούμε άλλα που δεν θα δώσουν κάποιο επιπλέον “κέρδος”. Η σελίδα με αυτό το τρόπο κρατάει τη λειτουργικότητά της χωρίς να επιβραδύνεται η φόρτωσή της.
4. Ενεργοποίηση προσωρινής αποθήκευσης (caching)
Ένα από τα απαραίτητα πρόσθετα που πρέπει να διαθέτει κάθε ιστοσελίδα είναι κάποιο cache plugin. Εγκαταστήστε, ρυθμίστε και ενεργοποιήστε κάποιο από τα δοκιμασμένα και αποτελεσματικά πρόσθετα αυτά και μειώστε το χρόνο απόκρισης της σελίδας. Για τις WordPress ιστοσελίδες, το wp super cache, το wp-rocket ή το απλούστατο wp fastest cache δημιουργούν τη προσωρινή αποθήκευση αρχείων JS και CSS. Οι δε πληρωμένες τους εκδόσεις δίνουν επιπλέον λειτουργίες που βοηθούν τη ταχύτητα φόρτωσης της σελίδας μας.
Επιπλέον, το GTmetrix δίνει αναλυτικές οδηγίες για το πως μπορούμε να εκμεταλλευτούμε τη προσωρινή αποθήκευση του browser, κάνοντας ρυθμίσεις με πρόσθεση κατάλληλου κώδικα στο αρχείο .htaccess του WP. Με ένα απλό copy-paste των εντολών που δίνονται, οι μετρήσεις δίνουν ορατό αποτέλεσμα!
5. Hosting.
Η επιλογή του server που θα φιλοξενήσει την ιστοσελίδα μας είναι από τους σημαντικότερους παράγοντες για τη ταχύτητα φόρτωσης ιστοσελίδας. Και δυστυχώς, είναι από αυτούς που απαιτούν υψηλό κόστος ώστε να πετύχουμε το μέγιστο δυνατό αποτέλεσμα.
Παρ΄ όλα αυτά, μπορούμε να δούμε κάποια πράγματα που πρέπει να προσέξουμε τα οποία δεν κάνουν το κόστος φιλοξενίας απαγορευτικό. Κατ΄ αρχάς, δεν σκεφτόμαστε καν για δωρεάν hosting, τόσο για λόγους ταχύτητας όσο και για λόγους ασφάλειας. Επιλέγουμε την εταιρία που θα φιλοξενήσει το site μας ανάλογα με:
- Το χώρο που μας παρέχει. Είναι σημαντικό να εξετάσουμε τόσο τον όγκο αρχείων που μπορούν να φιλοξενηθούν, όσο και το μηνιαίο traffic που μας προσφέρεται.
- Οι πόροι που μας διαθέτει. Δυστυχώς κυκλοφορούν πολλά ελκυστικά πακέτα με επαρκή χώρο και πόρους αλλά εντελώς ανεπαρκή php values. Με απλά λόγια, ανεπαρκή μεγέθη στη μνήμη, στους χρόνους εκτέλεσης της php και σε άλλα σημαντικά στοιχεία, θα επιβραδύνουν τη φόρτωση της σελίδας μας.
- Μοναδική IP. Προτιμάμε την (ακριβότερη) φιλοξενία σε τμήμα server στο οποίο βρίσκεται αποκλειστικά η δική μας ιστοσελίδα, και σε καμία περίπτωση χώρο όπου η ίδια IP μοιράζεται σε δεκάδες ή εκατοντάδες σελίδες. Ή, να ακολουθήσουμε την οικονομικότερη λύση όπου η σελίδα μας θα φιλοξενηθεί σε τμήμα που θα συμπεριλαμβάνει μέχρι 5 επιπλέον ιστοσελίδες.
- CDN. Κι εδώ τα κόστη ανεβαίνουν. Η βασική λειτουργία αυτών των server είναι να διαμοιράζουν τα αρχεία ενός site σε διάφορους ανά τον κόσμο server. Ανάλογα από τη χώρα που επισκέπτεται τη σελίδα μας ο χρήστης, φορτώνει τα αρχεία από τον κοντινότερο server ελαχιστοποιώντας με το τρόπο αυτό τη ταχύτητα φόρτωσης. Επιπλέον, “ελαφρύνεται” ο server μας απελευθερώνοντας πόρους και μνήμη.
Ανάλογα με τα χρήματα που μπορεί να διαθέσει μια εταιρία, μπορεί να βρει τον κατάλληλο χώρο φιλοξενίας που θα μεγιστοποιήσουν τη ταχύτητα αλλά και την ασφάλεια της ιστοσελίδας της.
Αν ενδιαφέρεστε για τη δημιουργία ή τη βελτίωση της ιστοσελίδας σας:
Επικοινωνήστε μαζί μας
Αφήστε τη δημιουργία της διαδικτυακής ας εικόνας στους ειδικούς. Αποκτήστε ιστοσελίδα που ξεχωρίζει, και παραμείνετε στη κορυφή των προτιμήσεων των χρηστών του διαδικτύου.
