Κανείς δεν παραπονέθηκε ποτέ ότι μια ιστοσελίδα άνοιξε πολύ γρήγορα. Η ταχύτητα είναι το πρώτο πράγμα που βιώνει ο επισκέπτης, πριν διαβάσει έστω μία λέξη ή δει ένα προϊόν. Μια γρήγορη ιστοσελίδα δείχνει επαγγελματική και αξιόπιστη. Μια αργή μοιάζει χαλασμένη, και πολλοί φεύγουν πριν καν φορτώσει.
Γιατί μετράει η ταχύτητα
- Εμπιστοσύνη. Μια σελίδα που μένει σε λευκή οθόνη κάνει τον κόσμο να αναρωτιέται αν η επιχείρηση λειτουργεί ακόμη, ή αν η ιστοσελίδα είναι ασφαλής.
- Πωλήσεις και αιτήματα. Κάθε δευτερόλεπτο αναμονής δίνει στον επισκέπτη χρόνο να πατήσει «πίσω» και να διαλέξει το επόμενο αποτέλεσμα. Σε κινητό με αδύναμο σήμα, αυτά τα δευτερόλεπτα αθροίζονται γρήγορα.
- Κατάταξη. Η Google μετρά την πραγματική εμπειρία φόρτωσης και τη χρησιμοποιεί ως έναν από τους παράγοντες κατάταξης.
Πώς να τη μετρήσετε
Ανοίξτε το pagespeed.web.dev, βάλτε τη διεύθυνσή σας και δείτε τα αποτελέσματα για κινητά. Η Google ομαδοποιεί την ταχύτητα σε τρεις δείκτες, τα «Core Web Vitals»:
- Largest Contentful Paint (LCP): πόσο χρόνο θέλει για να εμφανιστεί το κύριο περιεχόμενο. Στόχος: κάτω από 2,5 δευτερόλεπτα.
- Interaction to Next Paint (INP): πόσο γρήγορα αντιδρά η σελίδα όταν κάποιος πατάει ή κάνει κλικ. Στόχος: κάτω από 200 χιλιοστά του δευτερολέπτου.
- Cumulative Layout Shift (CLS): αν τα στοιχεία «πηδάνε» την ώρα που φορτώνουν, για παράδειγμα ένα κουμπί που μετακινείται τη στιγμή που πάτε να το πατήσετε. Στόχος: κάτω από 0,1.
Μετά κάντε την πιο ειλικρινή δοκιμή απ' όλες: ανοίξτε την ιστοσελίδα στο δικό σας κινητό, με δεδομένα κινητής, κάπου με μέτριο σήμα.
Απλές βελτιώσεις που κάνουν μεγάλη διαφορά
1. Ελαφρύτερες εικόνες
Οι εικόνες είναι συνήθως το βαρύτερο κομμάτι μιας σελίδας. Αποθηκεύστε τες σε σύγχρονες μορφές όπως το WebP, στο μέγεθος που πραγματικά εμφανίζονται (μια φωτογραφία 4000 pixel σε πλαίσιο 400 pixel είναι χαμένο βάρος), και αφήστε τις εικόνες που βρίσκονται πιο κάτω να φορτώνουν μόνο όταν ο επισκέπτης φτάσει εκεί.
2. Κρατήστε χώρο για τις εικόνες
Δηλώστε από πριν στον browser το πλάτος και το ύψος κάθε εικόνας. Έτσι η σελίδα κρατά τον χώρο της και το κείμενο δεν μετακινείται όταν φτάσει η εικόνα. Αυτό λύνει το πρόβλημα με το «κουμπί που φεύγει».
3. Γραμματοσειρές από τον δικό σας server
Φορτώστε μόνο τις γραμματοσειρές και τα πάχη που πραγματικά χρησιμοποιείτε, και φιλοξενήστε τες μόνοι σας αντί να τις φέρνετε από τον server άλλης εταιρείας. Είναι πιο γρήγορο, και τα δεδομένα των επισκεπτών δεν στέλνονται σε τρίτους μόνο για να εμφανιστεί μια γραμματοσειρά. Αυτό ακριβώς κάναμε και στη δική μας ιστοσελίδα.
4. Λιγότερα scripts τρίτων
Τα chat widgets, τα εργαλεία παρακολούθησης, τα social feeds και τα pop-up προσθέτουν το καθένα βάρος και καθυστέρηση, και πολλά από αυτά συλλέγουν επιπλέον δεδομένα επισκεπτών. Κρατήστε μόνο όσα πραγματικά αξίζουν τη θέση τους.
5. Cache και συμπίεση
Μια καλή φιλοξενία συμπιέζει τα αρχεία και επιτρέπει στους browsers να κρατούν αντίγραφο όσων αλλάζουν σπάνια, όπως το λογότυπο και τα στυλ, ώστε οι επισκέπτες που επιστρέφουν να βλέπουν τη σελίδα σχεδόν αμέσως. Απλώς θυμηθείτε να αλλάζετε την έκδοση των αρχείων όταν τα ενημερώνετε, για να μη μείνει κανείς με το παλιό αντίγραφο.
6. Καλή φιλοξενία
Μια φθηνή, υπερφορτωμένη φιλοξενία μπορεί να ακυρώσει όλη την υπόλοιπη δουλειά. Ένας αξιόπιστος πάροχος με servers κοντά στους πελάτες σας, ιδανικά με δίκτυο διανομής περιεχομένου (CDN), κρατά ψηλά τη βασική ταχύτητα.
Η ταχύτητα είναι συνήθεια
Μια ιστοσελίδα που είναι γρήγορη τη μέρα που ανοίγει μπορεί να «βαρύνει» μέσα σε λίγους μήνες, καθώς μαζεύονται νέες φωτογραφίες, πρόσθετα και scripts. Ελέγχετε το PageSpeed μετά από κάθε σημαντική αλλαγή και αντιμετωπίστε κάθε πτώση σαν σφάλμα που πρέπει να διορθωθεί. Οι πελάτες σας δεν θα σας ευχαριστήσουν ποτέ για μια γρήγορη ιστοσελίδα, αλλά σιωπηλά θα την προτιμήσουν από μια αργή.