Szybkie wczytywanie fontów to temat, który jest bardzo często poruszany w kontekście optymalizacji naszych stron i aplikacji. Technik ładowania jest mnóstwo, możemy korzystać z wielu formatów, zaciągać fonty z Google Fonts lub lokalnie, opcji jest naprawdę wiele... Jak się w tym wszystkim połapać i jak wybrać odpowiednią opcję?
Olaf Sulich
2021-03-02
Szybkie wczytywanie fontów to temat, który jest bardzo często poruszany w kontekście optymalizacji naszych stron i aplikacji. Technik ładowania jest mnóstwo, możemy korzystać z wielu formatów, zaciągać fonty z Google Fonts lub lokalnie, opcji jest naprawdę wiele... Jak się w tym wszystkim połapać i jak wybrać odpowiednią opcję?
Ładowanie fontów z serwerów Google jest obecnie najpopularniejszą metodą, korzysta z niej prawie 43 milionów stron!. Zanim przejdziemy do tego, czy jest to dobra metoda, zobaczmy jak obecnie ładuje się w ten sposób fonty:
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400&display=swap"
rel="stylesheet"
/>Pamiętaj żeby zawsze wybierać sposób z <link>, ładowanie Google Fonts w CSS nie jest dobrą praktyką. Fonty ładowane za pomocą @import będą miały wysoki priorytet, ale jednocześnie blokują renderowanie drzewka CSSOM, czego chcemy uniknąć. Bardzo ważną rzeczą jest wybranie tylko tych fontów, których potrzebujemy oraz dodanie display=swap, o którym jeszcze powiemy.
Dodanie tzw. preconnecta pomaga nam usprawnić cały proces, dzięki niemu rozgrzewamy połączenie z zewnętrzną domeną Google, ale nie jest to jeszcze najlepsze rozwiązanie. Tricków na poprawnę wydajności ładowania tych fontów jest wiele, w moim przypadku sprawdził się sposób Bartka z Web Dev Insider.
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400&display=swap"
as="style"
rel="preload"
/>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400&display=swap"
rel="stylesheet"
media="print"
onload="this.media='all'"
/>Korzystamy tutaj ze sztuczki, dzięki której ładujemy fonty asynchronicznie i nadajemy im wysoki priorytet. Jeśli chcesz się dowiedzieć więcej o tym sposobie, to zachęcam Cię do zobaczenia filmu z wyjaśnieniem.
Przez lata fonty od Google były cachowane, jednak w ubiegłym roku sytuacja się zmieniła...Obecnie znacznie lepszym sposobem jest hostowanie fontów samodzielnie. Sam Google przyznaje to już od 2018 roku. Jeśli możesz, wybieraj rozwiązania typu self hosted.
W 2021 roku, prawdopodobnie najlepszym wyborem będzie format WOFF2. Jest on wspierany przez wszystkie nowoczesne przeglądarki. Dla tych przestarzałych możemy użyć znanego już od lat WOFF.
Przed sekundą wspominałem Ci o Google i rozwiązaniach typu self hosted, zapominając trochę o klasycznych fontach typu web-safe. Jeśli nie potrzebujesz customowego rozwiązania, zdecydowanie warto postawić na tą opcję:
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';Zanim przejdziemy do konkretnych strategii ładowania, musimy się przyjrzeć właściwości CSS, dzięki której będziemy mogli wpłynąć na sposób renderowania fontów. Właściwością o której mowa, jest właściwość font-display, znajdująca się w bloku @font-face:
@font-face {
font-family: Lato;
src: url('font-lato/lato-bolditalic-webfont.woff2') format('woff2')
font-weight: 700;
font-style: italic;
font-display: auto|block|swap|fallback|optional;
}W większości przypadków idealnie sprawdzi się opcja z font-display: swap. Dzięki niej fallbackowy font ładowany jest jest natychmiastowo, po upływie czasu, gdy nasz customowy font jest gotowy, tekst zostaje podmieniany.
Zobaczmy jak to działa w praktyce:
@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', "Helvetica", "Arial", sans-serif;
}Chcemy użyć na naszej stronie customowego fonta Lato, podając jednocześnie trzy fallbackowe fonty w font-family.
Dzięki font-display: swap, użytkownik nie będzie czekał na załadowanie Lato, a zobaczy jeden z podanych, fallbackowych fontów.
Jeśli naszym priorytetem jest poprawa metryki Cumulative Layout Shift, to warto rozważyć zastosowanie
font-display: optional
Mogłoby się wydawać, że sposób z font-display: swap będzie wystarczający, jednak tak nie jest. Poza szeregiem zalet, ten sposób posiada również wiele wad, największą z nich jest efekt FOUT (Flash of Unstyled Text).
Zach Leatherman w swoim artykule przedstawia zestawienie różnych strategii ładowania fontów. Okazuję się, że najlepszą metodą w kontekście wydajności jest metoda The Compromise. Jest ona inspirowana metodą z Ebaya, obecnie korzysta z niej Smashing Magazine.
Wykorzystujemy tutaj preloading, o którym mówiłem więcej w poprzednim wpisie. Korzystamy tutaj również z metody z font-display: swap. Jedyną różnicą jest dołączony kod JavaScript, który odpowiada za wieloetapowe ładowanie fontów.
Jeśli chcesz się dowiedzieć więcej o tym sposobie, to zapraszam Cię do dedykowanego artykułu na jego temat. Cały kod opisywanej metody jest dostępny w repozytorium na GitHubie.
Optymalizacja fontów pomaga nam w usprawnieniu metryk Time to Interactive i First Contentful Paint. Dzięki poprawie wydajności ładowania fontów Shopify zaobserwowało usprawnienie czasu ładowania strony o około 50%.