Ο χρόνος που κάνει η ιστοσελίδα σας για να φορτώσει και να τη δει ο χρήστης αποτελεί έναν από τους σημαντικότερους παράγοντες για την επιτυχία της και την αύξηση των πωλήσεων σας, είτε μιλάμε για eshop είτε για εταιρεία παροχής υπηρεσιών.
Και όταν λέμε ένας από τους σημαντικότερους παράγοντες, εννοούμε καταρχήν για τους χρήστες που επισκέπτονται τη σελίδα σου (όλοι μας έχουμε κλείσει σελίδες που αργούν να φορτώσουν, πηγαίνοντας κατευθείαν στα επόμενα αποτελέσματα της Google) αλλά φυσικά και για τη Google και τη θέση εμφάνισής σας στα αποτελέσματα των αναζητήσεων. Μάλιστα συνήθως τα δύο αυτά είναι αλληλένδετα καθώς η κακή εμπειρία χρήστη φέρνει περισσότερα bounces (χρήστες που μπαίνουν και βγαίνουν κατευθείαν) το οποίο δείχνει στη Google ότι η σελίδα δεν είναι τόσο καλή για να τη δείχνει στους χρήστες.
Γιατί λοιπόν αργεί να φορτώσει μία ιστοσελίδα;
Μία ιστοσελίδα μπορεί να αργεί για πολλούς λόγους. Οι πιο σημαντικοί πάντως κι αυτοί που εμφανίζονται συχνότερα είναι οι παρακάτω:
1. Φιλοξενία ιστοσελίδας (Hosting)
Το πιο σύνηθες πρόβλημα που αντιμετωπίζουν οι σημερινές ιστοσελίδες καθώς όταν επιλέγουμε πάροχο φιλοξενίας συνήθως κοιτάμε πρώτα τα οικονομικότερα αποτελέσματα τα οποία παρέχουν ένα πακέτο shared φιλοξενίας το οποίο όμως δεν εγγυάται καλές ταχύτητες και συνήθως επιφέρει αργή απόκριση του server. Ένας άλλος λόγος που ο server μπορεί να μην ανταποκρίνεται όπως πρέπει είναι διότι ο server μπορεί να μην είναι βελτιστοποιημένος για τις εφαρμογές που πρόκειται να τρέξει (WordPress, Joomla, Opencart κτλ).
Ένα σωστό πακέτο φιλοξενίας πρέπει έτσι να παρέχει γρήγορη φόρτωση της ιστοσελίδας, σωστό και άμεσο support σχετικά με server-side ζητήματα καθώς και βελτιστοποίηση για την συγκεκριμένη εφαρμογή που θα χρησιμοποιηθεί. Πολύ σημαντικό είναι επίσης το θέμα του scaling, να μπορεί δηλαδή το πακέτο σας να αναβαθμιστεί εύκολα και γρήγορα αν ανέβει η επισκεψιμότητα της σελίδας σας.
2. Μέγεθος & Διαστάσεις Εικόνων
Όλοι γνωρίζουμε την έκφραση “Μία εικόνα ίσον χίλιες λέξεις”. Άρα, αν προσθέσω στη σελίδα μου 4-5 εικόνες, έχω φτάσει κατευθείαν τις 4.000-5.000 λέξεις!!! Και αν αυτές οι εικόνες είναι μεγάλες και “πιασάρικες” τότε ακόμα καλύτερα. Δεν μπορώ να πω ότι διαφωνώ απόλυτα με το παραπάνω, αλλά εδώ αρχίζει λίγο το πρόβλημα με την ταχύτητα της ιστοσελίδας.
Το μέγεθος των εικόνων παίζει πολύ μεγάλο ρόλο για την ταχύτητα της ιστοσελίδας σου, οπότε καλύτερα να το προσέξεις ιδιαίτερα. Με τον όρο μέγεθος αναφέρω στα Kilobytes ή Megabytes(καλύτερα να μην φτάσουμε εκεί βέβαια) της κάθε εικόνας. Οι εικόνες λοιπόν πρέπει να φορτώνονται στην ιστοσελίδα στο ιδανικό μέγεθος έτσι ώστε να μην χαλάει το αποτέλεσμα που βλέπει ο χρήστης. Τις περισσότερες φορές, οι εικόνες που ανεβάζουμε στην ιστοσελίδα μας περιέχουν “άχρηστα” bytes, καθιστώντας την όλο και πιο αργή.
Ακόμη, οι εικόνες που πρέπει να φορτώνονται στην ιστοσελίδα πρέπει πάντα να είναι στη διάσταση που τις χρειαζόμαστε. Αν δηλαδή για παράδειγμα χρειαζόμαστε μία εικόνα 800×600 pixels, τότε πρέπει να φορτώσουμε μία τέτοια εικόνα κι όχι μια εικόνα 1600×1200 pixels. Γιατί αυτομάτως σημαίνει ότι φορτώνουμε διπλάσια εικόνα από ότι χρειαζόμαστε, άρα περισσότερα δεδομένα άρα πιο αργή ιστοσελίδα.
3. Κλέφτες Bandwidth (Bandwith Thieves)
Σε αυτήν την κατηγορία αναφέρομαι σε έξτρα δυνατότητες της σελίδας που έχουμε προσθέσει για να επιτύχουμε κάποια, συνήθως, αποτελέσματα σχετικά με το marketing αλλά αυτά επιφέρουν πολύ αρνητικά αποτελέσματα σχετικά με την ταχύτητα της ιστοσελίδας.
Ένα χαρακτηριστικό παράδειγμα είναι τα plugins ενός CMS (WordPress, Joomla κτλ). Πολλά από αυτά μπορεί να τα θεωρείς χρήσιμα για τη σελίδα σου, αλλά ο κώδικάς τους να την επιβαρύνει τόσο που ίσως είναι καλύτερα να ξανασκεφτείς την χρησιμότητά τους.
Ένα άλλο παράδειγμα είναι τα templates των CMS καθώς κάποια από αυτά δεν είναι αρκετά βελτιστοποιημένα σε ότι αφορά την ταχύτητα. Ακόμη, κλέφτες bandwidth μπορούν να θεωρηθούν και οι διαφημίσεις που έχουμε στην ιστοσελίδα μας για να λαμβάνουμε έσοδα καθώς επιβαρύνουν σημαντικά το μέγεθος της σελίδας μας.
4. Καθόλου ή λάθος χρήση εργαλείων για την επιτάχυνση της σελίδας
Ουσιαστικά αναφέρομαι σε εργαλεία που θα σε βοηθήσουν να συρρικνώσεις τη σελίδα σου σε μέγεθος, θα κρατήσουν φωτογραφίες σε ταχύτερα προσπελάσιμη μνήμη (η ευρέως γνωστή ως cache) για να μην φορτώνουν κάθε φορά από την αρχή ή ακόμη θα επιλέξουν τον κοντινότερο server για την εμφάνιση της ιστοσελίδας σου από τη κοντινότερη γεωγραφική απόσταση.
Αυτά τα εργαλεία μπορεί αρκετές φορές να μην έχουν ρυθμιστεί σωστά στον server που σας φιλοξενεί ή ακόμη και να μην χρησιμοποιούνται καθόλου λόγω παράληψης. Η αλήθεια είναι όμως ότι παίζουν τεράστιο ρόλο καθώς μπορούν να επιφέρουν τεράστια αλλαγή στην ταχύτητα φόρτωσης της ιστοσελίδας σου.
Πώς λοιπόν μπορείς να διορθώσεις τα παραπάνω προβλήματα και να επιταχύνεις την ιστοσελίδα σου;
Αρχικά, πρέπει να μπορέσεις να αναγνωρίσεις τα προβλήματα αυτά και να τα αξιολογήσεις σωστά. Για να γίνει αυτό, πρέπει να χρησιμοποιήσεις τα κατάλληλα εργαλεία. Εγώ λοιπόν σας προτείνω και χρησιμοποιώ κυρίως τα παρακάτω δύο:
Το δεύτερο είναι της Google και δεν θα μπορούσε να λείπει από την εργαλειοθήκη μου καθώς δείχνει πως βλέπει η Google την ιστοσελίδα ενώ το πρώτο περιέχει πιο αναλυτική παρουσίαση των μετρήσεων και απευθύνεται κυρίως σε προγραμματιστές. Ας εστιάσουμε λοιπόν να δούμε πώς αναγνωρίζουμε ένα πρόβλημα και πώς μπορούμε να το λύσουμε. Για να μπορέσουμε να κάνουμε πιο σωστή ανάλυση θα χρησιμοποιήσουμε την ανάλυση του GTmetrix που είναι πιο λεπτομερής και θα χρησιμοποιήσουμε ιστοσελίδα με “άσχημα” αποτελέσματα.
Ξεκινώντας, κάτω από το Latest Performance Report for, βρίσκουμε κάποιες πληροφορίες από ποια τοποθεσία έκανε τη μέτρηση το GTmetrix ( London, UK) και τι browser χρησιμοποίησε ( Chrome (Desktop) 62.0.3202.94, PageSpeed 1.15-gt1, YSlow 3.1.8). Ακόμη, σε αυτήν την περίπτωση βγάζει ένα μήνυμα για να ακολουθήσουμε κάποια tips βελτιστοποίησης για το WordPress γιατί η σελίδα που ελέγξαμε είναι σε WordPress καθώς μας προτρέπει επίσης να χρησιμοποιήσουμε CDN για την σελίδα μας. Να σημειώσω εδώ πέρα, ότι για να κάνεις έλεγχο από την Αγγλία όπως βλέπεις στο παράδειγμά μας (η πιο κοντινή τοποθεσία για την Ελλάδα) απαιτείται να έχεις κάνει δωρεάν εγγραφή.
Σε ότι αφορά τα scores, από την επίσημη ιστοσελίδα του GTmetrix, έχουμε την παρακάτω εξήγηση:
Λαμβάνετε βαθμούς PageSpeed / YSlow με βάση τη συμμόρφωση της σελίδας σας με τους κανόνες. Ένα καλό αποτέλεσμα PageSpeed / YSlow σημαίνει ότι η σελίδα σας είναι βελτιστοποιημένη ώστε το πρόγραμμα περιήγησης να την φορτώσει όσο το δυνατόν γρηγορότερα. Ουσιαστικά, όσο καλύτερα σκορ έχουμε, τόσο γρηγορότερα θα ανοίγει η ιστοσελίδα μας. Απλά είναι διαφορετικοί αλγόριθμοι που μετράνε λίγο διαφορετικά τα metrics μίας ιστοσελίδας για αυτό προκύπτουν και διαφορετικά σκορ.
Τα Page Details εμφανίζουν περισσότερες λεπτομέρειες σχετικά με τον χρόνο που χρειάζεται μία ιστοσελίδα για να φορτώσει, το μέγεθος της και τα αιτήματα στον server για κάποιο στοιχείο.
Ας πάμε τώρα και στην επιμέρους ανάλυση των καρτελών που βρίσκουμε παρακάτω.
Pagespeed
- Enable gzip compression
Αυτό το πρόβλημα εμφανίζεται όταν δεν έχει ενεργοποιηθεί το gzip στον server σας και είναι δουλειά της εταιρείας που σας προσφέρει φιλοξενία για να το κάνει. Έτσι, επικοινωνήστε μαζί τους για να σας το λύσουν. - Serve scaled images
Με αυτό το πρόβλημα, το GTmetrix μας λέει ότι πρέπει να έχουμε εικόνες στη σελίδα μας στις διαστάσεις που τις χρειαζόμαστε κι όχι μεγαλύτερες. Δηλαδή, αν χρειαζόμαστε μία εικόνα 800×600 να μην ανεβάσουμε στη σελίδα μας μία 1600×1200. - Leverage browser caching
Η ακριβής μετάφραση είναι “Αξιοποιήστε την προσωρινή αποθήκευση του προγράμματος περιήγησης” και αυτή ακριβώς είναι η λύση για το πρόβλημα που εμφανίζεται εδώ. Αυτό διορθώνεται με αλλαγές στο .htaccess αρχείο της σελίδας σου και δίνει τη δυνατότητα σε χρήστες που την επισκέπτονται συχνά να έχουν αποθηκευμένα αρχεία στον browser τους (εικόνες, CSS, JS) ώστε να φορτώσει ακόμα πιο γρήγορα η σελίδα σου. Για τους χρήστες του WordPress, ένα cache plugin μπορεί να κάνει αυτόματα αυτή τη δουλειά. Κάποια από τα πιο γνωστά είναι τα W3 Total Cache, WP Super Cache, WP Fastest Cache. - Optimize images
Η επίλυση αυτού του προβλήματος γίνεται με την βελτιστοποίηση των εικόνων (μείωση των kb της κάθε εικόνας χωρίς να μειώνουμε την ποιότητα). Μπορείτε να χρησιμοποιήσετε αρκετά δωρεάν εργαλεία για αυτή τη δουλειά, με το αγαπημένο μου να είναι το tinypng.com. Απλά ανεβάζεις εκεί τις φωτογραφίες και παίρνεις πίσω την βελτιστοποιημένη έκδοσή τους. - Minify CSS / Minify JavaScript
Το πρόβλημα εμφανίζεται σε αυτήν την ιστοσελίδα καθώς δεν έχει γίνει “συμπίεση” των αρχείων CSS και JS. Αυτό στο WordPress μπορείς να το πετύχεις με το κατάλληλο cache plugin, όπως τα αναφέραμε παραπάνω.
Αυτά σε ότι αφορά το pagespeed. Έχει η ιστοσελίδα σου προβλήματα που δεν αναλύσαμε παραπάνω ή δεν μπορείς να τα διορθώσεις μόνος σου; Ζήτα τώρα μία προσφορά από ένα ειδικό και άστα όλα πάνω του.
YSlow
- Add Expires headers
Αυτό το πρόβλημα μας λέει ότι τα κάποια αρχεία δεν έχουν σημανθεί ότι μπορούν να αποθηκευτούν στην cache του browser του χρήστη. Το πρόβλημα μπορεί να διορθωθεί με την σωστή ενεργοποίηση της cache που αναφέρουμε παραπάνω στο pagespeed. - Make fewer HTTP requests
Το GTmetrix μας αναφέρει σε αυτό το σημείο ότι καλούμε πολλά διαφορετικά αρχεία, αυξάνοντας έτσι κατά πολύ τα requests (αιτήματα) προς τον server, κάτι που το καθυστερεί. Αυτό για να διορθωθεί, πρέπει είτε να υπάρχει σωστός προγραμματισμός της σελίδας από τον προγραμματιστή που τη δημιούργησε είτε να χρησιμοποιήσεις κάποιο plugin που να κάνει group τα αρχεία CSS και JS. Αυτό το βήμα θέλει βέβαια αρκετή προσοχή γιατί μπορεί να δημιουργήσει προβλήματα στη λειτουργία της ιστοσελίδας. Η καλύτερη λύση για αυτό προσφέρεται μόνο από custom εφαρμογές καθώς εκεί υπάρχει πλήρης έλεγχος των πόρων της ιστοσελίδας σου. - Compress components with gzip
Παρόμοιο με το gzip που ανέφερα παραπάνω. - Use a Content Delivery Network (CDN)
Όπως γράψαμε και στην αρχή της ανάλυσης του GTmetrix, το εργαλείο αυτό μας προτείνει να χρησιμοποιήσουμε ένα CDN για τη γρηγορότερη και ασφαλέστερη φόρτωση της σελίδας μας. Αυτό μπορεί να γίνει για παράδειγμα μέσω ενός δωρεάν πακέτου για παράδειγμα της Cloudflare και την ενοποίησή του με ένα cache plugin που να υποστηρίζει CDN. Θα αναλύσουμε περισσότερα για τα CDN σε επόμενο άρθρο μας. - Minify JavaScript and CSS
Αναφέρθηκε κι αυτό παραπάνω.
Αυτά είναι λοιπόν και τα σημαντικά metrics του YSlow που πρέπει να γνωρίζουμε και να μπορούμε να βελτιώσουμε. Αν δεν τα καταφέρεις να τα διορθώσεις μόνος σου ή πιστεύεις ότι είναι καλύτερα να το αναλάβει έτσι κι αλλιώς ένας ειδικός, ζήτα προσφορά για μια ανάλυση της ταχύτητας της ιστοσελίδας σου και που μπορεί να βελτιωθεί.
Στην καρτέλα του Waterfall, μπορείτε να δείτε τη σειρά με την οποία φορτώνει η ιστοσελίδα τα αντίστοιχα αιτήματα και καμιά φορά είναι σημαντική καθώς μπορούμε να βρούμε πόρους που καθυστερούν την σελίδα μας από το να φορτώσει. Στο παράδειγμά μας, η σελίδα αυτή ψάχνει για ένα περίπου δευτερόλεπτο ένα custom.css αρχείο το οποίο δεν υπάρχει.
Πριν ολοκληρώσουμε την ανάλυση από το GTmetrix θα ήθελα να δούμε τελευταία και την καρτέλα των Timings καθώς είναι αρκετά σημαντική για να καταλάβουμε αν ο server μας αποτελεί πρόβλημα στην ταχύτητα της σελίδας μας ή απλά η καθυστέρησή της οφείλεται σε βελτιστοποιήσεις που πρέπει να γίνουν στο μπροστά μέρος της σελίδας. Αυτό μπορούμε πιο εύκολα βέβαια να το δούμε και στην ανάλυση του Pagespeed της Google με την ένδειξη Reduce Server Response Time. Ο ιδανικός χρόνος φόρτωσης μίας σελίδας από τον server είναι κάτω από 200ms(0,2 δευτερόλεπτα δηλαδή).
Σε αυτήν την καρτέλα λοιπόν, ο πιο σημαντικός χρόνος που πρέπει να κοιτάξουμε είναι το Time to First Byte (TTFB). Αυτός είναι ο χρόνος απόκρισης του server και αν είναι πάνω από 200ms, τότε πρέπει να εξετάσουμε την περίπτωση να αλλάξουμε server ή εταιρεία παροχής φιλοξενίας(hosting).
Ουσιαστικά, η γρήγορη φόρτωση μίας ιστοσελίδας δεν πρέπει να αποτελεί υπηρεσία για μία εταιρεία καθώς αποτελεί προαπαιτούμενο για την κατασκευή ιστοσελίδων. Δυστυχώς όμως, έχουμε συναντήσει πολλές περιπτώσεις ιστοσελίδων οι οποίες είτε από την λάθος δημιουργία τους είτε από τη λάθος διαχείριση των υπεύθυνων φτάνουν στο σημείο να έχουν ανάγκη να ζητήσουν αυτήν την υπηρεσία. Είναι αλήθεια ότι αρκετά από αυτά που σου πρότεινα μπορεί να μην μπορέσεις να τα κάνεις από μόνος σου αλλά τουλάχιστον θα μπορείς να διαγνώσεις τα προβλήματα και να ενημερώσεις την εταιρεία με την οποία συνεργάζεσαι για την επιδιόρθωσή τους.
Πηγή: dicha.gr
