Τεχνικές Βελτιστοποίησης της Ταχύτητας Φόρτωσης των Ιστοσελίδων: Δοκιμές απόδοσης και πρακτικές βελτίωσης

website speed optimization.
Επιτάχυνση ιστοσελίδας.

Γιατί ο ιστότοπός σας πρέπει να είναι υψηλής απόδοσης.

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

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

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

χρόνος φόρτωσης ιστoσελίδων

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

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

Οι βασικοί παράγοντες επιτυχίας ιστοτόπου που επηρεάζει η ταχύτητα φόρτωσης των ιστοσελίδων

• Μετατροπές - Conversions
• Ορατότητα - Visibility
• Ευχρηστία - Usability

Μετατροπές - Conversions

Κάθε ιστοσελίδα πρέπει να έχει προτροπές προς τους επισκέπτες. Τα λεγόμενα call to actions (CTA).
Με τα CTA οδηγούμε τους επισκέπτες του website να αγοράσουν το προϊόν σας, να εγγραφούν στο newsletter σας, να αγοράσουν ένα διαδικτυακό σεμινάριο ή να κατεβάσουν ένα αρχείο.
Όσο πιο γρήγορα φορτώνει η σελίδα τόσο υψηλότερα θα είναι τα ποσοστά μετατροπών.

Έρευνες έχουν δείξει ότι τα ποσοστά μετατροπών ιστοτόπων μειώνονται κατά μέσο όρο 4,42% με κάθε επιπλέον δευτερόλεπτο χρόνου φόρτωσης

Ορατότητα - Visibility

Η ταχύτητα του ιστότοπου είναι ένας από τους παράγοντες που λαμβάνει υπόψη η Google κατά την κατάταξη των ιστοτόπων. Ένας ιστότοπος με χαμηλή απόδοση, έχει κακή εμπειρία χρήστη και ως αποτέλεσμα κερδίζει λιγότερη προώθηση στα αποτελέσματα αναζήτησης.
Από τον Δεκέμβριο του 2017, η μηχανή αναζήτησης Google έχει αρχίσει να κατατάσσει τα αποτελέσματα με βάση τις εκδόσεις σελίδων για κινητές συσκευές (mobile), ακόμη και για αναζητήσεις που γίνονται από επιτραπέζιο υπολογιστή (desktop). Στην ουσία η Google υποβαθμίζει τα αργά websites που δεν λαμβάνουν υπόψη την θέαση σε όλους τους τύπους συσκευών (δεν είναι responsive design).

Ευχρηστία - Usability

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

Δοκιμές απόδοσης. Μέτρηση της ταχύτητας του website σας

Το 2018 η σύσταση της Google για τον χρόνο φόρτωσης μιας ιστοσελίδας λέει ότι πρέπει να είναι κάτω από τρία (3) δευτερόλεπτα. Σύμφωνα με έρευνα της Google μόνο ένας μικρός αριθμός ιστοτόπων είναι κοντά στην συνιστώμενη ταχύτητα για τους χρήστες - επισκέπτες μέσω της κινητής τηλεφωνίας (mobile).

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

Εργαλεία αξιολόγησης της απόδοσης ιστοσελίδων - Δοκιμές απόδοσης

Υπάρχουν πολλά εργαλεία που μπορούν να σας βοηθήσουν να μετρήσετε και να αναλύσετε της απόδοση του website σας. Συνήθως χρησιμοποιώ τα δύο που προτείνω παρακάτω.

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

Κάντε ένα αρχείο ελέγχου και καταγράψτε κάθε αλλαγή που κάνετε και τα μετρήσιμα αποτελέσματά της.

Google Pagespeed Insights - Δοκιμές απόδοσης

Είναι ένα δωρεάν εργαλείο από την Google που εκτελεί μια δοκιμή απόδοσης στον ιστότοπό σας και παρέχει συστάσεις για τον τρόπο αύξησης της απόδοσης των ιστοσελίδων σας σε όλες τις συσκευές (Desktop / Mobile).
PageSpeedInsights από την Google  (Θα ανοίξει σε νέο παράθυρο). Βάλτε το URL της home page του website σας στην μορφή (http(s) :// www.your-web-site.gr/ ) και πιέστε το κουμπί Ανάλυση.

GTmetrix - Δοκιμές απόδοσης

Είναι ένα εργαλείο που αναπτύχθηκε από την Carbon60 για να μπορούν οι πελάτες της να ελέγχουν εύκολα την απόδοση των ιστοσελίδων τους.

Θα πρότεινα να ανοίξετε έναν GTmetrix λογαριασμό για να μπορείτε να έχετε διάφορες χρήσιμες επιλογές της ανάλυσης απόδοσης των ιστοσελίδων σας.

GTmetrix  (Θα ανοίξει σε νέο παράθυρο). Βάλτε το URL της home page του website σας στην μορφή (http(s) :// www.your-web-site.gr/ ) και πιέστε το κουμπί Analyze

Μετρήστε την ταχύτητα φόρτωσης της ιστοσελίδας σας - Δοκιμές απόδοσης

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

Αν το PageSpeed Insights σας δίνει μια βαθμολογία από 90-100 τότε θα ήθελα να σας συγχαρώ, γιατί έχετε επενδύσει σε έναν ιστότοπο υψηλής απόδοσης. Ο web developer που συνεργαστήκατε ήξερε τι έκανε, και το έκανε σωστά. Όλα δείχνουν ότι το website σας αργά ή γρήγορα θα ξεχωρίσει από τον ανταγωνισμό και θα έχετε όλα τα οφέλη που στοχεύσατε και σας έκαναν να επενδύσετε σε αυτό.

Το πιθανότερο είναι η βαθμολογία απόδοσης του PageSpeed Insights να είναι μεταξύ 50-89. Αυτό σημαίνει ότι το website σας χρειάζεται στοχευμένες επεμβάσεις, για να μπορέσετε να δείτε την επένδυσή σας να αποδίδει.

Αν η βαθμολογία απόδοσης του PageSpeed Insights είναι στα κόκκινα, δηλαδή από 0-49 θα σας συμβούλευα άμεσα να φροντίσετε για την βελτιστοποίηση της ταχύτητας φόρτωσης της ιστοσελίδας σας.

PageSpeed Insights - Ανάλυση των μετρήσων απόδοσης για το website σας. WEB Vitals. Δοκιμές απόδοσης

Εξετάστε προσεκτικά τις μετρήσεις απόδοσης που σας έδωσε το PageSpeed Insights για τα web vitals.
Οι μετρήσεις δίνονται ξεχωριστά για mobile και desktop εκδόσεις του ιστοτόπου.
Η πρότασή μου είναι να μην ασχοληθείτε καθόλου με την desktop έκδοση του website σας.
Με το Mobile-first indexing - ευρετηρίαση πρώτα για κινητά - η Google χρησιμοποιεί την έκδοση του περιεχομένου της σελίδας σας για κινητές συσκευές για την κατάταξη και ευρετηρίαση της ιστοσελίδας σας.
Άρα κάντε όλες τις αλλαγές εκείνες που χρειάζονται στην mobile έκδοση και σίγουρα θα βελτιωθεί αυτόματα και η desktop έκδοση της σελίδας σας.

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

Ξεκινήστε την βελτιστοποίηση της ταχύτητας φόρτωσης των ιστοσελίδων που είναι σημαντικές.

Έλεγχος της απόδοσης των ιστοσελίδων σας με το GTmetrix - Δοκιμές απόδοσης

Το GTmetrix είναι ένα θαυμάσιο εργαλείο μέτρησης της απόδοσης ιστοτόπων και με τις αναφορές του μπορείτε να αναλύσετε τις αιτίες που κάνουν αργό το website σας.

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

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

Στο διάγραμμα καταρράκτη συμβάντων - Waterfall chart μπορούμε να δούμε τι ακριβώς μπορούμε να βελτιώσουμε στην υπό εξέταση ιστοσελίδα.

Καταγράφεται λεπτομερώς κάθε στοιχείο (HTML, CSS, fonts, Javascripts, images) με την σειρά που φορτώνεται από την ιστοσελίδα, με αναφορά στον χρόνο.

Υπάρχει ένα άρθρο που πρέπει οπωσδήποτε να διαβάσει κάποιος για να είναι σίγουρος ότι καταλαβαίνει τι σημαίνει κάθε στοιχείο του waterfall chart και πως σχετίζεται με την απόδοση του ιστοτόπου. Διαβάστε το άρθρο : How to Read a Waterfall Chart for Beginners

Πρακτικές βελτίωσης - Οδηγίες για την επιτάχυνση της ιστοσελίδας σας.
Τι πρέπει να κάνετε για να βελτιστοποιήσετε την ταχύτητα φόρτωσης του ιστοτόπου σας.

Τεχνικές για τη βελτίωση της απόδοσης του ιστότοπου

Πακέτο φιλοξενίας - web hosting

Αν τα εργαλεία ανάλυσης της απόδοσης σας ανέφεραν προβλήματα χρόνου απόκρισης του διακομιστή (web server) θα πρότεινα να εξετάσετε άμεσα αλλαγή του πακέτου ή του τύπου της web φιλοξενίας. Να έχετε υπόψη σας ότι ένα φτηνό πακέτο hosting σχεδόν πάντα, είναι πίσω από έναν κακό χρόνο φόρτωσης των ιστοσελίδων σας.

Βελτιστοποίηση του μεγέθους των φωτογραφιών - Image optimization

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

• Δοκιμάστε τα εργαλεία και τις υπηρεσίες συμπίεσης φωτογραφιών και εικόνων. Υπάρχουν πολλά και είναι και δωρεάν.
• Χρησιμοποιήστε μορφές επόμενης γενιάς (WebP και AVIF).
• Χρησιμοποιήσετε μια προσθήκη ή μια υπηρεσία που θα μετατρέπει αυτόματα τις μεταφορτωμένες εικόνες στη βέλτιστη μορφή.
• Ορίστε πλάτος και ύψος στα στοιχεία εικόνας για να μειώσετε τις μετατοπίσεις διάταξης.
• Μη χρησιμοποιείτε ποτέ φωτογραφίες σε πλήρες μέγεθος.
• Χρησιμοποιήστε την καθυστέρηση φόρτωσης εικόνων εκτός οθόνης (Lazy loading)

Πρότασή μου είναι να αφαιρέσετε όλες τις «διακοσμητικές» φωτογραφίες και να συμπιέσετε τις άκρως απαραίτητες που υποστηρίζουν και αναδεικνύουν το περιεχόμενο της ιστοσελίδας σας. Οι slider στο header που φορτώνουν με πολύ κώδικα και μεγάλη κατανάλωση δεδομένων την σελίδα σας, απαγορεύονται.

Μειώστε τα πρόσθετα

Τα πρόσθετα - plugin - είναι κώδικας τρίτων που προσθέτουν λειτουργικότητα στο website σας.
Όσο περισσότερα πρόσθετα είναι εγκατεστημένα τόσο πιο αργά θα λειτουργεί ο ιστότοπος και μπορεί επίσης να εμφανιστούν ζητήματα ασφάλειας ή συμβατότητας μεταξύ τους. Διατηρείστε μόνο τα απαραίτητα plugin και να διασφαλίζετε ότι είναι πάντα ενημερωμένα με την τελευταία έκδοση.

Προσωρινή αποθήκευση ιστότοπου - website caching

Caching είναι η αποθήκευση των ιστοσελίδων στον web server ώστε να μοιράζονται σε πολλούς χρήστες ταυτόχρονα. Η υλοποίηση για το caching εξαρτάται από την πλατφόρμα ανάπτυξης του website και του τύπου πακέτου φιλοξενίας (shared hosting, VPS, dedicated server) που έχετε επιλέξει.

Συμπίεση και αποσυμπίεση αρχείων. Gzip Compression

Το Gzip συμπιέζει τα αρχεία που ζητούνται από το πρόγραμμα περιήγησης, πριν αποσταλούν. Ο browser Στην πλευρά του χρήστη, αποσυμπιέζει τα αρχεία και παρουσιάζει τα περιεχόμενα. Αυτή η μέθοδος μπορεί να λειτουργήσει με όλα τα αρχεία στον ιστότοπό σας. Μπορείτε να ενεργοποιήσετε το Gzip στο websites σας προσθέτοντας μερικές γραμμές κώδικα ή μέσω του βοηθητικού προγράμματος  Gzip. Κάποιες λύσεις caching αναλαμβάνουν να συμπιέσουν τα δεδομένα που στέλνει ο web server στους επισκέπτες των ιστοσελίδων σας.

Μείωση της χρήσης web fonts

Οι γραμματοσειρές ιστού έχουν γίνει πολύ δημοφιλείς στο σχεδιασμό ιστοσελίδων.
Η χρήση web fonts έχει αρνητική επίδραση στην ταχύτητα φόρτωσης του website. Προσθέτουν επιπλέον http requests σε εξωτερικούς πόρους και επιπλέον φόρτο μεταφοράς δεδομένων στις σελίδες. Η χρήση τύπου WOFF2 γραμματοσειρών, λίγα σετ χαρακτήρων και η τοπική αποθήκευση των web fonts, θα μειώσει τον χρόνο φόρτωσης των ιστοσελίδων σας.

Redirects

Απλά ΑΠΟΦΥΓΕΤΕ τα Redirects.

Javascript & CSS combine & minification

Ελαχιστοποιήστε τον αριθμό των αρχείων JavaScript και CSS.
Εάν ο ιστότοπός σας περιέχει πολλά αρχεία JavaScript και CSS, ένας μεγάλος αριθμός αιτημάτων HTTP θα επιβραδύνουν τον ιστότοπο. Προσπαθήστε να ενοποιήσετε τα CSS και Javascripts σε ένα αρχείο. Αυτό θα μειώσει τα HTTP Requests. Υπάρχουν τεχνικές ελαχιστοποίησης του κώδικα αυτών των αρχείων - CSS & Javascript Minification. Υπάρχουν πολλά εργαλεία και υπηρεσίες για την ελαχιστοποίηση του κώδικα HTML, CSS και Javascript.

Είναι γρήγορο τώρα το website σας;
ο χρόνος φόρτωσης της ιστοσελίδας σας είναι κάτω από 2" ;

Εφαρμόζοντας τις παραπάνω πρακτικές βελτίωσης της ταχύτητας φόρτωσης ιστοσελίδων, είμαι σίγουρος ότι οι μετρήσεις της απόδοσης του ιστότοπου θα μπουν στην πράσινη περιοχή, δηλαδή από 90-100. Υπάρχουν και άλλες παράμετροι από τις οποίες εξαρτάται η απόδοση ενός ιστοτόπου, που θα πρέπει να ρυθμίσετε - αντιμετωπίσετε, όταν αρχίσετε να βελτιστοποιείτε το website σας.
Στόχος μου είναι να γράψω κάποια εξειδικευμένα άρθρα για κάθε μία από αυτές τις παραμέτρους σε συγκεκριμένες πλατφόρμες ανάπτυξης.