Πώς να φορτώσετε γραμματοσειρές ιστού για να αποφύγετε προβλήματα απόδοσης και να επιταχύνετε τη φόρτωση σελίδας

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

Βλέπω πολλούς προγραμματιστές να αγνοούν αυτά τα ζητήματα ή ίσως να κάνουν τα ίδια λάθη ξανά και ξανά μόνο και μόνο επειδή «το έχουν κάνει πάντα», αλλά ως προγραμματιστές ιστοσελίδων πρέπει να είμαστε σε θέση να προσαρμοζόμαστε σε ένα συνεχώς μεταβαλλόμενο περιβάλλον.

Ήρθε η ώρα να σπάσετε αυτό το βρόχο και να ξεκινήσετε να κάνετε το σωστό το 2019. Υπάρχουν μόνο τέσσερα βήματα που πρέπει να λάβετε υπόψη κατά τη φόρτωση μιας προσαρμοσμένης γραμματοσειράς ιστού:

  • Χρησιμοποιήστε τη σωστή μορφή γραμματοσειράς
  • Προφόρτωση γραμματοσειρών
  • Χρησιμοποιήστε τη σωστή δήλωση προσώπου γραμματοσειράς
  • Αποφύγετε το αόρατο κείμενο κατά τη φόρτωση της γραμματοσειράς.

Ας αναλύσουμε αυτά τα σημεία ένα κάθε φορά.

Χρησιμοποιήστε τη σωστή μορφή γραμματοσειράς

Υπάρχουν πολλές μορφές γραμματοσειρών που μπορούν να χρησιμοποιηθούν στον Ιστό, αλλά χρειάζονται μόνο δύο μορφές εάν δεν χρειάζεται να υποστηρίξετε τον Internet Explorer (IE) 8 ή χαμηλότερη: woff και woff2 . Αυτοί είναι οι μόνοι δύο τύποι αρχείων που πρέπει να χρησιμοποιήσετε, επειδή είναι συμπιεσμένοι στη μορφή gzip από προεπιλογή (έτσι είναι πολύ μικροί), είναι βελτιστοποιημένοι για τον Ιστό και υποστηρίζονται πλήρως από το IE 9+ και όλα τα άλλα αειθαλή προγράμματα περιήγησης.

Προφόρτωση γραμματοσειρών

Όταν χρησιμοποιείτε προσαρμοσμένες γραμματοσειρές θα πρέπει να πείτε στο πρόγραμμα περιήγησης να τις προφορτώσει χρησιμοποιώντας την κατάλληλη rel=""ετικέτα και χαρακτηριστικά:

Σημειώστε ότι η χρήση της crossorigin εδώ είναι important: Χωρίς αυτό το χαρακτηριστικό, η προεγκατεστημένη γραμματοσειρά αγνοείται από το πρόγραμμα περιήγησης και πραγματοποιείται νέα ανάκτηση. Αυτό οφείλεται στο γεγονός ότι οι γραμματοσειρές αναμένεται να ληφθούν ανώνυμα από το πρόγραμμα περιήγησης και το αίτημα προφόρτωσης γίνεται ανώνυμο μόνο χρησιμοποιώντας αυτό το χαρακτηριστικό.

Στο παραπάνω παράδειγμα, τα rel="preload" as="font"χαρακτηριστικά θα ζητήσουν από το πρόγραμμα περιήγησης να ξεκινήσει τη λήψη του απαιτούμενου πόρου το συντομότερο δυνατό. Λένε επίσης στο πρόγραμμα περιήγησης ότι πρόκειται για γραμματοσειρά, οπότε μπορεί να το δώσει προτεραιότητα στην ουρά πόρων. Η χρήση των υποδείξεων προφόρτωσης θα έχει δραματική επίδραση στην απόδοση της γραμματοσειράς ιστού και στην αρχική φόρτωση σελίδας. Τα προγράμματα περιήγησης που υποστηρίζουν συμβουλές προφόρτωσης και προανάκτησης θα ξεκινήσουν τη λήψη γραμματοσειρών ιστού μόλις έχουν δει την υπόδειξη στο αρχείο HTML και δεν χρειάζεται πλέον να περιμένουν το CSS.

Μπορείτε αντ 'αυτού να χρησιμοποιήσετε το rel="prefetch"χαρακτηριστικό για να πείτε στο πρόγραμμα περιήγησης να προετοιμάσει τη λήψη των πόρων που ενδέχεται να απαιτηθούν αργότερα κατά τη φόρτωση της σελίδας ή τις ενέργειες χρήστη, οπότε θα αποδώσει χαμηλή προτεραιότητα σε αυτούς τους πόρους.

ΠΡΟΣΟΧΗ:

Εάν χρησιμοποιείτε CDN όπως το Google Fonts, βεβαιωθείτε ότι τα αρχεία γραμματοσειρών που προφορτώνετε ταιριάζουν με αυτά του CSS. Οι γραμματοσειρές μπορούν επίσης να ενημερώνονται τακτικά και εάν προφορτώνετε μια παλιά έκδοση ενώ χρησιμοποιείτε το CSS για μια νεότερη, ενδέχεται να καταλήξετε να κατεβάσετε δύο εκδόσεις της ίδιας γραμματοσειράς και να χάσετε το εύρος ζώνης των χρηστών σας. Σκεφτείτε να χρησιμοποιήσετε ??‍? instead for easier maintenance.

Correct font-face declaration

Declaring a font-face family is very simple but we must take care with certain things when we do it. Here a correct example declaring a custom font family:

@font-face { font-family: 'Custom Font'; font-weight: 400; font-style: normal; font-display: swap; /* Read next point */ unicode-range: U+000-5FF; /* Download only latin glyphs */ src: local('Custom Font'), url('/fonts/custom-font.woff2') format('woff2'), url('/fonts/custom-font.woff') format('woff');}

Here’s the Unicode range from Google Web Fundamentals.

As you can see we use only optimised fonts (woff and woff2) and we tell the browser to load only the required glyphs range (from U+000 to U+5FF), but this property doesn’t prevent browsers to download the entire font. There are also two more things to note, the local() function and the font declaration order.

The local() function allows users to use their local copy of the font if present (e.g. think about the Roboto fonts that are pre-installed on Android) instead of downloading it.

The font declaration order is also important because the browser will start fetching the resources by following the declaration order. If it supports the woff2 format it will download the font, or if it doesn’t recognise the resource format it will proceed to the next one, and so on.

If you really want to use eot and ttf fonts make sure to add them at the end of the src declaration.

Resources

  • Glyphs range generator by Eli Fitch
  • Modern Font Face generator

Avoid invisible text during font loading

Fonts are often large files that take a while to load even when gzipped. To deal with this, some browsers hide text until the font loads (the “flash of invisible text”). You can avoid the “flash” and show content to users immediately using a system font initially, then replacing it.

In the previous @font-face example you’ll notice the font-displaydeclaration. The swap value tells the browser that text using this font should be displayed immediately using a system font. Once the custom font is ready, the system font is swapped out.

If a browser does not support font-display it continues to follow its default behaviour for loading fonts.

Browser default behaviours if a font is not ready:

Edge uses a system font until the custom font is ready, then swaps out fonts.

Chrome will hide text for up to 3 seconds. If text is still not ready, it will use a system font until the custom font is ready.

Firefox will hide text for up to 3 seconds. If text is still not ready, it will use a system font until the custom font is ready.

Safari hides text until the custom font is ready.

Testing

The following links test the “standard version” against the optimised one:

  • Standard
  • Optimised

Results

Conclusion

Considering such basic optimisations will improve the general UX of your digital product. We must account for situations where the connection speed is not optimal or when people don’t have time to wait several seconds while your app/site is being completely loaded and navigable.

Such improvements, especially for large projects, are mandatory for improving overall user experience, and they really don’t require a lot of effort.

We must work together in trying to fix the web.

Follow my blog at:

Mattia Astorino

Web Developer, CSS/HTML ninja in Monza. Member of Open Source Design.equinsuocha.io