Η σύντομη απάντηση: μια ιστοσελίδα γίνεται γρήγορη όταν στέλνει στον επισκέπτη λιγότερα και μικρότερα αρχεία, τα επαναχρησιμοποιεί από cache και απαντά γρήγορα από τον server. Ξεκίνα πάντα με μέτρηση, γιατί αλλιώς βελτιώνεις στα τυφλά.
Η ταχύτητα επηρεάζει την εμπειρία του επισκέπτη και την παρουσία σου στη Google. Σε e-shop μετράει διπλά: ένας αργός ιστότοπος κάνει τον πελάτη να φύγει πριν δει το προϊόν. Στα έργα που φτιάχνω, από εταιρικά site μέχρι PrestaShop καταστήματα, ακολουθώ πάντα την ίδια σειρά. Την παρουσιάζω εδώ σε 7 βήματα.
1. Μέτρησε πρώτα
Πριν αλλάξεις οτιδήποτε, τρέξε τη σελίδα σου στο PageSpeed Insights και κράτα τα αποτελέσματα. Κοίτα τρεις δείκτες των Core Web Vitals:
- LCP: πόσο γρήγορα εμφανίζεται το μεγαλύτερο στοιχείο της σελίδας. Καλός στόχος είναι έως 2,5 δευτερόλεπτα.
- INP: πόσο γρήγορα αντιδρά η σελίδα σε κλικ και πάτημα. Καλός στόχος είναι έως 200 χιλιοστά του δευτερολέπτου.
- CLS: πόσο «πηδάει» το περιεχόμενο όσο φορτώνει. Καλός στόχος είναι έως 0,1.
Μέτρησε και σε κινητό, γιατί εκεί συνήθως φαίνονται τα προβλήματα.
2. Μίκρυνε τις εικόνες
Στις περισσότερες σελίδες οι εικόνες είναι το βαρύτερο κομμάτι. Τρία πράγματα κάνουν διαφορά:
- Χρησιμοποίησε σύγχρονες μορφές όπως WebP, που δίνουν μικρότερο αρχείο με παρόμοια ποιότητα.
- Ανέβαζε εικόνες στο μέγεθος που εμφανίζονται και όχι φωτογραφίες 4000 pixel για ένα κουτάκι 400 pixel.
- Πρόσθεσε
loading="lazy"στις εικόνες κάτω από το πρώτο ορατό τμήμα, ώστε να φορτώνουν όταν χρειαστούν.
<img src="proion.webp" width="800" height="600" loading="lazy" alt="Περιγραφή προϊόντος">Ορίζοντας πάντα width και height, η σελίδα κρατάει χώρο για την εικόνα και δεν «πηδάει» (καλύτερο CLS).
3. Ενεργοποίησε caching
Το caching λέει στον browser να μην κατεβάζει ξανά ό,τι δεν άλλαξε. Για στατικά αρχεία (εικόνες, CSS, JavaScript) βάλε μεγάλη διάρκεια στην κεφαλίδα Cache-Control. Στο WordPress και στο PrestaShop υπάρχουν έτοιμες ρυθμίσεις και πρόσθετα για cache σελίδων. Αν ο ιστότοπος σου τρέχει σε δικό σου server, τη ρύθμιση την κάνεις και στο web server.
4. Μείωσε το περιττό CSS και JavaScript
Κάθε πρόσθετο και κάθε εξωτερικό σκριπτ προσθέτει αρχεία που πρέπει να κατέβουν και να εκτελεστούν. Έλεγξε τι χρησιμοποιείς πραγματικά:
- Αφαίρεσε plugins και modules που δεν χρειάζεσαι πια.
- Φόρτωσε τα σκριπτ παρακολούθησης και διαφήμισης με
deferή μετά την πρώτη φόρτωση. - Συμπίεσε (minify) τα αρχεία CSS και JavaScript.
Αν χρησιμοποιείς Google Analytics ή Tag Manager, δες και το GTag Manager Advanced, ένα module που έφτιαξα για να ελέγχονται καλύτερα αυτά τα σκριπτ στο PrestaShop.
5. Συμπίεση και σύγχρονο πρωτόκολλο
Ο server μπορεί να συμπιέζει τις απαντήσεις (gzip ή Brotli) πριν τις στείλει. Είναι μια ρύθμιση που κοστίζει λίγα λεπτά και μειώνει αισθητά το μέγεθος των αρχείων κειμένου. Φρόντισε επίσης ο ιστότοπος να τρέχει με HTTPS και HTTP/2 ή νεότερο, ώστε να φορτώνονται πολλά αρχεία παράλληλα.
6. Κοίτα τον server και τη βάση δεδομένων
Αν η σελίδα αργεί να δώσει την πρώτη απάντηση, το πρόβλημα είναι συχνά στον server. Σε δυναμικά sites όπως WordPress και PrestaShop, βαριά ερωτήματα στη βάση και φτωχό hosting κάνουν τη διαφορά. Ένα σωστά ρυθμισμένο VPS δίνει περισσότερο έλεγχο. Έχω γράψει πώς τρέχω πολλά πράγματα σε ένα μικρό VPS στο άρθρο Όλα σε ένα VPS των 5€/μήνα.
7. Έλεγξε ξανά και κράτα το αποτέλεσμα
Μετά από κάθε αλλαγή, μέτρησε ξανά και σύγκρινε με το πρώτο σου αποτέλεσμα. Η ταχύτητα χειροτερεύει σιγά σιγά με κάθε νέο plugin, banner ή βαριά εικόνα, γι' αυτό αξίζει ένας έλεγχος κάθε λίγους μήνες.
Γρήγορη λίστα ελέγχου
| Βήμα | Τι κάνεις |
|---|---|
| Μέτρηση | PageSpeed Insights, κινητό και desktop |
| Εικόνες | WebP, σωστό μέγεθος, lazy loading |
| Caching | Cache-Control και cache σελίδων |
| Σκριπτ | Αφαίρεση περιττών, defer, minify |
| Server | Συμπίεση, HTTPS, HTTP/2 |
Συχνές ερωτήσεις
Επηρεάζει η ταχύτητα το SEO;
Ναι. Η Google λαμβάνει υπόψη την εμπειρία της σελίδας, και οι Core Web Vitals είναι μέρος της. Δεν αντικαθιστά το καλό περιεχόμενο, αλλά βοηθά. Για τα βασικά του SEO δες τον οδηγό Τι είναι το SEO.
Ποιο είναι το πρώτο πράγμα που πρέπει να διορθώσω;
Συνήθως οι εικόνες. Είναι το πιο εύκολο βήμα και συχνά δίνει τη μεγαλύτερη διαφορά.
Αρκεί ένα plugin cache;
Βοηθά πολύ, αλλά δεν λύνει βαριές εικόνες, πολλά σκριπτ ή αργό server. Χρειάζεται συνδυασμός των βημάτων.
Πόσο συχνά πρέπει να μετράω;
Μετά από κάθε μεγάλη αλλαγή και τουλάχιστον μία φορά κάθε λίγους μήνες.
Θέλεις βοήθεια;
Αν θέλεις να βελτιώσω την ταχύτητα της ιστοσελίδας ή του e-shop σου, δες τις υπηρεσίες μου ή στείλε μου email στο iliaskdamianidis@gmail.com. Απαντώ μέσα σε 24 ώρες.