8 strategii ładowania czcionek w celu poprawy podstawowych funkcji internetowych (2022)

Pierwotnie została opublikowana w październiku 2021 r. i została zaktualizowana pod kątem kompleksowości w październiku 2022 r.

Kiedy mówimy o wydajności sieci, a zwłaszcza o Core Web Vitals (CWV), wydaje się, że techniki optymalizacji obrazu i JavaScript skradły uwagę.

Jest jednak inny gracz, którego nie należy przeoczyć - czcionki internetowe.

Biorąc pod uwagę, że często są to duże pliki, których wczytywanie zajmuje trochę czasu, a nawet mogą blokować renderowanie tekstu, optymalizacja czcionek jest kluczowym elementem ogólnej strategii wydajności.

Typografia ma również fundamentalne znaczenie dla dobrego projektu, brandingu, czytelności i dostępności. A czcionki internetowe to te, które umożliwiają to wszystko.

W kolejnych wierszach zobaczymy, jak czcionki wpływają na Twoje podstawowe wskaźniki internetowe i jak możesz zoptymalizować ich ładowanie.

Zaczynajmy!

Co powinieneś wiedzieć o ładowaniu czcionek (w skrócie)

Nie ma jednej techniki optymalizacji czcionek, która rozwiąże wszystkie Twoje problemy.

To może być trochę surowe, ale taka jest prawda. Ładowanie czcionek od lat jest dużym winowajcą wydajności sieci. Wszystkie obecne strategie udostępniania czcionek internetowych mają poważne wady.

Od dłuższego czasu, jeśli chciałeś obsługiwać czcionki internetowe, musiałeś wybierać między:

• Flash of Invisible Text (FOIT) , w którym tekst jest ukryty do momentu pobrania czcionki.

Lub

• Flash of Unstyled Text (FOUT) początkowo używa rezerwowej czcionki systemowej, a następnie uaktualnia ją do czcionki internetowej podczas pobierania.

Mówiąc prościej, możesz sprawić, że odwiedzający będą gapić się na pusty ekran lub zaryzykować nieoczekiwane zmiany układu witryny.

Oba rozwiązania są nie do przyjęcia w dzisiejszym świecie Core Web Vitals.

Zasadniczo sytuacja ładowania czcionek była:

Następnie ogłoszono właściwość font-display .

font-display informuje przeglądarkę, jak powinna postępować z renderowaniem tekstu, gdy powiązana czcionka internetowa nie została załadowana. Jest definiowany według kroju czcionki .

Przeglądarki mają domyślne zachowanie ładowania czcionek podczas renderowania tekstu przy użyciu rodziny czcionek, która nie jest jeszcze dostępna:

Źródło: web.dev

Proces pobierania czcionek dzieli się na trzy główne okresy:

• Pierwszy okres to okres bloku czcionki . Jeśli krój czcionki nie zostanie załadowany w tym okresie, każdy element próbujący go użyć musi zamiast tego renderować z niewidoczną rezerwową krój czcionki (FOIT). Jeśli krój czcionki zostanie pomyślnie załadowany w pierwszym okresie, będzie używany normalnie.
• Okres wymiany czcionek następuje natychmiast po okresie bloku czcionki. Jeśli czcionka nie zostanie załadowana w tym okresie, każdy element próbujący jej użyć musi zamiast tego renderować z czcionką rezerwową (systemową) (FOUT). Jeśli krój czcionki zostanie pomyślnie załadowany w tym okresie, czcionka będzie używana normalnie.
• Okres awarii czcionki następuje natychmiast po okresie wymiany czcionek. Jeśli czcionka nie jest jeszcze załadowana w tym okresie, jest oznaczana jako nieudane ładowanie, co powoduje normalną awarię czcionki.

Zrozumienie tych okresów pozwoli na bardziej efektywne wykorzystanie wartości wyświetlanych czcionek :

• wyświetlanie czcionek: auto używa dowolnej strategii wyświetlania czcionek używanej przez klienta użytkownika;
• wyświetlanie czcionek: blok daje czcionce 3 s (w większości przypadków) krótki okres blokowania i nieskończony okres wymiany. Innymi słowy, zawsze zamienia czcionkę internetową podczas ładowania. Użyj tej wartości, gdy czcionka jest ważna dla strony;
• wyświetlanie czcionek: swap pokazuje czcionkę zaraz po załadowaniu. Podobnie jak blok, ta wartość powinna być używana tylko wtedy, gdy renderowanie tekstu w określonej czcionce jest ważne dla strony;
• wyświetlanie czcionek: rezerwa ukrywa tekst przez maksymalnie 100 ms, a następnie zamienia czcionkę internetową tylko wtedy, gdy zostanie załadowana w ciągu trzech sekund. Jeśli czcionka nie zostanie załadowana podczas trzysekundowego okresu wymiany, rezerwa zostanie użyta przez resztę życia strony;
• wyświetlanie czcionek: opcjonalnie daje czcionce minimalny okres blokowania 100 ms. Następnie, jeśli czcionka nadal jest niedostępna, pozostaje z rezerwą i nigdy się nie zamienia. Zasadniczo opcjonalna wartość pozostawia przeglądarce decyzję, czy zainicjować pobieranie czcionki, czy nie.

Źródło: Jak uniknąć przesunięć układu spowodowanych czcionkami internetowymi

Przy podejmowaniu decyzji, której wartości wyświetlania czcionki użyć w swojej witrynie, dobrą zasadą jest następująca rekomendacja Google:

• Jeśli wydajność jest najwyższym priorytetem : Użyj wyświetlania czcionek: opcjonalnie. Jest to najbardziej „wydajne” podejście: renderowanie tekstu jest opóźnione nie dłużej niż 100 ms i jest pewność, że nie wystąpią żadne przesunięcia układu związane z zamianą czcionek.
• Jeśli wyświetlanie tekstu w czcionce internetowej jest najwyższym priorytetem : Użyj wyświetlania czcionek: zamień, ale upewnij się, że czcionka jest dostarczana na tyle wcześnie, aby nie powodowała zmiany układu”.

Jak powiedziałem wcześniej, nadal nie ma kompletnego rozwiązania, które rozwiązuje wszystkie możliwe problemy z czcionkami związane z ładowaniem czcionek. Chociaż sam Google zaleca te kroki, nie oznacza to, że są one wolne od ryzyka.

W rzeczywistości niektóre wartości wyświetlanej czcionki mogą pogorszyć Twoje kluczowe wskaźniki internetowe.

W jaki sposób czcionki wpływają na kluczowe wskaźniki internetowe (CLS i LCP)

Jeśli znasz podstawowe wskaźniki internetowe, prawdopodobnie wiesz, że niektóre metody ładowania czcionek mogą im zaszkodzić.

Na przykład, jeśli czcionka nie została załadowana (FOIT), przeglądarki zazwyczaj opóźniają renderowanie tekstu ( font-display: block ). W niektórych przypadkach opóźnia to pierwsze wyrenderowanie treści (FCP) i największe wyrenderowanie treści (LCP).

Z drugiej strony praktyka zamiany czcionek jest dobrze znana z powodowania nieoczekiwanych zmian układu, które są bezpośrednio związane z metryką Cumulative Layout Shift (CLS).

Przyjrzyjmy się teraz sprawdzonym metodom wczytywania czcionek, aby kontrolować metryki CWV.

Unikaj zmian układu podczas ładowania czcionek (CLS)

Zbiorcze przesunięcie układu mierzy znaczenie nieoczekiwanych zmian układu na stronie. Nieoczekiwane zmiany układu występują, gdy zawartość strony porusza się bez udziału użytkownika lub wcześniejszego powiadomienia:

Dwie rzeczy mogą powodować zmiany układu w procesie pobierania i renderowania:

• Czcionka zastępcza jest zamieniana na nową (FOUT);
• Tekst „niewidoczny” jest wyświetlany do czasu renderowania czcionki (FOIT).

Aby zaatakować te problemy, możesz zastosować niektóre z następujących najlepszych praktyk:

1) Połącz link rel = wstępne ładowanie i wyświetlanie czcionki: opcjonalnie

Opcja łączenia linku rel=preload z wyświetlaniem czcionek: opcjonalna jest dostępna od wersji Chrome 83 i mówi się, że jest to pewny sposób na uniknięcie zmian układu.

Jak wspomniano wcześniej, gdy czcionka korzysta z opcji wyświetlania czcionki: wartość opcjonalna , ma ona 100 ms do pobrania i wykonania, zanim przeglądarka powróci do trybu awaryjnego.

W przypadku, gdy czcionka zostanie pobrana przed znacznikiem 100 ms, na stronie zostanie użyta czcionka niestandardowa.

Prowadzi to do ponownego renderowania strony przez przeglądarkę, co z kolei powoduje lekkie migotanie niewidocznego tekstu.

W Chrome 83 pierwszy cykl renderowania jest usuwany dla opcjonalnych czcionek korzystających z linku rel=preload i jest zastępowany okresem bloku (100 ms) do momentu załadowania niestandardowej czcionki lub zakończenia okresu.

Teraz proces ładowania czcionki wygląda tak, gdy czcionka jest wstępnie ładowana i pobierana po okresie bloku 100 ms:

I tak, gdy czcionka jest wstępnie załadowana i pobrana przed oznaczeniem 100 ms:

Ta technika w dużym stopniu rozwiązuje problem z nieoczekiwanymi przesunięciami układu i flashowaniem niestylowanych tekstów.

2) Użyj regulacji rozmiaru

Innym problemem związanym z zamianą czcionek jest to, że czasami, gdy ładowana jest czcionka internetowa, przesuwa całą stronę, ponieważ ma nieco inny rozmiar wysokości pola.

Umieszczenie deskryptora dopasowania rozmiaru w regule kroju czcionki doprowadzi do minimalnych zmian wizualnych i prawie bezproblemowej zamiany.

Sprawdź przewodnik Google na temat dostosowywania rozmiaru CSS dla @font-face, aby dowiedzieć się, jak możesz go zaimplementować.

3) Dopasowanie czcionki zastępczej do czcionki internetowej

Aby zredukować efekt zamiany, możesz spróbować, aby czcionka zastępcza i czcionka internetowa wyglądały tak samo, jak to możliwe. Oczywiście nie można całkowicie uniknąć zmian, ale można spróbować zmniejszyć ich wpływ, aby nie zaszkodziły tak bardzo wrażeniach użytkownika.

Aplikacja Font Style Matcher autorstwa Moniki Dinculescu to dobrze znane narzędzie do dopasowywania czcionek.

Umożliwia nałożenie tego samego tekstu dwoma różnymi czcionkami, aby zobaczyć, jak się różnią. Następnie możesz dostosować ich ustawienia czcionek, aby były bardziej wyrównane.

Niestety, jak każda inna technika optymalizacji ładowania czcionek, wiąże się z ryzykiem i przeszkodami.

Problem z dopasowaniem stylów czcionek polega na tym, że nie można zastosować tych stylów CSS tylko do czcionek zastępczych, więc musisz użyć JavaScript i interfejsu API FontFace.load, aby zastosować te różnice w stylach podczas ładowania czcionek internetowych.

W swoim wykładzie z 2018 roku Zach Leatherman szczegółowo wyjaśnia tę technikę:

Upewnij się, że czcionki ładują się tak szybko, jak to możliwe (LCP i FCP)

Jeśli chodzi o ładowanie czcionek i ulepszanie metryki największej zawartości, techniki, przez które przejdziemy, są nieco bardziej ogólne.

LCP mierzy czas potrzebny do załadowania największego elementu treści powyżej przewinięcia (np. tekst, obraz). Wszystko poniżej 2,5 s jest uważane za dobry czas LCP:

Inną metryką, która nie jest częścią CWV, ale na którą może mieć wpływ ładowanie plików ciężkich czcionek, jest First Contentful Paint (FCP).

FCP mierzy czas, w którym przeglądarka wizualizuje pierwszy element zawartości DOM (np. blok tekstu, obraz, SVG, niepusty element kanwy) na stronie.

Oba wskaźniki mierzą, jak szybko Twoja witryna wyświetla elementy powyższej części strony widocznej na ekranie, które odgrywają ogromną rolę w pierwszych wrażeniach odwiedzających.

Jeśli przez dłuższy czas wpatrują się w pusty ekran (FCP), nie byłoby to wspaniałe doświadczenie użytkownika. To samo dotyczy zbyt długiego oczekiwania na wyrenderowanie największego/bohatera elementu (LCP).

Optymalizacja czcionek internetowych to jeden ze sposobów poprawy postrzeganej wydajności witryny i zagwarantowania lepszego doświadczenia użytkownika.

Oto kilka technik, które możesz wypróbować:

1) Skompresuj czcionki

Aby zrozumieć, jak działa kompresja czcionek, musisz znać anatomię czcionki internetowej.

Czcionka internetowa to zbiór glifów, a każdy glif to kształt wektorowy opisujący literę lub symbol. Chociaż poszczególne glify są różne, zawierają wiele podobnych informacji, które można skompresować.

Aby móc zastosować poprawną kompresję, musisz najpierw poznać różne formaty czcionek:

• Wbudowany OpenType (EOT) — może być obsługiwany przez stare przeglądarki IE (poniżej I9). Domyślnie nieskompresowane. Do tej czcionki można zastosować kompresję GZIP.
• TrueType (TTF) — może być obsługiwany w starszych przeglądarkach z systemem Android (poniżej 4.4). Domyślnie nieskompresowane. Do tej czcionki można zastosować kompresję GZIP.
• Web Open Font Format (WOFF) — może być obsługiwany w większości przeglądarek. Posiada wbudowaną kompresję.
• Web Open Font Format 2 (WOFF 2) — może być podawany do przeglądarek, które go obsługują. Wykorzystuje niestandardowe algorytmy kompresji, aby zapewnić zmniejszenie rozmiaru pliku o ~30% w porównaniu z innymi formatami.

Następnie możesz zastosować kompresję GZIP (w razie potrzeby), korzystając z narzędzia online lub dokonując konfiguracji serwera.

2) Czcionki wbudowane

Ogólnie czcionki są przechowywane w zewnętrznym arkuszu stylów CSS. Aby użyć arkusza stylów, w tagu head znacznika HTML umieszczany jest link w następujący sposób:

Jednak uruchamianie zewnętrznych plików CSS jest bardziej czasochłonne, ponieważ przeglądarka musi najpierw zlokalizować, a następnie pobrać plik.

Aby przyspieszyć proces ładowania czcionek, możesz wstawić deklaracje czcionek i inne krytyczne style w tagu head głównego dokumentu, zamiast przechowywać je w zewnętrznym arkuszu stylów:

Pozwoli to przeglądarce szybciej zlokalizować i zacząć renderować czcionkę, ponieważ nie będzie musiała czekać na pobranie zewnętrznego arkusza stylów.

3) Upewnij się, że twoje czcionki są pobierane szybko

Wydaje się, że to niekończąca się debata, jeśli chodzi o wybór między czcionkami samoobsługowymi lub poleganiem na stronach trzecich.

Chociaż czcionki internetowe są świetną opcją samoobsługową, ponieważ są zasobami statycznymi, które nie są regularnie aktualizowane, poleganie na zasobach stron trzecich również nie jest złym rozwiązaniem.

W rzeczywistości, Web Almanac wykrył, że niektóre witryny korzystające z czcionek innych firm renderowały się szybciej niż witryny korzystające z czcionek własnych:

Źródło: Archiwum HTTP

Pod koniec dnia najważniejsze jest to, jak szybko pobierane i renderowane są Twoje czcionki? I przez większość czasu odpowiedzi nie zależą od twojego podejścia do hostingu, ale raczej od tego, czy masz te trzy rzeczy na miejscu, czy nie:

• Sieć dostarczania treści (CDN)
• HTTP/2
• Polityka buforowania w sieci

Więc zamiast tracić czas na pytania typu „Czy powinienem samodzielnie hostować swoje czcionki internetowe, czy nie?”, upewnij się, że masz skonfigurowane ważniejsze elementy.

4) Wstępnie połącz się z zasobami stron trzecich

Inną techniką, która pozwoli na szybkie ładowanie czcionek, jest użycie linku rel=preconnect .

Użyj wskazówki dotyczącej zasobu link rel=preconnect , aby nawiązać wczesne połączenia ze źródłem innej firmy.

Dodanie linku rel=preconnect informuje przeglądarkę o zamiarze nawiązania połączenia z inną domeną przez Twoją stronę i że chcesz, aby proces rozpoczął się jak najszybciej. Zasoby ładują się szybciej, ponieważ proces konfiguracji został już zakończony, zanim przeglądarka ich zażąda.

Wskazówki dotyczące zasobów należy umieścić w tagu head dokumentu.

5) Podzbiór czcionek

Wracając do faktu, że czcionka internetowa jest zbiorem glifów, jedną rzeczą, którą musisz wiedzieć, jest to, że niektóre czcionki mogą zawierać tysiące glifów. Prawda jest taka, że ​​Twoja witryna nie wykorzystuje ich wszystkich.

Ale…

Przeglądarka nadal musi je pobrać, co może prowadzić do wolniejszego czasu ładowania!

Wprowadź podzestaw czcionki.

Podzbiór czcionek oznacza przycięcie czcionek tylko do glifów, których używasz w swojej witrynie. Tworzenie podzbiorów może przynieść ogromne oszczędności i prowadzić do szybszego ładowania czcionek i lepszej ogólnej wydajności.

Jednym ze sposobów, aby to zrobić, jest użycie fontTools, który pozwala na podzbiór czcionek według arbitralnych list znaków. Ale aby zrobić to skutecznie i skutecznie, musisz zbudować solidny proces, aby uzyskać wszystkie znaki, których używasz na swoich stronach internetowych, co może nie być najłatwiejszym zadaniem.

Wkrótce: Po miesiącach ciężkiej pracy jesteśmy bliscy udostępnienia naszej własnej funkcji tworzenia podzbiorów czcionek. Umożliwi to użytkownikom NitroPack automatyczne podgrupowanie czcionek i masowe zmniejszenie ich rozmiarów bez uszczerbku dla projektu lub wydajności.

Jak NitroPack może zoptymalizować ładowanie czcionek i kluczowe wskaźniki internetowe?

Poprawa wydajności sieci może wymagać dużo pracy i bólu głowy. Dlatego korzystanie z narzędzi i usług może być naprawdę pomocne.

Na przykład NitroPack zawiera wszelkiego rodzaju różne funkcje, które pozwolą Ci zaoszczędzić dużo czasu podczas optymalizacji czcionek:

• Globalny CDN
• Kompresja GZIP i Brotli
• Zgodność z HTTP/2
• Odroczone ładowanie czcionek
• Krytyczny CSS

Ponadto NitroPack umożliwia skonfigurowanie domyślnego zachowania renderowania czcionek.

W przypadku użytkowników trybu ręcznego istnieje możliwość zastąpienia tego zachowania w „Ustawieniach zaawansowanych”:

Ponadto w „Ustawieniach zaawansowanych” znajdziesz również opcję optymalizacji dostarczania CSS:

Nieustannie testujemy również różne konfiguracje czcionek, aby zobaczyć ich wpływ na podstawowe wskaźniki internetowe i znaleźć najlepsze rozwiązanie. W rzeczywistości ten proces nieustannych eksperymentów, wraz z pomocą naszych Speed ​​Insiders, pozwala nam oferować naszym klientom optymalne wyniki CWV:

A jeśli zdecydujesz się zostać częścią społeczności NitroPack, powinieneś wiedzieć, że konfiguracja zajmuje nie więcej niż 5 minut, a możesz wypróbować naszą usługę z darmowym planem (nie jest wymagane CC).