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.

Więcej na ten temat:

• CSS Containment – nowy standard wspomagający renderowanie witryny
• Optymalizacja CSS i JS w praktyce
• Szybkość strony – poradnik dla początkujących
• Audyt SEO - czym jest i co powinien zawierać?