Ένα γρήγορο site μπορεί να ωφελήσει τα conversions που γίνονται μέσα από αυτό, το SEO αλλά και την εμπειρία των πελατών σου.
1. Όρισε τις διαστάσεις στις εικόνες σου
Για να μπορέσει ο browser να προβάλει τη σελίδα σου, όταν την επισκέπεται κάποιος χρήστης, πρέπει πρώτα να υπολογίσει πώς θα κατανεμηθεί ο χώρος της σελίδας ανάμεσα σε εικόνες και κείμενο. Σε περίπτωση που δεν έχεις ορίσει από πριν τις διαστάσεις των εικόνων, ο browser θα χρειαστεί περισσότερο χρόνο, καθώς θα πρέπει πρώτα να τις φορτώσει για να αντιληφθεί ποιες είναι οι διαστάσεις τους, με αποτέλεσμα αυτό να κοστίζει σε χρόνο φόρτωσης της σελίδας γενικότερα.
Για να ορίσεις τις διαστάσεις κάθε εικόνας, δεν έχεις παρά να προσθέσεις width=”xxxx” και height=”xxxx” μέσα στο <img>.
Είναι σημαντικό οι διαστάσεις αυτές να είναι και οι πραγματικές, καθώς σε περίπτωση που η εικόνα είναι μεγαλύτερης διάστασης και χρησιμοποιείται ο παραπάνω κώδικας απλά για να κάνει scaling του image, και πάλι θα επηρεαστεί αρνητικά ο χρόνος φόρτωσης.
2. Χρησιμοποίησε CSS Sprites
Όπως έχουμε αναφέρει τα CSS Sprites χρησιμοποιούνται για να μειωθεί το μέγεθος, ο χώρος που θα χρειαστούν αλλά και η ταχύτητα με την οποία θα φορτώσουν οι εικόνες στο site σου. Αφού επιλέξεις τις εικόνες που θέλεις να ανεβάσεις σε μια σελίδα, αρκεί να τις εισάγεις σε έναν css sprite generator. Ο generator θα σου παράξει τόσο ένα συνολικό αρχείο, το οποίο θα περιέχει τις εικόνες που θέλεις να προσθέσεις, όσο και τον κώδικα που θα χρειαστείς για να τις διαχειριστείς μέσα στο sprite.
Ανεβάζοντας ένα CSS sprite αντί πολλών εικόνων, θα παρατηρήσεις αρκετά μεγάλη διαφορά στην ταχύτητα φόρτωσης, αφού ο browser επεξεργάζεται μόνο μία εικόνα και όχι ξεχωριστά όλες όσες τελικά εμφανίζονται στη σελίδα σου.
3. Πρόσθεσε Expires headers
Τα expires headers ενημερώνουν τον browser για το αν πρέπει να ζητήσει ένα αρχείο από τον server ή αν μπορεί να το ανακαλέσει από την cache. Όταν προσθέτεις expires headers σε ένα στοιχείο (π.χ. τις εικόνες στο site σου), εκείνο αποθηκεύεται στην cache του browser, με αποτέλεσμα να μειώνονται τα HTTP requests και να φορτώνει το αρχείο ταχύτερα κατά την επόμενη επίσκεψη του χρήστη.
Γενικά συνίσταται η προσθήκη expires headers σε στοιχεία που δεν αλλάζουν συχνά, όπως οι εικόνες, τα favicons ή το CSS. Αφού αποφασίσεις πού θα προστεθούν, ανάλογα με τις ανάγκες του site σου, δεν έχεις παρά να ανοίξεις το .htaccess αρχείο και να προσθέσεις τον παρακάτω κώδικα, ο οποίος θέτει μια default τιμή ενός μήνα για τη διατήρηση των στοιχείων στην cache:
<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On
# Default directive
ExpiresDefault “access plus 1 month”
</IfModule>
Για κάθε στοιχείο στο οποίο θέλεις να προσθέσεις expires headers, εισάγεις πάνω από το </IfModule> τις ανάλογες εντολές:
# My favicon
ExpiresByType image/x-icon “access plus 1 year”
# Images
ExpiresByType image/gif “access plus 1 month”
ExpiresByType image/png “access plus 1 month”
ExpiresByType image/jpg “access plus 1 month”
ExpiresByType image/jpeg “access plus 1 month”
4. Διόρθωσε τα broken links του site σου
Τα broken links εκτός από το SEO του site σου, μπορούν να επηρεάσουν αρνητικά το traffic, ενώ είναι πολύ πιθανό να προτρέψουν το χρήστη να εγκαταλείψει το site σου. Καλό θα ήταν, λοιπόν, να κάνεις περιοδικούς ελέγχους για να τα εντοπίζεις και να τα διορθώνεις ή να προσθέτεις 301 redirects όπου είναι απαραίτητο.
5. Εφάρμοσε το Lazy Load για τις εικόνες σου
Η λογική πίσω από το Lazy Load είναι η σταδιακή φόρτωση των εικόνων στο site σου, ανάλογα με το ποιες από αυτές είναι ορατές στον χρήστη. Αν, δηλαδή, υπάρχουν εικόνες προς το τέλος της σελίδας, δεν θα φορτώσουν μέχρι να κάνει scroll down ο επισκέπτης.
Έτσι, μειώνεται ο όγκος των αρχείων που πρέπει να εμφανιστούν άμεσα και αυξάνεται η συνολική ταχύτητα φόρτωσης. Ανάλογα με το ποια CMS πλατφόρμα χρησιμοποιείς, υπάρχουν και τα ανάλογα plugins ή extensions που μπορείς να εγκαταστήσεις, γι’ αυτήν τη διαδικασία.
6. Φρόντισε για την ταχύτητα της home page
Κατά πάσα πιθανότητα, οι περισσότεροι επισκέπτες του site σου θα φτάσουν πρώτα στην αρχική σου σελίδα. Για να τους κρατήσεις και να εξασφαλίσεις ένα χαμηλό bounce rate, είναι απαραίτητο να τη βελτιστοποιήσεις, ώστε να φορτώνει όσο γίνεται πιο γρήγορα. Πώς θα το καταφέρεις αυτό;
- Φρόντισε να διατηρήσεις ένα minimal σχεδιασμό. Είναι περισσότερο καλαίσθητο ως επιλογή και παράλληλα δεν επιβαρύνει την ταχύτητα φόρτωσης.
- Χρησιμοποιήσε CSS για τα μονόχρωμα backgrounds, καθώς φορτώνει πολύ πιο γρήγορα από μία εικόνα.
- Αν διατηρείς blog, εμφάνισε λίγα posts στην αρχική σου σελίδα.
7. Μείωσε τα HTTP requests
Ήδη με αρκετές από τις παραπάνω ενέργειες, έχεις μειώσει χωρίς πολύ κόπο τα HTTP requests που αποστέλλει ο browser στον web server. Κάτι ακόμα που μπορείς να κάνεις προς αυτήν την κατεύθυνση, είναι να εκμεταλλευτείς το νέο πρωτόκολλο επικοινωνίας HTTP/2
Αφού βεβαιωθείς ότι ο server στον οποίον φιλοξενείται το site σου υποστηρίζει το HTTP/2 και ενεργοποιήσεις το ΔΩΡΕΑΝ SSL πιστοποιητικό, μπορείς να επωφεληθείς από τις ταχύτητες που προσφέρει το πρωτόκολλο, βασικό χαρακτηριστικό του οποίου είναι τα μειωμένα HTTP requests.
8. Προτίμησε σελίδες μικρές σε έκταση
Το να διατηρείς στο site σου σελίδες μεγάλες σε έκταση μπορεί να επηρεάσει δύο σημαντικά σημεία:
- την ταχύτητα φόρτωσης, καθώς θα χρειαστεί να εμφανιστεί μεγάλος όγκος πληροφορίας στον τελικό χρήστη,
- την εμπειρία του ίδιου του χρήστη, ο οποίος είναι πιθανό να αποθαρρυνθεί κάνοντας ατελείωτο scroll down.
Κρατώντας τις σελίδες σου μικρές σε έκταση, συμβάλλεις αποτελεσματικά στην μείωση του χρόνου φόρτωσης, και παράλληλα παρέχεις στον επισκέπτη σου την πληροφορία που πραγματικά χρειάζεται.
Εφάρμοσε τις παραπάνω πρακτικές στο site σου και δες την επισκεψιμότητα και τα conversions να ανεβαίνουν!
