Tak, Google Fonts mogą spowalniać WordPressa, ale problemem nie jest sam font. Największe znaczenie ma sposób jego ładowania, liczba wariantów oraz zależność od zewnętrznego serwera. Nieoptymalna konfiguracja może wydłużać oczekiwanie na zasoby, blokować wyświetlenie tekstu i pogarszać wyniki LCP oraz CLS.
Dlaczego Google Fonts mogą spowalniać WordPress?
Przy ładowaniu fontu z Google Fonts przeglądarka najpierw łączy się z zewnętrzną domeną, pobiera arkusz stylów, a następnie właściwe pliki fontów. Każdy dodatkowy wariant, na przykład regular, bold, italic czy 700, oznacza kolejne zasoby do pobrania i przetworzenia.
Takie połączenia mogą zwiększyć opóźnienie rozpoczęcia ładowania, ale nie należy utożsamiać tego bezpośrednio z TTFB całej strony. TTFB dotyczy czasu odpowiedzi serwera dla dokumentu HTML, natomiast Google Fonts wpływają przede wszystkim na pobieranie zasobów i renderowanie tekstu. Przy wolnym połączeniu lub nieprawidłowej konfiguracji tekst może pojawić się później albo zmieniać wygląd po załadowaniu właściwego fontu.
Google CDN czy hostowanie lokalne?
Obie metody mogą działać dobrze. Wybór zależy od tego, czy ważniejsza jest prostota wdrożenia, kontrola nad zasobami czy ograniczenie połączeń zewnętrznych.
| Kryterium | Google Fonts z CDN | Hostowanie lokalne |
|---|---|---|
| Szybkość | Może być dobra przy małej liczbie wariantów i poprawnej konfiguracji | Eliminuje połączenie z zewnętrznym serwerem, ale wymaga poprawnego cache i kompresji |
| Prywatność | Przeglądarka łączy się z serwerami Google | Pliki są pobierane z własnego serwera lub własnego CDN |
| Łatwość wdrożenia | Bardzo łatwa, szczególnie w motywach i wtyczkach | Wymaga konfiguracji plików, CSS lub wtyczki |
| Kontrola nad font-display | Ograniczona do ustawień generowanych przez usługę | Pełna kontrola w regule @font-face |
Lokalne hostowanie nie gwarantuje automatycznie lepszego wyniku. Zbyt duże pliki, brak cache lub pobieranie wszystkich dostępnych odmian mogą zniwelować korzyści. Z kolei CDN może działać sprawnie, gdy używasz niewielu wariantów i dodasz preconnect.
Jak zoptymalizować Google Fonts w WordPressie?
Najlepiej wprowadzać zmiany w tej kolejności:
- Ogranicz liczbę wariantów – pozostaw tylko grubości i style faktycznie używane na stronie, na przykład regular oraz 700.
- Wybierz lokalne hostowanie – możesz użyć wtyczki OMGF, która wykrywa fonty ładowane z Google Fonts i pomaga pobrać je na serwer WordPress.
- Sprawdź zakres znaków – jeśli strona jest po polsku, potrzebujesz między innymi znaków ą, ć, ę, ł, ń, ó, ś, ż i ź. Nie usuwaj zakresu Latin Extended, jeśli jest wymagany przez treść.
- Włącz długie przechowywanie w cache – pliki WOFF2 zmieniają się rzadko, dlatego przeglądarka powinna móc przechowywać je lokalnie.
- Przetestuj stronę po wdrożeniu – sprawdź, czy fonty mają właściwe adresy, czy tekst jest widoczny przed ich pobraniem i czy nie pojawiły się przesunięcia układu.
Ostrzeżenie: przed lokalnym wdrożeniem sprawdź licencję konkretnego kroju oraz poprawność konfiguracji. Fonty dostępne w Google Fonts są udostępniane na licencjach open source, ale należy zachować pliki i wdrożyć je zgodnie z warunkami danej licencji. Po zmianie sposobu ładowania sprawdź też, czy motyw lub wtyczka nie dodaje równolegle drugiej kopii fontu z CDN.
Jak wdrożyć font-display: swap?
Właściwość font-display: swap pozwala przeglądarce wyświetlić tekst przy użyciu fontu zastępczego, zanim pobierze właściwy krój. Dzięki temu tekst nie pozostaje niewidoczny podczas oczekiwania na font. Po pobraniu przeglądarka podmienia font zastępczy na docelowy.
Przy lokalnym hostowaniu reguła może wyglądać tak:
@font-face {
font-family: "NazwaFontu";
src: url("/wp-content/uploads/fonts/nazwa-fontu.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
body {
font-family: "NazwaFontu", Arial, sans-serif;
}W WordPressie możesz dodać tę konfigurację w motywie potomnym, przez własny arkusz CSS albo za pomocą wtyczki obsługującej lokalne fonty. Nie edytuj bezpośrednio plików motywu nadrzędnego, ponieważ aktualizacja może usunąć zmiany.
Sam swap nie rozwiązuje wszystkich problemów. Jeśli font zastępczy ma inne wymiary niż docelowy, po podmianie może wystąpić przesunięcie elementów, czyli pogorszenie CLS. Dlatego warto dobrać fallback o podobnych proporcjach i sprawdzić stronę na urządzeniach mobilnych.
Co zrobić, gdy musisz korzystać z CDN?
Jeśli lokalne hostowanie nie jest możliwe, ogranicz liczbę zapytań i przyspiesz nawiązanie połączenia z domenami Google. W sekcji <head> można zastosować:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>Preconnect pozwala wcześniej rozpocząć zestawianie połączenia z serwerem, więc pobieranie fontu może wystartować szybciej. Nie zastępuje jednak ograniczenia liczby wariantów ani konfiguracji font-display: swap.
Nie dodawaj Google Fonts przez wiele reguł @import w CSS. Takie rozwiązanie może opóźniać przetwarzanie arkuszy stylów. Sprawdź też kod strony po optymalizacji, ponieważ motyw, kreator i wtyczki mogą ładować te same fonty niezależnie od siebie.
Najbezpieczniejszy schemat to użycie jednego lub dwóch krojów, ograniczenie wag do faktycznie potrzebnych, wdrożenie font-display: swap oraz test w Lighthouse lub PageSpeed Insights. Jeśli strona korzysta z Google Fonts bez kontroli nad konfiguracją, lokalne hostowanie przez OMGF może uprościć zarządzanie zasobami i usunąć zależność od zewnętrznych zapytań.
Google Fonts nie muszą spowalniać WordPressa. Najczęściej problem powodują nadmiarowe warianty, wielokrotne ładowanie tych samych plików i brak font-display: swap. Dla większości stron dobrym punktem wyjścia jest lokalne hostowanie niewielkiego zestawu fontów albo poprawnie skonfigurowany CDN z preconnect.
