PageSpeed Insights: πώς να διατηρήσετε την ταχύτητα του ιστότοπου υψηλή

Εάν εκτελείτε έναν ιστότοπο, πιθανότατα έχετε ακούσει για το Google PageSpeed Insights. Είναι ένα δωρεάν εργαλείο από την Google που μετρά την απόδοση των ιστοσελίδων σας τόσο σε κινητές όσο και σε επιτραπέζιες συσκευές. Αλλά το να πάρεις υψηλό σκορ μπορεί συχνά να αισθάνεσαι σαν ένα παιχνίδι που δεν μπορείς να κερδίσεις.

Σήμερα θα κάνουμε μια λεπτομερή ανασκόπηση του PageSpeed Insights, θα εξετάσουμε όλα τα πιθανά προβλήματα που μειώνουν τη βαθμολογία σας και θα εξηγήσουμε ακριβώς πώς να βελτιστοποιήσετε τον ιστότοπό σας.

Γιατί είναι τόσο σημαντική η ταχύτητα του ιστότοπου?

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

Πρώτον, η ταχύτητα είναι ένας σημαντικός παράγοντας κατάταξης για το SE Η Google έχει δηλώσει επίσημα ότι χρησιμοποιεί Core Web Vitals για να αποφασίσει πόσο υψηλή κατάταξη των σελίδων σας. Εάν ο ιστότοπός σας χρειάζεται πολύ χρόνο για να φορτωθεί, η Google θα σας ωθήσει προς τα κάτω στα αποτελέσματα αναζήτησης.

Δεύτερον, η ταχύτητα επηρεάζει την εμπειρία του χρήστη και τα ποσοστά μετατροπής. Οι περισσότεροι χρήστες θα εγκαταλείψουν μια σελίδα εάν χρειαστούν περισσότερα από τρία δευτερόλεπτα για να εμφανιστούν. Ένας γρήγορος ιστότοπος κρατά τους επισκέπτες αφοσιωμένους και τους κάνει πολύ πιο πιθανό να αγοράσουν το προϊόν σας ή να διαβάσουν τα άρθρα σας.

Κατανόηση των μετρήσεων PageSpeed Insights

Όταν πληκτρολογείτε μια διεύθυνση URL στο PageSpeed Insights, σας δίνει δύο τύπους δεδομένων: δεδομένα εργαστηρίου και δεδομένα πεδίου.

Τα δεδομένα πεδίου δείχνουν πώς οι πραγματικοί χρήστες βιώνουν τον ιστότοπό σας. Συλλέγεται σε διάστημα 28 ημερών χρησιμοποιώντας την Αναφορά Εμπειρίας Χρήστη Chrome (CrUX). Αυτό είναι που πραγματικά έχει σημασία για το SE Τα δεδομένα του εργαστηρίου συλλέγονται σε ελεγχόμενο περιβάλλον για να σας βοηθήσουν να εντοπίσετε προβλήματα.

Οι κύριες μετρήσεις για να παρακολουθήσετε είναι

• Πρώτη περιεκτική βαφή (FCP): ο χρόνος που χρειάζεται για να αποδώσει το πρόγραμμα περιήγησης το πρώτο κομμάτι κειμένου ή εικόνας.
• Μεγαλύτερη περιεκτική βαφή (LCP): ο χρόνος που χρειάζεται για να γίνει ορατό το μεγαλύτερο μπλοκ περιεχομένου.
• Αθροιστική μετατόπιση διάταξης (CLS): μετρά πόσο αλλάζει η διάταξη της σελίδας σας καθώς φορτώνεται.
• Αλληλεπίδραση στην επόμενη βαφή (INP): πόσο γρήγορα αποκρίνεται η σελίδα σας αφού κάποιος χρήστης κάνει κλικ ή πατήσει κάτι.

Συνηθισμένα προβλήματα που καταστρέφουν το σκορ σου

Το να πάρεις κακό σκορ είναι εύκολο. Η διόρθωσή του απαιτεί την εύρεση της βασικής αιτίας. Ακολουθούν τα πιο συνηθισμένα προβλήματα που θα δείτε στη διαγνωστική σας αναφορά PageSpeed Insights.

1. Πόροι αποκλεισμού απόδοσης

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

2. Μη βελτιστοποιημένες τεράστιες εικόνες

Οι εικόνες συνήθως αποτελούν το μεγαλύτερο μέρος ενός συνολικού βάρους ιστοσελίδας. Η μεταφόρτωση μιας εικόνας 5 ΜΒ για ένα μικρό λογότυπο είναι ένας εγγυημένος τρόπος για να επιβραδύνετε τα πάντα.Πώς να διορθώσετε: συμπιέζετε πάντα τις εικόνες σας χρησιμοποιώντας σύγχρονες μορφές όπως το WebP. Θα πρέπει επίσης να χρησιμοποιήσετε τοloading="lazy"χαρακτηριστικό, ώστε οι εικόνες κάτω από το δίπλωμα να φορτώνονται μόνο όταν ο χρήστης μετακινείται προς τα κάτω σε αυτές. Πάντα να ορίζετε ρητό πλάτος και ύψος στις ετικέτες εικόνας για να αποτρέπετε τις αλλαγές διάταξης.

3. Πάρα πολύ αχρησιμοποίητο javascript

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

4. Αργοί χρόνοι απόκρισης του διακομιστή

Ο χρόνος για το πρώτο byte (TTFB) μετρά πόσο χρόνο χρειάζεται ο διακομιστής φιλοξενίας σας για να επιστρέψει το αρχικό HTML. Εάν ο διακομιστής σας είναι αργός, όλες οι άλλες βελτιστοποιήσεις δεν θα έχουν μεγάλη σημασία.Πώς να διορθώσετε: χρησιμοποιήστε έναν γρήγορο κεντρικό υπολογιστή ιστού. Εφαρμόστε προσωρινή αποθήκευση από την πλευρά του διακομιστή και χρησιμοποιήστε ένα δίκτυο παράδοσης περιεχομένου (CDN) για να εξυπηρετήσετε τον ιστότοπό σας από διακομιστές που βρίσκονται φυσικά πιο κοντά στους χρήστες σας.

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

Πρότεινε τη μετατροπή εικόνων pg σε ebp για τον ιστότοπό μας, για παράδειγμα.

Αλλάμην είστε αναστατωμένοι αν δεν μπορείτε να φτάσετε το 100%, είναι πραγματικά πολύ δύσκολο να γίνει. Εάν ο ιστότοπός σας είναι πολύπλοκος, χρειάζεται πολλές εικόνες, ορισμένες συγκεκριμένες βιβλιοθήκες js, μπορεί να πιστεύετε ότι – δεν υπάρχει τίποτα που να βελτιστοποιεί πλέον, γιατί η βαθμολογία μου εξακολουθεί να είναι 80-90% ? Αυτό είναι απολύτως φυσιολογικό. Εάν ο ιστότοπός σας βρίσκεται στην “πράσινη ζώνη”, αυτό είναι ήδη ένα καλό σημάδι. Επιπλέον, τα αποτελέσματα μπορεί ακόμη και να διαφέρουν κατά μερικές ποσοστιαίες μονάδες – χωρίς καμία απολύτως αλλαγή – εάν δοκιμάσετε την ταχύτητα σε διαφορετική χρονική στιγμή.
Ωστόσο, θα πρέπει ακόμα να προσπαθήσετε να μεγιστοποιήσετε την απόδοσή σας περνώντας και διορθώνοντας κάθε σφάλμα στη λίστα.

Γιατί το μεταφραστικό μας σενάριο διατηρεί την ταχύτητά σας υψηλή

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

Κατασκευάσαμε το μεταφραστικό μας σενάριο αυστηρά έχοντας κατά νου την απόδοση. Να γιατί η λύση μας είναι ελαφριά και έχει ελάχιστη επίδραση στην ταχύτητα απόδοσης:

• Μικροσκοπικό όριο ωφέλιμου φορτίου: το βασικό μας σενάριο είναι απίστευτα μικρό. Δεν ομαδοποιούμε μεγάλες βιβλιοθήκες τρίτων. Προσθέτει μόνο λίγα kilobyte στο μέγεθος της σελίδας σας.
• Ασύγχρονη φόρτωση: το σενάριο έχει σχεδιαστεί για να εκτελείται ασύγχρονα. Ποτέ δεν εμποδίζει την απόδοση του κύριου περιεχομένου σας.
• Παγκόσμια παράδοση CDN: παραδίδουμε το σενάριο και το μεταφρασμένο κείμενο από ένα παγκόσμιο δίκτυο. Αυτό σημαίνει ότι τα δεδομένα διανύουν τη μικρότερη δυνατή απόσταση από τον επισκέπτη σας.
• Εγγενής ένεση DOM: αντί να κρύβουμε τη σελίδα ή να δημιουργούμε αλλαγές διάταξης, το σενάριό μας εισάγει εγγενώς μεταφρασμένες συμβολοσειρές απρόσκοπτα. Εκτελείται σε χιλιοστά του δευτερολέπτου, έτσι ώστε η αθροιστική μετατόπιση διάταξης παραμένει τέλεια στο μηδέν.

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