Optymalizacja wydajności czcionek Google

Dobre projekty stron internetowych są ozdobione wspaniałymi obrazami i czcionkami. Niestety, te dwa elementy sieci w dużym stopniu przyczyniają się do tego, że wiele stron internetowych wykazuje irytujące opóźnienia. Oczywiście tylko czcionki internetowe mogą dostarczyć czegoś odświeżającego, nieoczekiwanego i nowego.

Istnieją jednak sposoby na powstrzymanie tego okropnego zjawiska. SVG pomaga programistom radzić sobie z niektórymi wyzwaniami związanymi z renderowaniem obrazów. A w przypadku czcionek Google Fonts, które są najpopularniejszą czcionką internetową, skrócenie czasu renderowania strony polega po prostu na wdrożeniu kilku dostępnych sztuczek w celu optymalizacji wydajności czcionek Google.

Czym są czcionki Google?

Czcionki Google to specjalnie dostrojona kolekcja glifów, które tworzą czcionki do użytku w witrynach internetowych. Są one specjalnie zaprojektowane do użytku w Internecie, stąd nazwa czcionek internetowych.

Wprowadzone jako Google Web Fonts w 2010 roku z zaledwie około 30 czcionkami, Google Fonts ma obecnie około 17 miliardów czcionek i obecnie obsługuje około 57% wszystkich stron internetowych. Czcionki Google, które są całkowicie bezpłatne, odnotowują około 500 000 wyświetleń co sekundę od czasu pisania tego tekstu i zgromadziły ponad 37 bilionów wyświetleń od 2010 roku.

Korzystanie z czcionek Google w witrynie pozwala zrezygnować z ograniczania się do czcionek systemowych lub „czcionek bezpiecznych w Internecie”, takich jak Arial i Georgia, które w większości są wstępnie instalowane we wszystkich systemach operacyjnych.

Jak zaimplementować czcionki Google

Implementacja Google Fonts na stronie internetowej odbywa się za pomocą interfejsu programowania aplikacji (API), odwołującego się do wybranych przez użytkownika czcionek. Ten interfejs API oferowany przez Google może zostać osadzony w dokumencie HTML przy użyciu standardowego tagu linku CSS lub składni do importu. Poniżej znajduje się przykład interfejsów API do implementacji Baloo Chettan 2.

Korzystanie ze standardowego tagu linku CSS

Korzystanie ze składni importu
<style>
@import url('https://fonts.googleapis.com/css?family=Baloo+Chettan+2&display=swap');
</style>

W przypadku dowolnego z powyższych interfejsów API w dokumencie HTML możesz użyć rodziny czcionek w dokumencie CSS, odwołując się do niej, jak pokazano w poniższym przykładzie.

rodzina czcionek : 'Baloo Chettan 2', kursywa;

Znaczenie optymalizacji wydajności czcionek Google

Wdrażanie i używanie czcionek Google, podobnie jak innych czcionek internetowych, to nic wielkiego, ale dostarczanie czcionek użytkownikom witryny. Pamiętaj, że użytkownicy nie mają tych czcionek na swoich urządzeniach. Innymi słowy, ich przeglądarki muszą je pobrać, zanim zobaczą zawartość Twojej witryny.

Grubość czcionki

Każda czcionka ma wagę, która może negatywnie wpłynąć na opóźnienie Twojej witryny. Na przykład czcionka Google Baloo Chettan 2 ma łączny rozmiar 720 KB. Oznacza to, że musisz wziąć pod uwagę około 9 MB na ładowanie swojej witryny, jeśli musisz użyć całej rodziny czcionek Baloo (19), ze wszystkimi dostępnymi językami i wariantami na Twojej stronie. Oczywiście jest to nieidealne i nie zbliża się do optymalizacji czcionek internetowych. Jednak pomyłka oznacza, że ​​odwiedzający witrynę muszą czekać kilka sekund, zanim zobaczą jakikolwiek tekst w witrynie.

Format czcionki

Niestety żaden z tych formatów nie jest uważany za format uniwersalny, który działa we wszystkich przeglądarkach.

EOT jest obsługiwany tylko przez IE. Chrome i Opera mają najwięcej wsparcia dla większości formatów, podczas gdy około 86 procent wszystkich przeglądarek obsługuje format WOFF. Może to wymagać uwzględnienia wszystkich formatów czcionek dla każdej czcionki, której chcesz użyć. Ideą jest zapewnienie spójnego doświadczenia poprzez zapewnienie, że wszystkie przeglądarki mogą wyświetlać każdą czcionkę.

Te problemy są jednym z wielu powodów, dla których istnieje kluczowa potrzeba optymalizacji wydajności czcionek Google.

Optymalizacja wydajności czcionek Google

Optymalizacja czcionek Google rozpoczyna się od umieszczenia czcionki API i formatu żądania, aż do renderowania. Oto proste sztuczki, jak zoptymalizować czcionki Google.

Wstępne ładowanie zasobów czcionek Google

Zdecydowanie zaleca się korzystanie z nowej funkcji platformy internetowej: <link rel="preload"> , która pozwala załadować czcionki internetowe z wyprzedzeniem. Ta funkcja umożliwia pominięcie domyślnego zachowania przeglądarki, które zwykle opóźnia renderowanie tekstu, tworząc najpierw drzewo renderowania, aby wiedzieć, jakich zasobów czcionek potrzebuje, zanim uzyska dostęp do łącza do zasobu.

<link rel="preload"> jest zwykle zawarty w tagu <head> kodu HTML, aby odpowiednio wcześnie wywołać żądanie czcionek, bez czekania na utworzenie CSSOM. Ta funkcja daje przeglądarce tylko wstępne informacje, że czcionki internetowe będą wkrótce potrzebne, bez podawania jakichkolwiek informacji o tym, jak będą używane.

Ponadto zaleca się użycie odpowiedniej definicji CSS @font-face wraz z funkcją wstępnego ładowania, aby poinformować przeglądarkę, jak korzystać z adresu URL zasobu. Zobacz przykład w następnym punkcie.

Użyj jednego żądania dla wielu czcionek

Innym dobrym sposobem optymalizacji czcionek Google jest połączenie wielu żądań czcionek w jeden tag. Nie dołączać oddzielnego tagu <link> dla każdej czcionki, tym samym wysyłając wiele żądań w różnych partiach. Aby połączyć żądania czcionek, po prostu oddziel czcionki w interfejsie API za pomocą | postać. Można to jednak również osiągnąć, po prostu wybierając wszystkie potrzebne czcionki na stronie Google Font.

Zły format żądań czcionki:

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap"

rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2&display=swap"

rel="stylesheet">

Zalecany format żądań czcionek:
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2|Roboto&display=swap"

rel="stylesheet">

Łącząc wiele żądań czcionek w jeden tag, oszczędzamy przeglądarkę z kilku podróży na serwer, a także pomagamy starszym przeglądarkom z maksymalnie 2 połączeniami naraz na domenę.

Zoptymalizowane formaty czcionek do wszystkich przeglądarek

Przeglądarki nie obsługujące określonego formatu czcionki po prostu go ignorują i przeskakują do następnego kroku w drzewie renderowania. Aby zapewnić spójne wrażenia, musisz uwzględnić wszystkie formaty czcionek w deklaracji CSS @font-face.

Jednak wagę można było zmniejszyć. Poszczególne wykresy opisujące czcionkę składają się z podobnych informacji, które można skompresować za pomocą kompatybilnego kompresora, takiego jak GZIP. Chociaż formaty TTF i EOT są domyślnie skompresowane, należy upewnić się, że serwery są skonfigurowane do stosowania kompresji podczas dostarczania obu formatów czcionek.

Użyj optymalnego ustawienia kompresji dla WOFF, który ma wbudowaną kompresję i skorzystaj z niestandardowych algorytmów wstępnego przetwarzania i kompresji, aby zapewnić WOFF2 z ~30% redukcją rozmiaru pliku.

Przykład deklaracji CSS @font-face
@font-face {
font-family: 'Baloo Chettan 2';
font-style: normal;
font-weight: 600;
src: local('Baloo Chettan 2'),
url('/fonts/awesome.eot') format('embedded-opentype'), /* IE6-IE8 */
url('/fonts/awesome.woff2') format('woff2'), /* Super modern web browsers */
url('/fonts/awesome.woff') format('woff'), /* Modern web browsers */
url('/fonts/awesome.ttf') format('truetype'), /* Android, Safari */
url('/fonts/awesome.svg') format('svg'); /* Super modern web browsers */


Daj pierwszeństwo local() na swojej liście src

Chociaż ten pomysł na optymalizację czcionek Google może nie mieć zastosowania do użytkowników telefonów komórkowych, chyba że odwołujesz się do domyślnych czcionek systemowych, pozostaje skuteczną sztuczką do optymalizacji czcionek internetowych.

Jeśli spojrzysz na powyższy przykład deklaracji CSS @font-face powyżej, zauważysz, że local() znajduje się na szczycie listy wariantów zasobów oddzielonych przecinkami w deskryptorze src:. Ta priorytetyzacja jest celowa, a pomysł polega na tym, aby wysłać przeglądarkę użytkownika do pierwszego źródła czcionki lokalnie, zanim zdecyduje się ją pobrać, jeśli nie jest dostępna lokalnie.

Gwarantuje to, że przeglądarka nie pobierze czcionek już zainstalowanych lokalnie na komputerze użytkownika, zapewniając w ten sposób lepszą wydajność witryny.

Dostosuj renderowanie czcionek: wyświetlanie czcionek CSS

Kontrolowanie wydajności czcionek za pomocą deskryptora wyświetlania czcionek dla @font-face pozwala zdecydować, jak mają być renderowane czcionki Google, w oparciu o czas pobierania. Pierwotnie przeglądarki internetowe miały domyślne ustawienia dotyczące tego, co robić, gdy ładowanie czcionek trwa zbyt długo. Większość z nich ustawia limit czasu, po którym używają czcionki zastępczej, ale niestety ich limit czasu jest inny.

Nowo wprowadzona właściwość wyświetlania czcionki obsługuje obecnie pięć zakresów wartości: auto | blok | zamiana | rezerwa | opcjonalny

Należy ustawić właściwość na wartość blokową , jeśli renderowanie tekstu określonym krojem pisma jest bardzo ważne. Dzieje się tak, ponieważ pozwala przeglądarce używać niezwyciężonego tekstu zamiast preferowanej czcionki, gdy nie są one gotowe, i zamienia je, gdy tylko zakończą pobieranie. Większość przeglądarek używa tej wartości jako wartości domyślnej ( auto ).

Swap może być używany w przypadkach, w których możesz sobie pozwolić na renderowanie tymczasowej czcionki, dopóki preferowana czcionka nie będzie gotowa. Swap jest podobny do bloku, ale renderuje czcionkę zastępczą natychmiast po rozpoczęciu ładowania strony i zastępuje ją preferowanym krojem pisma, gdy tylko będą gotowe. Ta wartość ma nieskończony okres wymiany i zerowy okres bloku sekund.

Wartość zamiany nie jest idealna dla tekstu podstawowego, aby nie zakłócać doświadczenia czytelnika w połowie poprzez przesuwanie tekstu. Możesz użyć tego do tekstu logo, w którym musisz szybko wyświetlić nazwę firmy lub hasło przy użyciu zastępczej, ale ostatecznie potrzebujesz oficjalnego kroju pisma do celów brandingowych.

Przykład: właściwość wyświetlania czcionki ustawiona na zamianę
@font-face {
font-family : 'Baloo Chettan 2';
font-style : normal;
font-weight : 600;
font- display : swap
src : local('Baloo Chettan 2'),
url('/fonts/awesome.eot') format('embedded-opentype'); /* IE6-IE8 */
url('/fonts/awesome.woff2') format('woff2'), /* Super modern web browsers */
url('/fonts/awesome.woff') format('woff'), /* Modern web browsers */
url('/fonts/awesome.ttf') format('truetype'), /* Safari, Android */
url('/fonts/awesome.svg') format('svg'); /* modern web browsers */

Wartość wymiany można zobaczyć zaimplementowaną w pierwszych wierszach kodu (interfejs API Google Font) użytych do zademonstrowania, jak połączyć czcionki Google w dokumencie HTML.

Awaryjny jest podobny do swapu , ale ma ograniczony okres wymiany. Jeśli preferowany krój czcionki nie zostanie załadowany w określonym czasie, zwykle zero sekund, tekst zachowa czcionkę zastępczą przez resztę życia strony. To dobry kandydat na tekst podstawowy; renderuje tekst tak szybko, jak to możliwe i nie zmienia go, zanim ktokolwiek zacznie czytać.

Opcjonalna wartość jest repliką rozwiązania awaryjnego , ale pozwala przeglądarce zdecydować, czy zainicjować pobieranie czcionek internetowych, czy nie, biorąc pod uwagę szybkość sieci użytkowników. W sytuacji, gdy połączenie jest zbyt słabe, przeglądarka musiałaby ograniczyć żądania i priorytetyzować najbardziej potrzebne zasoby, nie wysyłając żadnych żądań pobrania czcionki internetowej.

Ogranicz rodzinę i warianty czcionek

Ponieważ każda rodzina i wariant czcionki mają wpływ na wagę strony, część procesu optymalizacji czcionek Google musi obejmować ograniczenie tych dwóch elementów.

Dostępność kilku wariantów, takich jak kursywa , zwykła, pogrubiona itp., nie musi oznaczać, że masz „wybór”, aby uwzględnić je w pobieranym pliku. Przytnij pobieranie do dokładnie wymaganego wariantu i unikaj dołączania zbyt wielu. Pobieranie kompletnego wariantu byłoby marnotrawstwem, ponieważ chcesz użyć z niego tylko jednego słowa. W tym miejscu przydaje się kolejna sztuczka optymalizacyjna dla czcionek Google.

Użyj parametru tekstowego

Parametr tekstowy jest jedną z najlepszych sztuczek optymalizacji czcionek Google, które musisz znać, i co zaskakujące, większość programistów go nie używa. Parametr pozwala załadować tylko potrzebne znaki.

Zakładając, że chcesz użyć tylko dwóch liter kroju czcionki w nazwie firmy, jak w poniższym przykładzie. Użyłem różnych czcionek dla liter C i N:

Nazwa firmy

Możesz poprosić o załadowanie tylko tych dwóch liter, zamiast całej czcionki. Adres URL czcionki będzie zawierał dodatkowe parametry, takie jak:

https://fonts.googleapis.com/css?family=Baloo+Chettan+2=CN

Podsumowując

Optymalizacja czcionek Google jest kluczową strategią poprawy ogólnej wydajności witryny.

Dostępność i czytelność są zawsze głównymi czynnikami, na których należy się skupić, oprócz dobrego projektowania w typografii. Wyżej wymienione metody poprawy wydajności czcionek koncentrują się na zmniejszaniu grubości czcionki, jak najszybszym uzyskiwaniu dostępu do czcionek internetowych i renderowaniu prawidłowego formatu/alternatywy, gdy sieć użytkownika jest niestabilna.

Daj nam znać, jeśli wypróbowałeś którąkolwiek z tych metod i o jakimkolwiek procesie optymalizacji czcionek internetowych, o którym nie wspomniano w tym artykule.