Przestałem korzystać z Google Fonts CDN
Ładowanie czcionek z Google CDN spowalnia Twoją stronę.
Kiedyś używałem jednego linku w nagłówku. Wydawało się to proste. Potem sprawdziłem swoje wyniki w Lighthouse.
Raport wykazał problem. Przeglądarka musiała nawiązać dodatkowe połączenia z serwerami Google. Musiała przeprowadzić wyszukiwanie DNS i procesy TLS handshake. Powodowało to opóźnienia. Przy wolnym połączeniu mobilnym tekst pozostawał niewidoczny zbyt długo.
Przeszedłem na self-hosting. Zajęło mi to jedno popołudnie. Teraz robię tak przy każdym projekcie.
Oto konfiguracja, której potrzebujesz:
- Używaj formatu WOFF2. Jest o 30% mniejszy niż WOFF. Nie potrzebujesz już starych formatów, takich jak .ttf czy .eot.
- Konwertuj swoje czcionki. Użyj biblioteki fonttools, aby skompresować pliki .ttf do formatu .woff2.
- Używaj właściwości font-display: swap. Wyświetla ona natychmiast tekst zastępczy (fallback). Zapobiega to niewidoczności tekstu podczas ładowania czcionki.
- Preloaduj krytyczne czcionki. Dodaj link preload do sekcji head dla czcionek używanych w części widocznej od razu po załadowaniu strony (above the fold).
- Zawsze używaj atrybutu crossorigin. Jeśli o tym zapomnisz, przeglądarka pobierze czcionkę dwukrotnie.
- Twórz podzbiory czcionek (subsetting). Jeśli Twoja strona używa języka angielskiego, usuń nieużywane glify. Może to zmniejszyć rozmiar pliku o 70%.
- Cache'uj swoje pliki. Użyj długiego nagłówka cache-control, aby zachować czcionki w przeglądarce.
Workflow jest prosty: Konwertuj do WOFF2. Użyj @font-face z swap. Preloaduj główną czcionkę z crossorigin. Cache'uj plik.
Ta konfiguracja poprawia prędkość ładowania i usuwa podmioty trzecie z Twojej ścieżki krytycznej (critical path).
Czy nadal używasz Google CDN na produkcji? Napisz mi dlaczego w komentarzach.