Γιατί μετράει η ταχύτητα της ιστοσελίδας και πώς διορθώνεται

Η ταχύτητα δεν είναι τεχνική λεπτομέρεια για προγραμματιστές. Είναι το πρώτο πράγμα που βιώνει ο επισκέπτης, πριν δει σχεδιασμό, πριν διαβάσει λέξη. Και σε κινητό, με μέτρια σύνδεση, μια σελίδα που αργεί τέσσερα δευτερόλεπτα έχει ήδη χάσει ένα μεγάλο ποσοστό του κόσμου που την άνοιξε.

Τι μετράει η Google

Τρεις μετρήσεις, γνωστές ως Core Web Vitals, και όλες περιγράφουν εμπειρία και όχι αριθμούς για τους αριθμούς.

Πόσο γρήγορα εμφανίζεται το κύριο περιεχόμενο. Η μεγάλη εικόνα ή ο τίτλος που κυριαρχεί στην οθόνη. Στόχος κάτω από 2,5 δευτερόλεπτα.

Πόσο γρήγορα απαντά η σελίδα στο πρώτο άγγιγμα. Αν πατήσετε ένα κουμπί ενώ φορτώνει, πόσο αργεί να αντιδράσει. Στόχος κάτω από 200 χιλιοστά.

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

Οι πραγματικές αιτίες καθυστέρησης

Εικόνες χωρίς επεξεργασία. Με διαφορά η πρώτη αιτία. Μια φωτογραφία κατευθείαν από κινητό είναι 4 έως 8 MB και 4000 pixel πλάτος, για να εμφανιστεί σε πλαίσιο 600 pixel. Σωστά διαστασιολογημένη και σε σύγχρονη μορφή, η ίδια εικόνα πέφτει κάτω από 150 KB χωρίς ορατή διαφορά.

Πάρα πολλά πρόσθετα. Κάθε πρόσθετο φορτώνει τα δικά του αρχεία σε κάθε σελίδα, ακόμα κι εκεί που δεν χρησιμοποιείται. Τριάντα πρόσθετα είναι σχεδόν πάντα είκοσι πάρα πολλά.

Καμία προσωρινή αποθήκευση. Χωρίς caching, κάθε επίσκεψη ξαναχτίζει τη σελίδα από τη βάση δεδομένων. Είναι η πιο φθηνή και πιο αποτελεσματική διόρθωση.

Αδύναμη φιλοξενία. Υπερπλήρης κοινόχρηστος διακομιστής ή παλιά έκδοση PHP προσθέτουν καθυστέρηση πριν σταλεί το πρώτο byte. Δείτε τι να προσέξετε στη φιλοξενία.

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

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

Τι διορθώνεται εύκολα

1. Συμπίεση και σωστή διάσταση εικόνων, με σύγχρονη μορφή και σταδιακή φόρτωση για όσες είναι κάτω από το ορατό μέρος.
2. Ενεργοποίηση caching στον διακομιστή και στον browser.
3. Καθάρισμα προσθέτων που δεν χρησιμοποιούνται και αντικατάσταση όσων φορτώνουν παντού.
4. Τοπική φόρτωση γραμματοσειρών αντί από εξωτερικό διακομιστή.
5. Πρόσφατη έκδοση PHP — η διαφορά μεταξύ παλιάς και νέας έκδοσης είναι μετρήσιμη.
6. Δίκτυο διανομής περιεχομένου όταν υπάρχουν επισκέπτες από μακριά.

Πώς να το μετρήσετε σωστά

Χρησιμοποιήστε το PageSpeed Insights της Google και δώστε βάρος στη μέτρηση για κινητό, όχι για υπολογιστή. Ελέγξτε τη σελίδα που δέχεται την περισσότερη κίνηση, όχι μόνο την αρχική. Και μη κυνηγάτε το 100 στο σκορ: η διαφορά από 70 σε 90 είναι πραγματική, από 90 σε 100 συνήθως δεν αξίζει το κόστος.

Τι σημαίνει σε χρήματα

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

Αναλαμβάνουμε έλεγχο ταχύτητας και βελτιστοποίηση σε υπάρχουσες ιστοσελίδες. Δείτε την κατασκευή και υποστήριξη ιστοσελίδων.