Zapewnij widoczność tekstu podczas ładowania czcionek internetowych

Prawie każda strona inernetowa wykorzystuję niestandardowe czcionki. Niestety tylko niewielka część z nich ładuje je w odpowiedni sposób. Czytając ten artykuł dowiesz jak działają czcionki internetowe i jak istotny mają wpływ na wydajność stron internetowych. 

Zacznijmy więc od wprowadzenia.

Czym są czcionki internetowe?

Czcionki internetowe jest to nic innego jak cyfrowy plik danych zawierający zbiór glifów odzwierciedlających odpowiednie litery alfabetu. Czcionki wektorowe wykorzystują krzywe Béziera, instrukcje rysowania i formuły matematyczne do opisania każdego glifu. Dzięki temu czcionka ma zawsze ostre i wyraźne krawędzie niezależnie od tego jakiego jest rozmiaru.

Ładowanie czcionek na stronie internetowej

Domyślne przeglądarka opóźnia ładowanie czcionek co niesie za sobą duże konsekwencje. Przeglądarka renderując strukturę strony jest zależna od drzewa DOM i CSS. W momencie kiedy przeglądarka wykryje jakie warianty czcionek są potrzebne do wygenerowania strony blokuje generowanie pikselów czcionki na stronie do momentu jej pobrania.

Takie działanie może powodować, że użytkownik w pierwszych sekundach nie będzie widział tekstu na stronie jak i może generować to niechciane przesunięcia układu (CLS).

Formaty czcionek internetowych

Jeżeli swoją stronę internetową kierujesz głównie do użytkowników korzystających z nowych przeglądarek zaleca się zrezygnowanie z starych formatów czcionek. Nowe formaty oferują dużo lepszą kompresję. W momencie kiedy użytkownik z stara przeglądarka odwiedzi Twoją witrynę dużo lepszym rozwiązaniem będzie wyświetlić mu czcionkę zastępczą. O metodzie wyświetlania czcionek użytkownika dowiesz się w dalszej części artykułu.

Embedded OpenType (EOT): EOT to format opracowany przez firmę Microsoft. Jest obsługiwany tylko przez starsze wersje przeglądarki Internet Explorer. Format ten jest często obsługiwany w postaci nieskompresowanej, więc jeśli nie potrzebujesz obsługi przeglądarki typu IE8 lub niższej, lepiej go pominąć.

TrueType: TTF to format czcionki opracowany przez firmy Microsoft i Apple w latach 80. XX wieku. Nowoczesne pliki TTF są również nazywane czcionkami TrueType OpenType. TTF może być przydatne do rozszerzenia wsparcia na niektóre starsze przeglądarki, zwłaszcza na urządzeniach mobilnych (Android poniżej wersji 4.4)

Web Open Font Format: WOFF został opracowany w 2009 roku jako format opakowania dla czcionek TrueType i OpenType. Kompresuje pliki i jest obsługiwany przez wszystkie nowoczesne przeglądarki.

Web Open Font Format 2: WOFF2 to aktualizacja oryginalnego formatu WOFF. Opracowany przez Google, jest uważany za najlepszy format ze wszystkich, ponieważ oferuje mniejsze rozmiary plików i lepszą wydajność dla nowoczesnych przeglądarek, które go obsługują.

Scalable Vector Graphics: SVG jest to format uważany przez większość przeglądarek za przestarzały. Większość z nich zrezygnowało z wdrażania formatu SVG na rzecz WOFF, a z niektórych został usunięty.

Uwaga: czcionki SVG są obecnie obsługiwane tylko w Safari i przeglądarce Android.

Jak zapewnić widoczność tekstu podczas ładowania czcionek internetowych?

Czcionki internetowe wymagają optymalizacji podobnie jak wszystkie inne zależności, które są osadzane na stronach www. W tym celu skupimy się na odpowiednim sposobie wyświetlania fontów w witrynie, metodach ich osadzania i ograniczeniu ich wariantów, aby mieć pewność, że niestandardowe czcionki nie wpłyną na wydajność działania witryny.

Zacznijmy więc!

Redukcja zbędnych wariantów czcionek

Pierwszym krokiem będzie zmniejszenie ilości zbędnych danych przesyłanych do użytkownika. Zastanów się czy na stronie wykorzystujesz wszystkie warianty czcionek i jakich zastawów znaków potrzebujesz:

Lokalnie hostuj czcionki

W moich blogu opublikowałem już wpis na temat lokalnego hostowania czcionek za pomocą wtyczki. W ramach przypomnienia dodam, że lokalne hostowanie gwarantuje nam stały dostęp do zasobów czcionek ze względu, że nie jesteśmy zależni od firm trzecich, skracamy czas ich ładowania, ponieważ wszystkie zasoby znajdują się na jednym serwerze, mamy gwarancje, że czcionki osadzane są bez żadnych kodów śledzących i dodatkowo mamy możliwość przechowywania czcionek w plikach cache.

/public_html/wp-content/themes/nazwa-szablonu/fonts/

function enqueue_fonts() {
    wp_register_style('fonts', get_stylesheet_directory_uri() . '/fonts/fonts.css');
    wp_enqueue_style('fonts');
}
add_action( 'wp_enqueue_scripts', 'enqueue_fonts' );  

Ustaw odpowiedni atrybut font-display dla każdego z rodzaju czcionek

Tutaj kryję się całe rozwiązanie problemu, które zostało przytoczone w tytule artykułu. Atrybut font-display pozwala zdefiniować w jaki sposób czcionki powinny ładować się w witrynie i przyjmuje on następujące wartości:

auto — nakazuje przeglądarce użycie domyślnej strategii wyświetlania czcionek internetowych, która jest zdefiniowana przez klienta użytkownika.

blok — nakazuje przeglądarce ukrycie tekstu za pomocą niewidocznego symbolu zastępczego, dopóki czcionka internetowa nie zostanie załadowana, a następnie zamieni ją na wybraną czcionkę internetową.

swap — nakazuje przeglądarce natychmiastowe renderowanie tekstu przy użyciu czcionki rezerwowej do momentu załadowania czcionki internetowej, a następnie zamienienie jej na wybraną czcionkę internetową.

fallback – mówi przeglądarce, aby na krótko ukryła tekst, a następnie renderowała tekst przy użyciu czcionki zastępczej do momentu załadowania czcionki internetowej, a na koniec zamieniła ją na wybraną czcionkę internetową.

optional – działa podobnie do fallback, ale daje przeglądarce swobodę decydowania, czy wybrana czcionka internetowa ma być w ogóle używana.

Wiesz już jakie atrybuty możesz ustawić ale co dalej?
Jeżeli postępujesz według powyższych kroków lokalnego hostowania czcionek wystarczy, że dopiszesz w każdym @font-face, atrybut font-display: swap; Jeżeli korzystasz na stronie z Elementor lub innego edytora w ustawieniach poszukaj opcji do zmiany sposobu ładowania czcionek:

Możesz również spróbować wykorzystać wtyczkę:

Jeśli używasz czcionek internetowych Google na swojej stronie, możesz dodać atrybut font-display: swap, dodając parametr &display=swap p na końcu adresu URL czcionki internetowej na swojej stronie.

Uwaga!
Ikony na stronach internetowych również traktowane są jak czcionki. Jeżeli po powyższych zmianach nadal będziesz otrzymywał informację o tym, że nie zapewniasz widoczności tekstu podczas ładowania czcionek internetowych upewnij się, że font-display: swap jest również dodany do pliku osadzającego ikony.

Wstępne ładowanie czcionek internetowych

Ostatnim krokiem w procesie optymalizacji będzie wstępne załadowanie fontów. Wykorzystanie takiego zabiegu wywoła żądania czcionek na wczesnym etapie krytycznej ścieżki renderowania co w rezultacie spowoduje brak konieczności czekania na załadowanie czcionek wtedy kiedy będą potrzebne do wyświetlenia w witrynie.

Zależności do wstępnego załadowania powinieneś dodać w head strony w następujący sposób:

<link rel="preload" href="sciezka-do-pliku-czcionki" as="font" type="font/format" crossorigin>

Źródła

https://css-tricks.com/understanding-web-fonts-getting/
https://mansfeld.pl/webdesign/optymalizacja-fontu-czcionki-na-stronie/
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_fonts
https://en.wikipedia.org/wiki/Web_typography
https://en.wikipedia.org/wiki/Computer_font#OpenType_fonts
https://www.zachleat.com/web/comprehensive-webfonts/
https://gtmetrix.com/ensure-text-remains-visible-during-webfont-load.html
https://web.dev/optimize-webfont-loading/
https://google-webfonts-helper.herokuapp.com/
https://www.zachleat.com/web/comprehensive-webfonts/