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:


Darmowa oferta 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*

PRZERAŻAJĄCA luka w Contact Form 7… a jednak nie.

Ostatnie dni przed świętami to w branży mały sezon ogórkowy, a o czymś trzeba pisać.…

1 miesiąc temu

Historia pozycji keywordów, link opportunities i inne nowości w Ahrefs

Uważam, że Ahrefs to najlepszy kombajn do SEO na rynku. Ma swoje wady (np. fatalne…

3 miesiące temu

Google skupi się na fragmentach stron – co to dokładnie znaczy?

Google właśnie zapowiedziało zmianę w swoim algorytmie, która po wdrożeniu znacznie zmieni ranking dla ok…

3 miesiące temu

Ahrefs Webmaster Tools czyli BARDZO przydatne darmowe narzędzie SEO

Ahrefs potężnym narzędziem jest i basta. A od teraz w dużym stopniu dostęp do tej…

4 miesiące temu

Googlebot obsłuży HTTP/2, ale (na razie) nie wpłynie to na jakość indeksacji

Google ogłosiło na swoim blogu, że od połowy listopada 2020 Googlebot zyska zdolność do crawlowania…

4 miesiące temu

Szybkość strony – poradnik dla początkujących

Co by było, gdybyśmy na szybkość witryny spojrzeli nie pod kątem punktów zdobywanych w teście…

5 miesięcy temu

People cards – nowa funkcja testowana przez Google

Google testuje na rynku indyjskim nową funkcję, która po głębszym zastanowieniu wydaje się niemal rewolucyjna.…

6 miesięcy temu

Firma prowadzona przez Afroamerykanów – nowe oznaczenie w Google Moja Firma

Google w amerykańskiej wersji Google Moja Firma (Google My Business) wprowadza nowe oznaczenie - Black-owned,…

6 miesięcy temu

Google Guaranteed, czyli jak Google za $50 miesięcznie rozmienia na drobne swoje dziedzictwo

Google (a dokładniej spółka matka Alphabet) to korporacja. Korporacja ma za zadanie zarabiać i pomnażać…

6 miesięcy temu

Ta strona używa cookies.

Polityka prywatności