Strona internetowa, aby poprawnie się wyświetlała potrzebuje czcionek. Fonty ładowane są w zależności od rodzajów wykorzystywanych przez motyw WordPress. Dowiedz się jak skonfigurować czcionki lokalne WordPress.
Czcionki lokalne WordPress
W przypadku, kiedy korzystamy z czcionek zewnętrznych przykładowo Google, przeglądarka musi połączyć się z serwerami zewnętrznymi, najczęściej za granicą. Wydłuża to czas ładowania strony, co jest oczywiście niekorzystne. Dlatego warto korzystać z czcionek lokalnych, znajdujących się na naszym serwerze. W ten sposób zmniejszamy ilość zapytań HTTP, jak również mamy większą kontrolę, uniezależniając się od dostawców lokalnych.
Niektóre motywy WordPress posiadają możliwość włączenia czcionek lokalnych, jak również posiadają odpowiedni zestaw. W zależności od motywu należy sprawdzić ustawienia, jednak jeżeli nie znajdziemy takiej opcji możemy skorzystać z wtyczek WordPress.
Duże możliwości, także w wersji darmowej oferuje plugin OMGF, wyszukuje wtyczki znajdujące się na naszej stronie i pozwala na ustawienie ich ładowania lokalnie. Dodatkowo możemy także wyłączyć z ładowania czcionki, których nie używamy.
Ładowanie czcionki z atrybutem swap
Dobrym rozwiązaniem jest ładowanie czcionek z parametrem swap, który określa w jaki sposób przeglądarka ma postępować, gdy czcionka jest ładowana. Ustawienie font-display swap oznacza, że przeglądarka będzie natychmiast renderować tekst przy pomocy domyślnej czcionki, przykładowo systemowej. Następnie, gdy czcionka zostanie pobrana, zastąpi systemową.
W ten sposób strona załaduje się wcześniej, nie czekając na ładowanie całego zestawu czcionki motywu WordPress. Użycie parametru swap ma na celu zapewnienie szybszej dostępności tekstu dla użytkowników, nawet jeśli właściwa czcionka nie została jeszcze pobrana. Jest to szczególnie przydatne w przypadku, gdy użytkownik korzysta z wolniejszego łącza na telefonie komórkowym.
Czcionki lokalne WordPress – czesne ładowanie
Podczas ładowania strony w przeglądarce, w różnej kolejności ładują się wszystkie jej elementy, czyli grafika, kod oraz oczywiście tekst. Aby zobaczyć w jaki sposób ładowana jest strona można wykorzystać narzędzie WebPageTest.
Przykład pokazuje nam, że pliki czcionek WOLFF2 z Google ładowane są pod koniec, po zdjęciach. Dobrą praktyką jest wczesne ładowanie czcionek, co umożliwi szybsze pojawienie się strony w przeglądarce. Możemy wykorzystać do tego wtyczkę, jak OMGF, gdzie wybieramy zestaw do wczesnego ładowania.
Warto jednak pamiętać, że wcześniejsze ładowanie czcionek należy stosować ostrożnie. W innym wypadku nasze działania będą zwiększać ilość danych pobieranych przez przeglądarkę w przypadku, gdy załadowane czcionki nie będą ostatecznie wykorzystywane na stronie. Dlatego powinniśmy dokładnie przemyśleć, które czcionki powinny być wcześniej ładowane, aby zapewnić optymalne działanie strony.
Optymalizacja czcionek WordPress
Dodatkowo możemy także stworzyć własne pliki zawierające zestawy czcionek, które umieścimy na serwerze, pozwoli to na zmniejszenie wielkość plików.
Usuń niepotrzebne dane
Pliki czcionek, szczególnie te w formatach TTF czy OTF, mogą zawierać dodatkowe metadane, tablice znaków, czy warianty czcionek, będą one używane w naszym motywie. Kompresja może polegać na usuwaniu zbędnych danych, co pozwoli zmniejszyć rozmiar plików.
Określ zestaw znaków
Warto zdawać sobie sprawę, że pliki czcionek mogą zawierać wiele znaków, spoza polskiego słownika. Należy przy tym uważać, ponieważ wybór nieodpowiedniego zestawu może spowodować wyświetlanie polskich znaków innym typem czcionki, co czasem widzimy na stronach.
Kodowanie Base64
Czasami pliki czcionek posiadają kodowanie w formacie Base64, są osadzane bezpośrednio w arkuszu stylów CSS. Choć może to zwiększyć rozmiar arkusza stylów, pozwala to na uniknięcie dodatkowych zapytań HTTP do serwera dla pobrania pliku czcionki.
Wykorzystuj nowsze formatów plików czcionki
Nowoczesne formaty plików czcionek, takie jak WOFF2, dzięki optymalizacji, umożliwiają dużo większą kompresję niż starsze formaty, takie jak TTF czy OTF. Wybór odpowiedniego formatu pliku czcionki może znacznie wpłynąć na jego rozmiar.
WOFF
Jedną z głównych zalet formatu WOFF jest jego zdolność do efektywnej kompresji danych czcionek, co prowadzi do znacznego zmniejszenia rozmiaru plików. Format WOFF jest wszechstronny i obsługuje różne typy czcionek, takie jak czcionki TrueType (TTF), OpenType (OTF). Jednak pliki TTF czy OTF, mogą zawierać nadmiarowe dane.
Format WOFF zoptymalizowano specjalnie pod kątem wykorzystania na stronach internetowych. Zawiera tylko niezbędne dane, co prowadzi do lepszej wydajności i mniejszego zużycia zasobów. Dodatkowo zachowuje informacje, które są istotne dla poprawnego wyświetlania tekstu na ekranach o różnej rozdzielczości.
WOFF2
Format WOFF2 jest następcą formatu WOFF i wprowadza kilka istotnych udoskonaleń, które poprawiają wydajność i skuteczność dostarczania czcionek. Jedną z głównych zalet formatu WOFF2 jest znacznie lepsza kompresja danych w porównaniu do poprzednika. Dzięki wykorzystaniu bardziej zaawansowanych algorytmów kompresji, pliki czcionek WOFF2 mogą być znacznie mniejsze niż pliki WOFF.
WOFF2 może zredukować rozmiar plików czcionek nawet o 30-50% w porównaniu do formatu WOFF. WOFF2 nadal obsługuje zaawansowane funkcje typograficzne, takie jak ligatury, warianty liter oraz inne. Obecnie wszystkie przeglądarki internetowe wspierają ten format.
Pamięć podręczna czcionek WordPress
Pamięć podręczna czcionek w skrypcie WordPressie znacząco wpływa na optymalizację wydajności strony internetowej. Mechanizmy pamięci podręcznej pozwalają na przechowywanie plików czcionek w pamięci przeglądarki użytkownika. W przypadku serwerów HTTP, takich jak Apache czy Nginx, można skonfigurować pamięć podręczną plików czcionek bezpośrednio na poziomie serwera. Dostępne są także wtyczki cache do WordPressa, które oferują opcje przechowywania w pamięci różnych typów zasobów, w tym czcionek.
Informacje na temat ładowania czcionek z PageSpeed Insights
Narzędzia sprawdzające wydajność strony internetowej PageSpeed Insights może dostarczyć wiele cennych informacji na temat czcionek na naszej stronie. Jest to bardzo przydatna informacja, która pozwoli nam podjąć konkretne kroki. Dużą zaletą jest możliwość porównania wyników prędkości ładowania po wprowadzonych zmianach. Narzędzie udziela także wielu podpowiedzi, w jaki sposób rozwiązać problemy, przykładowo:
“Zapewnij widoczność tekstu podczas ładowania czcionek internetowych.”
“Użyj funkcji CSS font-display, aby zapewnić widoczność tekstu dla użytkownika podczas ładowania czcionek internetowych.”
