Ogranicz pracę z czcionkami, którą każda trasa wymaga od przeglądarki
Spisz żądania czcionek przy zimnym cache na stronie głównej, stronach konwersji, widokach zalogowanych i szablonach z różnymi systemami projektowymi. Zanotuj rodzinę, wagę, styl, plik, origin, rozmiar transferu i selektor. Zadeklarowana reguła @font-face sama w sobie nie uruchamia pobrania; przeglądarka zwykle pobiera daną odmianę, gdy bieżący układ jej używa. Dlatego warto najpierw usunąć globalne, nieużywane wagi i style.
Używaj kroju niestandardowego tam, gdzie rzeczywiście wnosi on wartość marki — często w nagłówkach display — i rozważ stosowanie stosu systemowego dla zwykłego tekstu, jeśli projekt na to pozwala. Nie zakładaj automatycznie, że font zmienny (variable) jest zawsze mniejszy: może zastąpić kilka statycznych plików, ale czasem będzie większy od jednej statycznej odmiany. Porównuj skompresowane zasoby faktycznie żądane przez daną trasę.
Usuń rodziny, wagi, kursywy i fonty ikon, które nie mają przetestowanego użycia na poziomie trasy.
Sprawdź, czy licencja pozwala na dostawę webową, podzestawienie (subsetting) i self-hosting przed zmianą procesu budowy.
Używaj WOFF2 i twórz subsety, nie usuwając potrzebnych znaków
Zacznij od WOFF2 jako podstawy dla nowoczesnych przeglądarek. Rekomendacja W3C opisuje WOFF2 jako pakiet dla web-fontów zaprojektowany dla lepszej kompresji i szybkiej dekompresji; jest on zaimplementowany w głównych przeglądarkach. Zachowaj inny format tylko dla udokumentowanego wymogu przeglądarek legacy; w przeciwnym razie dobrze zaprojektowany fallback jest bezpieczniejszą drogą kompatybilności.
Subsetting tworzy mniejszy plik zawierający wybrane glify, czyli kształty znaków. unicode-range może powiązać subsety z zakresami znaków, dzięki czemu przeglądarka wybiera odpowiedni plik przy dopasowywaniu tekstu. Buduj subsety z rzeczywistych stron i języków, które wspierasz — włączając interpunkcję, waluty, imiona, teksty prawne i skrypty wprowadzane przez użytkowników. Brakujące glify to problem poprawności, a nie dopuszczalne oszczędności bajtów.
Testuj reprezentatywne strony z lokalizacją i wprowadzanie do formularzy, nie tylko angielskie próbki projektu.
Upewnij się, że unicode-range oraz zakres wagi/stylu każdego subsetu odpowiada wdrożonemu plikowi.
Projektuj czcionkę zapasową (fallback) i politykę font-display razem
Czcionka zapasowa to to, co użytkownicy widzą, gdy czcionka niestandardowa nie jest gotowa. Wybierz ją o zbliżonych proporcjach, a następnie porównaj rzeczywiste nagłówki, wielowierszowe przyciski, nawigację, tabele, formularze i długie zlokalizowane ciągi. Różne szerokości zmieniają zawijanie; różne ascent, descent lub line-gap zmieniają wysokość bloku. Obie różnice mogą przesuwać już widoczną na stronie zawartość.
font-display definiuje zachowanie renderowania, gdy odmiana jest niedostępna. optional ma bardzo krótki okres blokowania i brak okresu swap, więc może pasować do tekstu zasadniczego, gdy stabilny fallback jest preferowany przy pierwszej wizycie. swap szybko pokazuje fallback i później może zastosować web font, ale stosuj go tylko tam, gdzie późniejsza zamiana nie spowoduje uciążliwego przemieszczenia układu. block albo fallback powinny być stosowane z przetestowanego powodu projektowego, a nie jako globalny domyślny wybór. CSS size-adjust może pomóc dopasować metryki fallbacku, ale wizualnie weryfikuj każdy wspierany skrypt i punkt widoku (viewport).
Nie polegaj na opóźnionej czcionce niestandardowej w tekście dotyczącym płatności, odzyskiwania konta, bezpieczeństwa ani nawigacji.
Zastępcza litera może przekazać błędne znaczenie; SVG jest zwykle bezpieczniejszym wyborem dla symboli interfejsu.
Popraw wykrywanie, ale powściągnij preload i oceń przepływ danych
Odmiana zadeklarowana tylko w zewnętrznym arkuszu stylów może zostać wykryta dopiero po pobraniu i sparsowaniu tego arkusza. Utrzymywalny krytyczny CSS może ujawnić niezbędną deklarację wcześniej; nie umieszczaj jednak binarnego pliku czcionki inline, bo to powiększa dokument. Dla pochodzenia zewnętrznego preconnect może ustawić połączenie wcześniej. Żądania czcionek są zasobami CORS, więc dostawa cross-origin i preloads wymagają poprawnej obsługi crossorigin.
Preload to nadpisanie priorytetu, a nie uniwersalny przełącznik szybkości. Może konkurować z inną krytyczną pracą i pobrać odmianę, której trasa nigdy nie potrzebuje; omija też wybór unicode-range. Najpierw napraw późne wykrywanie, potem preloaduj maksymalnie jeden sprawdzony plik pierwszego widoku, używając dokładnego URL, as=font i crossorigin. Google Fonts podaje, że żądania API zawierają adres IP odwiedzającego, żądany URL, nagłówki HTTP i referer; jednocześnie informuje, że jego API nie ustawia ani nie loguje ciasteczek i nie używa zebranych informacji do profili czy targetowanej reklamy. Self-hosting zapobiega przesyłaniu tych danych do Google przy tych ładowaniach. Oceń sposób dostawy, informacje w polityce prywatności, jurysdykcję, umowy i uzyskaj kwalifikowaną poradę, gdy to konieczne.
Porównaj ślady (traces) z zimnym cache i potwierdź, że preloaded plik jest wykorzystywany na danej trasie.
Rozważ zestawienie połączeń, możliwości cache/CDN, utrzymanie zasobów i przepływ danych odwiedzających.
Wersjonuj zasoby czcionek i zachowaj przetestowaną konfigurację CSS fallback.
Testuj zachowanie renderowania i traktuj czcionki jako zależność odpornościową
Przy zimnym cache użyj narzędzi sieciowych przeglądarki, aby sprawdzić łańcuch żądań CSS→czcionka, czasowanie, origin, cache i błędy. Powtórz test na ograniczonym łączu, potem spowolnij albo zablokuj żądanie czcionki. Sukces to czytelny tekst, użyteczne kontrolki, poprawne symbole i spójny układ zanim pojawi się niestandardowy krój. Testuj realistyczne układy w wąskim i desktopowym widoku, długie ciągi, błędy, treści zgód, ceny i każdy wspierany skrypt.
W Chromium nagraj przeładowanie w Performance panel i sprawdź ścieżkę Layout Shifts; DevTools potrafi zidentyfikować przesunięte elementy i animować to przesunięcie. Ładowanie czcionek jest znanym źródłem problemów, ale przesunięty element nie zawsze jest pierwotną przyczyną, więc skoreluj ślad z momentem zastosowania czcionki. Layout Instability API jest dostępne tylko w Chromium, co sprawia, że kontrole wizualne między przeglądarkami są ważne. Uwzględnij zasoby czcionek, zachowanie CORS, politykę cache, fallbacky i scenariusz rollbacku w przeglądzie wydania. Zamierzony tryb degradacji to czytelny tekst, nie pusta zawartość lub zepsuta nawigacja.
Ciepły cache może ukryć początkowe żądanie i problem z renderowaniem.
Powtórz kontrolę po zmianie plików, treści w CMS, szablonów, dostawców lub reguł CDN.