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.
Spis treści
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.
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.
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.
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).
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.
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.
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.
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.
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.
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.
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ą.
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.
Długo mnie tu nie było, bo zajęty byłem, o dziwo, robieniem SEO. Przerywam ten pracoholiczny…
Wybór pierwszego hostingu to niełatwa sprawa. Być może nie do końca jeszcze wiesz, jakiego poziomu…
Nie wszyscy wiedzą, że od 2018 roku po przejściu na stronę AMP poprzez snippet w…
Lada moment branżowe media do granic możliwości rozdymają szał na Mobile First Indexing. Choć ten…
Ostatnie dni przed świętami to w branży mały sezon ogórkowy, a o czymś trzeba pisać.…
Uważam, że Ahrefs to najlepszy kombajn do SEO na rynku. Ma swoje wady (np. fatalne…
Google właśnie zapowiedziało zmianę w swoim algorytmie, która po wdrożeniu znacznie zmieni ranking dla ok…
Ahrefs potężnym narzędziem jest i basta. A od teraz w dużym stopniu dostęp do tej…
Google ogłosiło na swoim blogu, że od połowy listopada 2020 Googlebot zyska zdolność do crawlowania…
Ta strona używa cookies.
Polityka prywatności