CSS font-display w optymalizacji prędkości

Dwa-trzy lata temu poniższy post mógłby zainteresować co najwyżej skrajnie znudzonego front-endowca, ale w żadnym wypadku nie SEOwca. Ale czasy się zmieniają i w pogoni za lepszym wynikiem w testach wydajności, musicie poszerzać swoje know-how o nowe sztuczki. Szczególnie takie, które wymagają tylko jednej linijki kodu.

Dlatego właśnie postanowiłem dziś napisać kilka słów o magicznym wynalazku języka CSS: font-display.

Czym jest font-display?

Font-display mówi przeglądarce osoby, która odwiedza naszą witrynę, co zrobić, jeśli nie uda się pobrać wskazanego przez nas fonta, lub jeśli pobieranie to trwa dłużej niż powinno.

Co font-display ma wspólnego z SEO?

O ile kilka lat temu wzdrygałem się i nadal wzdrygam słysząc, że „content is king”, o tyle dziś sam uważam, że „speed is the new queen”. Możliwość sterowania zachowaniem przeglądarki pozwala nam w tym aspekcie wycisnąć z ładowania witryny maksimum tam gdzie to możliwe, a zachować rozsądek, tam gdzie rolę odgrywa nie tylko prędkość.

Krótko mówiąc: font-display = szybsze ładowanie = lepsze SEO.

Jak się za to zabrać?

Font-display jest deskryptorem @font-face. To tylko jedna linijka kodu.

Na przykładzie fontu Arvo, zapożyczonego od Google.

@font-face {
font
-family: 'Arvo';
font
-display: auto;
src
: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}

Font-display może mieć jedną z wartości: auto, block, swap, fallback lub optional.

Zanim objaśnimy sobie poszczególne wartości, musimy zaznajomić się jeszcze z 2 pojęciami: font block period i font swap period.

Font block period

Krótko mówiąc, jest to ten moment ładowania fonta, w którym nie udało się jeszcze go pobrać, a przeglądarka zamiast niego wyświetla niewidoczny wypełniacz (czyli zarezerwowała miejsce na tekst, ale go nie wyświetla).

Font swap period

Jest to ten moment ładowania fonta, w którym po ewentualnym nieudanym załadowaniu fonta, przeglądarka wyświetla font zastępczy (np. zdefiniowany w font-face, lub po prostu domyślny font przeglądarki). Podczas trwania swap period, przeglądarka wciąż czeka na załadowanie poprawnego fonta.

Możliwe wartości font-face

Wartości opisuję w kolejności nieprzypadkowej. Zaczynam od tych, których należy użyć jeśli zależy nam na konkretnym foncie, a mniej na prędkości, stopniowo przechodząc do sytuacji odwrotnej, gdzie prędkość stawiamy na pierwszym miejscu.

font-display: block

  • block period ok 3 s.: jeśli font się nie załadował, najpierw wyświetla się pusty wypełniacz (w większości przeglądarek trwa to ok 3 sekundy)
  • nieskończony swap period: następnie przeglądarka wyświetla zastępczy font cały czas oczekując na pobranie właściwego. Jeśli to się w końcu uda, podmienia font zastępczy na właściwy.

Kiedy używać?

Najmniej wydajna opcja, z najgorszym wpływem na optymalizację. Warto używać tylko w miejscach, w których użycie konkretnego fontu jest absolutnie niezbędne.

font-display: auto

Ustawienie font-display na auto powoduje, że ładowanie fonta odbędzie się tak, jak domyślnie robi to przeglądarka. Większość przeglądarek z kolei, ładuje fonty w sposób zbliżony do powyższej komendy font-display: block.

Kiedy używać?

Nie używać 🙂 Korzystajmy z możliwości, jakie daje nam CSS.

font-display: swap

  • brak block period
  • nieskończony swap period: przeglądarka od razu wyświetla tekst czcionką zastępczą, a następnie cały czas oczekuje na pobranie właściwego. Jeśli się to uda, podmienia font na właściwy.

Kiedy używać?

Pod względem optymalizacyjnym równie kiepskie rozwiązanie co block, lepsze o tyle, że tekst jest widoczny od razu. Jeśli używasz CSS i customowych fontów do wyświetlania swojego logo, swap jest dobrym rozwiązaniem. Stosuj tam, gdzie ważna jest zarówno treść jak i wygląd.

font-display: fallback

  • ultrakrótki block period: jeśli font nie załaduje się poprawnie tekst tylko przez ułamek sekundy jest ukryty
  • ok 3 s. swap period: tekst niemal natychmiast wyświetla się za pomocą czcionki zastępczej, a przeglądarka oczekuje na poprawny font tylko przez ok. 3 sekundy. Jeśli po tym czasie poprawny font się nie załaduje, przeglądarka nie podejmuje więcej prób.

Kiedy używać?

Fallback to rozwiązanie dobre dla głównego tekstu, szczególnie stron contentowych, gdzie chcemy szybko zachęcić użytkownika do czytania i nie chcemy go rozpraszać późniejszymi podmianami fonta w trakcie lektury.

font-display: optional

  • ultrakrótki block period: jeśli font nie załaduje się poprawnie tekst tylko przez ułamek sekundy jest ukryty
  • brak swap period: tekst wyświetla się za pomocą fonta zastępczego, przeglądarka nie próbuje więcej pobrać właściwego fonta.
  • dodatkowo optional daje przeglądarce możliwość by w ogóle zrezygnować z ładowania customowego fonta, jeśli połączenie z internetem jest wolne, lub zasoby są ograniczone

Kiedy używać?

Zdecydowanie najlepsza opcja pod względem optymalizacyjnym, szczególnie dla użytkowników z wolnym połączeniem internetowym. Do wdrożenia wszędzie tam, gdzie wygląd fonta jest sprawą drugorzędną.

Którą wartość font-display wybrać?

Odpowiedź jest łatwa jeśli wiesz, co chcesz osiągnąć. Opisałem co się wydarzy z Twoimi fontami w przypadku każdej z tych wartości – wybierz sam co jest dla Ciebie najważniejsze.

Jeśli chcesz zyskać cenne milisekundy i kwestia estetyki jest dla Ciebie drugorzędna, nie zastanawiaj się długo i użyj optional. Jeśli zaś np. Twoja strona to portfolio, które musi wyglądać, wybierz block.


Pomogę Ci wybrać agencję SEO Konsultacja i wycena bez żadnych kosztów
Piotr Samojło

Freelancer działający pod marką Audytorium SEO. Jeśli masz pytania, lub szukasz człowieka od SEO i optymalizacji stron, zapraszam do kontaktu.

FAQ


Czym jest font-display?

Font-display mówi przeglądarce osoby, która odwiedza naszą witrynę, co zrobić, jeśli nie uda się pobrać wskazanego przez nas fonta, lub jeśli pobieranie to trwa dłużej niż powinno.

Co font-display ma wspólnego z SEO?

Font-display to szybsze ładowanie witryny, a prędkość ładowania jest jednym z czynników rankingowych SEO.

Zostaw komentarz

Twój adres e-mail nie zostanie upuibliczniony Pola wymagabe*

Rich Results Test wychodzi z bety, ale nie to jest najważniejsze

Google właśnie ogłosiło, że Rich Results Tool, narzędzie do testowania wyników rozszerzonych w SERPie, wyszło…

2 dni temu

Grzeszki stron topowych agencji SEO

Od dłuższego czasu zżerała mnie ciekawość, jak duże agencje SEO radzą sobie z wdrażaniem wytycznych…

2 tygodnie temu

Wraca polskojęzyczne forum dla webmasterów

Po ponad roku nieobecności Google postanowiło przywrócić polskojęzyczne forum dla webmasterów. Polska wersja forum dostępna…

2 miesiące temu

Dziura w Google Site Kit pozwala przejąć dostęp do Google Search Console

Jeśli używasz oficjalnej wtyczki do Wordpressa: Google Site Kit, to zanim doczytasz do końca, przejdź…

2 miesiące temu

CSS Containment – nowy standard wspomagający renderowanie witryny

Zaledwie kilka dni temu pisałem o inicjatywie Web Vitals autorstwa Google, polegającej na skupieniu się…

2 miesiące temu

Nowa inicjatywa Google warta uwagi: Web Vitals

Web Vitals to inicjatywa Google, polegająca na spriorytetyzowaniu działań optymalizacyjnych stron i aplikacji na podstawie…

2 miesiące temu

MREID (Machine-Readable Entity IDs), czyli jak Google rozumie świat

Nie wiem, czy Cię to zdziwi, czy nie, ale Google prawie każdemu elementowi znanego mu…

3 miesiące temu

Rank Math – wtyczka dobra, ale dziurawa. Zagrożone 200 000 stron na WordPressie

Jeśli do SEO na swoim Wordpressie używasz wtyczki Rank Math, to zalecam szybką aktualizację. W…

3 miesiące temu

Przechwytywanie domen – jak nie przegapić ani jednej dobrej domeny

Przechwytywanie wartościowych domen wciąż stanowi podstawę tworzenia solidnego zaplecza SEO - choć oczywiście oficjalnie nikt…

3 miesiące temu

Ta strona używa cookies.

Polityka prywatności