Rozwiązanie problemu „Ensure text remains visible during webfont load” w Lighthouse.

Upewnij się, że tekst pozostaje widoczny podczas ładowania webfontów

Zanim pojawiły się webfonty, projektanci stron byli ograniczeni do niewielkiej liczby preinstalowanych czcionek. Webfonty dają swobodę używania dowolnej czcionki na stronie internetowej. 

Oczywiście brzmi to atrakcyjnie, ale webfonty mają też swoje wady — spowalniają szybkość ładowania strony na kilka sposobów.

Webfonty to zwykle duże pliki, które nie są domyślnie zainstalowane na komputerze. Dlatego webfonty muszą zostać pobrane, zanim będą mogły być użyte. Podczas pobierania webfonta tekst na stronie internetowej jest tymczasowo ukrywany, dopóki webfont nie zostanie całkowicie załadowany. Przekłada się to na słabą user experience — nikt nie chce zbyt długo wpatrywać się w pusty ekran.

Gdy webfont zostanie załadowany i wyrenderowany, przeglądarka zastępuje „niewidoczny tekst” ostatecznym tekstem z nowym webfontem. Ten moment nazywany jest Flash of Invisible Text (FOIT). To właśnie FOIT powoduje pojawienie się komunikatu o błędzie „Ensure text remains visible during webfont load”..

Ładujesz webfont na swojej stronie i nie podejmujesz żadnych środków zapobiegawczych, aby uniknąć Flash of Invisible Text? Podczas analizy PageSpeed w Lighthouse pojawi się następujący komunikat: „Ensure text remains visible during webfont load”. Informuje on, ile czasu można zaoszczędzić, wyświetlając tekst przed załadowaniem webfonta. Dla jednej czcionki to z łatwością 100ms.

Dlaczego niewidoczny tekst jest szkodliwy dla szybkości strony?

Niewidoczny tekst tak naprawdę nie spowalnia końcowego mierzonego czasu ładowania strony. Dlaczego więc Lighthouse uważa to za taki problem? 

Google uważa, że ważne jest, aby strona internetowa zapewniała najlepszą możliwą user experience. User experience można poprawić, wyświetlając treść na stronie tak szybko, jak to możliwe. Porównaj dwie wersje filmstrip naszej strony głównej poniżej:

Flash of Invisible Text

Brak Flash of Invisible Text z display:swap

Jak widać, obie strony zakończyły ładowanie dokładnie w tym samym czasie. Mimo to najnowsza wersja strony wygląda znacznie lepiej dla odwiedzających. Odwiedzający mogą natychmiast zacząć czytać.

Dlatego warto wyświetlać tekst mimo wszystko — nie w docelowej czcionce, ale w czcionce fallback. W ten sposób odwiedzający odnosi wrażenie, że Twoja strona naprawdę ładuje się superszybko.

Krótkie przypomnienie: FOIT i FOUT

Zanim pójdziemy dalej, warto rozróżnić następujące pojęcia: FOIT i FOUT. FOIT oznacza Flash of Invisible Text i występuje, gdy webfonty nie są widoczne podczas ładowania. Można temu zaradzić, dodając czcionkę fallback. Gdy czcionka fallback jest zastępowana przez webfont, nazywa się to FOUT, Flash of Unstyled Text.

Wyświetlanie webfontów podczas ładowania

Istnieją dwa sposoby na wyświetlanie webfontów podczas ładowania: pierwszy to użycie wartości CSS font-display; drugi to użycie czcionki fallback za pomocą klasy. Obie metody mają swoje zalety i wady, które omówię poniżej.

Metoda 1: Font-display:swap

Font-display to deskryptor CSS dostępny we wszystkich nowoczesnych przeglądarkach. Deskryptor font-display określa sposób wyświetlania czcionki w zależności od tego, czy i kiedy została pobrana. Font-display jest używany w regule @font-face. 

Istnieją różne wartości font-display: block, swap, fallback i optional. Użyj wartości swap, aby uniknąć FOIT i wyświetlić tekst na ekranie tak szybko, jak to możliwe. 

Po ustawieniu wartości font-display: swap w regule @font-face, domyślne czcionki systemowe są używane podczas ładowania strony, dopóki webfonty nie zostaną załadowane. Dzięki temu odwiedzający może natychmiast przeczytać tekst na stronie.

Google fonts

Podczas korzystania z Google fonts możesz użyć metody font-display: swap, dodając prosty parametr „&display=swap” w arkuszu stylów lub kodzie osadzania.  

<!-- via een extern stylesheet -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

<!-- via de import methode -->
<style>
 @import url ('https://fonts.googleapis.com/css?family=Open+Sans&display=swap); 
</style>

Swoją drogą, nie jesteśmy fanami Google fonts. Prawie zawsze znacznie szybsze jest hostowanie webfontów samodzielnie. Daje to większą kontrolę nad procesem „preloadingu” czcionek. Można wykorzystać istniejące połączenie http/2 i nie trzeba pobierać dodatkowego arkusza stylów.

Lokalne czcionki

@font-face { 
 font-family: "Open Sans";  
 font-weight: 400; 
 font-style: normal; 
 src: url("OpenSans400.woff2") format("woff2"); 
 
}

Metoda 2: Czcionki z klasą

Drugi sposób na wyświetlanie czcionek podczas ładowania to praca z klasami. Klasy te są zwykle (ale nie zawsze) dodawane do elementu <body> lub <html>.

Zaletą tej metody jest większa kontrola nad czcionką fallback i momentem wystąpienia Flash of Unstyled Text.

Ta metoda działa następująco: Wskaż w arkuszu stylów, że strona powinna być początkowo renderowana z określoną czcionką (czcionką fallback). Następnie załaduj webfont za pomocą JavaScript FontFace API lub przez preloading. Po załadowaniu czcionki dodaj klasę do swojej strony. Klasa zapewnia aktywację webfonta.

Dlaczego warto to robić? Aby zyskać większą kontrolę nad czcionką fallback. Można wyświetlić czcionkę fallback z większym interliniowaniem lub innym rozmiarem, aby lepiej pasowała do webfonta. Zapobiega to przesunięciom układu (layout shifts).

Przy korzystaniu z wielu webfontów można użyć metody FontFace API do przełączenia wszystkich czcionek jednocześnie. Oszczędza to wiele repaintów przeglądarki. Osobiście nie jestem fanem tej metody — powoduje ona, że FOUT następuje dopiero po załadowaniu ostatniej czcionki. A to jest zawsze później niż to konieczne.

Czcionka z klasą za pomocą FontFace API:

<style>
  //fallback font met een .9rem font-size
  html{
    font-family: sans-serif;
    font-size:.9rem;
  }  

  //webfont font met een 1rem font-size
  html.fl{
    font-family: 'webfont';
    font-size:1rem;
  }
</style>

<script>
var font = new FontFace("webfont", "url(/font.woff2)", {
  style: 'normal', unicodeRange: 'U+000-5FF', weight: '400'
});

// don't wait for the render tree, initiate an immediate fetch!
font.load().then(function() {
  document.fonts.add(font);
  document.documentElement.classList.add("fl")
});
</script>

Za pomocą linku preload

Druga metoda to użycie linku preload. Załaduj czcionkę wstępnie zgodnie z opisem poniżej. Gdy to zrobisz, zmień klasę elementu <html>.

<link 
  rel="preload" 
  href="/webfont.woff2" 
  as="font" 
  type="font/woff2" crossorigin
  onload="document.documentElement.classList.add('fl')">

<style>
  //fallback font met een .9rem font-size
  html{
    font-family: sans-serif;
    font-size:.9rem;
  }  

  //webfont font met een 1rem font-size
  html.fl{
    font-family: 'webfont';
    font-size:1rem;
  }

  //fontface, wordt pas geactiveerd zodra de .fl class wordt toegevoegd aan de html tag
  @font-face{
    font-family:'Open Sans';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src: url(/webfont.woff2) format("woff2");
    unicode-range:U+000-00FF;
  }</style>

Dodatkowe wskazówki i triki

1.    Zawsze stosuj preload https://www.corewebvitals.io/nl/pagespeed/ensure-text-remains-visible-during-web font-load? widocznych czcionek. Czcionki nie są domyślnie pobierane, dopóki czcionka nie jest używana. Na pewno potrzebujesz webfonta? W takim przypadku zastosuj preload, aby był dostępny wcześniej.
2. Chcesz całkowicie uniknąć FOIT i FOUT? Użyj font-display: optional w połączeniu z preloadingiem.
3. Hostowanie webfontów samodzielnie jest zawsze szybsze niż webfonty przez Google fonts lub inny zewnętrzny CDN.