Hostuj czcionki Google Fonts na własnym serwerze dla lepszych Core Web Vitals

Hostowanie czcionek Google Fonts na własnym serwerze dla lepszych Core Web Vitals

Właściciele stron internetowych i deweloperzy dążą do optymalizacji swoich stron pod kątem lepszego user experience i pozycji w wyszukiwarkach, a Core Web Vitals stały się kluczowym zestawem metryk. Google Fonts, oferując szeroki wybór opcji typograficznych, mogą czasem negatywnie wpływać na Core Web Vitals. W tym artykule zbadamy, dlaczego hostowanie Google Fonts na własnym serwerze może być korzystne dla wydajności Twojej strony, szczególnie w kontekście Core Web Vitals. Przedstawimy również przykłady i najlepsze praktyki pokazujące, jak self-hosting czcionek może prowadzić do znaczących usprawnień.

Zrozumienie Core Web Vitals

Core Web Vitals to zestaw trzech metryk wydajności, które mierzą różne aspekty szybkości ładowania strony, interaktywności i stabilności wizualnej:

1. Largest Contentful Paint (LCP): LCP mierzy czas potrzebny na to, aby największy element na stronie (zwykle obraz lub blok tekstu) stał się widoczny w obszarze widocznym przeglądarki. Idealny LCP powinien wystąpić w ciągu pierwszych 2,5 sekundy, aby zapewnić szybkie wyświetlanie treści.

2. First Input Delay (FID): FID mierzy opóźnienie między pierwszą interakcją użytkownika ze stroną (np. kliknięciem przycisku) a odpowiedzią przeglądarki na tę interakcję. Dobry FID powinien być poniżej 100 ms, aby zapewnić płynny user experience.

3. Cumulative Layout Shift (CLS): CLS mierzy ilość nieoczekiwanych przesunięć układu, które występują podczas ładowania strony. Niska wartość CLS (poniżej 0,1) oznacza stabilne doświadczenie wizualne, ponieważ użytkownicy nie lubią, gdy treść przesuwa się nieoczekiwanie podczas czytania lub interakcji ze stroną.

Wpływ Google Fonts na Core Web Vitals

Google Fonts, często dołączane do stron internetowych w celu poprawy typografii i designu, mogą mieć znaczący wpływ na Core Web Vitals, głównie na Largest Contentful Paint (LCP) i Cumulative Layout Shift (CLS):

Dla większości osób, z którymi rozmawiam, jest to nowa informacja. CDN Google ma być najlepszym na świecie. Dlaczego więc Google Fonts jest złe dla szybkości strony?

1. Arkusz stylów nigdy nie znajduje się w pamięci podręcznej przeglądarki dla nowych odwiedzających. Pierwszy problem z Google Fonts polega na tym, że opiera się na zewnętrznym arkuszu stylów hostowanym przez fonts.google.com lub fonts.googleapis.com. Ten arkusz stylów nie może być współdzielony między różnymi domenami (jak wielu ludzi wydaje się sądzić). Oznacza to, że blokujący renderowanie arkusz stylów nigdy nie jest serwowany z superszybkiej pamięci podręcznej przeglądarki dla nowych odwiedzających i zawsze nieco spowalnia renderowanie strony. 

2. Wymaga 2 połączeń do 2 nowych serwerów. Drugi problem polega na tym, że aby pobrać plik CSS i pliki czcionek, musimy połączyć się z 2 różnymi serwerami. Każde początkowe połączenie z nowym serwerem wiąże się z poważnym narzutem i zajmuje dodatkowy czas. Czas, który moglibyśmy zaoszczędzić, serwując pliki z naszego już otwartego połączenia z naszym serwerem. Aby tego uniknąć, Google zaleca użycie preconnect do swoich domen. To złagodzi problem, ale wciąż jest dalekie od ideału
   

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

3. Masz ograniczoną kontrolę nad atrybutem font-display. Chociaż Google Fonts pozwala ustawić atrybut font-display, można go zdefiniować tylko globalnie. Oznacza to, że wszystkie pliki woff2 otrzymają to samo ustawienie font-display
   

4. Ostateczna lokalizacja pliku woff2 jest nieznana. Oznacza to, że nie możemy użyć preload dla naszych najważniejszych czcionek. Oznacza to, że nasze pliki czcionek są kolejkowane do pobrania stosunkowo późno i prawdopodobnie otrzymamy widoczne przesunięcie układu spowodowane błyskiem niestylizowanego tekstu (FOUT)

5. Nie masz kontroli nad plikami czcionek. 

Zalety hostowania Google Fonts na własnym serwerze

Hostowanie Google Fonts na własnym serwerze polega na serwowaniu plików czcionek z własnych serwerów zamiast polegania na zewnętrznych serwerach Google. Takie podejście może przynieść kilka korzyści, szczególnie w kontekście Core Web Vitals:

1. Szybsze dostarczanie czcionek: Hostowanie czcionek na własnym serwerze zmniejsza zależność od zewnętrznych serwerów, co prowadzi do szybszego dostarczania czcionek i w konsekwencji szybszego renderowania treści tekstowej. Ta poprawa może pozytywnie wpłynąć na LCP, zapewniając szybsze wyświetlenie największego elementu tekstowego.

2. Mniejsze przesunięcia układu: Hostując Google Fonts na własnym serwerze, możesz kontrolować sposób ładowania i wyświetlania czcionki, minimalizując ryzyko przesunięć układu spowodowanych opóźnionym renderowaniem czcionki. Pomaga to poprawić ogólną stabilność wizualną strony i pozytywnie wpływa na CLS.

Najlepsze praktyki hostowania Google Fonts na własnym serwerze

Aby zoptymalizować czcionki Google hostowane na własnym serwerze pod kątem lepszej wydajności Core Web Vitals, rozważ wdrożenie następujących najlepszych praktyk:

1. Używaj formatu WOFF2: Używaj wyłącznie formatu plików WOFF2, ponieważ oferuje lepszą kompresję i szybsze czasy ładowania, co przyczynia się do poprawy wartości LCP i CLS.

2. Podzbiór czcionek: Aby jeszcze bardziej zmniejszyć rozmiar plików czcionek, rozważ użycie podzbiorów czcionek, co polega na dołączaniu tylko znaków potrzebnych dla treści Twojej strony. Może to prowadzić do szybszego ładowania czcionek i poprawy Core Web Vitals.

3. Strategiczne użycie atrybutu font-display: Skonfiguruj atrybut font-display strategicznie, aby kontrolować renderowanie tekstu podczas ładowania czcionki. Wartość "swap" przyspieszy First Contentful Paint, zapewniając wyświetlanie czcionek fallback do momentu pełnego załadowania czcionki webowej. Wartość "optional" zapobiegnie przesunięciom układu, nigdy nie zamieniając pliku czcionki. Strategiczne połączenie tych dwóch wartości często zoptymalizuje zarówno Cumulative Layout Shift, jak i First Contentful Paint.

4. Preload czcionek: Upewnij się, że czcionki są dostępne jak najwcześniej, ładując wstępnie najważniejsze czcionki za pomocą mechanizmu link preload
   
   

   <link rel="preload" as="font" href="fonts.woff2" crossorigin>

Jak hostować czcionkę Google na własnym serwerze (właściwy sposób)

Pobranie i hostowanie czcionki Google na własnym serwerze to prosty proces. Pamiętaj, że przed pobraniem i użyciem czcionki na swojej stronie lub w projektach należy zawsze sprawdzić licencję i prawa użytkowania. Wiele czcionek Google jest dostępnych na licencjach open-source, ale niektóre mogą mieć ograniczenia dotyczące użytku komercyjnego.

Oto przykład, jak pobrać i hostować czcionkę Google na własnym serwerze:

1. Przejdź na stronę Google Fonts pod adresem https://fonts.google.com/.

2. Wybierz czcionkę, której chcesz użyć, i wybierz rozmiary czcionki, które chcesz dołączyć. 

3. Na stronie czcionki, na górnym pasku kliknij przycisk „wybrane rodziny”. Znajdziesz tam link do arkusza stylów hostowanego przez Google. 
   
   

   

4. Skopiuj adres URL tego arkusza stylów i otwórz go w przeglądarce. Zobaczysz teraz wszystkie deklaracje font-face dostępne dla tej czcionki. 
   
   

   

5. Możesz zauważyć, że jest więcej niż 1 plik woff2, mimo że użyliśmy tylko jednej czcionki. Dzieje się tak, ponieważ istnieje inny plik czcionki dla różnych zakresów Unicode. Aby dowiedzieć się, które czcionki powinniśmy pobrać, tymczasowo dodaj arkusz stylów hostowany przez Google do swojej strony. Użyj skrótu Ctrl-Shift-I, aby otworzyć narzędzia deweloperskie Chrome. Przejdź do zakładki Sieć i kliknij Czcionka. Teraz odśwież stronę (Ctrl-r), aby zobaczyć, która czcionka jest pobierana.
   
   

6. Dopasuj nazwę tego pliku czcionki do odpowiedniego pliku woff2 w arkuszu stylów. Doskonale! Teraz wiesz, który plik czcionki jest używany na Twojej stronie!
   

7. Następnym krokiem jest skopiowanie pełnego adresu URL czcionki i otwarcie go w przeglądarce. Spowoduje to pobranie pliku czcionki. Skopiuj ten plik na swoją stronę.
   

8. Skopiuj CSS dla użytej czcionki webowej z kroku 7 i wklej go do swojego arkusza stylów. Nie zapomnij zmienić adresu URL z CDN Google na swój własny serwer (na przykład '/fonts/roboto400.woff2')

9. Zastosuj preload dla czcionki (jeśli jest to wizualnie ważna czcionka)

Teraz pomyślnie pobrałeś i hostujesz czcionkę Google na własnym serwerze. Pamiętaj, aby przestrzegać warunków licencji czcionki i w razie potrzeby podać informacje o autorze czcionki zgodnie z wymaganiami licencji.

Przykład z życia wzięty

<!DOCTYPE html>
<html>
<head>
  <title>Self-Hosted Google Fonts</title>
  <!-- preload the font -->
  <link rel="preload" as="font" href="/path/to/google-sans.woff2" crossorigin>
  <style>
    /* Self-hosted Google Sans font with WOFF2 format */
    @font-face {
      font-family: 'Google Sans';
      font-style: normal;
      font-weight: 400;
      src: url('/path/to/google-sans.woff2') format('woff2');
      font-display: optional;
    }

    /* Fallback to system-ui font */
    body {
      font-family: 'Google sans', system-ui, sans-serif;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is a page using the Google-sans with system-ui fallback font.</p>
</body>
</html>