Η ιστοσελίδα σας αργεί στο κινητό;Χάνετε πελάτες πριν καν φορτώσει
Γιατί οι ιστοσελίδες είναι αργές στο κινητό, τι μετράει το Google και πώς οι σελίδες μου φορτώνουν σε λιγότερο από ένα δευτερόλεπτο, ακόμη και σε αργό 4G.
Σε αυτό το άρθρο· 5 ενότητες
Ανοίγετε την ιστοσελίδα σας από το κινητό, κάπου με μέτριο σήμα. Βλέπετε άσπρη οθόνη, μετά ένα λογότυπο, μετά τα κείμενα «πηδάνε» καθώς φορτώνουν οι φωτογραφίες. Τρία, τέσσερα, πέντε δευτερόλεπτα. Ο πελάτης σας δεν περιμένει τόσο.
Σύμφωνα με έρευνα της Google (2016), πάνω από τις μισές επισκέψεις από κινητό εγκαταλείπονται όταν μια σελίδα θέλει πάνω από τρία δευτερόλεπτα για να φορτώσει. Και η ταχύτητα δεν επηρεάζει μόνο τους επισκέπτες, αλλά και τη θέση σας στο Google.
Τι ακριβώς μετράει το Google
Το Google αξιολογεί την εμπειρία σε κάθε σελίδα με τρεις δείκτες, τα Core Web Vitals:
| Δείκτης | Τι σημαίνει απλά | Καλή τιμή |
|---|---|---|
| LCP | Πόσο γρήγορα εμφανίζεται το κύριο περιεχόμενο | έως 2,5 s |
| CLS | Πόσο «πηδάει» η σελίδα καθώς φορτώνει | έως 0,1 |
| INP | Πόσο γρήγορα αντιδρά όταν πατάτε κάτι | έως 200 ms |
Οι δείκτες αυτοί είναι μέρος των κριτηρίων κατάταξης. Δύο σελίδες με παρόμοιο περιεχόμενο δεν κατατάσσονται το ίδιο αν η μία είναι αργή.
Πού χάνονται τα δευτερόλεπτα
Όταν ελέγχω μια αργή ιστοσελίδα, σχεδόν πάντα βρίσκω κάποια από αυτά:
- Τεράστιες φωτογραφίες. Μια φωτογραφία 5 MB κατευθείαν από την κάμερα, που εμφανίζεται σε πλάτος 400 pixel, αναγκάζει τον επισκέπτη να κατεβάσει δέκα φορές περισσότερα δεδομένα απ’ όσα χρειάζεται.
- Page builders και plugins. Κάθε plugin φέρνει τα δικά του αρχεία CSS και JavaScript και τα φορτώνει σε κάθε σελίδα, ακόμη κι αν δεν χρειάζονται εκεί.
- Γραμματοσειρές και stylesheets που «μπλοκάρουν» την εμφάνιση, γιατί πρέπει να κατέβουν πριν ο browser δείξει οτιδήποτε.
- Scripts τρίτων: chat, trackers, pop-ups, sliders. Το καθένα «μόνο λίγα KB», όλα μαζί δευτερόλεπτα.
- Φθηνή φιλοξενία μακριά από τον επισκέπτη. Ένας server σε άλλη ήπειρο προσθέτει καθυστέρηση σε κάθε αίτημα.
Η ταχύτητα σχεδιάζεται από την αρχή
Δεν διορθώνεται στο τέλος. Να τι κάνω εγώ:
- Όπου γίνεται, οι σελίδες φτιάχνονται από πριν ως έτοιμο HTML, οπότε ο browser λαμβάνει αμέσως το περιεχόμενο αντί να το συναρμολογεί.
- Η φιλοξενία γίνεται στο edge, στο δίκτυο της Cloudflare, που σερβίρει τη σελίδα από τον κοντινότερο κόμβο στον επισκέπτη.
- Κάθε εικόνα υπάρχει σε μεγέθη για κινητό και υπολογιστή, σε σύγχρονο format (WebP), και φορτώνει μόνο όταν πρόκειται να εμφανιστεί στην οθόνη.
- Οι γραμματοσειρές περιέχουν μόνο τα γράμματα και τα πάχη που χρειάζονται και φιλοξενούνται μαζί με τη σελίδα.
- Το JavaScript μένει στο ελάχιστο. Τα κινούμενα στοιχεία γίνονται κυρίως με CSS, που ο browser εκτελεί πολύ πιο αποδοτικά.
Πόσο γρήγορα φορτώνει αυτή η ιστοσελίδα
Σε προσομοίωση αργού 4G με τέσσερις φορές πιο αργό επεξεργαστή, αυτή η ιστοσελίδα εμφανίζει το κύριο περιεχόμενο σε 0,93 δευτερόλεπτα (LCP), με CLS 0,02. Ο στόχος του Google είναι 2,5 δευτερόλεπτα. Η ίδια σελίδα έχει τέλειο σκορ Lighthouse (100) σε προσβασιμότητα, βέλτιστες πρακτικές και SEO.
Χρόνος μέχρι να εμφανιστεί το κύριο περιεχόμενο
- Αυτή η ιστοσελίδα, σε αργό 4G0,93 s
- Ο στόχος της Google για «καλό» LCP2,5 s
- Εκεί που εγκαταλείπονται πάνω από τις μισές επισκέψεις3 s
Πώς να ελέγξετε τη δική σας σελίδα
Ανοίξτε το PageSpeed Insights της Google, βάλτε τη διεύθυνση της σελίδας σας και κοιτάξτε την καρτέλα «Κινητό». Αν το LCP είναι πάνω από 2,5 δευτερόλεπτα ή βλέπετε πολλά κόκκινα σημάδια, χάνετε επισκέπτες και θέσεις στο Google.
Αν προτιμάτε να το κοιτάξω εγώ, ελέγχω δωρεάν την ιστοσελίδα σας (ταχύτητα, εμφάνιση στο κινητό και θέση στο Google) και σας λέω καθαρά τι αξίζει να διορθωθεί.
Σας φάνηκε χρήσιμο; Κοινοποιήστε το
Συνέχεια ανάγνωσης
- Το AI έγραψε την εφαρμογή σας. Ξέρετε τι ξέχασε να σας πει;Έλεγξα 105 δημόσιες εφαρμογές φτιαγμένες με AI και ο κώδικας έδειχνε εντάξει. Το πρόβλημα είναι όσα δεν φαίνονται: 6 πράγματα που δεν σας λέει το AI.
- 7 λάθη που διώχνουν πελάτες από την ιστοσελίδα σας (το 2ο το βλέπω σχεδόν παντού)Η ιστοσελίδα σας έχει επισκέψεις, αλλά το τηλέφωνο δεν χτυπάει; Τα 7 λάθη που βλέπω πιο συχνά σε ιστοσελίδες επιχειρήσεων και πώς διορθώνεται το καθένα.