Ετοιμάσαμε για εσάς , μερικές από τις πιο κοινές τεχνικές βελτιστοποίησης, καθώς και μερικές συμβουλές για το πώς μπορείτε να τις εκμεταλλευτείτε, αυξάνοντας την ταχύτητα της Ιστοσελίδας σας.
- Ορισμός διαστάσεων εικόνας
Ας ξεκινήσουμε με κάτι απλό. Όταν παραλείψετε τις διαστάσεις εικόνας από τον κώδικά σας, ενδέχεται να χρειαστεί λίγος χρόνος για το μέγεθος του προγράμματος περιήγησης για τη σωστή μέτρηση των εικόνων και των βίντεό σας. Αυτό σημαίνει ότι το περιεχόμενο στη σελίδα σας θα μετακινηθεί και θα επηρεάσει αρνητικά τη βαθμολογία CLS.
Με αυτές τις πληροφορίες, οποιοδήποτε πρόγραμμα περιήγησης μπορεί να υπολογίσει τις διαστάσεις της εικόνας σας και να διατηρήσει αρκετό χώρο στη σελίδα. Αυτό θα πρέπει να φροντίζει τα περισσότερα, αν όχι όλα τα προβλήματα CLS σας.
Ετοιμάσαμε για εσάς , μερικές από τις πιο κοινές τεχνικές βελτιστοποίησης, καθώς και μερικές συμβουλές για το πώς μπορείτε να τις εκμεταλλευτείτε, αυξάνοντας την ταχύτητα της Ιστοσελίδας σας.
- Ορισμός διαστάσεων εικόνας
Ας ξεκινήσουμε με κάτι απλό. Όταν παραλείψετε τις διαστάσεις εικόνας από τον κώδικά σας, ενδέχεται να χρειαστεί λίγος χρόνος για το μέγεθος του προγράμματος περιήγησης για τη σωστή μέτρηση των εικόνων και των βίντεό σας. Αυτό σημαίνει ότι το περιεχόμενο στη σελίδα σας θα μετακινηθεί και θα επηρεάσει αρνητικά τη βαθμολογία CLS.
Με αυτές τις πληροφορίες, οποιοδήποτε πρόγραμμα περιήγησης μπορεί να υπολογίσει τις διαστάσεις της εικόνας σας και να διατηρήσει αρκετό χώρο στη σελίδα. Αυτό θα πρέπει να φροντίζει τα περισσότερα, αν όχι όλα τα προβλήματα CLS σας.
2. Προβολή εικόνων σε μορφές επόμενης γενιάς
Δεν δημιουργούνται όλες οι μορφές εικόνας ίσες. Οι αξιόπιστες μορφές JPEG και PNG έχουν τώρα πολύ χειρότερα χαρακτηριστικά συμπίεσης και ποιότητας σε σύγκριση με τα AVIF, JPEG 2000, JPEG XR και WebP.
Από αυτές τις αναφερόμενες μορφές, το WebP είναι πιθανότατα αυτό που πρέπει να εξετάσετε πρώτα. Υποστηρίζει συμπίεση με απώλεια και χωρίς απώλειες, καθώς και για διαφάνεια και κίνηση. Επιπλέον, τα αρχεία WebP είναι γενικά 25% έως 35% ελαφρύτερα από τα PNG και JPEG παρόμοιας ποιότητας. Και παρόλο που στο παρελθόν ήταν κοινή ανησυχία ότι η μορφή WebP δεν υποστηρίζεται από ορισμένα προγράμματα περιήγησης, πρόσφατα το Safari πρόσθεσε την υποστήριξη για WebP στην έκδοση 14, οπότε η συνολική υποστήριξη για τη μορφή μεταξύ των προγραμμάτων περιήγησης είναι πλέον πάνω από 90%.
Εάν ο ιστότοπός σας είναι ενσωματωμένος στο WordPress, μπορείτε εύκολα να δημιουργήσετε ένα αντίγραφο WebP των εικόνων σας με ένα πρόσθετο βελτιστοποίησης εικόνας όπως το Imagify. Εάν ο ιστότοπός σας δεν είναι κατασκευασμένος σε πλατφόρμα CMS ή δεν θέλετε να εγκαταστήσετε πάρα πολλά πρόσθετα, μπορείτε να μετατρέψετε τις εικόνες σας χρησιμοποιώντας μετατροπείς στο διαδίκτυο ή επεξεργαστές γραφικών.
3. Συμπίεση εικόνων
Είτε χρησιμοποιείτε μορφές εικόνας επόμενης γενιάς είτε όχι, η συμπίεση των εικόνων σας εξακολουθεί να είναι ένας έγκυρος τρόπος μείωσης του συνολικού μεγέθους της σελίδας. Και πάλι, εάν ο ιστότοπός σας είναι χτισμένος στο WordPress, μπορείτε να συμπιέσετε τις εικόνες σας μαζικά με πρόσθετα εικόνων όπως το WP Smush. Μπορείτε επίσης να χρησιμοποιήσετε διαδικτυακούς συμπιεστές εάν δεν θέλετε να εγκαταστήσετε πάρα πολλά πρόσθετα και κινδυνεύετε να επιβραδύνετε τον ιστότοπό σας. Τελευταία λύση – χρησιμοποιήστε επεξεργαστές γραφικών για να συμπιέσετε τις εικόνες σας προτού τις ανεβάσετε στον ιστότοπό σας.
Για να σας δώσω μια ιδέα για το ποσό που μπορείτε να εξοικονομήσετε, έχω πραγματοποιήσει μια γρήγορη δοκιμή σε μια τυχαία επιλογή εικόνων από το φάκελο λήψεών μου:
Αποτελέσματα συμπίεσης εικόνας από το TinyPNG
Χρησιμοποιώντας έναν διαδικτυακό συμπιεστή, έχω εξοικονομήσει μεταξύ 30% και 75% ανά εικόνα και 68% συνολικά (οι βαρύτερες εικόνες τράβηξαν περισσότερο βάρος και έστρεψαν το ποσοστό).
4. Αναβολή εικόνων εκτός οθόνης
Οι εικόνες εκτός οθόνης είναι αυτές που εμφανίζονται στο κάτω μέρος, πράγμα που σημαίνει ότι ο χρήστης δεν θα τις δει μέχρι να πραγματοποιήσει κύλιση πέρα από την αρχική οθόνη. Και αυτό θα είναι ένα κοινό θέμα σε όλο το υπόλοιπο άρθρο – η φόρτωση όσων βρίσκονται στο κάτω μέρος θα πρέπει να αναβληθεί έως ότου φορτωθούν πλήρως τα στοιχεία στο επάνω μέρος. Η άνωθεν πτυχή είναι αυτή που χρησιμοποιεί η Google για τη μέτρηση της ταχύτητας της σελίδας σας, οπότε πρέπει να εστιάσετε το μεγαλύτερο μέρος της προσπάθειας βελτιστοποίησης.
Πάνω-από-πτυσσόμενο έναντι κατώτερο-πτυσσόμενο
Η τεχνική αντιμετώπισης εικόνων εκτός οθόνης ονομάζεται τεμπέλης φόρτωσης. Βασικά, οι εικόνες στο επάνω μέρος φορτώνονται πρώτα και οι εικόνες εκτός οθόνης φορτώνονται μόνο όταν ο χρήστης κάνει κύλιση προς τα κάτω στη σελίδα. Για περισσότερες πληροφορίες, συμβουλευτείτε αυτόν τον οδηγό σχετικά με τη λανθασμένη φόρτωση των εικόνων σας.
5. Μετατροπή gif σε βίντεο
Μπορεί να ακούγεται αντίθετο, αλλά τα gif συχνά έχουν μεγαλύτερο μέγεθος αρχείου από τα βίντεο. Δεν έχει νόημα, δεν ξέρω πώς έγινε, αλλά η μετατροπή ενός μεγάλου gif σε ένα βίντεο θα μειώσει το μέγεθος έως και 500% ή και περισσότερο. Επομένως, εάν η αναφορά ταχύτητας σελίδας σας λέει να χρησιμοποιήσετε μορφές βίντεο για κινούμενο περιεχόμενο, θα πρέπει επίσης να το λάβετε σοβαρά υπόψη.
Για να μετατρέψετε gif σε βίντεο μπορείτε να χρησιμοποιήσετε οποιονδήποτε online μετατροπέα ή να κατεβάσετε ένα εργαλείο όπως το FFmpeg. Η Google συνιστά πραγματικά τη δημιουργία δύο μορφών βίντεο: WebM και mp4. Το WebM είναι παρόμοιο με το WebP στο ότι είναι ελαφρύτερο, αλλά δεν υποστηρίζεται ακόμη από όλα τα προγράμματα περιήγησης. Έτσι, όταν προσθέτετε το βίντεό σας στη σελίδα, θα πρέπει πρώτα να αναφέρετε την έκδοση WebM και στη συνέχεια την έκδοση mp4 ως αντίγραφο ασφαλείας.
Λάβετε υπόψη ότι το στοιχείο βίντεο έχει επίσης τέσσερα επιπλέον χαρακτηριστικά: αυτόματη αναπαραγωγή, βρόχο, σίγαση και αναπαραγωγή σε γραμμή. Αυτά τα χαρακτηριστικά κάνουν το βίντεό σας να συμπεριφέρεται σαν gif: αρχίζει να παίζει αυτόματα, έχει βρόχο, χωρίς ήχο και παίζει εν σειρά.
6. Defer unused CSS
Το CSS που δεν χρησιμοποιείται μπορεί να επιβραδύνει την κατασκευή ενός δέντρου απόδοσης ενός προγράμματος περιήγησης. Το θέμα είναι ότι ένα πρόγραμμα περιήγησης πρέπει να περπατά ολόκληρο το δέντρο DOM και να ελέγχει τους κανόνες CSS που ισχύουν για κάθε κόμβο. Επομένως, όσο περισσότερο αχρησιμοποίητο CSS υπάρχει, τόσο περισσότερος χρόνος θα χρειαστεί ένα πρόγραμμα περιήγησης να υπολογίσει τα στυλ για κάθε κόμβο.
Ο στόχος εδώ είναι να εντοπίσουμε τα κομμάτια CSS που δεν χρησιμοποιούνται ή δεν είναι κρίσιμα και είτε να τα αφαιρέσετε εντελώς είτε να αλλάξετε τη σειρά με την οποία φορτώνουν. Συμβουλευτείτε αυτόν τον οδηγό σχετικά με την αναβολή του CSS που δεν χρησιμοποιείται.
7. Ελαχιστοποιήστε το JS και το CSS
Τα αρχεία JS και CSS ενδέχεται συχνά να περιέχουν περιττά σχόλια, κενά, διαλείμματα γραμμής και κομμάτια κώδικα. Η κατάργησή τους μπορεί να κάνει τα αρχεία σας έως και 50% ελαφρύτερα, αν και ο μέσος όρος ελαχιστοποίησης είναι πολύ μικρότερος. Ωστόσο, είναι μια οριακή συνεισφορά στην ταχύτητα της σελίδας σας και αξίζει να δοκιμάσετε.
Εάν έχετε έναν μικρό ιστότοπο, μπορείτε να ελαχιστοποιήσετε τον κώδικα χρησιμοποιώντας διαδικτυακούς minifiers, όπως CSS Minifier, JavaScript Minifier και HTML Compressor. Ή, εάν ο ιστότοπός σας είναι χτισμένος σε μια πλατφόρμα CMS, όπως το WordPress, σίγουρα υπάρχουν ορισμένα πρόσθετα που μπορούν να κάνουν τη δουλειά για εσάς. Για έναν προσαρμοσμένο ιστότοπο, ανατρέξτε σε αυτόν τον οδηγό για την ελαχιστοποίηση του CSS και αυτόν σχετικά με την ελαχιστοποίηση του JS.
8. Critical CSS
Από προεπιλογή, το CSS είναι ένας πόρος αποκλεισμού απόδοσης. Η σελίδα σας δεν πρόκειται να αποδοθεί έως ότου το πρόγραμμα περιήγησης πάρει και αναλύσει αρχεία CSS, τα οποία μπορεί να είναι αρκετά χρονοβόρα.
Για να το λύσετε αυτό, μπορείτε να εξαγάγετε μόνο εκείνα τα στυλ που απαιτούνται για την άνωθεν περιοχή της σελίδας σας και να τα προσθέσετε στο του εγγράφου HTML. Τα υπόλοιπα αρχεία CSS μπορούν να φορτωθούν ασύγχρονα. Αυτό θα βελτιώσει σημαντικά τις βαθμολογίες σας LCP και θα κάνει τις σελίδες σας να εμφανίζονται ταχύτερα στους χρήστες.
9. Βελτιώστε τον χρόνο απόκρισης του διακομιστή
Το πιο δυσάρεστο πράγμα σχετικά με τις καθυστερήσεις στην ανταπόκριση του διακομιστή είναι ότι υπάρχει μια μεγάλη ποικιλία λόγων που μπορεί να τους προκαλέσουν. Για παράδειγμα, αυτά μπορεί να είναι αργή δρομολόγηση, αργή λογική εφαρμογών, λιμός CPU πόρων, αργά ερωτήματα βάσης δεδομένων, λιμοκτονία μνήμης, αργά πλαίσια κ.λπ.
Μια εύκολη λύση χωρίς προβλήματα σε αυτά τα ζητήματα είναι η μετάβαση σε καλύτερη φιλοξενία, κάτι που σε πολλές περιπτώσεις σημαίνει από κοινή χρήση σε διαχειριζόμενη φιλοξενία. Η διαχειριζόμενη φιλοξενία συνήθως συνοδεύεται από δίκτυα CDN και άλλα κόλπα παράδοσης περιεχομένου που θα επηρεάσουν θετικά την ταχύτητα της σελίδας. Ωστόσο, εάν θέλετε να λερώσετε τα χέρια σας, ακολουθεί ένας πιο λεπτομερής οδηγός για τη διόρθωση ενός υπερφορτωμένου διακομιστή.
10. Defer/async third-party JS
Οι πόροι τρίτων, όπως τα κουμπιά κοινής χρήσης και τα ενσωματωμένα προγράμματα αναπαραγωγής βίντεο, τείνουν να είναι πολύ βαρύ για την κατανάλωση πόρων. Επιπλέον, κάθε φορά που το πρόγραμμα περιήγησης συναντά ένα κομμάτι JS, θα διακόψει την εκτέλεση του HTML έως ότου ασχοληθεί με το JS. Όλα αυτά τείνουν να προσθέτουν μια μετρήσιμη μείωση της ταχύτητας της σελίδας.
Εάν κάποιος από τους πόρους τρίτου μέρους σας δεν είναι απαραίτητος, δηλαδή δεν έχει σημασία για την εμφάνιση ή τη λειτουργία του παραπάνω, πρέπει να τους απομακρύνετε από την κρίσιμη διαδρομή απόδοσης. Για να φορτώσετε πόρους τρίτων πιο αποτελεσματικά, μπορείτε να χρησιμοποιήσετε το χαρακτηριστικό async ή defer. Το χαρακτηριστικό async είναι πιο μαλακό – επιτρέπει τη λήψη ταυτόχρονα HTML και JS, αλλά θα εξακολουθήσει να θέτει σε παύση το HTML για την εκτέλεση του JS. Το χαρακτηριστικό defer είναι πιο δύσκολο – δεν θα θέσει σε παύση το HTML για την εκτέλεση του JS, το οποίο θα εκτελεστεί μόνο στο τέλος.
11. Αποφύγετε πάρα πολλές ανακατευθύνσεις
Η απαλλαγή από όλες τις περιττές ανακατευθύνσεις είναι ένα από τα καλύτερα πράγματα που μπορείτε να κάνετε στον ιστότοπό σας με ταχύτητα. Κάθε πρόσθετη ανακατεύθυνση επιβραδύνει την απόδοση της σελίδας και προσθέτει μία ή περισσότερες ανατροφοδοτήσεις αιτήματος-απόκρισης HTTP.
Η βέλτιστη πρακτική δεν χρησιμοποιεί καθόλου ανακατευθύνσεις. Ωστόσο, εάν χρειαστεί απεγνωσμένα να χρησιμοποιήσετε ένα, είναι σημαντικό να επιλέξετε τον σωστό τύπο ανακατεύθυνσης. Είναι καλύτερο να χρησιμοποιήσετε μια ανακατεύθυνση 301 για μόνιμη ανακατεύθυνση. Αν, ας πούμε, είστε πρόθυμοι να ανακατευθύνετε τους χρήστες σε ορισμένες βραχυπρόθεσμες προωθητικές σελίδες ή συγκεκριμένες διευθύνσεις URL για συσκευές, οι προσωρινές ανακατευθύνσεις 302 είναι η καλύτερη επιλογή.
