Η χρήση γραμματοσειρών είναι διαδεδομένη στις περισσότερες ιστοσελίδες και συχνά περιλαμβάνει σφάλματα. Πολλά από αυτά τα σφάλματα επηρεάζουν αρνητικά τον προϋπολογισμό απόδοσης ιστού. Αυτό το άρθρο στοχεύει να παρέχει πληροφορίες σχετικά με τη χρήση γραμματοσειρών ιστού και να βοηθήσει στη βελτίωση της απόδοσής σας στον ιστό.
Όπως φαίνεται στην ιεραρχία που εφαρμόζεται κατά την απόδοση οποιασδήποτε ιστοσελίδας, τα στοιχεία γραμματοσειράς μπορούν να καθυστερήσουν την απόδοση άλλων στοιχείων μέχρι να φορτωθούν. Η σωστή διαχείριση αυτής της καθυστέρησης είναι σημαντική τόσο για την αθροιστική μετατόπιση διάταξης (CLS) όσο και για την αντίληψη του χρήστη.
Το πρόβλημα με τη φόρτωση γραμματοσειρών
Μέχρι να φορτωθούν οι γραμματοσειρές της σελίδας, η ορατότητα των γραμματοσειρών κατά τη διαδικασία απόδοσης HTML και CSS διαφέρει από πρόγραμμα περιήγησης σε πρόγραμμα περιήγησης. Ακολουθεί μια περίληψη του τρόπου με τον οποίο διαφορετικά προγράμματα περιήγησης χειρίζονται αυτήν την κατάσταση:
| πρόγραμμα περιήγησης | Προεπιλεγμένη συμπεριφορά εάν η γραμματοσειρά δεν είναι έτοιμη… |
|---|---|
| άκρη | Χρησιμοποιεί μια γραμματοσειρά συστήματος μέχρι να είναι έτοιμη η γραμματοσειρά. Εναλλάσσει τη γραμματοσειρά. |
| Chrome | Θα αποκρύψει το κείμενο για έως και 3 δευτερόλεπτα. Εάν το κείμενο δεν είναι ακόμα έτοιμο, χρησιμοποιεί μια γραμματοσειρά συστήματος μέχρι να είναι έτοιμη η γραμματοσειρά. Εναλλάσσει τη γραμματοσειρά. |
| Firefox | Θα αποκρύψει το κείμενο για έως και 3 δευτερόλεπτα. Εάν το κείμενο δεν είναι ακόμα έτοιμο, χρησιμοποιεί μια γραμματοσειρά συστήματος μέχρι να είναι έτοιμη η γραμματοσειρά. Εναλλάσσει τη γραμματοσειρά. |
| Safari | Αποκρύπτει το κείμενο μέχρι να είναι έτοιμη η γραμματοσειρά. |
Για να αντιμετωπίσετε αυτό το ζήτημα χωρίς να βασίζεστε σχετικά με τη συμπεριφορά του προγράμματος περιήγησης, εισήχθη η παράμετρος font-display. Επί του παρόντος, το 92% των προγραμμάτων περιήγησης υποστηρίζει την παράμετρο εμφάνισης γραμματοσειράς.
Τι κάνει το Font-Display;
Κατά τη διαδικασία φόρτωσης της σελίδας, η εμφάνιση των γραμματοσειρών μπορεί να διαφέρει έως ότου φορτωθούν πλήρως, ανάλογα με το πρόγραμμα περιήγησης. Για παράδειγμα, ορισμένες εκδόσεις του προγράμματος περιήγησης Safari αποκρύπτουν το κείμενο μέχρι να φορτωθεί η γραμματοσειρά. ο font-display: swap Η παράμετρος CSS τυποποιεί αυτή τη συμπεριφορά εμφανίζοντας το κείμενο χρησιμοποιώντας μια γραμματοσειρά συστήματος μέχρι να φορτωθούν τα αρχεία γραμματοσειράς. Μόλις φορτωθούν οι γραμματοσειρές, η γραμματοσειρά συστήματος αντικαθίσταται με την προβλεπόμενη γραμματοσειρά. Ακολουθεί ένα παράδειγμα χρήσης:
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
font-display: swap;
}Προφόρτωση γραμματοσειρών
Χρησιμοποιώντας για να φορτώσετε γραμματοσειρές πριν από την κρίσιμη διαδρομή απόδοσης μπορεί να αποτρέψει κενά κατά τη φόρτωση των γραμματοσειρών.
BONUS: Προσέγγιση βιομηχανίας στη χρήση γραμματοσειρών
Σύμφωνα με τα δεδομένα της SimilarTech, ας ρίξουμε μια ματιά σε μια σημαντική τάση και στιγμιότυπο του κόσμου του διαδικτύου. Το πρώτο γράφημα παρακάτω δείχνει τη χρήση της γραμματοσειράς στις κορυφαίες 10,000 σελίδες και το δεύτερο γράφημα δείχνει τη χρήση γραμματοσειράς στους 100,000 κορυφαίους ιστότοπους. Ας εξετάσουμε πρώτα αυτά τα γραφήματα:
Υπάρχει μια διαφορά 5% στη χρήση του Google Font και του Font Awesome μεταξύ των κορυφαίων 10,000 τοποθεσιών και των κορυφαίων 100,000 ιστότοπων. Αυτό μας λέει ότι οι 10,000 κορυφαίοι ιστότοποι έχουν βελτιστοποιήσει τη χρήση της γραμματοσειράς τους. Συνιστούμε να το εξετάσετε ως ένα αξιοσημείωτο θέμα. Σκεφτείτε πώς μπορείτε να εφαρμόσετε γραμματοσειρές Ιστού με τις δικές σας λύσεις.
BONUS 2: Στατιστικά χρήσης του Google Font και του Font Awesome
Αναφερόμενοι στο πρώτο μπόνους, προτείνουμε να εξετάσετε τα δύο γραφήματα που δείχνουν την αριθμητική έκταση των βιβλιοθηκών γραμματοσειρών που χρησιμοποιούνται περισσότερο. Ο αριθμός των μοναδικών τομέων εδώ υπερβαίνει τα εκατομμύρια, και αυτά τα εκατομμύρια αντιπροσωπεύουν τους ανταγωνιστές SEO σας. Η καλύτερη και βέλτιστη χρήση αυτών των βιβλιοθηκών από άλλες μπορεί να σας βοηθήσει να ξεχωρίσετε.
Ακολουθώντας αυτές τις συμβουλές και βελτιστοποιώντας τη χρήση της γραμματοσειράς σας, μπορείτε να βελτιώσετε σημαντικά την απόδοση ιστού και την εμπειρία χρήστη σας.
