Ενότητα 6 · 6.1

Τι κάνει έναν ιστότοπο αργό, και πώς το μετράτε;

Ενότητα 6: Ταχύτητα · Χρόνος ανάγνωσης: 9 λεπτά

Μαθησιακός στόχος: Μετά από αυτό το μάθημα θα μπορείτε να μετράτε πού χάνεται ο χρόνος και να αναγνωρίζετε τη διαφορά ανάμεσα σε αργή απόκριση του server και αργή απόκριση του browser.

Βασικές έννοιες: TTFB, Core Web Vitals (LCP, INP, CLS), labdata, velddata, PageSpeed Insights, καρτέλα δικτύου, συμπίεση, εξωτερικά scripts, όρια του πακέτου φιλοξενίας, 503

Πρώτα μέτρηση, μετά παρέμβαση

Η φράση "ο ιστότοπος είναι αργός" μπορεί να έχει δέκα διαφορετικές αιτίες. Όποιος, χωρίς μέτρηση, εγκαταστήσει ταυτόχρονα ένα πρόσθετο cache, ένα πρόσθετο βελτιστοποίησης εικόνων και ένα μεγαλύτερο πακέτο, δεν θα ξέρει μετά τι βοήθησε, και θα έχει τρία επιπλέον πράγματα να παρακολουθεί. Ξεκινήστε λοιπόν πάντα με τρεις ερωτήσεις (τις ίδιες που θα βρείτε στον οδηγό του παρόχου hosting σας):

Όλα αργά, ή μόνο η διαχείριση; Μια αργή διαχείριση με γρήγορη εμφάνιση στο πρόσοψη υποδηλώνει πρόσθετα που κάνουν πολλά στη διαχείριση, ή bots που επιτίθενται στη σελίδα σύνδεσης.
Πάντα, ή σε συγκεκριμένες στιγμές; Μόνο σε ώρες αιχμής ή όταν εκτελείται μια προγραμματισμένη εργασία: τότε το πακέτο σας φτάνει στα όριά του.
Σε όλους, ή μόνο σε εσάς; Δοκιμάστε στο κινητό σας μέσω 4G ή 5G, ή ζητήστε από κάποιον άλλο να δοκιμάσει. Αν είναι αργό μόνο σε εσάς, το πρόβλημα βρίσκεται στη σύνδεσή σας ή στο VPN σας.

Δύο μισά: server και browser

Ο χρόνος που περιμένει ένας επισκέπτης αποτελείται από δύο μέρη (μάθημα 1.2):

Ο server δημιουργεί το HTML: webserver, PHP, πρόσθετα, βάση δεδομένων. Αυτό το βλέπετε ως TTFB (time to first byte), τον χρόνο μέχρι το πρώτο byte της απάντησης. Το web.dev αναφέρει ως γενικό κανόνα ότι οι περισσότεροι ιστότοποι πρέπει να στοχεύουν σε TTFB 0,8 δευτερολέπτου ή λιγότερο.
Ο browser διαβάζει αυτό το HTML και στη συνέχεια ανακτά όλα όσα περιέχει: stylesheets, scripts, γραμματοσειρές, εικόνες, βίντεο, κώδικες μέτρησης, widgets συνομιλίας. Μόνο όταν έχει φτάσει αρκετό από αυτά, ο επισκέπτης βλέπει κάτι.

Έναν υψηλό TTFB τον λύνετε από την πλευρά του server: caching (μάθημα 6.2), λιγότερα ή ελαφρύτερα πρόσθετα, νεότερη έκδοση PHP, μια τακτοποιημένη βάση δεδομένων (μάθημα 6.3) ή περισσότερη υπολογιστική ισχύ. Ένας χαμηλός TTFB με παρ' όλα αυτά αργή σελίδα υποδεικνύει την πλευρά του browser: πολύ μεγάλες εικόνες, υπερβολικά πολλά scripts, εξωτερικά στοιχεία.

Core Web Vitals

Η Google μετρά την εμπειρία των επισκεπτών με τρεις αριθμούς, τα Core Web Vitals:

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

Το INP αντικατέστησε τον Μάρτιο του 2024 την παλαιότερη μέτρηση FID. Η Google χρησιμοποιεί αυτούς τους αριθμούς μεταξύ άλλων για την κατάταξη των αποτελεσμάτων αναζήτησης, όμως ο σημαντικότερος λόγος για να τους βελτιώσετε είναι απλός: οι επισκέπτες εγκαταλείπουν μια αργή ή μετατοπιζόμενη σελίδα.

Labdata και velddata

Υπάρχουν δύο είδη μετρήσεων, και δίνουν διαφορετικούς αριθμούς:

Labdata: μια δοκιμή σε μια συγκεκριμένη στιγμή, από ένα συγκεκριμένο σημείο, με προσομοιωμένο κινητό και σύνδεση. Χρήσιμη για σύγκριση (πριν και μετά από μια αλλαγή), αλλά δεν αντιπροσωπεύει έναν πραγματικό επισκέπτη.
Velddata: μετρήσεις από πραγματικούς επισκέπτες με Chrome, κατά τις τελευταίες 28 ημέρες. Αυτό είναι αυτό που βιώνουν πραγματικά οι επισκέπτες. Οι μικροί ιστότοποι συνήθως δεν έχουν αρκετούς επισκέπτες για velddata.

Το PageSpeed Insights (pagespeed.web.dev) εμφανίζει και τα δύο: στην κορυφή τα velddata (αν υπάρχουν), από κάτω μια δοκιμή labtest με βαθμολογία και συγκεκριμένες συμβουλές. Μην κοιτάτε τυφλά τη βαθμολογία από 0 έως 100. Κοιτάξτε τα επιμέρους στοιχεία: είναι το LCP κακό επειδή ο server είναι αργός (TTFB) ή επειδή η μεγάλη φωτογραφία είναι 3 MB;

Δοκιμάστε πάντα μερικές φορές (οι αριθμοί αλλάζουν) και δοκιμάστε επίσης μια συνηθισμένη σελίδα, όχι μόνο την αρχική σελίδα.

Έλεγχος με τον browser

Τα εργαλεία ανάπτυξης του browser σας (F12) δείχνουν τι πραγματικά συμβαίνει:

Καρτέλα Δίκτυο: ανανεώστε τη σελίδα με απενεργοποιημένη την cache (κουτάκι "Απενεργοποίηση cache"). Βλέπετε κάθε αρχείο που φορτώνεται, πόσο μεγάλο είναι και πόσο χρόνο χρειάστηκε. Ταξινομήστε κατά μέγεθος: τα μεγαλύτερα αρχεία είναι συνήθως εικόνες. Ταξινομήστε κατά domain: πόσο προέρχεται από άλλους παρόχους (γραμματοσειρές, κώδικες μέτρησης, βίντεο);
Το πρώτο αίτημα (το ίδιο το HTML): κάντε κλικ σε αυτό, καρτέλα Timing. Το "Waiting for server response" είναι το TTFB.
Κεφαλίδες αυτού του πρώτου αιτήματος: υπάρχει συμπίεση (content-encoding: br ή gzip), και προήλθε η σελίδα από μια cache (μάθημα 6.2);

Οι συνηθισμένοι ένοχοι

Στην πράξη, η αργή απόδοση στο WordPress οφείλεται συνήθως σε έναν από τους εξής λόγους:

Καμία cache σελίδας: κάθε σελίδα δημιουργείται εκ νέου σε κάθε επίσκεψη (μάθημα 6.2).
Πολύ πολλά ή βαριά πρόσθετα, ιδίως πρόσθετα που σε κάθε αίτημα καλούν εξωτερικές υπηρεσίες ή εκτελούν βαριά ερωτήματα (μάθημα 5.3).
Μεγάλες εικόνες: μια φωτογραφία 5 MB από κινητό στην αρχική σελίδα (μαθήματα 4.4 και 6.3).
Ένα βαρύ θέμα εμφάνισης ή ένα εργαλείο κατασκευής σελίδων που φορτώνει πολλά scripts και stylesheets σε κάθε σελίδα (μάθημα 5.1).
Εξωτερικά στοιχεία: γραμματοσειρές, βίντεο, widgets συνομιλίας, κώδικες μέτρησης, κουμπιά κοινωνικών δικτύων από άλλους παρόχους. Κάθε ένα είναι μια σύνδεση προς έναν άλλο server που μπορεί να είναι αργός.
Μια παλιά έκδοση PHP (μάθημα 8.4).
Μια ακατάστατη βάση δεδομένων: χιλιάδες αναθεωρήσεις, spam, πίνακες καταγραφής από πρόσθετα (μάθημα 6.3).
Bots: crawlers, AI-crawlers και προσπάθειες σύνδεσης απασχολούν το πακέτο σας (μάθημα 7.3).
Το πακέτο φτάνει στα όριά του: πολύ λίγη υπολογιστική ισχύ (CPU), διεργασίες ή μνήμη για την κίνηση.

Τα όρια του πακέτου σας

Στη φιλοξενία κοινόχρηστου τύπου, κάθε πακέτο λαμβάνει ένα σταθερό μερίδιο του server: υπολογιστική ισχύ, μνήμη, ταχύτητα δίσκου και έναν αριθμό ταυτόχρονων διεργασιών. Αν ο ιστότοπός σας χρησιμοποιεί περισσότερο, τότε επιβραδύνεται, ή οι επισκέπτες λαμβάνουν ένα μήνυμα σφάλματος 503 (Service Unavailable, σε ορισμένους παρόχους hosting "Resource Limit Is Reached"). Στο DirectAdmin με CloudLinux το βλέπετε στο Resource Usage (με "faults" αν ο ιστότοπός σας επιβραδύνθηκε) και με το X-Ray βλέπετε ανά σελίδα ποιο πρόσθετο ή ερώτημα κοστίζει χρόνο. Άλλοι πάροχοι hosting έχουν παρόμοιες επισκοπήσεις, μερικές φορές μόνο κατόπιν αιτήματος.

Ένα μεγαλύτερο πακέτο βοηθά αν ο ιστότοπός σας πραγματικά χρειάζεται περισσότερα (ένα πολυσύχναστο ηλεκτρονικό κατάστημα). Δεν λύνει έναν κακώς δομημένο ιστότοπο: το πρόβλημα θα επανεμφανιστεί αργότερα. Αναζητήστε πρώτα την αιτία.

Σύνοψη

Μετρήστε πρώτα: όλα ή μόνο η διαχείριση, πάντα ή κάποιες φορές, όλοι ή μόνο εσείς.
Το TTFB είναι η πλευρά του server (στοχεύστε σε 0,8 δευτερόλεπτο ή λιγότερο)· το υπόλοιπο είναι ό,τι φορτώνει ο browser.
Core Web Vitals: LCP (2,5 δευτ.), INP (200 ms) και CLS (0,1)· το INP αντικατέστησε το FID το 2024.
Το PageSpeed Insights εμφανίζει velddata και labdata· η καρτέλα δικτύου δείχνει τι πραγματικά φορτώνει.
Η περισσότερη αργή απόδοση οφείλεται σε έλλειψη cache, βαριά πρόσθετα, μεγάλες εικόνες και εξωτερικά στοιχεία· ένα μεγαλύτερο πακέτο είναι μόνο το τελευταίο βήμα.

Κουίζ

Άσκηση

Άσκηση A6.1: Μετρήστε το TTFB και τη συμπίεση. Συμπληρώστε τη διεύθυνση του ιστότοπού σας και, αν θέλετε, μία συνηθισμένη σελίδα (για παράδειγμα τη σελίδα επικοινωνίας σας). Το πρόγραμμα ζητά κάθε σελίδα τρεις φορές χωρίς cookies και δίνει τον μεσαίο TTFB, το μέγεθος του HTML, και αν ο server στέλνει το HTML συμπιεσμένο (content-encoding gzip ή br). Συγκρίνετε το αποτέλεσμα με μια δοκιμή στο PageSpeed Insights και σημειώστε τι σας κάνει εντύπωση.

Περαιτέρω ανάγνωση

Αυτά τα άρθρα περιγράφουν τα βήματα στους πίνακες ελέγχου του WebOké· σε άλλους πίνακες ελέγχου λειτουργούν παρόμοια.

Cookies στη WebOké

Ρυθμίσεις cookies

Απαραίτητα

Marketing