Optymalizacja wydajności czcionek Google

Można śmiało powiedzieć, że czcionki Google są popularne. W chwili pisania tego tekstu były one wyświetlane w sieci ponad 29 bilionów razy i łatwo zrozumieć, dlaczego — kolekcja zapewnia dostęp do ponad 900 pięknych czcionek, których możesz używać w swojej witrynie za darmo. Bez Google Fonts byłby ograniczony do kilku „czcionek systemowych” zainstalowanych na urządzeniu użytkownika.

Czcionki systemowe lub „bezpieczne czcionki internetowe” to czcionki najczęściej wstępnie instalowane w systemach operacyjnych. Na przykład Arial i Georgia są dostarczane z dystrybucjami Windows, macOS i Linux.

Jak wszystkie dobre rzeczy, czcionki Google mają swoją cenę. Każda czcionka ma wagę, którą przeglądarka internetowa musi pobrać, zanim będzie mogła zostać wyświetlona. Przy prawidłowej konfiguracji dodatkowy czas ładowania nie jest zauważalny. Jednak zrób to źle, a użytkownicy mogą czekać nawet kilka sekund na wyświetlenie jakiegokolwiek tekstu.

Czcionki Google są już zoptymalizowane

Interfejs API Google Fonts nie tylko dostarcza pliki czcionek do przeglądarki, ale także przeprowadza inteligentne sprawdzenie, aby zobaczyć, w jaki sposób może dostarczyć pliki w najbardziej zoptymalizowanym formacie.

Spójrzmy na Roboto, GitHub mówi nam, że zwykły wariant waży 168 kb.

Jeśli jednak zażądam od API tego samego wariantu czcionki, otrzymam ten plik. Czyli tylko 11kb. Jak to możliwe?

Gdy przeglądarka wysyła żądanie do interfejsu API, Google najpierw sprawdza, jakie typy plików obsługuje przeglądarka. Używam najnowszej wersji Chrome, która podobnie jak większość przeglądarek obsługuje WOFF2, więc czcionka jest mi serwowana w tym mocno skompresowanym formacie.

Jeśli zmienię klienta użytkownika na Internet Explorer 11, zamiast tego otrzymam czcionkę w formacie WOFF.

Wreszcie, jeśli zmienię agenta użytkownika na IE8, otrzymam czcionkę w formacie EOT (Embedded OpenType).

Google Fonts utrzymuje ponad 30 zoptymalizowanych wariantów dla każdej czcionki i automatycznie wykrywa i dostarcza optymalny wariant dla każdej platformy i przeglądarki.

— Ilya Grigorik, Optymalizacja czcionek internetowych

Jest to świetna funkcja Google Fonts, sprawdzając klienta użytkownika, który jest w stanie obsłużyć najbardziej wydajne formaty w przeglądarkach, które je obsługują, jednocześnie wyświetlając czcionki spójnie w starszych przeglądarkach.

Buforowanie przeglądarki

Kolejną wbudowaną optymalizacją Google Fonts jest buforowanie przeglądarki.

Ze względu na wszechobecny charakter czcionek Google, przeglądarka nie zawsze musi pobierać pełne pliki czcionek. Na przykład SmashingMagazine używa czcionki o nazwie „Mija”, jeśli Twoja przeglądarka po raz pierwszy widzi tę czcionkę, będzie musiała ją całkowicie pobrać przed wyświetleniem tekstu, ale następnym razem, gdy odwiedzisz witrynę używającą tej czcionki , przeglądarka użyje wersji z pamięci podręcznej.

Ponieważ interfejs API czcionek Google staje się coraz szerzej używany, prawdopodobnie osoby odwiedzające Twoją witrynę lub stronę będą już mieć w pamięci podręcznej przeglądarki wszystkie czcionki Google użyte w projekcie.

— FAQ, Czcionki Google

Pamięć podręczna przeglądarki Google Fonts wygaśnie po roku, chyba że pamięć podręczna zostanie wyczyszczona wcześniej.

Uwaga: Mija nie jest czcionką Google, ale zasady buforowania nie są specyficzne dla dostawcy.

Dalsza optymalizacja jest możliwa

Chociaż Google dokłada wszelkich starań, aby zoptymalizować dostarczanie plików czcionek, nadal istnieją optymalizacje, które możesz wprowadzić w swojej implementacji, aby zmniejszyć wpływ na czas ładowania strony.

1. Ogranicz rodziny czcionek

Najłatwiejszą optymalizacją jest po prostu użycie mniejszej liczby rodzin czcionek. Każda czcionka może zwiększyć wagę strony o nawet 400 KB, pomnoż ją przez kilka różnych rodzin czcionek i nagle Twoje czcionki ważą więcej niż cała strona.

Zalecam używanie nie więcej niż dwóch czcionek, jedna do nagłówków, a druga do treści jest zwykle wystarczająca. Przy odpowiednim użyciu rozmiaru, grubości i koloru czcionki można uzyskać wspaniały wygląd nawet przy użyciu jednej czcionki.

2. Wyklucz warianty

Ze względu na wysoki standard Google Fonts wiele rodzin czcionek zawiera pełne spektrum dostępnych grubości:

• Cienki (100)
• Cienka kursywa (100i)
• Światło (300)
• Jasna kursywa (300i)
• Zwykły (400)
• Regularna kursywa (400i)
• Średni (600)
• Średnia kursywa (600i)
• Pogrubienie (700)
• Pogrubiona kursywa (700i)
• Czarny (800)
• Czarna kursywa (800i)

To świetnie sprawdza się w zaawansowanych przypadkach użycia, które mogą wymagać wszystkich 12 wariantów, ale w przypadku zwykłej witryny oznacza to pobranie wszystkich 12 wariantów, gdy możesz potrzebować tylko 3 lub 4.

Na przykład rodzina czcionek Roboto waży ~144 KB. Jeśli jednak użyjesz tylko wariantów Regular, Regular Italic i Bold, liczba ta spada do ~36kb. 75% oszczędności!

Domyślny kod do implementacji Google Fonts wygląda tak:

 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

Jeśli to zrobisz, załaduje tylko wariant „zwykły 400”. Oznacza to, że wszystkie jasne, pogrubione i pochylone teksty nie będą wyświetlane poprawnie.

Aby zamiast tego załadować wszystkie warianty czcionek, musimy określić wagi w adresie URL w następujący sposób:

 <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">

Rzadko zdarza się, aby witryna używała wszystkich wariantów czcionki od cienkiej (100) do czarnej (900), optymalna strategia polega na określeniu tylko grubości, których planujesz użyć:

 <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,600" rel="stylesheet">

Jest to szczególnie ważne w przypadku korzystania z wielu rodzin czcionek. Na przykład, jeśli używasz Lato do nagłówków, sensowne jest żądanie tylko pogrubionego wariantu (i ewentualnie pogrubionej kursywy):

 <link href="https://fonts.googleapis.com/css?family=Lato:700,700i" rel="stylesheet">

3. Połącz żądania

Fragment kodu, z którym pracowaliśmy powyżej, wywołuje serwery Google ( fonts.googleapis.com ), co nazywa się żądaniem HTTP. Ogólnie rzecz biorąc, im więcej żądań HTTP musi wykonać Twoja strona internetowa, tym dłużej zajmie jej ładowanie.

Jeśli chcesz załadować dwie czcionki, możesz zrobić coś takiego:

 <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

To by zadziałało, ale spowodowałoby to, że przeglądarka wysłałaby dwa żądania. Możemy to zoptymalizować, łącząc je w jedno żądanie, takie jak:

 <link href="https://fonts.googleapis.com/css?family=Roboto|Open+Sans:400,400i,600" rel="stylesheet">

Nie ma ograniczeń co do liczby czcionek i wariantów, które może pomieścić jedno żądanie.

4. Wskazówki dotyczące zasobów

Wskazówki dotyczące zasobów to funkcja obsługiwana przez nowoczesne przeglądarki, która może zwiększyć wydajność witryny. Przyjrzymy się dwóm rodzajom wskazówek dotyczących zasobów: „Pobieranie wstępne DNS” i „Połączenie wstępne”.

Uwaga: jeśli przeglądarka nie obsługuje nowoczesnych funkcji, po prostu ją zignoruje. Więc twoja strona internetowa będzie nadal ładowała się normalnie.

Wstępne pobieranie DNS

Wstępne pobieranie DNS umożliwia przeglądarce nawiązanie połączenia z interfejsem Google Fonts API ( fonts.googleapis.com ), gdy tylko strona zacznie się ładować. Oznacza to, że zanim przeglądarka jest gotowa do wysłania żądania, część pracy jest już wykonana.

Aby zaimplementować wstępne pobieranie DNS dla Google Fonts, po prostu dodaj ten jeden wiersz do swoich stron internetowych <head> :

 <link rel="dns-prefetch" href="//fonts.googleapis.com">

Wstępne połączenie

Jeśli spojrzysz na kod osadzania czcionek Google, wygląda na to, że jest to pojedyncze żądanie HTTP:

 <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700" rel="stylesheet">

Jeśli jednak odwiedzimy ten adres URL, zobaczymy, że są jeszcze trzy żądania dotyczące innego adresu URL, https://fonts.gstatic.com. Jedna dodatkowa prośba dla każdego wariantu czcionki.

Problem z tymi dodatkowymi żądaniami polega na tym, że przeglądarka nie rozpocznie procesów, aby je wykonać, dopóki pierwsze żądanie do https://fonts.googleapis.com/css nie zostanie zakończone. W tym miejscu wkracza Preconnect.

Preconnect można opisać jako ulepszoną wersję pobierania z wyprzedzeniem. Jest ustawiony na konkretny adres URL, który ma załadować przeglądarka. Zamiast po prostu wykonywać wyszukiwanie DNS, kończy również negocjację TLS i uzgadnianie TCP.

Podobnie jak DNS Prefetching, można go zaimplementować za pomocą jednej linii kodu:

 <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

Samo dodanie tej linii kodu może skrócić czas ładowania strony o 100 ms. Jest to możliwe dzięki uruchomieniu połączenia wraz z początkowym żądaniem, zamiast oczekiwania na jego zakończenie jako pierwsze.

5. Hostuj czcionki lokalnie

Czcionki Google są objęte licencją „Libre” lub „wolnego oprogramowania”, co daje użytkownikowi swobodę używania, zmiany i rozpowszechniania czcionek bez proszenia o pozwolenie. Oznacza to, że nie musisz korzystać z hostingu Google, jeśli nie chcesz — możesz samodzielnie hostować czcionki!

Wszystkie pliki czcionek są dostępne na Github. Dostępny jest również plik zip zawierający wszystkie czcionki (387 MB).

Na koniec istnieje usługa pomocnicza, która umożliwia wybór czcionek, których chcesz użyć, a następnie udostępnia potrzebne do tego pliki i CSS.

Lokalne hostowanie czcionek ma swoje wady. Pobierając czcionki, zapisujesz je w stanie, w jakim są w tym momencie. Jeśli zostaną ulepszone lub zaktualizowane, nie otrzymasz tych zmian. Dla porównania, żądając czcionek z Google Fonts API, zawsze otrzymujesz najnowszą wersję.

Zwróć uwagę na parametr lastModified w interfejsie API. Czcionki są regularnie modyfikowane i ulepszane.

6. Wyświetlanie czcionek

Wiemy, że pobieranie czcionek Google przez przeglądarkę zajmuje trochę czasu, ale co dzieje się z tekstem, zanim będą gotowe? Przez długi czas przeglądarka wyświetlała puste miejsce w miejscu, w którym powinien znajdować się tekst, znane również jako „FOIT” (Flash of Invisible Text).

Zalecana lektura : „FOUT, FOIT, FOFT” Chrisa Coyiera

Pokazywanie niczego w ogóle może być irytującym doświadczeniem dla użytkownika końcowego, lepszym doświadczeniem byłoby początkowo pokazanie czcionki systemowej jako zastępczej, a następnie „zamień” czcionki, gdy będą gotowe. Jest to możliwe dzięki właściwości CSS font-display .

Dodając font-display: swap; do deklaracji @font-face, mówimy przeglądarce, aby wyświetlała czcionkę zastępczą, dopóki czcionka Google nie będzie dostępna.

 @font-face { font-family: 'Roboto'; src: local('Roboto Thin Italic'), url(https://fonts.gstatic.com/s/roboto/v19/KFOiCnqEu92Fr1Mu51QrEz0dL-vwnYh2eg.woff2) format('woff2'); font-display: swap; }

W 2019 roku Google ogłosił, że doda obsługę wyświetlania czcionek: swap. Możesz zacząć wdrażać to od razu, dodając dodatkowy parametr do adresu URL czcionek:

 https://fonts.googleapis.com/css?family=Roboto&display=swap

7. Użyj parametru Text

Mało znaną cechą interfejsu Google Fonts API jest parametr text . Ten rzadko używany parametr pozwala załadować tylko potrzebne znaki.

Na przykład, jeśli masz logo tekstowe, które musi być unikalną czcionką, możesz użyć parametru text , aby załadować tylko znaki użyte w logo.

Działa to tak:

 https://fonts.googleapis.com/css?family=Roboto&text=CompanyName

Oczywiście ta technika jest bardzo specyficzna i ma tylko kilka realistycznych zastosowań. Jeśli jednak możesz go użyć, może zmniejszyć wagę czcionki nawet o 90%.

Uwaga: W przypadku używania parametru text domyślnie ładowana jest tylko „normalna” grubość czcionki. Aby użyć innej wagi, musisz ją wyraźnie określić w adresie URL.

 https://fonts.googleapis.com/css?family=Roboto:700&text=CompanyName

Zawijanie

Szacuje się, że 53% z 1 miliona najlepszych witryn korzystających z czcionek Google, wdrożenie tych optymalizacji może mieć ogromny wpływ.

Ile z powyższych próbowałeś? Daj mi znać w komentarzach.