Πως να φτιάξετε ένα site που να φορτώνει σε 1 δευτερόλεπτο ή και λιγότερο!
Γεια σας φίλοι μου, σίγουρα για να διαβάζετε αυτό το άρθρο θα έχετε κάποια ιστοσελίδα ή θα ασχολείστε επαγγελματικά με κάποιο site ή θα θέλατε να κατασκευάσετε κάποιο site.
Όπως όλοι γνωρίζουν, η ταχύτητα φόρτωσης μια ιστοσελίδας είναι ένας πολύ βασικός παράγοντας SEO που επηρεάζει άμεσα αλλά και έμμεσα την κατάταξη μιας ιστοσελίδας στις μηχανές αναζήτησης, αλλά και το ποσοστό μετατροπών, δηλαδή το πόσες πωλήσεις θα κάνετε άμα έχετε eshop ή πόσα τηλέφωνα θα δεχτείτε.
Ο χρόνος φόρτωσης σύμφωνα με την Amazon.com για να έχετε το μέγιστο των μετατροπών και πωλήσεων που μπορεί να κάνει η ιστοσελίδα σας είναι 2 δευτερόλεπτα για κάθε σελίδα, είτε αυτή είναι η αρχική ή κάποια εσωτερική σελίδα ή σελίδα προϊόντος.
Μετά τα 2 δευτερόλεπτα το site σας θεωρείτε πλέον αργό και θα πρέπει να κάνετε ενέργειες για να το διορθώσετε άμεσα.
Τι θα πρέπει να κάνετε; Δείτε παρακάτω.
Πόσο γρήγορα φορτώνει η ιστοσελίδα σας;
Το πρώτο πράγμα που θα πρέπει να κάνετε είναι να βρείτε αρχικά τον πραγματικό χρόνο φόρτωσης της ιστοσελίδας σας.
Για αυτό το σκοπό υπάρχουν τρία δωρεάν εργαλεία στο ίντερνετ:
- Gtmetrix
- Google Pagespeed
- Pingdom
Μπορείτε να επιλέξτε οποιοδήποτε από τα τρία παραπάνω αφού και τρία τα έχουμε δοκιμάσει και έχουν αποδειχθεί ιδιαίτερα αξιόπιστα.
Προσοχή γιατί θα πρέπει να κάνετε δύο φορές την μέτρηση της ταχύτητας ιστοσελίδας σας. Γιατί την πρώτη φορά θα πιάσει την πραγματική ταχύτητα φόρτωσης και τη δεύτερη θα πιάσει αυτή που φορτώνει με τη βοήθεια ενός cache plugin όπως του W3 Total Cache.
Ο σωστός χρόνος απόκρισης είναι ο πρώτος και θα πρέπει αυτόν τον χρόνο να λαμβάνετε υπόψιν σας γιατί αυτός είναι ο χρόνος που φορτώνει η ιστοσελίδα σας σε έναν επισκέπτη που την επισκέπτεται για πρώτη φορά.
Και επειδή η πρώτη εντύπωση είναι καταλυτική, θα πρέπει να κάνετε τα πάντα για να κερδίσετε τον επισκέπτη από την πρώτη του επαφή με την ιστοσελίδα σας.
Γιατί είναι το site σας αργό;
Άμα δεν ανήκετε στην κατηγορία εκείνη των επιχειρηματιών του ίντερνετ που το site τους να φορτώνει σε λιγότερο από 2 δευτερόλεπτα, δεν θα πρέπει να σας πάρει η κάτω βόλτα ή να πάθετε κατάθλιψη, αφού πάντα υπάρχει χώρος για βελτίωση.
Θα πρέπει στην συνέχεια να περάσετε στην ανάλυση των επιμέρους στοιχείων του κώδικα που απαιτούνται για να φορτώσει η ιστοσελίδα σας. Για παράδειγμα και τα τρία εργαλεία προτείνουν κάποιες λύσεις για να κάνετε ταχύτερη τη φόρτωση και να αποφύγετε τις τυχόν καθυστερήσει.
Εμείς θα αναφέρουμε τα κοινότερα προβλήματα που δημιουργούν τις μεγαλύτερες καθυστερήσεις και διογκώνουν τον χρόνο φόρτωσης.
1 Χρόνος απόκρισης του hosting
O Server Response Time είναι ένας στοιχείο που λαμβάνει υπόψιν της η Google και αποτελεί υποκατηγορία του παράγοντα SEO που είναι η ταχύτητα φόρτωσης. Για όσους δεν το ξέρουν, οι 200 παράγοντες SEO έχουν άλλους 50 υποπαράγοντες έκαστος σύνολο δηλαδή 10.000.
Πόσος λοιπόν θα πρέπει να είναι ο ιδανικός χρόνος απόκρισης του server σύμφωνα με τη Google;
Παρακάτω είναι μια λίστα τιμών σε χιλιοστά του δευτερολέπτου (milisecond):
- 90-150ms ->Τέλεια ταχύτητα απόκρισης
- 150-250 ms ->Καλή ταχύτητα απόκρισης
- 250-300 ms ->Αποδεκτή ταχύτητα απόκρισης (Συνήθως νέα εγκατάσταση WordPress )
- 300ms up -> Αρνητικό UX και κακή επίδοση στα αποτελέσματα αναζήτησης
- 600ms up -> Ο server σας αργοπεθαίνει και η Google το ξέρει, αυτό, πείτε αντίο στην οργανική επισκεψιμότητα. Όπως έλεγε και ο εθνικός μας ποιητής Διονύσιος Σολωμός στους Ελεύθερους πολιορκημένους, “Έρμο site σκοτεινό, τι σ’ έχω γω στο χέρι; οπού συ μού ΄γινες αργό κι ο Αγαρηνός (Google) το ξέρει.”
2 Πολύ φορτωμένος κώδικας
Ο πολύ φορτωμένος κώδικας -και αυτό φαίνεται άμα δείτε στο Pingdom Site Speed Tool τα page requests που θα πρέπει να είναι όσο το δυνατόν λιγότερα- επιβαρύνει το χρόνο φόρτωσης της πρώτης σελίδας αλλά και όλων των σελίδων του website σας.
Θα πρέπει να έχετε κατά νου ότι όλες οι σελίδες του site σας αποτελούν σελίδες προορισμού για έναν χρήστη, εφόσον εμφανίζονται σε κάποια θέση στις μηχανές αναζήτησης.
Ο πολύ φορτωμένος κώδικας μπορεί να οφείλετε στα παρακάτω αίτια:
- Πολύ φορτωμένο με κώδικα θέμα (WordPress Theme ή Template)
- Κακογραμμένος κώδικας, μάλλον το θέμα προέρχεται από προγραμματιστές τριτοκοσμικής χώρα
- Πολλά πρόσθετα (plugins)
- Άχρηστος κώδικας ή άχρηστα πρόσθετα
3 Πολύ φορτωμένη βάση δεδομένων
Εκτός από τον κώδικα της ιστοσελίδας, καθοριστικό ρόλο στην ταχύτητα φόρτωσης παίζει και η βάση δεδομένων. Τα περισσότερα μεγάλα sites, τα CMS αλλά και όλα τα ηλεκτρονικά καταστήματα τρέχουν συνήθως σε MySQL μια βάση δεδομένων ανοιχτού κώδικα που είναι πολύ δημοφιλής και πολύ σταθερή.
Όμως διάφορα πρόσθετα, η κακομεταχείριση της βάσης δεδομένων ή άλλα σφάλματα ή απρόβλεπτα γεγονότα όπως επιθέσεις hackers, SQL injections και διάφορα άλλα εξωγενή γεγονότα ίσως να επιβραδύνουν τον χρόνο απόκρισης της βάσης δεδομένων σας.
Για να βρείτε κάποια λύση σε αυτό το θέμα θα πρέπει να επικοινωνήσετε με τον προγραμματιστή σας ή με τον διαχειριστή της ιστοσελίδας σας για να βελτιστοποιήσετε ή να ελαφρύνετε την βάση δεδομένων σας.
Η τακτική παρακολούθηση της βάσης δεδομένων σας και η σωστή συντήρησης της είναι απαραίτητη για να τρέχει το site σας γρήγορα και απρόσκοπτα.
4 Πολύ βαριά γραφικά
Τα θέμα γραφικό περιβάλλον είναι μια πονεμένη ιστορία όπου εμπλέκονται πάρα πολλά άτομα με διαφορετικούς στόχους και απόψεις.
Ο ιδιοκτήτης της ιστοσελίδας που επιθυμεί μια ιστοσελίδα με πλούσια γραφικά που να του αρέσει.
Ο γραφίστας που σχεδιάζει τα γραφικά και θέλει να κάψει καρδιές με το απίστευτο slider και να μοιάζει η πρώτη σελίδα από το site σας υπερπαραγωγή και τέλος ο προγραμματιστής σας που μάλλον θέλει να κουμπώσει τις εφαρμογές πάνω στο site χωρίς να έχουν κάποιο πρόβλημα χρήσης.
Όμως τον τελικό λόγο τον έχει ο τελικός χρήστης της ιστοσελίδας σας που είναι και αυτός που αποφασίζει μέσα σε λίγα δευτερόλεπτα για το άμα θα γίνει πελάτης σας ή όχι.
Έτσι φροντίστε να έχετε τα τελείως απαραίτητα γραφικά, να φορτώνουν γρήγορα και να μην δημιουργούν παράλυση στον επισκέπτη.
Πως γίνεται να φορτώνει το site σε λιγότερο από 1 δευτερόλεπτο;
Η τάση στον σχεδιασμό ιστοσελίδων σήμερα είναι το μινιμαλιστικό web design. Το μινιμαλιστικό design βασίζεται στην κλασσική αρχή ή ρήση: «οὐκ ἐν τῷ πολλῷ τὸ εὖ, ἀλλ᾿ ἐν τῷ εὖ τὸ πολύ» και είναι μια παράφραση της ρήσης του αυλητή Καφισία, όταν ένας μαθητής του έπαιζε τον αυλό με ιδιαίτερη ένταση: “οὐκ ἐν τῷ μεγάλῳ τὸ εὖ κείμενον εἶναι, ἀλλὰ ἐν τῷ εὖ τὸ μέγα” (Αθήναιος, Δειπνοσοφισταί, 14, 629a-b).
Η φράση «οὐκ ἐν τῷ πολλῷ τὸ εὖ, ἀλλ᾿ ἐν τῷ εὖ τὸ πολύ» μεταφράζεται ως «το καλό δε βρίσκεται στο πολύ, αλλά το πολύ βρίσκεται στο καλό» και σημαίνει πως η ποσότητα δεν εξασφαλίζει την ποιότητα, αλλά η ποιότητα αντισταθμίζει την ποσότητα. Με άλλα λόγια, δεν έχει σημασία το πολύ αλλά το καλό.
Και αυτή η κλασική ρήση του Καφισία βρίσκει μέχρι και σήμερα αλλά και πάντα θα βρίσκει εφαρμογή σε όλα τα μεγάλα eshop από τα μεγαλύτερα brand names όπως του Zara και του Calvin Klein.
Και τα 2 sites είναι φτιαγμένα με μινιμαλιστικό design προσπαθώντας να αξιοποιήσουν με τον καλύτερο τρόπο τους κενούς χώρους και τον λιγοστό χώρο που απομένει για να αποτυπώσουν σωστά τις πιο σημαντικές πληροφορίες που θα πρέπει να παρέχει στους χρήστες μια καλά στημένη ιστοσελίδα.
Τελικά ο χρόνος φόρτωσης ακόμα και με αρκετά γραφικά μπορεί να πέσει κοντά στο όριο του 1 δευτερολέπτου όπως βλέπετε στην πάνω εικόνα για το site Αποφράξεις Αθήνα.
Όμως, ο χρόνος φόρτωσης μπορεί να πέσει και κάτω του 1 δευτερολέπτου και αυτό φαίνεται στην δεύτερη εικόνα από το Pingdom Website Speed Test για ένα παρόμοιο site, το Αποφράξεις Αντωνίου.
Με χρόνο φόρτωσης της αρχικής σελίδας μόλις 993 χιλιοστά του δευτερολέπτου, ξεπερνάει στην ταχύτητα φόρτωσης ακόμα και το Facebook!
Το Facebook έχει χρόνο φόρτωσης κοντά στα 2 δευτερόλεπτα, σχεδόν διπλάσιο σε σύγκριση με το site των Αποφράξεων Αντωνίου, με μια μικρή διαφορά:
Το site των Αποφράξεων Αντωνίου έχει ένα πακέτο hosting της τάξεως των 66€, ενώ οι αντίστοιχοι servers που φιλοξενούν το Facebook έχουν το μέγεθος μιας μικρής πόλης σαν την Ραφήνα!
Η καθυστέρηση όμως οφείλεται στο λεγόμενο Facebook lag, στην καθυστέρηση του χρόνου απόκρισης του server λόγω γεωγραφικής απόστασης από το σημείο δοκιμής.
Όμως ακόμα και μια άλλη δοκιμή από το κοντινότερο σημείο ως προς το datacenter που φιλοξενεί το Facebook, έδειξε κάποια βελτίωση μερικών δεκάτων, αλλά και πάλι δεν μπορεί με τίποτα να ξεπεράσει το απλό hosting των 66€ και ξέρετε γιατί;
Γιατί έχει κατασκευαστεί από την εταιρεία μας από την αρχή με στόχο να παίζει στα κινητά και στις ταμπλέτες παρά στους σταθερούς υπολογιστές, γιατί όσο σας φαίνεται παράξενο η πρόσβαση στο ίντερνετ από σταθερό υπολογιστή είναι σε φθίνουσα πορεία και την σκυτάλη τώρα παίρνουν τα smartphones, τα smartwatches, και άλλες έξυπνες συσκευές που παίζουν σε Android, όπως αυτοκίνητα με ενσωματωμένο ίντερνετ, gps, και συσκευές του internet of things.
Αξιοσημείωτο είναι ότι μια ιστοσελίδα που φορτώνει σε 1 δευτερόλεπτο σε ένα σταθερό υπολογιστή, ίσως χρειάζεται 7 δευτερόλεπτα για να φορτώσει σε ένα smartphone και ίσως και περισσότερο.
Έχω παρατηρήσει ότι τα περισσότερα site χρειάζονται από 25 έως και 45 δευτερόλεπτα για να φορτώσουν σε μια κινητή συσκευή.
4 Βασικές αρχές για να φτιάξετε μια ιστοσελίδα που να φορτώνει σε λιγότερο από 1 δευτερόλεπτο
Αφού λοιπόν έχουμε καταλάβει όλοι ότι γίνεται να έχουμε και γρήγορα και ποιοτικά sites αλλά και eshops, θα σας δώσω 4 βασικές αρχές για να μπορέσετε να τα σχεδιάσετε.
1 Σχεδιάστε μια ιστοσελίδα που θα έχει τα τελείως απαραίτητα
Όταν λέω σχεδιάστε δεν εννοώ κατασκευάστε, αλλά να την σχεδιάσετε στο χαρτί πριν ακόμα την μεταφέρετε στο ίντερνετ. Ποια κουμπιά θα κρατήσετε; Ποια θα είναι η δομή της και γιατί;
Τι θα βάλετε στο μενού και πόσα γραφικά θα έχει;
Ότι δεν χρειάζεται για να επιτελέσει το ρόλο της, για παράδειγμα για να δεχθεί μια παραγγελία, ή να βρει ο επισκέπτης αυτό που θέλει και να σας καλέσει, τότε μάλλον δεν θα είναι χρήσιμο γενικά.
2 Επιλέξτε ένα θέμα που θα έχει λιτό και μινιμαλιστικό design
Η επιλογή του σωστού θέματος είναι πολύ σημαντική για την ταχύτητα φόρτωσης.
Μην εντυπωσιάζεστε από υπερφορτωμένα θέματα super market γιατί ο χρόνος φόρτωσης τους είναι όντως πολύ μεγάλος και ενώ στην αρχή φαίνονται εντυπωσιακά μετά καταντάνε κουραστικά.
Τα καλύτερα θέματα που έχω βρει με πολύ καθαρό κώδικα και υψηλή ταχύτητα φόρτωσης είναι τα Genesis Themes. Αξίζει τον κόπο να τα ρίξετε μια ματιά και θα καταλάβετε το γιατί.
3 Σκοτώστε ότι δεν χρειάζεστε για να επιτευχθεί ο στόχος της ιστοσελίδας σας
Αφού λοιπόν σχεδιάσετε μια δοκιμαστική έκδοση demo, σκοτώστε ότι δεν χρειάζεται για να επιτευχθεί ο στόχος της ιστοσελίδας και αφαιρέστε όλα τα περιττά που παρεμποδίζουν τον χρήστη να κάνει τη δουλειά του.
Ναι το ξέρω ότι είμαστε μια εταιρεία γεμάτη εκπλήξεις και σύντομα θα σας παρουσιάσουμε και άλλες! Οπότε μην ξεχάσετε να γραφτείτε στο Newsletter μας για να δείτε τι άλλο πρόκειται να συμβεί στο χώρο του SEO και της Google και που αλλιώς θα χάνατε άμα δεν ήσασταν στη λίστα μας.
4 Επιλέξτε γρήγορο hosting
Όλες οι εταιρείες hosting ισχυρίζονται ότι έχουν γρήγορους και ταχύτατους servers, ειδικά σχεδιασμένους για να βγάλουν το site σας πρώτο στη Google και να κερδίσουν τις εντυπώσεις!
Το πρόβλημα είναι ότι η πραγματικότητα για την φιλοξενία ιστοσελίδων διαφέρει παρασάγγας!
Η ταχύτητα του hosting εξαρτάται από την ισχύ και τη μνήμη του επεξεργαστή, από την γεωγραφική του θέση ως προς την αγορά στόχο, για αυτό και άλλωστε δεν βολεύουν για την Ελληνική αγορά οι Αμερικάνικοι servers, καθώς και για το τι πόρους σας δίνει το πακέτο που έχετε αγοράσει.
Πριν επιλέξετε κάποιο hosting, μην βάλετε ως μεγαλύτερο κριτήριο την τιμή αλλά την ποιότητα και την ταχύτητα. Γιατί κανένας για 50€ παραπάνω το χρόνο δεν θα ήθελε να ήτανε σε κάποιο hosting που να σέρνεται σαν το σαλιγκάρι.
Αυτά για σήμερα και ελπίζω να σας βοήθησα αρκετά να χτίσετε ή να διορθώσετε ταχύτατες ιστοσελίδες και γρήγορα ηλεκτρονικά καταστήματα που να βγαίνουν στην πρώτη θέση της Google!
Συμφωνώ με όλα όσα λες Γιάννη. Θάθελα να προσθέσω ότι η αρχική σελίδα του facebook φορτώνει σε 2 δευτερόλεπτα αλλά έχει ένα βάρος στη μνήμη μηδαμινό . Η αρχική σελιδα των αποφράξεων έχει επίσης πολύ μικρό βάρος σαν σελίδα. Πολύ έξυπνα δεν είναι πολυφορτωμένη και συμφωνώ με τη τακτική αυτή.
Βέβαια όταν έχουμε να τεστάρουμε σαιτ με αρχική σελιδα που εχουν 300 φωτογραφίες εκεί θέλει πολυ τεχνη και γνώσεις για να πετυχεις χρονο 3 με 4 δευτερα κατι που θα είναι επιτυχία . Δηλαδή υπαρχει μία αναλογία με το τι εχεις να φορτώσεις και τι όγκο έχεις. Κατι που δε μπορεις να το αποφυγεις σε ολα τα ειδη σαιτ.
Παντως εχω πετυχει χρονο φορωσης σε σαιτ 90% στο γοογλ σπηντ τεστ με 300 φωτο στη σελιδα .
Σωστός, θα πρέπει πάντα να βρίσκουμε τη χρυσή τομή.