Tips για αύξηση της ταχύτητας μιας ιστοσελίδας
Οι κύριοι λόγοι για την μέγιστη ταχύτητα φόρτωσης μίας ιστοσελίδας
Κατά την κατασκευή της ιστοσελίδας πρέπει να λάβεις υπόψιν την ταχύτητα της. Οι χρήστες που θα το επισκεφτούν απαιτούν να μην αργεί, αλλιώς θα βαρεθούν να περιμένουν μέχρι να φορτώσει και θα αποχωρήσουν με συνοπτικές διαδικασίες. Οι έρευνες λένε ότι πάνω από το 70% των χρηστών αποχωρεί από ένα site αν αυτό κάνει να φορτώσει πάνω από 3 δευτερόλεπτα. Η Google το γνωρίζει πολύ καλά και για αυτό τον λόγο κατατάσσει τα αποτελέσματα εμφάνισης των ιστοσελίδων με παράμετρο την ταχύτητα τους, δίνοντας ένα πλεονέκτημα στα γρήγορα site για μεγαλύτερη επισκεψιμότητα σε σχέση με τα πιο αργά.
Όσους περισσότερους επισκέπτες έχει η ιστοσελίδα σου τόσο πιο πετυχημένη και δημοφιλής θα γίνει. Αυξάνονται οι πιθανότητες για αλληλεπιδράσεις όπως για παράδειγμα να δουν μία διαφήμιση ή να αγοράσουν κάποιο προϊόν. Και το καλύτερο από όλα, η ταχύτητα και φυσικά το περιεχόμενο κάνει τους επισκέπτες να παραμείνουν στο site και να περιηγηθούν στις υπόλοιπες σελίδες μειώνοντας στο ελάχιστο το bounce rate ή αλλιώς ποσοστό εγκατάλειψης.
Τεχνικές βελτιστοποίησης ταχύτητας ενός site
Πάμε να δούμε μαζί κάποια έξυπνα τρικ, αλλά ταυτόχρονα πολύ σημαντικά που θα σας βοηθήσουν να πετύχεις τον στόχο σου βελτιώνοντας την ταχύτητα φόρτωσης της ιστοσελίδας σου στο μέγιστο δυνατό.
Όταν θέλουμε να στείλουμε ένα αρχείο συνήθως το συμπιέζουμε για να γίνει η αποστολή γρήγορη και εύκολη. Έτσι και στα site υπάρχει η διαδικασία Gzip Compression. Συμπιέζει την ιστοσελίδα μας, μειώνοντας στο ελάχιστο το μέγεθος της και βοηθώντας στην ταχύτητα φόρτωσης της, αφού η μετάβαση από τον server στον browser του χρήστη γίνεται ακόμα πιο γρήγορα. Υπάρχουν διάφορα plugins που μπορείς να χρησιμοποιήσεις για να θέσεις σε λειτουργία αυτή την διαδικασία και μετά να ελέγξεις ότι όντως δουλεύει.
Τα περισσότερα site έχουν κάποια στοιχεία πάνω τους, όπως για παράδειγμα εικόνες ή favicons που δεν αλλάζουν συχνά. Σε αυτά πρέπει να προσθέσουμε τα expires headers. Ουσιαστικά είναι μία εντολή που αποθηκεύει τα στοιχεία στην cache του browser του χρήστη, με αποτέλεσμα την μείωση των HTTP requests. Τα expires headers βοηθάνε κατά πολύ τους τακτικούς επισκέπτες να φορτώνουν την ιστοσελίδα σου ακόμα πιο γρήγορα.
Οι φόρτωση των αρχείων Javascript γίνεται με δύο τρόπους. Σύγχρονα και ασύγχρονα. Αν επιλέξουμε να φορτώσουμε τα αρχεία Javascipt συγχρονισμένα, τότε θα φορτωθούν στην αρχή του loading της σελίδας (με τη σειρά που είναι γραμμένος ο κώδικας) και θα δημιουργήσουμε πρόβλημα στον browser καθώς μπορεί να κολλήσει για μερικά δευτερόλεπτα κατά τα οποία δεν θα φαίνεται κάποιο περιεχόμενο στον χρήστη. Ο καλύτερος τρόπος είναι ο ασύγχρονος καθώς φορτώνουν αφού έχει ήδη παρουσιαστεί το βασικό περιεχόμενο της ιστοσελίδας, άρα ελαχιστοποιώντας τα bottlenecks. Για να πετύχουμε την ενέργεια Defer / Async javascript υπάρχουν αρκετά plugins που θα μας βοηθήσουν.
Όσο περνάνε τα χρόνια οι CDN (Content Delivery Network) υπηρεσίες γίνονται ολοένα και πιο δημοφιλείς. Το CDN είναι ουσιαστικά ένα δίκτυο από servers διασκορπισμένο σε στρατηγικά σημεία σε όλο τον πλανήτη επιτρέποντας στους επισκέπτες μίας ιστοσελίδας να έχουν την μέγιστη ταχύτητα φόρτωσης οπουδήποτε και αν βρίσκονται.
Αν υποθέσουμε ότι το site σου είναι αποθηκευμένο σε ένα μόνο server στην Γερμανία, τότε ο επισκέπτης από την Ελλάδα θα έχει πιο αργή πρόσβαση καθώς θα πρέπει να περάσει ανάμεσα από έναν μεγάλο αριθμό router και switches για να καταφέρει να φτάσει στην προσβασιμότητα της ιστοσελίδας. Ένα CDN δίκτυο θα σε βοηθήσει να διατηρήσεις και να αυξήσεις τους χρήστες που σε επισκέπτονται. Εκτός από την ταχύτητα το CDN σου παρέχει μεγαλύτερη ασφάλεια, ενεργοποιεί το minify του κώδικα (κατ’ επιλογή σας) και μειώνει το bandwidth στον server.
Σύμφωνα με έρευνες οι έγχρωμες εικόνες στο περιεχόμενο της ιστοσελίδας σου, αυξάνουν τις πιθανότητες κατά 80% να κάνουν τους χρήστες να το διαβάσουν και να παραμείνουν. Όπως και να το κάνουμε οι εικόνες είναι αυτές που θα πέσουν πρώτες στο μάτι ενός χρήστη. Όμως, το μέγεθος της εικόνας πρέπει να μην είναι πολύ μεγάλο καθώς μπορεί να δημιουργήσει καθυστέρηση. Πριν το ανέβασμα της φωτογραφίας πρέπει να γίνει image resizing και optimization με κάποιο λογισμικό για να μειωθεί το μέγεθος της χωρίς να χάσει σε ποιότητα.
Οι πιο συνηθισμένες μορφές αρχείων που χρησιμοποιούνται είναι η JPEG και η PNG. Η JPEG που είναι και η δημοφιλέστερη είναι μία μορφή συμπιεσμένου αρχείου και χρησιμοποιείται για εικόνες με πολλά και διάφορα χρώματα, ενώ η PNG μορφή είναι ασυμπίεστη με περισσότερη λεπτομέρεια στην ποιότητα, αλλά και μεγαλύτερο μέγεθος που χρησιμοποιείται κυρίως σε φωτογραφίες με διαφάνεια (πχ logos). Ένας νέος τύπος αρχείων εικόνας είναι και το WebP με ακόμα μεγαλύτερη συμπίεση αλλά δυστυχώς δεν υποστηρίζεται για την ώρα από όλους τους browsers.
Πως καταλαβαίνω αν είναι γρήγορη η σελίδα μου;
Κάποιοι ιδιοκτήτες ιστοσελίδων πιστεύουν ότι η ταχύτητα φόρτωσης είναι η ιδανική και είναι κομπλέ χωρίς να χρειαστεί να κάνουν κάτι από τα παραπάνω. Μην κάνεις αυτό το λάθος. Αυτό συμβαίνει διότι ο ιδιοκτήτης την επισκέπτεται καθημερινά με αποτέλεσμα τα σύγχρονα προγράμματα περιήγησης να κρατούν προσωρινή μνήμη και να εμφανίζουν το site σχεδόν αμέσως. Όμως, ένας χρήστης όταν την επισκέπτεται για πρώτη φόρα δεν υπάρχει περίπτωση να έχει την ίδια εμπειρία με τον ιδιοκτήτη. Υπάρχουν διάφορα εργαλεία μέτρησης της ταχύτητας φόρτωσης μίας ιστοσελίδας που συνιστώνται είτε για αρχάριους, είτε για πιο έμπειρους. Κάποια από αυτά είναι το Gtmetrix, το Pingdom και το Google PageSpeed Insights.
Ελπίζουμε με αυτό το άρθρο να σε βοηθήσουμε να κατανοήσεις την σημαντικότητα της ταχύτητας φόρτωσης μίας ιστοσελίδας. Όσο καλά και να την σχεδιάσεις, αν είναι αργή οι κόποι σου θα πάνε χαμένοι. Δημιούργησε ένα site που θα φορτώνει σε ανταγωνιστικούς χρόνους, σε ένα σύγχρονο περιβάλλον και η επιτυχία θα είναι σίγουρη.
Επικοινώνησε τώρα με την D3 Solutions για έναν δωρεάν έλεγχο της ιστοσελίδας σου!
3 Σχόλια