Από την εισαγωγή του Lighthouse, έχουν εμφανιστεί νέες παράμετροι που σχετίζονται με την ταχύτητα σελίδας. Μία από τις πιο σημαντικές από αυτές τις παραμέτρους είναι η First Contentful Paint (FCP). Στην έκδοση Lighthouse 10, με ισχύ από τον Ιούνιο του 2024, ο αντίκτυπος του FCP στη συνολική βαθμολογία είναι 10%.
Για να υιοθετήσουμε και να κατανοήσουμε το FCP ως μέτρηση, είναι απαραίτητο πρώτα να εξετάσουμε την ψυχολογία πίσω από αυτό. Η έννοια είναι παρόμοια με το καθρέφτες εγκατεστημένοι σε ανελκυστήρες:
Για να συνοψίσουμε εν συντομία: Στο πρώτο μισό του 1900, η χρήση των ανελκυστήρων σε ψηλά κτίρια αυξήθηκε σημαντικά, αλλά τα συστήματα ανελκυστήρων ήταν πρωτόγονα σε σύγκριση με σήμερα. Ως εκ τούτου, προέκυψε η ιδέα της εγκατάστασης καθρεφτών σε ανελκυστήρες για να κάνει τον χρόνο που περνάτε στον ανελκυστήρα να φαίνεται μικρότερος.
Επιστροφή στο θέμα μας: Το σημείο που αντιληπτικά σας κάνει να περιμένετε κατά τη διάρκεια του χρόνου φόρτωσης όταν προσπαθείτε να αποκτήσετε πρόσβαση σε μια σελίδα είναι το FCP. Ο ορισμός του First Contentful Paint είναι ο χρόνος που χρειάζεται για να εμφανιστεί στο χρήστη το πρώτο κείμενο, εικόνα, μη λευκός καμβάς κ.λπ.. Η μονάδα FCP είναι δευτερόλεπτα.
Στο Lighthouse, η χρωματική κλίμακα για το FCP καθορίζεται ως εξής:
- 0-2 δευτερόλεπτα: Πράσινο => Γρήγορο
- 2-4 δευτερόλεπτα: Πορτοκαλί => Χρειάζεται Βελτίωση
- 4+ δευτερόλεπτα: Κόκκινο => Αργή
Σύμφωνα με τα δεδομένα του HTTP Archive, ο αριθμός των τοποθεσιών που μπορούν να ληφθούν υπόψη γρήγορο είναι 25%, και το 50% των υπαρχόντων τοποθεσιών ταξινομούνται ως αργοί.
Τι μπορεί να γίνει για να βελτιωθεί το FCP;
Μειώστε το χρόνο απόκρισης διακομιστή
Γενικά, αυτό μπορεί να ερμηνευθεί ως βελτιώσεις που απαιτούνται στην πλευρά του διακομιστή του διακομιστή και του λογισμικού. Για να απαριθμήσετε τα ζητήματα που επηρεάζουν αρνητικά τον χρόνο απόκρισης του διακομιστή:
- Η κοινή χρήση του διακομιστή, η διαμόρφωση (δηλαδή, οι ρυθμίσεις διακομιστή) και οι πόροι διακομιστή ενδέχεται να είναι το πρόβλημα. Η χωρητικότητα του διακομιστή σας θα πρέπει να αυξηθεί ανάλογα με την επισκεψιμότητά σας. Σε ορισμένες περιπτώσεις, τα ερωτήματα της βάσης δεδομένων που δεν έχουν γραφτεί σωστά και τα εξαιρετικά πολύπλοκα στοιχεία λογισμικού μπορούν να επηρεάσουν σοβαρά τον χρόνο απόκρισης του διακομιστή.
- Η μη χρήση CDN (Content Delivery Network) μπορεί να προκαλέσει καθυστερήσεις στην πρόσβαση στο περιεχόμενο, επηρεάζοντας το FCP. Καθώς το μέγεθος του περιεχομένου αυξάνεται, για παράδειγμα, εάν επιχειρείται να κληθεί ένα μεγάλο κινούμενο GIF ή βίντεο χωρίς CDN και ο κύριος διακομιστής βρίσκεται σε διαφορετική ήπειρο, ίσως χρειαστεί να εξετάσετε λύσεις CDN για την επίλυση του FCP.
- Η μη προβολή στατικού περιεχομένου με μια σωστή και συνεπή πολιτική προσωρινής μνήμης μπορεί να υπερφορτωθεί τον διακομιστή σας άσκοπα καθώς αυξάνεται ο αριθμός των επισκεπτών. Για παράδειγμα, εάν δεν διατηρείτε το λογότυπό σας σε μακροπρόθεσμη προσωρινή μνήμη κατά τη φόρτωσή του σε κάθε σελίδα, βλάπτετε άσκοπα τον χρόνο απόκρισης του διακομιστή σας.
- Περιττές ανακατευθύνσεις σελίδων ενώ η πρόσβαση στη σελίδα μπορεί να επηρεάσει άσκοπα το FCP σας.
Για παράδειγμα, στο παρελθόν, υπήρχαν ρυθμίσεις όπως αυτή: όταν ένας χρήστης ήθελε να εισέλθει σε έναν ιστότοπο, υπήρχε μια ανακατεύθυνση HTTP σε HTTPS, στη συνέχεια, εάν ήταν για κινητά, μια ανακατεύθυνση HTTPS σε κινητό (π.χ. https:// www στο https://m), και αν η σελίδα αφαιρέθηκε και ανακατευθυνόταν αλλού με ένα 301, ένιωθε ότι ο χρήστης περνούσε από γραφείο σε γραφείο σε μια εφορία. Αυτό είναι ένα ακραίο παράδειγμα για καλύτερη κατανόηση, αλλά αν ανακατευθύνετε μια σελίδα σε μια άλλη διεύθυνση URL με ανακατεύθυνση 301 και στη συνέχεια ανακατευθύνετε αυτήν τη σελίδα σε άλλη με 301, μπορεί να κάνετε την ίδια παράλογη ρύθμιση.
- Αν εσύ μην χρησιμοποιείτε προσύνδεση ή προαναφορά DNS Τα προθέματα όταν συνδέεστε σε υπηρεσίες τρίτων κατασκευαστών και συνδέεστε σε πολλές υπηρεσίες τρίτων, δεν κάνετε τίποτα ωφέλιμο για το FCP.
Μειώστε τους πόρους αποκλεισμού απόδοσης
Πρέπει να παραδεχτώ ότι αυτό το μεμονωμένο σημείο που γράφεται ως στοιχείο γραμμής μπορεί να πάρει μήνες για να αντιμετωπιστεί.
Για να επιτευχθεί αυτό, υπάρχει μια μέθοδος λύσης όπου όλα Το JS, το CSS και παρόμοιοι πόροι που εμποδίζουν την απόδοση σελίδας φορτώνονται μετά το χρόνο δημιουργίας της σελίδας, αλλά το αρχικά ορατό τμήμα του ιστότοπου φορτώνεται πρώτα κατά τη φόρτωση του ιστότοπου. Ωστόσο, για να γίνει αυτό, πρέπει να εξεταστούν όλοι οι πόροι JS, CSS και παρόμοιοι πόροι και να διαχωριστούν οι πιο χρονοβόρες διαδικασίες. Επιπλέον, η χρήση όσο το δυνατόν λιγότερων υπηρεσιών τρίτων συμβάλλει στη βελτιστοποίηση του FCP.
