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

Począwszy od Chrome 83, atrybuty linków rel="preload" i font-display: opcjonalne można połączyć, aby całkowicie usunąć zacinanie się układu.

Houssein Djirdeh

Dzięki optymalizacji cykli renderowania Chrome 83 eliminuje przesunięcie układu podczas wstępnego wczytywania opcjonalnych czcionek. Połączenie atrybutów <link rel="preload"> z font-display: optional to najskuteczniejszy sposób zagwarantowania poprawnego układu podczas renderowania czcionek niestandardowych.

Zgodność z przeglądarką

Sprawdź dane MDN, aby uzyskać aktualne informacje o obsłudze różnych przeglądarek:

Renderowanie czcionek

Przesuwanie układu, czyli przekazywania układu, ma miejsce, gdy zasób na stronie internetowej zmienia się dynamicznie, powodując „przesunięcie” treści. Pobieranie i renderowanie czcionek internetowych może bezpośrednio spowodować przesunięcie układu na 2 sposoby:

  • Czcionka zastępcza jest zastąpiona nową czcionką („migracja tekstu bez stylu”).
  • Tekst „niewidoczny” jest wyświetlany do czasu wyrenderowania nowej czcionki na stronie („przebłysk niewidocznego tekstu”)

Właściwość CSS font-display umożliwia zmianę działania czcionek niestandardowych za pomocą zakresu różnych obsługiwanych wartości (auto, block, swap, fallback i optional). Wybór wartości zależy od preferowanego działania czcionek wczytywanych asynchronicznie. Jednak do tej pory każda z tych obsługiwanych wartości może aktywować przekładanie na jeden z 2 sposobów wymienionych powyżej.

Opcjonalne czcionki

Właściwość font-display obsługuje 3 kropki na potrzeby obsługi czcionek, które trzeba pobrać przed wyrenderowaniem:

  • Zablokuj:powoduje renderowanie „niewidocznego” tekstu, ale po zakończeniu wczytywania przełącz się na czcionkę internetową.
  • Zamień: renderuj tekst z użyciem zastępczej czcionki systemowej, ale przełącz się na czcionkę internetową zaraz po zakończeniu ładowania.
  • Niepowodzenie: renderuj tekst przy użyciu zastępczej czcionki systemowej.

Wcześniej w przypadku czcionek oznaczonych za pomocą atrybutu font-display: optional okres blokady wynosił 100 ms i nie było okresu wymiany. Oznacza to, że „niewidoczny” tekst jest wyświetlany bardzo krótko przed przełączeniem na czcionkę zastępczą. Jeśli czcionka nie zostanie pobrana w ciągu 100 ms, zostanie użyta czcionka zastępcza. Zmiana nie zostanie wykonana.

Diagram przedstawiający poprzednie opcjonalne zachowanie czcionki, gdy czcionka nie załadowała się
Poprzednie działanie font-display: optional w Chrome po pobraniu czcionki po 100-msowym okresie blokowania

Jeśli jednak czcionka zostanie pobrana przed zakończeniem 100-sekundowego okresu blokowania, czcionka niestandardowa zostanie wyrenderowana i będzie używana na stronie.

Diagram przedstawiający poprzednie opcjonalne zachowanie czcionki podczas wczytywania czcionki w danym czasie
Poprzednie działanie font-display: optional w Chrome po pobraniu czcionki przed okresem blokowania 100 ms

Chrome ponownie renderuje stronę dwukrotnie w obu przypadkach, niezależnie od tego, czy zostanie użyta czcionka zastępcza, czy też czcionka niestandardowa zostanie wczytana w odpowiednim czasie. Powoduje to lekkie migotanie niewidocznego tekstu i – w przypadku wyrenderowania nowej czcionki – zakłócenie układu, które powoduje przenoszenie części zawartości strony. Dzieje się tak nawet wtedy, gdy czcionka jest przechowywana w pamięci podręcznej przeglądarki i może zostać załadowana na długo przed zakończeniem okresu blokowania.

Optymalizacje są dostępne w Chrome 83 i całkowicie usuwają pierwszy cykl renderowania opcjonalnych czcionek, które są wstępnie wczytywane w <link rel="preload'>. Zamiast tego renderowanie będzie blokowane do chwili zakończenia ładowania czcionki niestandardowej lub po upływie określonego czasu. Ten limit czasu oczekiwania jest obecnie ustawiony na 100 ms, ale w najbliższej przyszłości może się zmienić, aby zoptymalizować wydajność.

Diagram przedstawiający nowe, wstępnie wczytane opcjonalne zachowanie czcionki, gdy czcionka się nie wczytuje
Nowe działanie font-display: optional w Chrome, gdy czcionki są wstępnie wczytywane, a czcionka jest pobierana po okresie bloku 100 ms (bez przebłysku niewidocznego tekstu)
Diagram przedstawiający nowe, wstępnie wczytane, opcjonalne zachowanie czcionki, gdy czcionka wczytuje się w odpowiednim czasie
Nowe zachowanie font-display: optional w Chrome, gdy czcionki są wstępnie wczytywane, a czcionka jest pobierana przed okresem 100 ms (bez przebłysku niewidocznego tekstu).

Wstępne wczytywanie opcjonalnych czcionek w Chrome eliminuje możliwość zacinania się układu i błysków bez stylu tekstu. Jest to zgodne z wymaganym działaniem określonym w module poziomu czcionki CSS 4, gdzie opcjonalne czcionki nigdy nie powinny powodować ponownego układu, a klienty użytkownika mogą zamiast tego opóźniać renderowanie o odpowiedni czas.

Wstępne wczytywanie czcionki opcjonalnej nie jest konieczne, ale znacznie zwiększa szanse na jej załadowanie przed pierwszym cyklem renderowania, zwłaszcza jeśli nie jest jeszcze zapisana w pamięci podręcznej przeglądarki.

Podsumowanie

Zespół Chrome chce poznać Twoje wrażenia dotyczące wstępnego wczytywania opcjonalnych czcionek po wprowadzeniu tych nowych optymalizacji. Jeśli napotkasz jakieś problemy lub chcesz zrezygnować z sugestii dotyczących funkcji, zgłoś problem.