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.

Wyceń pozycjonowanie swojej strony

  • 0 of 500 max characters
    • Wyrażam zgodę na przetwarzanie moich danych osobowych przez Audytorium Piotr Samojło z siedzibą w Białymstoku ul Rzędziana 1E, 15-698 Białystok (dalej: Audytorium) zawartych w niniejszym formularzu kontaktowym w celu realizacji przesłanego zgłoszenia. Zostałem poinformowany/poinformowana o możliwości wycofania zgody w dowolnym czasie, poprzez przesłanie wiadomości e-mail na adres biuro@audytorium.xyz.

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.

Zostaw komentarz

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

Ostatnie

Historia najnowsza SEO cz.1 – grudzień 2019

Historia najnowsza SEO to cykl artykułów, przywołujących czym żył świat SEO dokładnie 1, 5 i 10 lat temu. Cykl ten…

4 dni temu

13 (średnio ciekawych) ciekawostek o Google których (być może) nie znasz

Mam nadzieję, że tytułem tego posta wystarczająco jasno wyraziłem swoją niechęć dla clickbaitowych haseł. Pora więc bez zbędnych ogródek przejść…

3 tygodnie temu

Google Site Kit – bardzo udana wtyczka do WordPressa

Jeśli kochasz analitykę i lubujesz się w spinaniu danych z wielu platform z pomocą np. GDS - daruj sobie Google…

1 miesiąc temu

3 genialne (tylko że bardzo złe) pomysły na unikalny content

Pisanie lub zamawianie tekstów pod SEO może być udręką, szczególnie jeśli np. pozycjonujesz stronę producenta ssąco-tłoczących rozdrabniaczy bijakowych. Jeśli więc…

2 miesiące temu

Ahrefs Search Engine – analiza sensacyjnego pomysłu twórcy Ahrefsa

Parę miesięcy temu (konkretniej w kwietniu 2019) twórca i CEO Ahrefsa, czyli najpotężniejszego i uwielbianego przeze mnie kombajnu SEO -…

2 miesiące temu

Kontrola snippetów w SERP – Google wprowadza nowość, która powinna być standardem

Bogate wyniki wyszukiwań w postaci snippetów, knowledge paneli, przepisów, informacji i zdjęć wyświetlających się bezpośrednio w wynikach wyszukiwania kradną webmasterom…

2 miesiące temu

Product Feed w wynikach organicznych już wkrótce – to może być mała rewolucja w SEO

O karuzeli produktowej w organicznych wynikach wiadomo już od kilku miesięcy. Okazuje się, że funkcja ta ma pojawić się globalnie…

3 miesiące temu

Śmierć aplikacji mobilnych, niech żyje SEO

Poniższy wpis to prywatna opinia autora. Wyrażam ją w większej mierze na podstawie obserwacji i intuicji, niż twardych danych analitycznych…

3 miesiące temu

Semantyka w służbie SEO w HTML5

Na każdym kroku namawiam webmasterów do wdrażania jak największej ilości pasujących do ich treści danych strukturalnych. Wciąż spotykam się z…

4 miesiące temu

Ta strona używa cookies.

Polityka prywatności