FOIT (Flash of Invisible Text) to zjawisko polegające na tymczasowym ukryciu tekstu na stronie w trakcie ładowania niestandardowej czcionki webowej. Użytkownik przez ułamek sekundy (a przy wolnym łączu nawet kilka sekund) widzi pusty obszar w miejscu treści, ponieważ przeglądarka czeka na pobranie pliku fontu, zanim wyświetli litery. FOIT bezpośrednio pogarsza odczuwalną szybkość działania witryny i wpływa na wskaźniki Core Web Vitals.
- Co to jest: okres, w którym tekst jest niewidoczny, bo font webowy się jeszcze nie załadował.
- Główny problem: pusty ekran zamiast treści opóźnia dostęp do informacji i podbija metrykę LCP.
- Rozwiązanie: właściwość
font-displayw CSS oraz preload plików czcionek.
Jak FOIT działa w praktyce
FOIT pojawia się, gdy przeglądarka napotyka w kodzie CSS deklarację niestandardowej czcionki i decyduje się ukryć tekst do momentu jej pobrania. Domyślne zachowanie większości przeglądarek zakłada tzw. blokowanie renderowania: zamiast pokazać treść czcionką systemową, wyświetla puste miejsce. Efekt jest widoczny szczególnie przy pierwszym wejściu na stronę, gdy plik fontu nie znajduje się jeszcze w pamięci podręcznej.
Dlaczego przeglądarka ukrywa tekst?
Przeglądarka ukrywa tekst, żeby uniknąć „przeskoku” liter po podmianie czcionki, ale w praktyce naraża użytkownika na gorszy problem — brak jakiejkolwiek treści. Historycznie ustalono limit oczekiwania: Chrome i Firefox stosują tzw. block period o długości do 3 sekund, po którym awaryjnie pokazują czcionkę zastępczą. Safari przez długi czas nie miało twardego limitu, przez co FOIT bywał tam znacznie dłuższy.
Czym różni się FOIT od FOUT?
FOIT (Flash of Invisible Text) ukrywa tekst do czasu załadowania fontu, a FOUT (Flash of Unstyled Text) od razu pokazuje treść czcionką systemową i podmienia ją, gdy font webowy będzie gotowy. Z perspektywy dostępu do informacji FOUT jest zwykle korzystniejszy, ponieważ użytkownik może czytać treść natychmiast. FOIT bywa mylnie postrzegany jako „czystszy” wizualnie, ale kosztem użyteczności.
| Cecha | FOIT | FOUT |
|---|---|---|
| Widoczność tekstu na starcie | Ukryty | Widoczny (czcionka zastępcza) |
| Ryzyko przeskoku liter | Niskie | Wyższe (podmiana fontu) |
| Wpływ na LCP | Negatywny | Zwykle korzystniejszy |
Wartość font-display | block | swap / fallback |
Jak wyeliminować FOIT?
Najprostszym sposobem ograniczenia FOIT jest ustawienie właściwości font-display: swap w regule @font-face, która nakazuje natychmiast pokazać czcionkę zastępczą. Dodatkowo warto zastosować <link rel="preload"> dla plików fontów, dobrać nowoczesny format WOFF2 (o ok. 30% mniejszy od WOFF) oraz ograniczyć liczbę wariantów czcionek. W praktyce wystarczy jedna linijka CSS, by zamienić kilkusekundowy pusty ekran na tekst dostępny od pierwszej klatki renderowania.
Znaczenie dla SEO i widoczności
FOIT ma bezpośredni wpływ na SEO, ponieważ opóźnione wyświetlenie tekstu podbija metrykę Largest Contentful Paint (LCP), będącą częścią Core Web Vitals. Google od 2021 roku traktuje te wskaźniki jako sygnał rankingowy w ramach oceny doświadczenia strony, dlatego font blokujący renderowanie może realnie osłabić pozycje. Jeśli głównym elementem contentu na ekranie jest nagłówek lub blok tekstu, jego niewidoczność wprost pogarsza wynik LCP.
Problem widać najlepiej w narzędziach typu PageSpeed Insights i Lighthouse, które zgłaszają ostrzeżenie „Ensure text remains visible during webfont load”. W naszej codziennej pracy w Webiti to jeden z częstszych błędów wychwytywanych podczas audytu SEO — zwłaszcza na stronach opartych na popularnych szablonach, gdzie ładuje się nawet kilkanaście wariantów czcionek. Poprawa jest szybka i tania, a efekt widoczny w metrykach niemal natychmiast.
FAQ
Czy FOIT szkodzi pozycjonowaniu?
Tak, pośrednio FOIT szkodzi pozycjonowaniu, bo opóźnia wyświetlenie tekstu i pogarsza wskaźnik LCP z zestawu Core Web Vitals. Google używa tych metryk jako sygnału rankingowego przy ocenie doświadczenia strony. Im dłuższy pusty ekran, tym gorszy odbiór witryny przez użytkownika i algorytm.
Jak sprawdzić, czy moja strona ma problem z FOIT?
Najszybciej użyjesz Google PageSpeed Insights lub Lighthouse — jeśli występuje FOIT, w raporcie pojawi się rekomendacja „Ensure text remains visible during webfont load”. Możesz też ręcznie odświeżyć stronę z wyczyszczoną pamięcią podręczną i obserwować, czy tekst na moment znika. Zakładka Network w narzędziach deweloperskich pokaże, jak długo ładują się pliki czcionek.
Czym różni się font-display: swap od fallback?
Wartość swap od razu pokazuje czcionkę zastępczą i podmienia ją, gdy tylko font webowy się załaduje, niezależnie od czasu. Wartość fallback działa podobnie, ale daje bardzo krótki okres blokowania (ok. 100 ms) i rezygnuje z podmiany, jeśli font pobierze się zbyt późno. W większości przypadków dla treści tekstowej najlepiej sprawdza się swap.
Kiedy FOIT jest akceptowalny?
FOIT bywa akceptowalny przy krótkich, dekoracyjnych elementach graficznych, jak ikony fontowe czy pojedyncze logo tekstowe, gdzie chwilowy brak nie utrudnia czytania. Przy głównej treści strony należy go jednak eliminować, bo blokuje dostęp do informacji. Zasada jest prosta: im ważniejszy dla użytkownika jest dany tekst, tym mniej tolerancji na jego niewidoczność.
FOIT pod kontrolą — mały fragment CSS, duża różnica
FOIT to jeden z tych technicznych detali, które łatwo przeoczyć, a które realnie wpływają na szybkość, dostępność i pozycje w wyszukiwarce. Wystarczy przemyślana konfiguracja font-display i preload, by tekst pojawiał się od pierwszej klatki renderowania. Jeśli chcesz mieć pewność, że Twoja witryna nie traci na takich niuansach, sprawdź nasze pozycjonowanie stron lub zamów kompleksowy audyt SEO.
