Ένας αργός ιστότοπος χάνει πωλήσεις αθόρυβα. Κανείς δεν παραπονιέται: ο επισκέπτης απλώς επιστρέφει στα αποτελέσματα αναζήτησης, κλείνει την καρτέλα ή εγκαταλείπει στη μέση του checkout. Η αναφορά της διαφήμισης δείχνει το πληρωμένο κλικ, αλλά όχι ποιος έφυγε πριν εμφανιστεί η σελίδα.
Αυτός ο οδηγός απευθύνεται σε όσους πρέπει να αποφασίσουν τι θα διορθωθεί στον ιστότοπο, με ποια προτεραιότητα και πώς θα ξέρουν αν πέτυχε. Είναι χρήσιμος τόσο για όσους φροντίζουν τον ιστότοπο όσο και για όσους αναθέτουν σε άλλους να τον φροντίζουν. Τα τεχνικά κεφάλαια εξηγούν αρκετά ώστε να μπορείτε να συζητήσετε με τον προγραμματιστή και να ζητήσετε το σωστό αποτέλεσμα.
Κεφάλαιο 1Τι είναι τα Core Web Vitals
Είναι τρεις μετρικές που χρησιμοποιεί η Google για να αξιολογήσει την εμπειρία όσων επισκέπτονται μια σελίδα. Η καθεμία απαντά σε ένα απλό ερώτημα:
| Μετρική | Ερώτηση | Καλό | Χρειάζεται βελτίωση | Κακό |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | Σε πόσο χρόνο εμφανίζεται το κύριο περιεχόμενο; | Έως 2,5 δευτ. | Έως 4 δευτ. | Πάνω από 4 δευτ. |
| INP (Interaction to Next Paint) | Ανταποκρίνεται γρήγορα η σελίδα όταν αγγίζω ή κάνω κλικ; | Έως 200 ms | Έως 500 ms | Πάνω από 500 ms |
| CLS (Cumulative Layout Shift) | Μένουν τα στοιχεία στη θέση τους όσο φορτώνει η σελίδα; | Έως 0,1 | Έως 0,25 | Πάνω από 0,25 |
Δύο λεπτομέρειες αλλάζουν τον τρόπο που διαβάζετε αυτούς τους αριθμούς:
- Μετράει το 75ο εκατοστημόριο. Μια σελίδα περνά όταν τουλάχιστον το 75% των επισκέψεων είναι εντός του ορίου «καλό». Δεν αρκεί να φορτώνει γρήγορα η σελίδα στον δικό σας υπολογιστή αν το ένα τέταρτο των επισκεπτών έχει κακή εμπειρία.
- Κινητό και υπολογιστής αξιολογούνται χωριστά. Στους περισσότερους ιστοτόπους, στο κινητό βρίσκεται το πρόβλημα αλλά και το μεγαλύτερο μέρος της επισκεψιμότητας.
Το 2024, το INP αντικατέστησε την παλιά μετρική διαδραστικότητας (FID). Αν βλέπετε ακόμη αναφορές που μιλούν για FID, είναι παρωχημένες.
Γιατί πρέπει να ενδιαφέρει την επιχείρηση
Τα Core Web Vitals είναι μέρος των σημάτων εμπειρίας που λαμβάνει υπόψη η Google, αλλά δεν προηγούνται της συνάφειας: ένα εξαιρετικό αλλά αργό περιεχόμενο μπορεί και πάλι να καταταχθεί ψηλά. Ο ισχυρότερος λόγος να τα φροντίσετε είναι άλλος: η ταχύτητα και η σταθερότητα επηρεάζουν άμεσα το ποσοστό μετατροπής και το κόστος της πληρωμένης διαφήμισης, γιατί κάθε πληρωμένο κλικ που εγκαταλείπει πριν δει τη σελίδα είναι χαμένος προϋπολογισμός.
Θέλετε να υπολογίσετε πόσο σας κοστίζει η αργή φόρτωση; Η Manáry έχει ένα δωρεάν εργαλείο γι' αυτό: πόσο κοστίζει ένας αργός ιστότοπος.
Πώς να μετράτε σωστά
Υπάρχουν δύο είδη δεδομένων, και η σύγχυση ανάμεσά τους βρίσκεται πίσω από πολλές λάθος αποφάσεις.
| Δεδομένα πεδίου | Εργαστηριακά δεδομένα | |
|---|---|---|
| Τι είναι | Μετρήσεις από πραγματικούς επισκέπτες, με πραγματικές συσκευές και συνδέσεις | Ένα προσομοιωμένο τεστ, σε ελεγχόμενες συνθήκες |
| Πού τα βλέπετε | Search Console, PageSpeed Insights (επάνω μέρος), αναφορά CrUX, δική σας μέτρηση στο GA4 | Lighthouse, PageSpeed Insights (κάτω μέρος), Chrome DevTools |
| Σε τι χρησιμεύουν | Να μάθετε αν το πρόβλημα υπάρχει και αν η διόρθωση λειτούργησε | Να βρείτε την αιτία και να δοκιμάσετε μια διόρθωση πριν τη δημοσιεύσετε |
| Προσοχή | Χρειάζονται περίπου 28 ημέρες για να αποτυπώσουν μια αλλαγή | Διαφέρουν από τεστ σε τεστ· δεν είναι αυτά που χρησιμοποιεί η Google για την αξιολόγηση |
Τα εργαλεία, με τη σειρά χρήσης
Search Console, αναφορά Core Web Vitals
Δείχνει ομάδες σελίδων με προβλήματα, χωριστά για κινητό και υπολογιστή. Είναι ο γενικός χάρτης: σας λέει ποια πρότυπα σελίδων (προϊόν, άρθρο, landing page) χρειάζονται προσοχή.
PageSpeed Insights
Για μια συγκεκριμένη σελίδα, δείχνει στο επάνω μέρος τα δεδομένα πεδίου (όταν υπάρχει αρκετή επισκεψιμότητα) και στο κάτω μέρος ένα εργαστηριακό τεστ με τις ευκαιρίες βελτίωσης.
Chrome DevTools
Στην καρτέλα Performance, δείχνει ποιο είναι το στοιχείο του LCP, ποιες μεγάλες εργασίες μπλοκάρουν τις αλληλεπιδράσεις και τι μετακινείται στην οθόνη. Εκεί ο προγραμματιστής βρίσκει την αιτία.
Δική σας μέτρηση (προαιρετική, αλλά συνιστάται)
Η βιβλιοθήκη web-vitals της Google μπορεί να στέλνει το LCP, το INP και το CLS κάθε επίσκεψης στο GA4. Έτσι βλέπετε τους αριθμούς ανά σελίδα, ανά συσκευή και ανά καμπάνια, χωρίς να περιμένετε τη δημόσια αναφορά.
Τι να αγνοείτε
Πολύς χρόνος και πολλά χρήματα χάνονται στο κυνήγι του λάθος αριθμού. Αυτοί είναι οι αριθμοί που προτείνουμε να μείνουν σε δεύτερη μοίρα:
- Η βαθμολογία 0 έως 100 του Lighthouse ως στόχος. Είναι η σύνοψη ενός εργαστηριακού τεστ. Βοηθά στη διάγνωση, αλλά ένας ιστότοπος μπορεί να έχει βαθμολογία 70 και να περνά όλα τα Core Web Vitals πεδίου ή να έχει 95 και να αποτυγχάνει στο πραγματικό κινητό.
- Τεστ μόνο στον υπολογιστή. Η σύνδεση και ο επεξεργαστής ενός εταιρικού laptop κρύβουν τα προβλήματα του μέσου κινητού των πελατών σας.
- Ένα μόνο τεστ. Τα εργαστηριακά αποτελέσματα διαφέρουν. Τρέξτε το τεστ τρεις έως πέντε φορές και κοιτάξτε τη διάμεσο.
- Σελίδες χωρίς επισκεψιμότητα. Αν διορθώσετε μια σελίδα με δέκα επισκέψεις τον μήνα, η επιχείρηση δεν αλλάζει. Ξεκινήστε από τις σελίδες που δέχονται πληρωμένη διαφήμιση και από αυτές που πουλάνε.
- Βαθμολογίες άλλων εργαλείων (γράμματα, βαθμοί, δικές τους κλίμακες). Χρήσιμες για σύγκριση πριν και μετά, αλλά δεν είναι αυτό που αξιολογεί η Google.
Ο στόχος δεν είναι το 100. Ο στόχος είναι τρεις στις τέσσερις πραγματικές επισκέψεις, στο κινητό, να έχουν καλή εμπειρία στις σελίδες που πουλάνε.
Κεφάλαιο 4Με ποια σειρά να διορθώνετε
Η σωστή σειρά γλιτώνει εβδομάδες δουλειάς. Αυτή είναι η σειρά που ακολουθούμε στα έργα της Manáry:
Καταγράψτε τις σελίδες που πουλάνε
Landing pages πληρωμένης διαφήμισης, σελίδες προϊόντων και υπηρεσιών, καλάθι και checkout, φόρμες. Διασταυρώστε τες με την επισκεψιμότητα στο GA4 και κρατήστε αυτές με τις περισσότερες επισκέψεις.
Κοιτάξτε πρώτα το κινητό
Στους περισσότερους ιστοτόπους, εκεί βρίσκονται οι χειρότεροι αριθμοί και το μεγαλύτερο μέρος του κοινού.
Διορθώστε το πρότυπο, όχι τη σελίδα
Αν όλες οι σελίδες προϊόντων έχουν το ίδιο πρόβλημα, η αιτία βρίσκεται στο πρότυπο. Μία διόρθωση λύνει το πρόβλημα σε εκατοντάδες σελίδες.
Ξεκινήστε από το LCP
Είναι η μετρική που συνδέεται περισσότερο με την πρώτη εντύπωση και την εγκατάλειψη. Οι διορθώσεις συνήθως φέρνουν γρήγορο αποτέλεσμα.
Μετά το CLS
Σχεδόν πάντα έχει απλές αιτίες (εικόνες χωρίς διαστάσεις, banners που σπρώχνουν το περιεχόμενο) και φθηνή διόρθωση.
Τελευταίο το INP
Απαιτεί περισσότερη διερεύνηση, γιατί εξαρτάται από τη JavaScript του ιστότοπου και από τα εργαλεία τρίτων. Εκεί βρίσκονται και τα κέρδη που ο ανταγωνισμός αντιγράφει πιο δύσκολα.
Διόρθωση του LCP
Το LCP μετρά πότε εμφανίζεται το μεγαλύτερο ορατό στοιχείο, σχεδόν πάντα η κύρια εικόνα ή ο τίτλος στην κορυφή. Ο χρόνος του χωρίζεται σε τέσσερα μέρη, και καθένα έχει το δικό του είδος διόρθωσης:
| Μέρος του χρόνου | Τι συμβαίνει | Τυπική διόρθωση |
|---|---|---|
| Απόκριση του server | Το πρόγραμμα περιήγησης περιμένει τον server να αρχίσει να στέλνει τη σελίδα | Cache σελίδας, καλύτερη φιλοξενία, CDN |
| Καθυστέρηση έναρξης λήψης | Το πρόγραμμα περιήγησης αργεί να ανακαλύψει την κύρια εικόνα | Εικόνα μέσα στο HTML, preload και υψηλή προτεραιότητα |
| Λήψη του πόρου | Η εικόνα είναι βαριά | WebP ή AVIF, σωστό μέγεθος για κάθε οθόνη |
| Καθυστέρηση σχεδίασης | CSS, JavaScript ή γραμματοσειρές μπλοκάρουν τη σχεδίαση της σελίδας | Λιγότερο CSS και JS που μπλοκάρει, βελτιστοποιημένες γραμματοσειρές |
Μην καθυστερείτε ποτέ τη φόρτωση της κύριας εικόνας
Η καθυστερημένη φόρτωση (lazy load) είναι εξαιρετική για εικόνες στη μέση και στο τέλος της σελίδας, αλλά όταν εφαρμόζεται στην εικόνα της κορυφής καθυστερεί ακριβώς το LCP. Η κύρια εικόνα πρέπει να φορτώνει αμέσως και με υψηλή προτεραιότητα (χαρακτηριστικό fetchpriority="high").
Χρησιμοποιήστε τη σωστή μορφή και το σωστό μέγεθος
Τα WebP ή AVIF έχουν συνήθως ένα κλάσμα του βάρους ενός αντίστοιχου JPEG ή PNG. Επίσης, η εικόνα πρέπει να έχει το μέγεθος στο οποίο εμφανίζεται: μια φωτογραφία 4.000 pixel που προβάλλεται σε κινητό 400 pixel είναι σπατάλη. Το χαρακτηριστικό srcset παραδίδει τη σωστή έκδοση για κάθε οθόνη.
Αποφύγετε carousel και βαριά βίντεο στην κορυφή
Τα carousel φορτώνουν πολλές εικόνες και scripts πριν δείξουν την πρώτη. Τα βίντεο φόντου είναι πολύ βαριά στο κινητό. Μια καλά επιλεγμένη εικόνα φέρνει ίδιες ή καλύτερες μετατροπές και φορτώνει πολύ πιο γρήγορα.
Ενεργοποιήστε cache σελίδας και CDN
Μια σελίδα που σερβίρεται έτοιμη από την cache, από έναν server κοντά στον επισκέπτη, αρχίζει να φτάνει σε ένα κλάσμα του χρόνου που χρειάζεται μια σελίδα η οποία συναρμολογείται σε κάθε επίσκεψη.
Φροντίστε τις γραμματοσειρές
Χρησιμοποιήστε λίγες οικογένειες και βάρη, φιλοξενήστε τις γραμματοσειρές στον δικό σας ιστότοπο όπου είναι δυνατόν, κάντε preload της κύριας και χρησιμοποιήστε font-display: swap ώστε το κείμενο να εμφανίζεται ακόμη και πριν φτάσει η γραμματοσειρά.
Διόρθωση του INP
Το INP μετρά τον χρόνο ανάμεσα σε ένα άγγιγμα ή κλικ και την επόμενη ενημέρωση της οθόνης. Όταν είναι κακό, ο επισκέπτης πατά το κουμπί και για μια στιγμή δεν συμβαίνει τίποτα, οπότε το ξαναπατά ή εγκαταλείπει. Η αιτία είναι σχεδόν πάντα υπερβολικά πολλή JavaScript που τρέχει ταυτόχρονα.
Περιορίστε και καθυστερήστε τα scripts τρίτων
Chat, heatmaps, pixels διαφόρων πλατφορμών, widgets αξιολογήσεων. Το καθένα μοιάζει ελαφρύ μόνο του· μαζί, απασχολούν τον επεξεργαστή του κινητού. Ελέγξτε το Tag Manager, αφαιρέστε ό,τι δεν χρησιμοποιεί κανείς και φορτώστε τα υπόλοιπα μετά την αλληλεπίδραση ή μόνο στις σελίδες που τα χρειάζονται.
Σπάστε τις μεγάλες εργασίες
Κάθε εργασία JavaScript πάνω από 50 χιλιοστά του δευτερολέπτου μπλοκάρει τη σελίδα. Ο προγραμματιστής μπορεί να χωρίσει τη δουλειά σε μικρότερα κομμάτια και να επιστρέφει τον έλεγχο στο πρόγραμμα περιήγησης ανάμεσά τους, ώστε η απόκριση στο άγγιγμα να έρχεται πρώτη.
Δώστε άμεση οπτική απόκριση
Όταν ο χρήστης πατά ένα κουμπί που ξεκινά κάτι χρονοβόρο (υποβολή φόρμας, φιλτράρισμα προϊόντων), δείξτε αμέσως μια ένδειξη φόρτωσης. Η οθόνη αλλάζει γρήγορα και η βαριά δουλειά γίνεται αμέσως μετά.
Μειώστε το μέγεθος της σελίδας
Σελίδες με χιλιάδες στοιχεία (συνηθισμένο φαινόμενο σε page builders και σε τεράστια μενού) κάνουν κάθε ενημέρωση της οθόνης πιο αργή. Η απλοποίηση της δομής βελτιώνει ταυτόχρονα το INP και το LCP.
Χάνει πωλήσεις ο ιστότοπός σας λόγω αργής φόρτωσης;
Η Manáry ελέγχει τα Core Web Vitals των σελίδων που πουλάνε και παραδίδει τις διορθώσεις ταξινομημένες κατά αντίκτυπο.
Διόρθωση του CLS
Το CLS μετρά πόσο μετακινείται το περιεχόμενο όσο φορτώνει η σελίδα. Είναι εκείνη η στιγμή που πάτε να πατήσετε έναν σύνδεσμο και το κείμενο κατεβαίνει επειδή εμφανίστηκε ένα banner από πάνω. Εκτός από εκνευριστικό, προκαλεί λάθος κλικ, ακόμη και σε κουμπί αγοράς.
- Ορίστε διαστάσεις σε εικόνες, βίντεο και iframes. Με καθορισμένο πλάτος και ύψος (ή αναλογία), το πρόγραμμα περιήγησης κρατά τον χώρο πριν φτάσει το πολυμέσο.
- Κρατήστε χώρο για ό,τι φορτώνει αργότερα. Banners, ειδοποιήσεις, διαφημίσεις και widgets που φορτώνουν αργότερα πρέπει να έχουν δεσμευμένο χώρο ή να εμφανίζονται πάνω από το περιεχόμενο, χωρίς να το σπρώχνουν.
- Banner cookies που αιωρείται, όχι που σπρώχνει. Μια ειδοποίηση που μπαίνει στην κορυφή και σπρώχνει τη σελίδα είναι από τις πιο συνηθισμένες αιτίες κακού CLS.
- Γραμματοσειρές με παρόμοιες διαστάσεις. Όταν η γραμματοσειρά του ιστότοπου φτάνει και αντικαθιστά την προσωρινή, το κείμενο μπορεί να αλλάξει μέγεθος. Αν προσαρμόσετε την προσωρινή γραμματοσειρά ώστε να έχει παρόμοιες διαστάσεις, αποφεύγετε το άλμα.
- Κινούμενα εφέ με transform. Αν κινείτε τη θέση και το μέγεθος με transform, τα γειτονικά στοιχεία δεν μετακινούνται.
Επιπλέον κεφάλαιο: WordPress
Πολλοί εταιρικοί ιστότοποι τρέχουν σε WordPress. Η πλατφόρμα μπορεί να είναι πολύ γρήγορη, αλλά κάποιες συνηθισμένες πρακτικές την κάνουν αργή.
| Πρακτική | Αποτέλεσμα | Τι να κάνετε |
|---|---|---|
| Ένα plugin για κάθε πράγμα | Δεκάδες scripts και styles σε όλες τις σελίδες | Ελέγξτε τη λίστα των plugins και αφαιρέστε όσα δεν είναι απαραίτητα |
| Εικόνες ανεβασμένες όπως ήρθαν | Υψηλό LCP και βαριές σελίδες | Plugin βελτιστοποίησης με μετατροπή σε WebP ή AVIF |
| Χωρίς cache σελίδας | Ο server συναρμολογεί τη σελίδα σε κάθε επίσκεψη | Cache σελίδας και, αν είναι δυνατόν, cache στον server της φιλοξενίας |
| Η φθηνότερη δυνατή φιλοξενία | Αργή απόκριση του server σε κάθε επίσκεψη | Φιλοξενία με ενημερωμένη PHP και πόρους ανάλογους με την επισκεψιμότητα |
| Page builder με βαριά δομή | Πολλά στοιχεία και πολύ CSS ανά σελίδα | Λιτές ενότητες, επαναχρησιμοποιούμενα components, τίποτα κρυφό που φορτώνει χωρίς να φαίνεται |
| Βελτιστοποίηση στον αυτόματο πιλότο | Λειτουργίες που χαλάνε τον ιστότοπο ή χειροτερεύουν μια μετρική για να βελτιώσουν μια άλλη | Ενεργοποιήστε μία επιλογή τη φορά και μετρήστε πριν και μετά |
Προσοχή στις επιλογές «καθυστέρηση όλης της JavaScript» των plugins cache. Μπορεί να βελτιώσουν το εργαστηριακό τεστ και ταυτόχρονα να καθυστερήσουν την απόκριση στα πρώτα κλικ. Μετρήστε το INP πεδίου αφού τις ενεργοποιήσετε.
Πλάνο διόρθωσης σε τέσσερις εβδομάδες
Εβδομάδα 1: διάγνωση
Search Console και PageSpeed Insights στις σελίδες που πουλάνε, στο κινητό. Καταγράψτε τη μετρική που αποτυγχάνει σε κάθε πρότυπο σελίδας και την πιθανή αιτία.
Εβδομάδα 2: διορθώσεις LCP
Κύρια εικόνα, cache, γραμματοσειρές. Δημοσιεύστε και επιβεβαιώστε στο εργαστηριακό τεστ ότι η αλλαγή είχε αποτέλεσμα.
Εβδομάδα 3: CLS και καθάρισμα
Διαστάσεις πολυμέσων, banners, plugins και scripts τρίτων που δεν χρειάζονται.
Εβδομάδα 4: INP και παρακολούθηση
Μεγάλες εργασίες και βαριά scripts στις σελίδες με τη μεγαλύτερη αλληλεπίδραση. Ενεργοποιήστε τη μέτρηση πεδίου και προγραμματίστε τον έλεγχο του Search Console για τέσσερις εβδομάδες αργότερα.
Συχνές ερωτήσεις
Διόρθωσα τον ιστότοπο, αλλά το Search Console δείχνει ακόμη πρόβλημα. Γιατί;
Τα δεδομένα πεδίου βασίζονται στις επισκέψεις των τελευταίων τεσσάρων εβδομάδων. Η βελτίωση εμφανίζεται σταδιακά. Χρησιμοποιήστε το εργαστηριακό τεστ για να επιβεβαιώσετε τη διόρθωση και περιμένετε να ολοκληρωθεί ο κύκλος της αναφοράς.
Η σελίδα δεν έχει δεδομένα πεδίου στο PageSpeed Insights. Τι κάνω;
Οι σελίδες με λίγη επισκεψιμότητα δεν εμφανίζονται στη δημόσια αναφορά. Χρησιμοποιήστε τα δεδομένα ολόκληρου του domain, το εργαστηριακό τεστ και, κατά προτίμηση, τη δική σας μέτρηση με τη βιβλιοθήκη web-vitals.
Λύνει το πρόβλημα η αλλαγή πλατφόρμας;
Σπάνια είναι απαραίτητη. Στις περισσότερες περιπτώσεις, οι εικόνες, η cache, τα scripts τρίτων και η δομή της σελίδας διορθώνονται μέσα στην τρέχουσα πλατφόρμα, με πολύ μικρότερο κόστος.
Εγγυώνται τα καλά Core Web Vitals την πρώτη θέση στο Google;
Όχι. Είναι ένα από τα σήματα εμπειρίας, και η συνάφεια του περιεχομένου εξακολουθεί να μετράει περισσότερο. Το πιο βέβαιο κέρδος είναι στις μετατροπές: περισσότεροι άνθρωποι βλέπουν τη σελίδα, αλληλεπιδρούν και αγοράζουν.
Θέλετε έναν πραγματικά γρήγορο ιστότοπο;
Η Manáry αναπτύσσει και βελτιστοποιεί ιστοτόπους με στόχους Core Web Vitals μέσα στη σύμβαση, μετρημένους με πραγματικά δεδομένα.
Συνεχίστε την ανάγνωση
Ξεκλειδώστε ολόκληρο το υλικό με μια γρήγορη εγγραφή. Ισχύει για όλο το υλικό της Manáry.
Χρειάζεται λιγότερο από ένα λεπτό. Χωρίς σειρά email που δεν ζητήσατε.Θέλετε να το εφαρμόσουμε στην επιχείρησή σας;
Αυτό το υλικό είναι ό,τι κάνει η Manáry κάθε μέρα με τους πελάτες της. Αν σας ταιριάζει, ένας ειδικός εξετάζει τα νούμερά σας και σας δίνει τις προτεραιότητες, χωρίς εμπορική παρουσίαση.
Συνεχίστε να μαθαίνετε
- E-book · 17 λεπτά ανάγνωσηςΤο funnel που κανείς δεν μετράει
- E-book · 15 λεπτά ανάγνωσηςΛίστα ελέγχου μέτρησης
- Υπολογιστικό φύλλο · Excel και Google SheetsΥπολογιστής CAC και LTV
- Οδηγός · 8 λεπτά ανάγνωσηςBriefing ψηφιακού έργου
- Υπολογιστικό φύλλο · Excel και Google SheetsΧάρτης καναλιών ανά κλάδο
Ξεκλειδώστε ολόκληρο το υλικό
Πέντε γρήγορα πεδία και διαβάζετε αμέσως, στη σελίδα. Μία εγγραφή ξεκλειδώνει όλο το υλικό της Manáry.