Optymalizacja fontów - kolejny mały plus w oczach Google

Jeszcze kilka lat temu fonty i sposoby ich wczytywania na stronie niespecjalnie interesowały kogokolwiek zajmującego się SEO. Dziś jest już jednak inaczej, a font i to, w jaki sposób serwujemy go użytkownikom, może wpływać na jakość witryny w oczach Google. W tej części SEO Samodzielnych dowiesz się, dlaczego optymalizacja fontu ma znaczenie w SEO i na czym tak właściwie polega. Przedstawimy Ci też dostępne opcje ładowania fontów oraz aspekty, na które warto zwrócić uwagę i pomożemy wybrać najlepsze rozwiązania.

Spis treści:

1. Dlaczego optymalizacja fontów może pomóc w SEO?
2. Font na stronie internetowej
3. Formaty fontów a przeglądarki
4. Na czym polega optymalizacja fontu?
5. Wybór sposobu dołączania, czyli kluczowa optymalizacja fontów
6. Font-display a optymalizacja czcionek
7. Preload — optymalizacja czcionek poprzez wcześniejsze ładowanie
8. Strategie ładowania a optymalizacja fontu
9. Ogranicz ilość fontów
10. Expires, czyli optymalizacja fontu po stronie użytkownika
11. Kompresja GZIP fontów w formatach EOT / TTF
12. Minimalizowanie objętości stosowanych fontów
13. Unicode-range, czyli niedoceniana optymalizacja czcionki
14. Fonty hostowane lokalnie czy Google Fonts?
15. Podsumowując

Dlaczego optymalizacja fontów może pomóc w SEO?

Zacznijmy od tego, dlaczego optymalizacja fontów jest częścią optymalizacji pod pozycjonowanie. Przyczyn jest kilka, ale najważniejszą jest oczywiście czas ładowania strony, na który web-font i jego konfiguracja mogą wpływać. W jaki sposób? Cóż, fonty, jako zasoby statyczne, oddziałują bezpośrednio na renderowanie strony, mogą je nawet blokować.

Mogą być również dostarczane użytkownikom w wielu wariantach oraz na różne sposoby. Prezentowane przez nie kroje pisma mają też ogromny wpływ na czytelność i wygląd serwisu, wpływają więc na UX nie tylko pod kątem szybkości ładowania.

Ze względu na wymienione wyżej aspekty, optymalizacja fontu może pomóc nie tylko w SEO, ale i w tym, jak naszą stronę odbierają użytkownicy. Warto więc o nią zadbać.

Font na stronie internetowej

Zanim przejdziemy do tego, na czym polega optymalizacja czcionek, pochylmy się na chwilę nad samym web-fontem. Żeby móc przeprowadzić skuteczną optymalizację, trzeba najpierw zrozumieć, w jaki sposób strona internetowa wczytuje font i czym on tak właściwie jest.

Czym jest font?

No to tak: web-font lub po prostu font (a potocznie, ale niepoprawnie “czcionka”) to zestaw wektorowych glifów. Glif to z kolei kształt przedstawiający konkretny grafem lub symbol w danym kroju pisma, a sam grafem to najmniejsza jednostka pisma, odpowiadająca w alfabecie pojedynczej literze. Web-font jest to więc w uproszczeniu zestaw grafik wektorowych przedstawiających znaki składające się na dany krój pisma, potoczną czcionkę, zamknięty w jednym pliku.

Dość to zagmatwane, zostawiając jednak te typograficzne technikalia, web-fonty pod postacią plików o specjalnych formatach pozwalają stronie internetowej przedstawiać tekst. W określony sposób i w dowolnym formatowaniu czy skalowaniu (dzięki wektorom).

Załączanie fontu na stronie

Na stronie można załączyć oczywiście wiele fontów, w zależności od potrzeb. Zazwyczaj stosuje się jednak dwa lub trzy. Dołączenie własnej czcionki do strony polega na wykorzystaniu instrukcji @font-face w CSS. Podstawowe sposoby załączania to samodzielne hostowanie plików lub wczytywanie ich z zewnętrznych repozytoriów (przede wszystkim z Google Fonts).

W instrukcji font-face deklarujemy nazwę fontu i wskazujemy ścieżkę pliku naszego fonta:

@font-face {
font-family: Nazwafontu;
src: url(nazwafontu.woff);
}

Przy korzystaniu z Google Fonts, przed właściwymi stylami CSS dodajemy:

<link href="https://fonts.googleapis.com/css?family=Nazwafontu&display=swap" rel="stylesheet">

W tym wypadku instrukcja font-face znajduje się pod wskazaną ścieżką (linkiem) do Google Fonts. Samego odnośnika nie musimy tworzyć samodzielnie. Wygenerujemy go w kreatorze dostępny na https://fonts.google.com/.

Formaty fontów a przeglądarki

Chcesz dodać do swojej strony font i mieć przy tym pewność, że będzie on pobierany przez wszystkie przeglądarki? Jeśli chcesz zrobić to poprzez hostowanie lokalne, to potrzebujesz zestawów odpowiednich glifów w aż czterech różnych formatach. Przyczyną jest to, że nowe formaty fontów działają tylko w nowszych wersjach oprogramowania. By zapewnić odpowiednie wyświetlanie na starszych wersjach, trzeba więc załączyć też formaty starsze.

Formaty fontów to kolejno:

• WOFF - najpopularniejszy, obsługiwany przez wiele różnych przeglądarek
• WOFF 2.0 - najnowszy, cechujący się wysoką kompresją (małą objętością), ale obsługiwany tylko przez nowe przeglądarki
• EOT - format fontu wspierany przez przeglądarki Internet Explorer
• TTF - format wypierany, używany przez przeglądarki na starsze wersje systemu Android (>4.4)
• SVG - font w formacie grafiki wektorowej, wypierany z użycia i niekompatybilny z większością przeglądarek (wspierany w bieżących wersjach tylko przez Safari)

W przypadku korzystania z Google Fonts to repozytorium zadba o zaserwowanie użytkownikowi odpowiedniego pliku. Nie trzeba martwić się rozszerzeniem.

Na czym polega optymalizacja fontu?

W największym skrócie optymalizacja fontu polega na wyborze takiego rodzaju jego ładowania, aby strona działała jak najsprawniej. To jednak tylko uproszczenie. Optymalizacja czcionki może dotyczyć nie tylko sposobu jej dołączenia, ale i konfiguracji oraz samego wyboru.

Najważniejsze aspekty optymalizacji czcionek przy różnych sposobach ich dołączania (oraz same sposoby) przedstawiamy poniżej.

Wybór sposobu dołączania, czyli kluczowa optymalizacja fontów

Pomijając technikalia i różne drobiazgi, które mogą wpływać na to czy optymalizacja fontów przyczyni się do lepszego SEO, wybór sposobu, w jaki ładujemy fonty na stronę, jest zawsze kluczowy. W praktyce trwa tutaj dyskusja pomiędzy ładowaniem czcionek z Google Fonts a ładowaniem czcionek hostowanych samodzielnie.

Ładowanie fontów z Google Fonts

To metoda najpopularniejsza, z której korzysta ponoć (wg. różnych źródeł) już grubo ponad 40 milionów stron internetowych. Zazwyczaj fonty z Google Fonts ładowane są w taki sposób:

<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css?family=Nazwafontu&display=swap" rel="stylesheet" />

Preconnect pozwala przyśpieszyć pobieranie fonta, nawiązując połączenie przed pobieraniem. Istotny jest też display=swap, o obu piszemy szerzej w dalszej części, przy Preconnect oraz Font-Display.

Fonty hostowane samodzielnie

W tym wypadku po prostu hostujemy plik fontu na serwerze, w plikach naszej strony lub poprzez CDN. Ładujemy go na stronę poprzez wspomniany już wyżej @font-face. Dokładnie tak jak na zamieszczonym przy opisie instrukcji font-face przykładzie.

Co ciekawe, Google od 2018 roku przyznaje, że przy prawidłowej optymalizacji samodzielne hostowanie fontu może być lepsze pod względem szybkości ładowania.

Fonty web-save

Trzeba też wspomnieć o opcji trzeciej, czyli korzystaniu wyłącznie z fontów web-save, czyli czcionek podstawowych, najpopularniejszych, takich jak Arial. Większość urządzeń posiada domyślnie potrzebne do ich wyświetlenia pliki. Nie istnieje więc potrzeba pobierania i ładowania dodatkowego zasobu.

Plusem wykorzystania wyłącznie czcionek web-save jest to, że niepotrzebna jest żadna dodatkowa optymalizacja fontu. Minusem — brak możliwości wybrania indywidualnego kroju pisma i dopracowania designu swojej witryny.

Font-display a optymalizacja czcionek

Font-display to właściwość CSS zawarta w bloku @font-face pozwalająca zapewnić użytkownikom widoczność tekstu podczas ładowania czcionek. To dzięki niej możemy wpływać na fonty na naszej stronie, na sposób ich renderowania. Często optymalizacja fontów zamyka się właśnie w tym bloku, w dostosowaniu tej instrukcji.

Wartości font-display to:

• auto - wyświetlanie czcionki wg. domyślnego zachowania przeglądarki
• block - blokuje wyświetlanie tekstu do momentu pełnego załadowania fontu
• swap - do momentu pełnego załadowania fontu nakazuje przeglądarce używania fontu awaryjnego (fallback)
• fallback - kompromis pomiędzy wartościami block i swap; przeglądarka ukrywa tekst na około 100ms, po czym, jeśli nadal nie załadowano indywidualnej czcionki, używa fontu awaryjnego
• optional - podobnie jak wartość fallback, mówi przeglądarce, by ukryć tekst, a później użyć fontu awaryjnego, jeśli niestandardowy nie został załadowany; różnica polega na tym, że wartość optional pozwala przeglądarce zdecydować, czy użyć czcionki niestandardowej czy nie, w zależności od szybkości łącza użytkownika.

Wybór tego, które opcje font-display zastosujemy, zależy oczywiście od konkretnej strony. W praktyce jednak najczęściej sprawdza się opcja font-display: swap (ustawiana zresztą domyślnie w kodzie generowanym przez Google Fonts). Wówczas tekst jest widoczny od razu (awaryjny font ładuje się natychmiast), niestandardowy font pojawia się (jest podmieniany) z kolei gdy tylko jest gotowy.

Przykładowo:

@font-face {
font-family: Lato;
src: url('font-lato/lato-bolditalic-webfont.woff2') format('woff2')
font-weight: 700;
font-style: italic;
font-display: swap;
}

body {
font-family: 'Lato', "Arial", "Helvetica", sans-serif;
}

W tym wypadku używamy na stronie niestandardowego fontu “Lato”, a jednocześnie podajemy przy tym trzy awaryjne fonty w font-family. Dzięki instrukcji font-display: swap, użytkownicy od razu zobaczą jeden z nich (ten, który posiadają już w pamięci podręcznej lub ostatecznie font web-save sans-serif).

Strona załaduje się więc szybciej, a jej renderowanie nie będzie blokowane pobieraniem naszego indywidualnego fontu.

Preload — optymalizacja czcionek poprzez wcześniejsze ładowanie

Parametr rel=”preload” użyty w osobnym linku do pliku fontu zamieszczonym w kodzie strony pozwala na załadowanie czcionki przed wykonaniem instrukcji @font-face. Niestety, metoda ta nie jest idealna. Zmusza bowiem przeglądarkę do pobrania fontu na każdej podstronie, niezależnie od zakresu unicode, o którym piszemy niżej.

<link rel="preload" href="fonts/ExampleFont.woff2" as="font">

Taka optymalizacja czcionek sprawdza się jednak dobrze w przypadku tych fontów, które będą używane do podstawowej treści (na każdej podstronie). Może być też przydatna dla fontów stosowanych w obszarze above the fold, tj. części strony widocznej bezpośrednio po załadowaniu witryny, bez przewijania.

Strategie ładowania a optymalizacja fontu

Niestety, optymalizacja fontu nie kończy się na font-display: swap. Poza swoimi oczywistymi zaletami metoda ta ma bowiem również słabości. Spośród nich największą jest zdecydowanie FOUT, Flash of Unstyled Text, czyli chwilowe wyświetlenie fallbackowego, awaryjnego fontu. Niby drobiazg, ale znacznie wpływający na UX.

Ze względu na jego występowania powstały zaawansowane strategie ładowania fontów, takie jak strategia The Compromise. Polega ona na dołączeniu specjalnego kodu JavaScript, odpowiedzialnego za wieloetapowe ładowanie fontów. Poza tym korzysta ona ze wspomnianego już preload oraz font-display:swap.

Prawdopodobnie jest to aktualnie najwydajniejszy sposób (strategia) ładowania fontów na stronie. Pamiętaj jednak, że mówimy tutaj o niuansach. Korzystanie z The Compromise nie jest w żadnym wypadku konieczne. To ciekawa opcja dla zaawansowanych. Żeby optymalizacja czcionek była skuteczna, wystarczą jednak podstawowe zabiegi.

Ogranicz ilość fontów

Najbardziej oczywista optymalizacja czcionek, o której zresztą napomnieliśmy już na początku, to ograniczenie ich ilości. Więcej niż 2-3 niestandardowe fonty na stronie internetowej to spora przesada. Dwa kroje pisma powinny spokojnie wystarczyć do stworzenia przejrzystego designu praktycznie każdej witryny. Jeden font dla nagłówków, a drugi dla zwykłego tekstu.

Expires, czyli optymalizacja fontu po stronie użytkownika

Fonty są zasobami statycznymi. Pobrane, mogą więc być przechowywane w plikach pamięci podręcznej urządzenia. Sprawia to, że raz pobrane przez daną przeglądarkę fonty naszej strony nie muszą być pobierane ponownie, choćby przy wchodzeniu na inne podstrony.

By nasze czcionki były cachowane, możemy użyć nagłówków Expires, które sugerują przeglądarkom, jak długo nie muszą sprawdzać, czy pliki (w tym wypadku fontów) znajdujące się na naszym serwerze nie uległy zmianie. W pewnym sensie jest to optymalizacja fontu po stronie użytkownika. Same nagłówki dodajemy w .htaccess.

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType font/woff .woff
AddType font/woff2 .woff2
AddType image/svg+xml .svg

ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType font/ttf "access plus 1 year"
ExpiresByType font/otf "access plus 1 year"
ExpiresByType font/woff "access plus 1 year"
ExpiresByType font/woff2 "access plus 1 year"

Przykład nagłówków Expires. AddType został dodany ze względu na to, że niektóre serwery nie obsługują fontów. Dodaliśmy więc ich typy dla pewności, by były rozpoznawane.

Kompresja GZIP fontów w formatach EOT / TTF

Pliki fontów w formatach EOT / TTF nie są poddawane domyślnie kompresji. Wykorzystując je na stronie, zadbajmy więc o nią samodzielnie. Poprzez dodanie do .htaccess poniższego kodu:

<ifmodule mod_deflate.c>
<ifmodule mod_mime.c>
Addtype font/opentype .otf
Addtype font/eot .eot
Addtype font/truetype .ttf
</ifmodule>
AddOutputFilterByType DEFLATE font/opentype font/truetype font/eot
</ifmodule>

Jest jednak kwestia mocno marginalna, ze względu na bardzo sporadyczne hostowanie fontów w tych formatach i często automatyczne kompresowanie ich przez systemy CMS.

Minimalizowanie objętości stosowanych fontów

Dodatkowe style i warianty grubości linii fontu znacznie spowalniają jego ładowanie. W niektórych szablonach systemów CMS mogą być one z kolei dodawane w myśl ich ewentualnego użycia w przyszłości, dodatkowo. Często również ze wszystkimi możliwymi zestawami znaków dla dosłownie wszystkich języków (gdy twórca chce zadbać o uniwersalność szablonu). Warto więc się ich pozbyć.

Ten błąd może jednak pojawić się także przy korzystaniu z Google Fonts. Dostosowywanie i optymalizacja fontu w kreatorze odnośnika pozwala tutaj dodać wiele różnych stylów i wariantów linii. Co do zasady, na stronach stosujemy zawsze tylko tyle fontów i ich wariantów, ile jest absolutnie niezbędne dla jej designu.

Unicode-range, czyli niedoceniana optymalizacja czcionki

Właściwość CSS unicode-range:, zamieszczana przy instrukcji @font-face, wskazuje przeglądarce, dla jakiego zestawu znaków stosowany powinien być dany font. Na pozór nie jest to nic wielkiego. W praktyce jednak, gdy na podstronie nie wystąpi żaden znak z zakresu, dla którego stosujemy dany plik, to jego pobieranie zostanie pominięte. Warto dodać.

W końcu, czy może być jakakolwiek lepsza optymalizacja czcionki od pominięcia jej pobierania? Dzięki niemu tam, gdzie to możliwe maksymalnie redukujemy czas ładowania.

Fonty hostowane lokalnie czy Google Fonts?

Przedstawione tutaj metody optymalizacji dotyczyły zarówno fontów hostowanych lokalnie, jak i fontów zaciąganych z Google Fonts. Nie każda przedstawiona optymalizacja czcionki dotyczyła obu na raz, przedstawiliśmy jednak praktycznie wszystko, co da się w tym temacie zrobić.

Na koniec odpowiedzmy więc jeszcze na kluczowe pytanie: lepsze będzie hostowanie fontu lokalnie, na serwerze, czy korzystanie z Google Fonts?

Google Fonts vs fonty lokalne - teoria a praktyka

Teoretycznie najszybszym sposobem na załadowanie fontu powinno być serwowanie go z własnego serwera. Koniec końców, korzystając z Google Fonts mnożymy zapytania do zewnętrznych serwerów niezbędne do załadowania naszej witryny, co nie może być szybsze, prawda?

Nie do końca. Mniej zapytań zewnętrznych może i pozwoli nam ugrać parę punktów w metrykach PageSpeed Insights, realny czas ładowania strony może być jednak niższy przy korzystaniu z Google Fonts.

Poza tym, ładując wszystkie fonty z Google Fonts, zmniejszamy też ilość kodu, który musi przetworzyć przeglądarka i zapewniamy sobie dodatkowo tym samym pełną kompatybilność z praktycznie każdym używanym powszechnie oprogramowaniem.

Wszystko dzięki temu, że Google dostosuje automatycznie kod do urządzenia i przeglądarki, z których pochodzi zapytanie. Nie wystąpi więc, jak przy ładowaniu lokalnym, potrzeba przetworzenia wszystkich wariantów kodu umieszczonych zazwyczaj w jednym pliku CSS na stronie.

Wady Google Fonts

Największa wada korzystania z Google Fonts, jeśli interesuje nas jak najlepsza optymalizacja fontów, to brak możliwości łatwego skorzystania z pełnego zakresu wartości font-display (instrukcja @font-face jest zaciągana z serwera Google). W tym zakresie można pogodzić się z tą stratą i zaakceptować ryzyko pojawienia się niezależnych od nas opóźnień lub próbować wdrożyć niestandardowy kod na stronie.

Warto wspomnieć też, że Google Fonts nie będzie sprawdzać się za dobrze w przypadku fontów niestandardowych lub edytowanych poprzez dodatkowe parametry (np. inny styl lub inną grubość linii). Wówczas, kod nawet najpopularniejszych fontów będzie dla przeglądarek nowy, co spowoduje wysłanie zapytania do serwera i pobranie pliku.

Co wybrać, Google Fonts czy fonty lokalne?

To zależy od sytuacji strony i problemu, jaki ma rozwiązać optymalizacja czcionek. Ładowanie lokalne dobrze jest wdrożyć gdy wykorzystujemy fonty niestandardowe lub używamy nietypowych zestawów znaków. Jest to też rozwiązanie dobre wtedy, gdy z jakiegoś powodu (np. nacisku na aspekty UX) zależy nam na font-display.

W pozostałych przypadkach rekomendowalibyśmy jednak korzystanie z Google Fonts. W większości przypadków jest to opcja najkorzystniejsza i najprostsza we wdrożeniu. Zapewniająca bardzo dobrą szybkość ładowania, idealna przy popularnych fontach i nieskomplikowana w optymalizacji.

Podsumowując

Z punktu widzenia SEO nie ma oczywiście jednego idealnego sposobu czy przepisu na to, jak powinna wyglądać optymalizacja fontu. Jak zwykle: “to zależy”. Pamiętaj jednak, że z reguły to Google Fonts zdaje egzamin lepiej. Jest prostsze w implementacji i nie wymaga wielu zabiegów optymalizacyjnych. Fonty hostowane lokalnie stosuje się jako rozwiązanie lepsze dla SEO raczej sporadycznie, m.in. w wymienionych wyżej przypadkach.

---