Przejdź do treści 
Wiele Czcionki internetowe WordPress ładują się równolegle, blokują renderowanie, a tym samym wydłużają LCP i FCP - szczególnie na urządzeniach mobilnych. W tym artykule pokażę, dlaczego zbyt wiele czcionek kosztuje czas, w jaki sposób powstają FOIT/FOUT i jakie konkretne środki zauważalnie przyspieszą Twoją witrynę.
Punkty centralne
- Redukcja do kilku cięć zmniejsza liczbę żądań i transfer danych
- Obciążenie wstępne i Preconnect priorytetyzują ważne pliki
- czcionka-wyświetlacz Zapobiega niewidocznemu tekstowi (FOIT)
- Lokalny Hosting oszczędza zewnętrzne opóźnienia i CORS
- Podzbiór usuwa nieużywane glify i zmniejsza czcionki
Dlaczego wiele czcionek internetowych w WordPress kosztuje czas ładowania?
Każda dodatkowa czcionka przynosi więcej Żądania, więcej wyszukiwań DNS i dodatkowe kilobajty. Kilka rodzin z czcionkami zwykłymi, pogrubionymi i kursywą szybko dodają do 500-1000 KB, zanim tekst pojawi się czysto. Ma to bezpośredni wpływ na Largest Contentful Paint (LCP), ponieważ przeglądarka może renderować tylko wtedy, gdy dostępne są ważne czcionki. Zaledwie trzy czcionki mogą wydłużyć pierwsze renderowanie o 20-50 procent, co mocno uderza w użytkowników korzystających z wolnych połączeń. Dlatego skupiam się na kilku, jasno zdefiniowanych krojach i bezpiecznych rozwiązaniach awaryjnych, aby uniknąć blokowania renderowania.
Jak czcionki internetowe są ładowane w WordPress - i gdzie się zacinają?
Czcionki internetowe często pochodzą od zewnętrznych dostawców lub z opcji motywu, co oznacza dodatkowe DNS-lookups i TLS handshakes. W przypadku FOIT (Flash of Invisible Text) przeglądarka czeka na czcionki i do tego czasu wyświetla niewidoczny tekst, co potęguje wrażenie „nic się nie dzieje“. FOUT (Flash of Unstyled Text) jest lepszy, ale powoduje krótkie skoki układu podczas przełączania z czcionki awaryjnej na czcionkę internetową. Bez priorytetyzacji, wstępnego połączenia i rozsądnego buforowania, czas ładowania i uczucie TTFB rosną. Planuję integrację tak, aby główna treść zawsze pojawiała się jako pierwsza, a czcionki pojawiały się później bez zacinania się.
Audyt i monitorowanie: wszystkie czcionki powinny być widoczne
Przed optymalizacją uzyskuję pełny przegląd. W DevTools filtruję w zakładce Network dla „Czcionka“, sprawdzić nazwy plików, rozmiary transferu i Inicjator (motyw, wtyczka, edytor bloków). Czasy wodospadu pokazują mi, czy czcionki blokują ścieżkę krytyczną. W panelu Coverage mogę sprawdzić, czy duże bloki CSS @font-face tylko minimalny może być użyty. Śledzenie wydajności ujawnia, czy renderowanie tekstu jest zablokowane, dopóki pliki WOFF2 nie będą gotowe. Na poziomie WordPress dezaktywuję testowo wtyczki, aby zidentyfikować ukryte źródła czcionek (kreatory stron, pakiety ikon). Moje podstawowe metryki: liczba żądań czcionek, całkowita liczba KB, czas do pierwszej czytelnej linii, czas trwania FOUT/FOIT i wpływ na LCP/FCP w pasku filmowym.
Porównuję dane laboratoryjne i terenowe: Szybki pulpit przez LAN maskuje problemy, które stają się widoczne dopiero w sieci 4G. Dlatego też testuję przy niskim obciążeniu procesora i ograniczonej przepustowości, by symulować realistyczne warunki mobilne. Dopiero gdy łańcuchy są czyste, a fallbacki renderują się stabilnie, dodaję dalsze dostrajanie literówek.
Wymierny wpływ na Core Web Vitals
LCP, FCP i CLS reagują wrażliwie na nierozważne ładowanie Czcionki, ponieważ opóźnione czcionki zmieniają układ i zaciemniają treść. Według HTTP Archive, strony z czcionkami internetowymi przesyłają średnio znacznie więcej danych, co jest bardziej zauważalne na urządzeniach mobilnych. Dokumentacja PageSpeed Insights jasno wyjaśnia, że zasoby blokujące renderowanie wydłużają ścieżkę do pierwszego wyświetlenia. Priorytetowe żądania skracają ten łańcuch i zauważalnie skracają czas oczekiwania. Jeśli chcesz zagłębić się w priorytetyzację, możesz znaleźć podstawowe informacje na stronie Priorytetyzacja żądań, którego używam specjalnie do rozbudowanych motywów.
Szczegółowe przyczyny techniczne
Wiele pojedynczych plików, niepołączone style i brakujące podzbiory zwiększają Ładunek niepotrzebne. Bez HTTP/2 lub HTTP/3 żądania są często kolejkowane i blokują ścieżkę renderowania. Zewnętrzne domeny, takie jak fonts.googleapis.com, dodają dodatkowe opóźnienia, które sumują się dla wielu rodzin. Nagłówki CORS są niezbędne, w przeciwnym razie przeglądarka anuluje wstępne ładowanie lub nie korzysta z niego. Zapobiegam takim przeszkodom dzięki lokalnemu udostępnianiu, czysto ustawionym nagłówkom i docelowemu ograniczeniu do dwóch do trzech cięć.
Unikaj pułapek typograficznych: Metryki, jakość awaryjna i fałszywe style
Oprócz czystego rozmiaru pliku, szczegóły literówek wpływają na stabilność wyświetlania. Jeśli wskaźniki czcionki awaryjnej i czcionki internetowej znacznie się różnią, podczas zamiany występują widoczne skoki. Wyrównuję wysokość poprzez regulacja rozmiaru i zablokować style syntetyczne, aby zapobiec „fałszywemu“ pogrubieniu/talic:
@font-face {
font-family: 'Inter';
src: url('/fonts/Inter-roman.var.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
/* Dostosuj metryki, aby zmniejszyć CLS */
size-adjust: 100%;
ascent-override: 90%;
descent-override: 20%;
line-gap-override: 0%;
}
/* Wizualnie zharmonizuj czcionkę awaryjną */
body {
font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif;
font-size-adjust: 0.5; /* Lepsza regulacja wysokości x */
font-synthesis: none; /* Zapobiega faux-bold/italic */
}Definiuję osobną oś lub plik statyczny dla wariantów kursywy i unikam sztucznej kursywy. Organizuję również font-weight (300/400/600/700), aby przeglądarka nie dokonywała interpolacji. Ta precyzyjna praca zajmuje niewiele czasu, ale zapobiega zauważalnym zmianom układu podczas przełączania z czcionki awaryjnej na czcionkę internetową.
Usprawnienie: trzy natychmiastowe środki
Zmniejszam liczbę rodzin, zastępuję ozdobne cięcia awaryjnymi i konsekwentnie używam czcionka-wyświetlaczswap. Stosy systemowe (-apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell) szybko wyświetlają tekst, podczas gdy czcionka internetowa ładuje się w tle. Nagłówki zwykle wymagają tylko pogrubienia, a tekst główny zwykłego wariantu. Usuwam również niepotrzebne zdalne wywołania, aby generować mniej żądań. Jeśli chcesz wyciągnąć z tego jeszcze więcej, możesz Zmniejszenie liczby żądań HTTP a tym samym odciążyć całą ścieżkę krytyczną.
Zastąp czcionki ikon: SVG zapisuje żądania
Wiele motywów zawiera czcionki ikon (np. ikony społecznościowe lub ikony interfejsu użytkownika). Pojedyncza czcionka ikony może ważyć od 30 do 80 KB i może być @font-face wpływają na ścieżkę renderowania. Zamieniam takie czcionki na SVG - inline lub jako sprite. Zmniejsza to liczbę żądań, pozwala uniknąć FOIT/FOUT dla ikon i zapewnia ostrą jak brzytwa wizualizację na wszystkich wyświetlaczach. Jeśli całkowita zmiana nie jest możliwa od razu, wybieram czcionkę ikony do piktogramów, które są faktycznie używane i ustawiam wyświetlanie czcionki: opcjonalne, aby strona nigdy nie czekała na czcionkę ikony:
@font-face {
font-family: 'ThemeIcons';
src: url('/fonts/theme-icons-subset.woff2') format('woff2');
font-display: opcjonalny; /* UI pozostaje sprawny, ikony pojawiają się później */
}Inline SVG pozwala mi również kontrolować kolory i stany za pomocą CSS bez ładowania nowych plików. Idealnie pasuje to do celu, jakim jest utrzymanie krytycznego łańcucha renderowania tak krótko, jak to możliwe.
Prawidłowo używaj obciążenia wstępnego, połączenia wstępnego i podgrzewania wstępnego
Używam Preconnect dla decydujących Domena, aby nadać priorytet DNS, TCP i TLS. Używam preload tylko dla naprawdę krytycznych plików WOFF2, w przeciwnym razie marnuję priorytet na drugorzędne zasoby. Tag musi ustawiać as=“font“, type=“font/woff2″ i crossorigin, w przeciwnym razie przeglądarka częściowo zignoruje podpowiedź. Zbyt wiele preloadów sabotuje się nawzajem i spycha ważniejsze treści na dalszy plan. Szczupły, przetestowany zestaw podpowiedzi skraca czas do pierwszej czytelnej linii:
Hostuj lokalnie i zachowaj zgodność z RODO
Pobieram czcionki, których potrzebuję, tworzę dla nich podzbiory i udostępniam je bezpośrednio z mojego komputera. Serwer. Oszczędza to zewnętrzne wyszukiwania DNS, zmniejsza problemy z CORS i daje mi pełną kontrolę nad pamięcią podręczną. Podejście lokalne ułatwia długi czas działania pamięci podręcznej i zapewnia stałą dostępność. Dla jasności prawnej i praktycznej implementacji, mój przewodnik po Lokalne czcionki Google. W ten sposób utrzymuję technologię i ochronę danych w czystości bez poświęcania typografii.
Subsetting i zmienne czcionki: maksymalny efekt przy małym rozmiarze
Zamiast ładować kompletne pakiety językowe, zachowuję tylko wymagane Glify i usunąć egzotyczne zestawy. Łacina bez rozszerzeń często pozwala zaoszczędzić 40-70 procent rozmiaru pliku, co jest szczególnie zauważalne na urządzeniach mobilnych. Zmienne czcionki zastępują kilka statycznych plików jednym zasobem z osiami dla grubości i kursywy. Zmniejsza to liczbę żądań i poprawia priorytetyzację, jeśli wstępnie załaduję tylko jeden plik WOFF2. Jednocześnie zachowana zostaje różnorodność wizualna bez konieczności przesyłania pięciu sekcji osobno.
Zmienne czcionki w praktyce: ukierunkowane wykorzystanie osi
W realizacji unikam niepotrzebnie szerokich obszarów osi. Ograniczam wght na przykład do 400-700, jeśli używane są tylko czcionki Regular i Bold. Zmniejsza to złożoność renderowania i utrzymuje spójność wizualną. W przypadku responsywnej typografii systematycznie używam numerycznych wag, a nie słów kluczowych:
@font-face {
font-family: 'InterVar';
src: url('/fonts/Inter-roman.var.woff2') format('woff2');
font-weight: 400 700; /* Wąski zakres zamiast 100-900 */
font-style: normal;
font-display: swap;
}
h1, h2 { font-family: 'InterVar', system-ui, sans-serif; font-weight: 700; }
p { font-family: 'InterVar', system-ui, sans-serif; font-weight: 400; }
:root { font-optical-sizing: auto; }
/* Przypadki specjalne na oś, w stosownych przypadkach:
.element { font-variation-settings: 'wght' 650; } */Pozwala to zachować elastyczność zmiennej czcionki bez obciążania systemu niepotrzebnymi etapami pośrednimi.
Która optymalizacja ile daje? (Przegląd)
Poniższy przegląd pokazuje, czego używam w praktyce, aby osiągnąć jak najlepsze wyniki. Oszczędności i na co zwracam uwagę. Wartości są empirycznymi zakresami i zależą od stanu początkowego, motywu i liczby zmian. Każdą zmianę testuję za pomocą PageSpeed Insights i WebPageTest, aby rozpoznać efekty uboczne. Następnie dokonuję ukierunkowanych korekt wartości progowych i buforowania. Zwiększa to pewność, że każda miara zyskuje na czasie rzeczywistym.
| Podejście optymalizacyjne | Typowe oszczędności | Ważna uwaga |
|---|---|---|
| Redukcja do 2 cięć | 150-400 KB | Czystość Fallbacki zestaw |
| font-display: swap | + szybko czytelny tekst | Akceptuj FOUT zamiast FOIT |
| Lokalny hosting + długie buforowanie | 2-3 żądania mniej | Prawidłowa kontrola pamięci podręcznej/ETag |
| Połączenie wstępne + ukierunkowane obciążenie wstępne | 50-200 ms | Tylko krytyczny Pliki |
| Podzbiór (baza łacińska) | 40-70 % mniejszy | Możliwość rozbudowy w późniejszym terminie |
| Zmienna czcionka zamiast 4 plików | -3 Żądania | Używaj tylko WOFF2 |
Rozsądne korzystanie z wtyczek - bez narzutów
OMGF ładuje czcionki Google lokalnie, automatycznie dzieli i skraca niepotrzebne. Znak out. Asset CleanUp pozwala mi dezaktywować czcionki strona po stronie, jeśli określony szablon ich nie potrzebuje. Autoptimise łączy CSS, minimalizuje i może wyodrębniać czcionki, dzięki czemu krytyczne style są na pierwszym miejscu. Starannie testuję te kombinacje, ponieważ nadmierna agregacja pod HTTP/2 może przynieść efekt przeciwny do zamierzonego. Celem pozostaje stabilny, krótki łańcuch do pierwszej widocznej treści.
Praktyczna implementacja w WordPress: przykłady kodu
Wiele motywów lub kreatorów stron automatycznie dołącza czcionki. Usuwam zduplikowane źródła, przełączam się na pliki lokalne i ustawiam jasne priorytety - najlepiej w motywie potomnym.
1) Usuń zewnętrzne czcionki z motywu i załaduj czcionki lokalne.
/* functions.php w motywie podrzędnym */
add_action('wp_enqueue_scripts', function() {
/* Dostosuj/znajdź przykładowe uchwyty motywu/kompilatora */
wp_dequeue_style('google-fonts');
wp_deregister_style('google-fonts');
/* Dołącz własne, lokalne style czcionek */
wp_enqueue_style('local-fonts', get_stylesheet_directory_uri() . '/assets/css/fonts.css', [], '1.0', 'all');
}, 20);2) Ukierunkowane obciążenie wstępne dla krytycznego WOFF2
/* functions.php */
add_action('wp_head', function() {
echo '';
}, 1);3) Ustaw buforowanie i nagłówek CORS dla czcionek
# .htaccess (Apache)
AddType font/woff2 .woff2
Header set Cache-Control "public, max-age=31536000, immutable"
Header set Access-Control-Allow-Origin "*"# Nginx (blok serwera)
location ~* .(woff2|woff)$ {
add_header Cache-Control "public, max-age=31536000, immutable";
add_header Access-Control-Allow-Origin "*";
types { font/woff2 woff2; }
}4) Przykład fonts.css z podzbiorami i zamianą
@font-face {
font-family: 'Inter';
src: url('/fonts/InterLatin-400.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+000-5FF; /* Latin base */
}
@font-face {
font-family: 'Inter';
src: url('/fonts/InterLatin-700.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
unicode-range: U+000-5FF;
}Strony wielojęzyczne: Załaduj podzbiory według ustawień regionalnych
W przypadku projektów międzynarodowych ładuję tylko niezbędne czcionki. W WordPress mogę załadować każdy Lokalizacja rejestrują różne style. Na przykład niemiecki/angielski pozostaje z wąskim podzbiorem łacińskim, podczas gdy polski lub turecki wariant otrzymuje rozszerzone glify - ale Tylko tam, gdzie jest to potrzebne.
/* functions.php */
add_action('wp_enqueue_scripts', function() {
$locale = get_locale();
if (in_array($locale, ['de_DE','en_US','en_GB'])) {
wp_enqueue_style('fonts-latin', get_stylesheet_directory_uri().'/assets/css/fonts-latin.css', [], '1.0');
} elseif (in_array($locale, ['pl_PL','tr_TR'])) {
wp_enqueue_style('fonts-latin-ext', get_stylesheet_directory_uri().'/assets/css/fonts-latin-ext.css', [], '1.0');
}
});Ważne: Upewniam się, że tekst główny ma zawsze solidny systemowy łańcuch awaryjny. Gwarantuje to, że strona pozostanie czytelna, nawet jeśli plik językowy ulegnie awarii lub pamięć podręczna zostanie zamknięta.
Hosting, pamięć podręczna i CDN jako mnożniki
Szybkie dyski SSD NVMe, HTTP/3 i CDN skracają TTFB i zapewniają Czcionki szybciej globalnie. Pamięć podręczna po stronie serwera zmniejsza liczbę żądań zaplecza, podczas gdy buforowanie przeglądarki pobiera czcionki z lokalnej pamięci podręcznej przez wiele miesięcy. Brotli dla WOFF2 prawie nic nie wnosi, ale dla CSS z @font-face wciąż warto. Nadaję również priorytet krytycznym częściom CSS inline, aby tekst pojawiał się natychmiast. Tworzy to łańcuch: stały backend, czyste dostarczanie, mniejsze pliki czcionek - i w końcu szybciej widoczny tekst.
Plan testów i wdrożenia: bezpieczne uruchomienie
Wprowadzam optymalizacje czcionek krok po kroku, aby zminimalizować ryzyko. Najpierw dokumentuję status quo (żądania, KB, LCP/FCP/CLS). Następnie redukuję rodziny i kroje, zastępuję ikony i przełączam się na lokalne pliki WOFF2 z długą pamięcią podręczną. Następnie dodaję Preconnect/Preload - celowo oszczędnie. Po każdym kroku sprawdzam pasek filmowy, aby zobaczyć, czy FOIT został zredukowany i czy skoki układu zniknęły. Dopiero gdy nie widać już żadnych regresji, wprowadzam zmiany we wszystkich szablonach.
Strony z nietypowymi nagłówkami (bardzo duże rozmiary czcionek, śledzenie) lub intensywnie wykorzystujące kursywę są szczególnie krytyczne. Tutaj w szczególności sprawdzam, czy regulacja rozmiaru a nadpisania metryczne naprawdę wyłapują skoki awaryjne. Mój cel pozostaje niezmienny: pierwsza czytelna linia tak wcześnie, jak to możliwe - bez ujeżdżania aktów przez późne czcionki.
Krótkie podsumowanie: krótszy czas ładowania, większa czytelność
Zbyt wiele czcionek kosztuje Sekundy, ponieważ wydłużają żądania, blokują renderowanie i zwiększają ilość danych. Uszczuplam czcionki, nadaję im priorytety i polegam na swapach, subsettingu i lokalnym hostingu. To niezawodnie obniża LCP i FCP oraz redukuje wizualne skoki. Dzięki monitorowaniu za pomocą PageSpeed Insights i powtarzanym testom zapewniam efekt i zbieram wartości historyczne. Dzięki temu typografia jest silna, a użytkownicy nie muszą czekać - co jest dokładnie tym, co chcę osiągnąć.
