Πώς να κάνετε την ιστοσελίδα σας γρηγορότερη: Πρακτική λίστα ελέγχου

Για να κάνετε μια ιστοσελίδα γρηγορότερη, μετρήστε πρώτα με το PageSpeed Insights, και μετά διορθώστε τη μεγαλύτερη αιτία που δείχνει —συνήθως υπερμεγέθεις εικόνες, πολύ JavaScript, βαριές γραμματοσειρές ή scripts τρίτων. Στοχεύστε στους στόχους «καλό» των Core Web Vitals της Google: κύριο περιεχόμενο ορατό μέσα σε 2,5 δευτερόλεπτα, απάντηση σε αγγίγματα μέσα σε 200 χιλιοστά του δευτερολέπτου, και σχεδόν καθόλου μετατόπιση της διάταξης. Τους περισσότερους ιστότοπους τους φέρνουν εκεί λίγες αλλαγές, όχι μια ολική επανεγγραφή.

Μετρήστε πριν αλλάξετε οτιδήποτε

Η εικασία σπαταλά χρόνο. Δύο δωρεάν εργαλεία καλύπτουν σχεδόν όλους:

PageSpeed Insights (pagespeed.web.dev) —επικολλήστε μια ζωντανή διεύθυνση. Δείχνει πεδιακά δεδομένα από πραγματικούς χρήστες Chrome (αν ο ιστότοπος έχει αρκετή κίνηση) και δεδομένα εργαστηρίου από μια προσομοιωμένη φόρτωση, καθώς και λίστα συγκεκριμένων προβλημάτων.
Lighthouse στα DevTools του Chrome —το ίδιο τεστ εργαστηρίου, σε κάθε σελίδα που μπορείτε να ανοίξετε, συμπεριλαμβανομένης μιας προεπισκόπησης. Τρέξτε το σε λειτουργία κινητού· στα κινητά με αργότερα δίκτυα εμφανίζονται τα προβλήματα.

Οι αριθμοί που μετράνε είναι τα Core Web Vitals της Google. Από τον Σεπτέμβριο του 2026, η τεκμηρίωση της Google στο web.dev δίνει αυτά τα κατώφλια «καλό», μετρημένα στο 75ο εκατοστημόριο φορτώσεων σελίδας:

Μετρική	Τι μετρά	Καλό
Largest Contentful Paint (LCP)	Πόσο γρήγορα εμφανίζεται το κύριο περιεχόμενο (εικόνα ήρωα, επικεφαλίδα)	2,5 s ή λιγότερο
Interaction to Next Paint (INP)	Πόσο γρήγορα αντιδρά η σελίδα σε κλικ, αγγίγματα και πληκτρολόγηση	200 ms ή λιγότερο
Cumulative Layout Shift (CLS)	Πόσο πηδάει η διάταξη κατά τη φόρτωση	0,1 ή λιγότερο

Το INP αντικατέστησε τον παλαιότερο δείκτη First Input Delay το 2024. Αν κάποιο εργαλείο εξακολουθεί να αναφέρει FID, είναι ξεπερασμένο.

Γράψτε τους αρχικούς αριθμούς σας. Μετά από κάθε διόρθωση, ξαναδοκιμάστε ώστε να ξέρετε τι βοήθησε.

Πού πηγαίνει ο χρόνος: επιλογές και αντισταθμίσματα

Κάθε συνηθισμένη αιτία έχει διόρθωση, και κάθε διόρθωση έχει κόστος. Ξεκινήστε από τις πρώτες στη λίστα —είναι οι φθηνότερες και οι πιο συνηθισμένες.

Αιτία	Τυπική διόρθωση	Αντιστάθμισμα
Μεγάλες εικόνες	Αλλαγή μεγέθους στο εμφανιζόμενο μέγεθος, συμπίεση, χρήση WebP ή AVIF	Μικρή απώλεια ποιότητας αν υπερσυμπιεστεί
Εικόνες που φορτώνουν σε λάθος σειρά	Lazy-load για εικόνες κάτω από το αναδίπλωμα· υψηλή προτεραιότητα για την εικόνα ήρωα	Καμία, αν η εικόνα ήρωα δεν είναι lazy
Πολύ JavaScript	Διαχωρισμός κώδικα ανά σελίδα, αφαίρεση αχρησιμοποίητων βιβλιοθηκών	Κάποια αναδιαμόρφωση
Απόδοση μόνο από τον πελάτη	Prerender ή server-render δημόσιων σελίδων	Περισσότερη ρύθμιση build ή διακομιστή
Γραμματοσειρές ιστού	Λιγότερες οικογένειες και βάρη, preload της κύριας, `font-display: swap`	Λιγότερη τυπογραφική ποικιλία
Scripts τρίτων	Αφαίρεση αχρησιμοποίητων, φόρτωση των υπολοίπων μετά τη σελίδα	Απώλεια ενός widget ή tracker
Αργή απόκριση διακομιστή	Caching, CDN, στατική φιλοξενία για σελίδες περιεχομένου	Διαχείριση ακύρωσης cache

Εικόνες

Οι εικόνες είναι το πιο συνηθισμένο πρόβλημα και το ευκολότερο να διορθωθεί. Μια φωτογραφία 4.000 pixel που εμφανίζεται σε 800 pixel αναγκάζει κάθε επισκέπτη να κατεβάζει πέντε φορές περισσότερα από όσα βλέπει.

Σερβίρετε εικόνες στο μέγεθος που εμφανίζονται, με responsive srcset για κινητά και υπολογιστές.
Χρησιμοποιήστε σύγχρονες μορφές (WebP ή AVIF) και λογική συμπίεση.
Ορίστε width και height σε κάθε εικόνα ώστε ο browser να δεσμεύει χώρο. Αυτό μόνο του διορθώνει τα περισσότερα προβλήματα μετατόπισης.
Lazy-load εικόνες κάτω από το αναδίπλωμα με loading="lazy".
Μην κάνετε lazy-load την κύρια εικόνα στην κορυφή της σελίδας. Ο οδηγός LCP της Google είναι κατηγορηματικός: το lazy-loading της εικόνας LCP την καθυστερεί πάντα. Δώστε της fetchpriority="high" αντί γι' αυτό.

JavaScript

Πολλοί ιστότοποι που χτίζονται με AI είναι εφαρμογές μίας σελίδας (SPA): ο browser κατεβάζει ένα πακέτο JavaScript και μετά σχεδιάζει τη σελίδα. Όσο μεγαλύτερο το πακέτο, τόσο μεγαλύτερη η κενή οθόνη. Διορθώσεις, με σειρά προσπάθειας:

Αφαιρέστε ό,τι δεν χρησιμοποιείτε. Ζητήστε λίστα εξαρτήσεων και κόψτε βιβλιοθήκες που προστέθηκαν μια φορά και ξεχάστηκαν —μια βιβλιοθήκη ημερομηνιών για μία ημερομηνία, ένα πλήρες πακέτο εικονιδίων για πέντε εικονίδια.
Διαχωρίστε ανά διαδρομή. Φορτώστε τον κώδικα του πίνακα διαχείρισης μόνο όταν τον ανοίξει κάποιος, όχι στην αρχική σελίδα.
Κάντε prerender τις δημόσιες σελίδες. Μια σελίδα μάρκετινγκ που στέλνεται ως πραγματικό HTML εμφανίζεται πριν τρέξει οποιοδήποτε JavaScript. Αυτό βοηθά και τις μηχανές αναζήτησης· δείτε SEO για ιστοσελίδες που χτίζονται με AI.

Το αργό INP σημαίνει συνήθως μια μεγάλη εργασία που μπλοκάρει τη σελίδα —φιλτράρισμα τεράστιας λίστας σε κάθε πάτημα πλήκτρου, ή επανασχεδιασμός ολόκληρου πίνακα όταν αλλάζει ένα κελί. Το πάνελ Performance των DevTools του Chrome δείχνει ποιο.

Γραμματοσειρές

Κάθε οικογένεια γραμματοσειράς και κάθε βάρος είναι ένα ακόμα αρχείο. Δύο οικογένειες και τρία ή τέσσερα βάρη συνήθως αρκούν. Κάντε preload τη γραμματοσειρά που χρησιμοποιείται πάνω από το αναδίπλωμα, χρησιμοποιήστε font-display: swap ώστε το κείμενο να εμφανίζεται αμέσως, και φιλοξενήστε τις γραμματοσειρές μόνοι σας αν η εξωτερική υπηρεσία είναι αργή για τους επισκέπτες σας.

Scripts τρίτων

Widgets συνομιλίας, αναλυτικά, heatmaps, pixels διαφημίσεων, ενσωματωμένα βίντεο και κοινωνικές ροές φορτώνουν όλα κώδικα από άλλους διακομιστές. Το καθένα φαίνεται μικρό· μαζί είναι συχνά το πιο αργό κομμάτι της σελίδας. Κρατήστε αυτά που πραγματικά κοιτάζετε. Φορτώστε τα υπόλοιπα αφού η σελίδα γίνει διαδραστική, και αντικαταστήστε βαριές ενσωματώσεις (ένα player YouTube, ένας χάρτης) με ελαφριά προεπισκόπηση που φορτώνει το πραγματικό με κλικ.

Απόκριση διακομιστή

Ο χρόνος έως το πρώτο byte (TTFB) —πόσο χρόνο χρειάζεται ο διακομιστής για να αρχίσει να απαντά— βρίσκεται κάτω από κάθε άλλη μετρική. Οι στατικές σελίδες που σερβίρονται από CDN (δίκτυο διακομιστών κοντά στους επισκέπτες· δείτε τι είναι CDN) είναι γρήγορες σχεδόν παντού. Οι σελίδες που χτίζονται από διακομιστή σε κάθε αίτημα εξαρτώνται από αυτόν και τη βάση δεδομένων του. Το caching επαναλαμβανόμενης δουλειάς και οι ευρετηρίασεις βάσης για αργά ερωτήματα είναι οι συνηθισμένες διορθώσεις.

Prompts που δουλεύουν

Να είστε συγκεκριμένοι: ονομάστε τη σελίδα, τη μετρική και τον περιορισμό. Επικολλήστε τα ευρήματα του PageSpeed Insights αν τα έχετε.

Το PageSpeed Insights αναφέρει LCP 4,8 s σε κινητό για την αρχική σελίδα, και το στοιχείο LCP είναι η εικόνα ήρωα. Άλλαξε μέγεθος και μετάτρεψε την εικόνα ήρωα σε WebP, σέρβιρε responsive μεγέθη, όρισε width και height, δώσε της fetchpriority="high" και βεβαιώσου ότι δεν είναι lazy. Κάνε lazy-load κάθε εικόνα κάτω από το αναδίπλωμα. Μην αλλάξεις τον σχεδιασμό.

Έλεγξε τις εξαρτήσεις αυτής της εφαρμογής. Κατάγραψε κάθε πακέτο, τι το χρησιμοποιεί και πόσο περίπου προσθέτει στο πακέτο. Αφαίρεσε όσα δεν χρησιμοποιούνται και χώρισε τις διαδρομές /admin και /settings σε ξεχωριστά τμήματα που φορτώνουν μόνο όταν επισκέπτονται.

Το πλαίσιο αναζήτησης στο /products είναι αργό στην πληκτρολόγηση. Βάλε debounce στο φίλτρο, απέφυγε την επανασχεδίαση ολόκληρης της λίστας σε κάθε πάτημα, και κάνε σελιδοποίηση ή virtualization αν η λίστα έχει πάνω από 200 στοιχεία.

Βήμα προς βήμα

Δοκιμάστε τη ζωντανή σελίδα στο PageSpeed Insights σε κινητό. Σημειώστε LCP, INP, CLS και τα τρία κορυφαία προβλήματα που αναφέρονται.
Διορθώστε πρώτα τις εικόνες: μεγέθη, μορφές, διαστάσεις, lazy loading κάτω από το αναδίπλωμα, προτεραιότητα για τον ήρωα.
Κόψτε scripts τρίτων που δεν χρησιμοποιείτε, και αναβάλετε τα υπόλοιπα.
Περιορίστε τις γραμματοσειρές σε ό,τι χρειάζεται ο σχεδιασμός.
Μειώστε το JavaScript: αφαιρέστε αχρησιμοποίητα πακέτα, χωρίστε ανά διαδρομή.
Κάντε prerender τις δημόσιες σελίδες αν εξακολουθούν να αποδίδονται από τον πελάτη και το LCP παραμένει αργό.
Ελέγξτε τον διακομιστή: caching, ευρετήρια βάσης, στατική φιλοξενία για περιεχόμενο που αλλάζει σπάνια.
Δημοσιεύστε ξανά και ξαναδοκιμάστε. Τα πεδιακά δεδομένα στο PageSpeed Insights ενημερώνονται τις επόμενες εβδομάδες καθώς έρχονται πραγματικές επισκέψεις, οπότε κρίνετε τα πρώιμα αποτελέσματα από τα δεδομένα εργαστηρίου.

Συνηθισμένα λάθη

Δοκιμή μόνο σε γρήγορο laptop. Οι επισκέπτες σας είναι σε κινητά μεσαίας κατηγορίας και ασταθή δεδομένα κινητής. Δοκιμάστε σε λειτουργία κινητού.
Κυνηγώντας τέλειο 100. Το σκορ εργαστηρίου είναι οδηγός. Όταν τα Core Web Vitals είναι στο καλό εύρος, το περιεχόμενο και η χρηστικότητα μετράνε περισσότερο από τους τελευταίους βαθμούς.
Lazy-load σε όλα, συμπεριλαμβανομένης της εικόνας ήρωα. Αυτό χειροτερεύει το LCP.
Προσθήκη ενός plugin ή βιβλιοθήκης ταχύτητας από πάνω. Η αφαίρεση βάρους σχεδόν πάντα νικά την προσθήκη κώδικα για τη διαχείρισή του.
Βελτιστοποίηση της προεπισκόπησης αντί της ζωντανής σελίδας. Οι προεπισκοπήσεις ανάπτυξης τρέχουν μη βελτιστοποιημένα builds. Μετρήστε τη δημοσιευμένη διεύθυνση.
Διόρθωση της ταχύτητας μία φορά. Κάθε νέο widget, εικόνα και λειτουργία προσθέτει βάρος. Ξαναδοκιμάστε μετά από μεγάλες αλλαγές.

Λίστα ελέγχου ταχύτητας

LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1 σε κινητό
Εικόνες αλλαγμένες σε μέγεθος, συμπιεσμένες, σε σύγχρονη μορφή, με width και height
Η εικόνα ήρωα δεν είναι lazy· οι εικόνες κάτω από το αναδίπλωμα είναι lazy
Χωρίς αχρησιμοποίητες βιβλιοθήκες JavaScript· βαριές διαδρομές χωρισμένες
Δύο οικογένειες γραμματοσειρών ή λιγότερες, η κύρια γραμματοσειρά σε preload
Μόνο τα scripts τρίτων που πραγματικά χρησιμοποιείτε, φορτωμένα αργά
Δημόσιες σελίδες με prerender ή στατικές όπου γίνεται
Ξαναδοκιμασμένο στη ζωντανή διεύθυνση μετά τη δημοσίευση

Η ταχύτητα και η διάταξη για κινητά πάνε μαζί· δείτε πώς να κάνετε έναν ιστότοπο ευέλικτο για κινητά. Για πλήρη έλεγχο πριν την κυκλοφορία, το πώς να περάσετε ένα πρωτότυπο AI σε παραγωγή καλύπτει τα υπόλοιπα.

Ταχύτητα στο Mythex

Στο Mythex κάνετε αυτές τις αλλαγές ζητώντας τες στη συνομιλία, ή στον επεξεργαστή κώδικα στο Pro. Ελέγξτε τη δημοσιευμένη διεύθυνση, όχι την Προεπισκόπηση, αφού η Προεπισκόπηση τρέχει διακομιστή ανάπτυξης. Τα στατικά front ends αναπτύσσονται ως στατικοί ιστότοποι όταν δημοσιεύετε (στατικοί ιστότοποι), κάτι που ταιριάζει σε σελίδες περιεχομένου. Οι εφαρμογές με διακομιστή κλιμακώνονται στο μηδέν: κοιμούνται όταν είναι αδρανείς και ξυπνούν στην επόμενη επίσκεψη, οπότε το πρώτο αίτημα μετά από ήσυχο διάστημα είναι πιο αργό, και μια συνδεδεμένη βάση κοιμάται μετά από 5 λεπτά αδράνειας (όρια φιλοξενίας). Αν μια δημόσια σελίδα είναι αργή μόνο στην πρώτη επίσκεψη, αυτή είναι η πιθανή αιτία. Το να κρατάτε τις σελίδες μάρκετινγκ στατικές βοηθά. Μετά τις αλλαγές, δημοσιεύστε ξανά και κάντε σκληρή ανανέωση.

Ερωτήσεις

Ποιος είναι ένας καλός χρόνος φόρτωσης σελίδας;

Οι Core Web Vitals της Google δίνουν τους πιο ξεκάθαρους στόχους: το κύριο περιεχόμενο πρέπει να εμφανίζεται μέσα σε 2,5 δευτερόλεπτα (LCP), η σελίδα πρέπει να ανταποκρίνεται σε είσοδο μέσα σε 200 χιλιοστά του δευτερολέπτου (INP), και η μετατόπιση διάταξης να μένει στο 0,1 ή λιγότερο (CLS), μετρημένα στο 75ο εκατοστημόριο πραγματικών επισκέψεων.

Επηρεάζει η ταχύτητα του ιστότοπου το SEO;

Ναι, λίγο. Η Google χρησιμοποιεί σήματα εμπειρίας σελίδας, συμπεριλαμβανομένων των Core Web Vitals, όμως το σχετικό περιεχόμενο μετράει πολύ περισσότερο. Η ταχύτητα επηρεάζει περισσότερο τους επισκέπτες, που φεύγουν από αργές σελίδες πριν διαβάσουν τίποτα.

Γιατί το σκορ του PageSpeed Insights αλλάζει κάθε φορά;

Το σκορ εργαστηρίου προέρχεται από μία προσομοιωμένη φόρτωση, οπότε ο χρόνος δικτύου και διακομιστή ποικίλλει σε κάθε εκτέλεση. Τρέξτε το μερικές φορές και κοιτάξτε την τάση, και δώστε μεγαλύτερο βάρος στην ενότητα των πεδιακών δεδομένων, που προέρχονται από πραγματικούς χρήστες του Chrome.

Τι επιβραδύνει περισσότερο τους περισσότερους ιστότοπους;

Συνήθως υπερμεγέθεις εικόνες, πολύ JavaScript, γραμματοσειρές ιστού και scripts τρίτων, όπως widgets συνομιλίας, pixels διαφημίσεων και ενσωματώσεις. Μια αργή απόκριση διακομιστή ή ένα backend που ξεκινά από το μηδέν προστίθεται σε όλα αυτά.