Zapobiegaj przesuwaniu układu i przebłyskom niewidocznego tekstu (FOIT) dzięki wstępnym wczytywaniu opcjonalnych czcionek

Od Chrome 83 można łączyć link rel="preload" i font-display: optional, aby całkowicie wyeliminować przesunięcia układu

Houssein Djirdeh

Dzięki optymalizacji cykli renderowania Chrome 83 eliminuje przesunięcia układu podczas wstępnego wczytywania czcionek opcjonalnych. Połączenie <link rel="preload"> z font-display: optional to najskuteczniejszy sposób na zagwarantowanie, że podczas renderowania czcionek niestandardowych nie wystąpią przesunięcia układu.

Zgodność z przeglądarką

Aktualne informacje o obsłudze w różnych przeglądarkach znajdziesz w danych MDN:

Renderowanie czcionek

Przesunięcie układu lub ponowne ułożenie elementów występuje, gdy zasób na stronie internetowej zmienia się dynamicznie, co powoduje „przesunięcie” treści. Pobieranie i renderowanie czcionek internetowych może bezpośrednio powodować przesunięcia układu na 2 sposoby:

  • Czcionka rezerwowa jest zastępowana nową czcionką („miganie tekstu bez stylu”).
  • „Niewidoczny” tekst jest wyświetlany, dopóki nowa czcionka nie zostanie wyrenderowana na stronie („miganie niewidocznego tekstu”).

Właściwość CSS font-display umożliwia modyfikowanie sposobu renderowania czcionek niestandardowych za pomocą różnych obsługiwanych wartości (auto, block, swap, fallback, i optional). Wybór wartości zależy od preferowanego sposobu działania w przypadku czcionek wczytywanych asynchronicznie. Jednak do tej pory każda z tych obsługiwanych wartości mogła powodować ponowne ułożenie elementów na jeden z 2 sposobów wymienionych powyżej.

Czcionki opcjonalne

Właściwość font-display używa osi czasu z 3 okresami do obsługi czcionek, które trzeba pobrać, zanim będzie można je wyrenderować:

  • Block: renderuj „niewidoczny” tekst, ale przełącz się na czcionkę internetową, gdy tylko zakończy się jej wczytywanie.
  • Swap: renderuj tekst za pomocą rezerwowej czcionki systemowej, ale przełącz się na czcionkę internetową, gdy tylko zakończy się jej wczytywanie.
  • Fail: renderuj tekst za pomocą rezerwowej czcionki systemowej.

Wcześniej czcionki oznaczone jako font-display: optional miały 100-milisekundowy okres blokowania i nie miały okresu zamiany. Oznacza to, że „niewidoczny” tekst jest wyświetlany przez bardzo krótki czas, zanim zostanie zastąpiony czcionką rezerwową. Jeśli czcionka nie zostanie pobrana w ciągu 100 ms, używana jest czcionka rezerwowa i nie następuje zamiana.

Diagram przedstawiający nieudaną próbę wczytania czcionki.
Poprzednie działanie font-display: optional w Chrome, gdy czcionka zostanie pobrana po 100-milisekundowym okresie blokowania

Jeśli jednak czcionka zostanie pobrana przed upływem 100-milisekundowego okresu blokowania, na stronie zostanie wyrenderowana i użyta czcionka niestandardowa.

Diagram przedstawia poprzednie opcjonalne działanie czcionki, gdy wczytuje się ona na czas.
Poprzednie działanie font-display: optional w Chrome, gdy czcionka zostanie pobrana przed 100-milisekundowym okresem blokowania

W obu przypadkach Chrome ponownie renderuje stronę 2 razy niezależnie od tego, czy używana jest czcionka rezerwowa, czy też czcionka niestandardowa zostanie wczytana na czas. Powoduje to lekkie miganie niewidocznego tekstu, a w przypadku renderowania nowej czcionki – przesunięcie układu, które przesuwa część treści strony. Dzieje się tak nawet wtedy, gdy czcionka jest przechowywana w pamięci podręcznej dysku przeglądarki i może zostać wczytana na długo przed zakończeniem okresu blokowania.

Optymalizacje wprowadziliśmy w Chrome 83, aby całkowicie usunąć pierwszy cykl renderowania w przypadku czcionek opcjonalnych wstępnie wczytywanych za pomocą <link rel="preload'>. Zamiast tego renderowanie jest blokowane do momentu, aż czcionka niestandardowa zostanie wczytana lub upłynie określony czas. Ten limit czasu jest obecnie ustawiony na 100 ms, ale w najbliższej przyszłości może się zmienić, aby zoptymalizować wydajność.

Diagram przedstawiający nowe zachowanie wstępnie wczytanej opcjonalnej czcionki, gdy nie można jej wczytać.
Nowe działanie font-display: optional w Chrome, gdy czcionki są wstępnie wczytywane, a czcionka zostanie pobrana po 100-milisekundowym okresie blokowania (bez migania niewidocznego tekstu)
Diagram przedstawiający nowe zachowanie wstępnie wczytanej opcjonalnej czcionki, gdy czcionka wczytuje się na czas.
Nowe działanie font-display: optional w Chrome, gdy czcionki są wstępnie wczytywane, a czcionka zostanie pobrana przed 100-milisekundowym okresie blokowania (bez migania niewidocznego tekstu)

Wstępne wczytywanie czcionek opcjonalnych w Chrome eliminuje możliwość przesunięcia układu i migania tekstu bez stylu. Jest to zgodne z wymaganym działaniem określonym w module CSS Fonts Module Level 4, w którym czcionki opcjonalne nigdy nie powinny powodować ponownego ułożenia elementów, a agenci użytkownika mogą zamiast tego opóźnić renderowanie na odpowiedni czas.

Chociaż nie jest konieczne wstępne wczytywanie czcionki opcjonalnej, znacznie zwiększa to szansę na jej wczytanie przed pierwszym cyklem renderowania, zwłaszcza jeśli nie jest jeszcze przechowywana w pamięci podręcznej przeglądarki.

Podsumowanie

Zespół Chrome chętnie pozna Twoje opinie na temat wstępnego wczytywania czcionek opcjonalnych z tymi nowymi optymalizacjami. Jeśli napotkasz jakieś problemy lub chcesz zaproponować nowe funkcje, zgłoś problem.