Η τυπογραφία είναι η «φωνή» του design σας, και τα Google Fonts είναι η πιο δημοφιλής επιλογή για να δώσετε χαρακτήρα σε μια ιστοσελίδα. Ωστόσο, υπάρχει ένα τίμημα: κάθε φορά που ένας χρήστης επισκέπτεται το site σας, ο browser του πρέπει να κάνει αιτήματα (requests) στους servers της Google για να «κατεβάσει» τις γραμματοσειρές. Αυτό προσθέτει πολύτιμα χιλιοστά του δευτερολέπτου στην καθυστέρηση φόρτωσης και μπορεί να επηρεάσει αρνητικά το First Contentful Paint (FCP). Η σωστή βελτιστοποίηση των γραμματοσειρών είναι το πρώτο βήμα για ένα ταχύτατο site.
Το πρόβλημα των εξωτερικών κλήσεων και το GDPR
Πέρα από την ταχύτητα, η χρήση των Google Fonts απευθείας από τους servers της Google εγείρει και ζητήματα GDPR στην Ευρώπη, καθώς η IP του χρήστη μοιράζεται με την Google χωρίς ρητή συγκατάθεση. Η λύση και στα δύο προβλήματα (ταχύτητα και ιδιωτικότητα) είναι μία: η τοπική φιλοξενία των γραμματοσειρών (Local Hosting).
Βήματα Βελτιστοποίησης
- Τοπική Φιλοξενία (The Local Way): Αντί να αφήνετε το Divi να καλεί τις γραμματοσειρές από την Google, κατεβάστε τις και ανεβάστε τις στο site σας. Στο Divi, μπορείτε να το κάνετε εύκολα από το Module ρυθμίσεων τυπογραφίας, πατώντας "Upload". Αυτό καταργεί τις εξωτερικές κλήσεις και επιταχύνει τη φόρτωση.
- Χρήση του font-display: swap: Αυτή η ρύθμιση λέει στον browser: «Δείξε αμέσως μια απλή γραμματοσειρά συστήματος μέχρι να φορτώσει η καλλιτεχνική». Έτσι, ο χρήστης δεν βλέπει ποτέ λευκή οθόνη ή κενά σημεία. Το Divi πλέον περιλαμβάνει αυτή τη ρύθμιση στις επιλογές του (Theme Options > Performance).
- Περιορισμός Βαρών και Στυλ: Μην φορτώνετε όλα τα βάρη (Light, Regular, Bold, Extra Bold, Italic). Επιλέξτε μόνο αυτά που πραγματικά χρησιμοποιείτε (συνήθως 400 και 700). Κάθε επιπλέον βάρος είναι ένα επιπλέον αρχείο που πρέπει να φορτωθεί.
- Plugins για Αυτοματοποίηση: Αν δεν θέλετε να το κάνετε χειροκίνητα, το plugin OMGF (Optimize My Google Fonts) κάνει όλη τη δουλειά αυτόματα: σαρώνει το site, κατεβάζει τις γραμματοσειρές τοπικά και διορθώνει τον κώδικα.
Η βελτιστοποίηση των γραμματοσειρών είναι μια «αόρατη» αλλά κρίσιμη παρέμβαση. Μειώνοντας τα εξωτερικά αιτήματα, προσφέρετε μια πιο ομαλή εμπειρία στον χρήστη και βοηθάτε το site σας να περάσει τα τεστ ταχύτητας της Google με επιτυχία.
