Core Web Vitals: Jak Unikać Problematycznych Wydajności Czcionek Web

Czcionki internetowe dodają osobowości Twojej stronie, ale też zwiększają jej ciężar.

A jeśli Twoje czcionki ładują się zbyt długo, użytkownicy zostają pozostawieni z pustym ekranem. Co gorsza, Twoja strona może wydawać się niestabilna, gdy tekst niespodziewanie się przesuwa.

To również szkodzi Core Web Vitals — metrykom, które bezpośrednio wpływają na twoją pozycję w wyszukiwarkach i doświadczenia użytkownika.

Tutaj liczy się każdy milisekunda.

Więc jak możesz zachować wybrane przez siebie czcionki internetowe bez poświęcania wydajności?

Rozbijmy to na kroki, jeden po drugim.

Ale najpierw, czym dokładnie są bezpieczne czcionki internetowe i czcionki internetowe?

Czym Są Bezpieczne Czcionki Internetowe?

Bezpieczne czcionki internetowe to sprawdzone opcje, które działają wszędzie. To czcionki, które większość urządzeń już posiada, co oznacza, że możesz liczyć na ich szybkie ładowanie.

Oto bezpieczne czcionki internetowe, których możesz użyć:

• Arial
• Times New Roman
• Verdana
• Trebuchet MS
• Courier
• Impact
• Georgia
• Comic Sans MS

Nawet mając ograniczone wybory, zdolny projektant może użyć tych czcionek w kreatywny sposób.

Jednak czcionki bezpieczne dla sieci są często nadużywane i sprawiają, że twoja strona ma „podobny” wygląd — nawet gdy włożyłeś dużo wysiłku i pieniędzy w projektowanie strony.

Więc jak sprawić, by wyglądało to ładniej?

Z czcionkami internetowymi.

Czym są czcionki internetowe?

Czcionki internetowe pozwalają Ci odejść od często nadużywanych czcionek bezpiecznych dla sieci.

Zamiast polegać na czcionkach dostępnych na urządzeniu użytkownika, czcionki internetowe mogą być pobierane z zewnętrznego źródła, takiego jak Google Fonts lub bezpośrednio z twojego serwera na urządzenie użytkownika (tymczasowo).

To pozwala Ci używać dowolnych niestandardowych czcionek, które pasują do Twojej marki lub potrzeb projektowych.

Zgromadziliśmy również najlepsze czcionki Google, aby pomóc ci zacząć.

Kiedy użytkownik odwiedza twoją stronę, czcionka internetowa jest tymczasowo pobierana i stosowana do tekstu za pomocą reguły @font-face w CSS.

Czcionki internetowe zaczynają zachowywać się jak lokalne czcionki — automatycznie dostosowują się do rozmiarów ekranu, zachowując estetyczny wygląd twojej strony.

Czcionki również ewoluowały na przestrzeni lat, aby mieć bardziej efektywne formaty przechowywania. Podobnie jak formaty obrazów, czcionki mają TTF, WOFF, WOFF2 i EOT.

• Embedded OpenType (EOT): Kompatybilny ze starszymi wersjami Internet Explorer (poniżej IE9). Domyślnie nie jest kompresowany, ale można zastosować kompresję GZIP.
• TrueType (TTF): Obsługiwany przez starsze przeglądarki Androida (poniżej wersji 4.4). Domyślnie jest niekompresowany, ale można go skompresować za pomocą GZIP.
• Web Open Font Format (WOFF): Obsługiwany przez większość nowoczesnych przeglądarek i zawiera wbudowaną kompresję.
• Web Open Font Format 2 (WOFF2): Kompatybilny z przeglądarkami, które go obsługują, oferując specjalne algorytmy kompresji, które redukują rozmiar pliku o około 30% w porównaniu do innych formatów.

Nowoczesne formaty oferują kompresję dla lepszej wydajności i pomagają utrzymać funkcjonalność oraz unikalny wygląd designu twojej strony.

Czym Są Podstawowe Wskaźniki Web Vitals (CWV)?

Oto rzecz: Google chce, aby wszyscy jego użytkownicy mieli doskonałe doświadczenia.

Któraś ze stron internetowych lub aplikacji, która zapewnia użytkownikom Google najlepsze wrażenia, otrzyma więcej „miłości” od algorytmów Google.

A jak jest mierzona ta „doświadczenie”?

Google wprowadził Core Web Vitals na początku 2020 roku właśnie w tym celu.

CWV to zestaw trzech wskaźników, które informują Google, jak Twoja strona internetowa lub aplikacja działa dla użytkowników, których tam przekierowuje.

Wyższe wyniki w tych metrykach mogą pomóc Ci uzyskać wyższą pozycję w wynikach wyszukiwania Google. Szybko przejrzyjmy te metryki.

Największy Mierzalny Obraz (LCP)

LCP mierzy, jak długo trwa załadowanie największego widocznego elementu na Twojej stronie.

To zazwyczaj jest obraz lub wideo, ale może być też dużym blokiem tekstu lub osadzonym wideo.

Im szybciej się to stanie, tym lepiej Twoja strona będzie postrzegana zarówno przez użytkowników, jak i wyszukiwarki.

Dobry wynik LCP oznacza, że użytkownicy nie muszą czekać, aż główna treść się pojawi.

Interakcja Do Następnego Malowania (INP)

INP mierzy czas między interakcją użytkownika (taką jak kliknięcie lub dotknięcie) a momentem, kiedy strona reaguje wizualnie.

Daje bardziej dokładny obraz interaktywności niż FID, ponieważ uwzględnia pełną ścieżkę użytkownika, a nie tylko pierwszą interakcję.

Niski wynik INP oznacza, że Twoja strona jest responsywna, co zwiększa zaangażowanie użytkowników i ich zadowolenie.

Kumulacyjne Przesunięcie Układu (CLS)

CLS mierzy, jak stabilna jest Twoja strona podczas ładowania.

Kiedy elementy przesuwają się niespodziewanie, frustruje to użytkowników i sprawia, że strona wydaje się zawodna.

Niski wynik CLS oznacza, że twoja strona ładuje się płynnie, bez przesunięć układu, które zakłócają doświadczenia użytkownika.

Jak Zoptymalizować Czcionki Internetowe dla Lepszych Podstawowych Wskaźników Strony

Więc o co całe to zamieszanie z wydajnością czcionek internetowych?

Dlaczego nie możemy po prostu dodać czcionek internetowych i zakończyć na tym? Cóż, możesz.

Ale jak już wcześniej wspominaliśmy, czcionki internetowe nie są lokalne. Są pobierane z serwera, ściągane i stosowane na twojej stronie, i tutaj pojawia się problem.

To zabiera czas.

A jeśli to zajmuje zbyt dużo czasu, wpływa to na twoje podstawowe wskaźniki sieci Web i wskaźnik konwersji strony internetowej.

Przyjrzyjmy się kilku sposobom optymalizacji czcionek internetowych dla lepszych podstawowych wskaźników stron.

1. Wstępne Ładowanie Czcionek

Chcesz, aby Twoje czcionki były gotowe w momencie rozpoczęcia ładowania strony.

Gdy strona jest gotowa dla użytkownika, gotowa jest również czcionka.

To nazywa się wstępne ładowanie.

Preloading mówi przeglądarce, „Hej, ta czcionka jest ważna. Załaduj ją od razu.”

Załóżmy, że używasz popularnej czcionki Google, Roboto.

Musisz dodać pojedynczy atrybut do swojego kodu HTML, aby wczytać czcionkę wstępnie: rel = “preload”

<link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" as="font" type="font/woff2" crossorigin>

Po tym przeglądarka wie, że ma priorytetowo pobrać Roboto, więc twój tekst pojawia się szybciej, stylizowany odpowiednią czcionką.

To skraca czas potrzebny do wyświetlenia największego bloku tekstu (LCP), dzięki czemu użytkownicy widzą ostateczną wersję twojej strony szybciej.

2. Kontroluj Zachowanie Ładowania Czcionek Za Pomocą Właściwości Font-Display

Jednakże, wstępne ładowanie może nieco zwiększyć początkowy czas ładowania, ponieważ czcionkom przyznawany jest priorytet.

font-display property pozwala kontrolować, jak zachowuje się tekst, podczas gdy niestandardowe czcionki są nadal ładowane.

To może pomóc ci uniknąć obawianej Błyskawicznej Niewidoczności Tekstu (FOIT), gdzie użytkownicy widzą puste przestrzenie, oraz Błyskawicznej Niestylizowanej Czcionki (FOUT), gdzie strona pojawia się z czcionkami zapasowymi na sekundę i natychmiast przełącza się na niestandardowe czcionki.

Właściwość font-display ma cztery sposoby zarządzania zachowaniem tekstu: block, swap, fallback i optional.

Spójrzmy na te dwie, których potrzebujesz.

font-display: swap — Ta opcja jest najbezpieczniejszym rozwiązaniem dla większości stron. Zapewnia natychmiastowe wyświetlanie tekstu za pomocą czcionki zastępczej i przełącza na niestandardową czcionkę, gdy będzie gotowa.

@font-face {
  font-family: 'Roboto';
  src: url('https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Me5Q.ttf') format('truetype');
  font-display: swap;
}

Tutaj, czcionka zastępcza (takie jak Arial lub inna czcionka systemowa) zostanie załadowana natychmiast, co sprawi, że strona będzie czytelna.

Kiedy Roboto zostanie pobrane, zastępuje czcionkę rezerwową bez pozostawiania pustego miejsca na ekranie.

Oto przykład działania zamiany font-display w rzeczywistym świecie.

font-display: optional — Jeśli zależy Ci na szybkości, to polecenie mówi przeglądarce, aby pominęła niestandardową czcionkę, jeśli nie załaduje się wystarczająco szybko. To działa, gdy nie przeszkadza Ci, że pozostanie czcionka zastępcza.

@font-face {
  font-family: 'Roboto';
  src: url('https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Me5Q.ttf') format('truetype');
  font-display: optional;
}

Ta opcja ma sens, gdy wydajność jest ważniejsza niż projektowanie, co czyni ją idealną dla strony, która stawia na szybkość.

Oto przykład tego, jak to wygląda w rzeczywistości. Nie zauważysz tutaj zmiany, ponieważ większość czcionek ładuje się wystarczająco szybko.

Jednak opcjonalny argument jest świetny na wypadek, gdy Twój serwer czcionek przestanie działać lub zwolni.

3. Wyciąganie Podzbiorów Czcionek

Większość czcionek zawiera setki, a nawet tysiące znaków.

Prawdopodobnie potrzebujesz tylko małej części z nich. Usuwanie tych jest nazywane subsettingiem czcionki.

Dokładnie, możesz usunąć zbędne znaki, aby zmniejszyć rozmiar pliku czcionki.

Załóżmy, że twoja strona potrzebuje tylko znaków angielskich.

Narzędzie takie jak FontTools może pomóc Ci wybrać tylko te znaki z czcionki, które faktycznie zamierzasz użyć.

To oznacza, że wszystkie znaki Unicode, które nie są konieczne w języku angielskim, mogą być usunięte, aby zmniejszyć rozmiar pliku.

To zmniejsza rozmiar pliku z, powiedzmy, 80 KB do 30 KB.

Mniejsze pliki oznaczają szybsze pobieranie, co poprawia zarówno LCP, jak i CLS, ponieważ czcionka ładuje się szybko i nie przesuwa układu.

Oto przykład, jak usunąć wszystko oprócz angielskich znaków, używając FontTools:

pyftsubset Roboto-Regular.ttf --unicodes=U+0020-007F

Teraz twoja czcionka Roboto zawiera tylko podstawowe znaki łacińskie potrzebne do tekstu angielskiego, co sprawia, że ładuje się znacznie szybciej.

Jeśli preferujesz podejście oparte na GUI, możesz również wypróbować font-squirrel. Po przesłaniu pliku z czcionką, otrzymasz sporo opcji dostosowania, aby dodać lub usunąć

4. Kompresowanie czcionek

Nowoczesne formaty czcionek takie jak WOFF2 oferują kompresję, która może zmniejszyć rozmiar czcionki nawet o 30% w porównaniu do starszych formatów, takich jak TTF.

Używanie najbardziej skompresowanej wersji twojej czcionki może znacząco zmniejszyć jej wpływ na czas ładowania strony.

Na przykład, oto jak możesz upewnić się, że używasz WOFF2:

@font-face {
  font-family: 'Roboto';
  src: url('roboto.woff2') format('woff2'),
       url('roboto.woff') format('woff');
  font-weight: 400;
}

Tak, przeglądarki obsługujące WOFF2 będą z nich korzystać jako domyślnych, skracając czas ładowania, a jednocześnie wyświetlając czcionkę o wysokiej jakości i wyrazistości.

Jednakże, jeśli przeglądarka nie może używać WOFF2, domyślnie używa WOFF.

5. Kodowanie Base64

To jest kolejna często stosowana praktyka optymalizacji twoich czcionek internetowych.

Jednak musisz zachować ostrożność, kiedy używać czcionek zakodowanych w Base64.

Kodowanie Base64 jest najbardziej przydatne dla małych czcionek lub ikon.

Jeśli jednak użyjesz tego nadmiernie, możesz spowodować przeciążenie CSS, co zwiększy czas ładowania strony bardziej niż samo użycie czcionki.

Jeśli chcesz użyć kodowania Base64 dla czcionki ikon, najpierw przekonwertuj plik czcionki do formatu Base64. Oto jak to może wyglądać:

@font-face {
  font-family: 'CustomIcons';
  src: url('data:font/woff2;base64,d09GRgABAAAAAAn4ABAAAAAAB...') format('woff2');
  font-weight: normal;
  font-style: normal;
}

Ta metoda sprawdza się dobrze dla małych czcionek ikon, które często używasz na stronie.

Plik CSS ładuje się z osadzoną czcionką, eliminując dodatkowe żądanie HTTP.

Jednak unikaj tego dla dużych czcionek tekstu, ponieważ może to spowolnić początkowe renderowanie strony.

6. <link> vs. CSS @import dla Czcionek

<link> i @import mają znaczącą różnicę w wydajności ładowania.

Tag <link> ładuje czcionki asynchronicznie, co oznacza, że nie opóźnia renderowania reszty Twojej strony, podczas gdy @import jest nieco wolniejszy.

Używaj <link> kiedy tylko jest to możliwe.

„W 90%+ przypadków prawdopodobnie chcesz użyć tagu <link>. Jako ogólna zasada, powinieneś unikać reguł @import, ponieważ opóźniają one załadowanie dołączonego zasobu, dopóki plik nie zostanie pobrany.” Ilya Grigorik, Inżynier i Doradca Techniczny CEO w Shopify

Ładuje czcionki niezależnie, pozwalając reszcie strony na ładowanie bez oczekiwania na plik czcionki.

<link rel="stylesheet" href= "https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap">

To jest preferowana metoda do ładowania Google Fonts lub podobnych zewnętrznych usług czcionek.

Umieszczone w sekcji <head> Twojego HTML, zapewnia wczesne ładowanie czcionki bez blokowania innych zasobów.

Unikaj używania @import dla kluczowych czcionek.

@import czeka, aż plik CSS zostanie w pełni załadowany, co może zwiększyć czas ładowania i zaszkodzić LCP.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');

Używanie @import dla fontów działa tylko dla fontów drugorzędnych lub mniej krytycznych. Jako praktyka, unikaj tego dla wszystkiego na pierwszym ekranie treści.

7. Zmniejsz Przesunięcia Wizualne/CLS, Dopasowując Czcionki i Regulując Rozmiar

Zmiany wizualne — lub kumulacyjne przesunięcia układu (CLS), jak nazywa je Google — występują, gdy układ zmienia się niespodziewanie, często z powodu zamiany czcionek.

Aby zminimalizować ten efekt, wybierz czcionki zapasowe, które są zbliżone do stylu i wymiarów twojej niestandardowej czcionki.

Właściwość CSS size-adjust pozwala również kontrolować rozmiar czcionki zastępczej, redukując wizualne przesunięcia podczas ładowania niestandardowej czcionki.

Jeśli twoja niestandardowa czcionka to Roboto i czcionka zapasowa, dostosuj jej rozmiar, aby pasował do Roboto, co sprawi, że przejście będzie prawie niezauważalne.

@font-face {
  font-family: 'Roboto';
  src: url('roboto.woff2') format('woff2');
  font-display: swap;
  size-adjust: 100%;
}

Tutaj zastępcza czcionka dla Roboto (np. Arial) utrzymuje stały rozmiar, minimalizując widoczne przesunięcia, gdy Roboto zostanie w pełni załadowane.

Jak tylko dostosujesz rozmiar i odstępy w zapasowym kroju pisma do swojego niestandardowego, zapewnisz, że gdy Roboto zastąpi Arial, zmiana będzie minimalna, co utrzyma niski CLS i poprawi doświadczenia użytkownika.

8. Znajdź Odpowiednie Miejsce Do Hostowania Czcionek Internetowych

Samodzielne hostowanie Twoich czcionek nie zawsze oznacza lepszą wydajność.

Wiele opcji od firm trzecich również działa dobrze—a czasami mogą nawet ładować się szybciej.

Web Almanac stwierdził, że niektóre strony używające czcionek zewnętrznych ładowały się szybciej niż te z czcionkami hostowanymi na własnym serwerze.

Ostatecznie, wydajność czcionek zależy mniej od wyboru hostingu, a bardziej od trzech kluczowych czynników:

• Sieć Dostarczania Treści (CDN): Zapewnia szybsze dostarczanie przez serwowanie czcionek z wielu lokalizacji na całym świecie.
• HTTP/2: Zwiększa prędkość ładowania poprzez obsługę wielu żądań równolegle, co redukuje opóźnienia.
• Polityka Cache’owania Strony: Efektywnie cache’uje czcionki, więc nie muszą być ponownie pobierane przy każdej wizycie.

Zamiast utknąć w debacie na temat hostingu, skup się na skonfigurowaniu tych elementów, aby Twoje czcionki ładowały się płynnie, bez względu na to, gdzie są hostowane.

Jak Uprościć Optymalizację Wydajności Strony

Jeśli powyższe techniki wydają się zbyt skomplikowane, wtyczka typu Jetpack może to ułatwić.

Jetpack, stworzony przez Automattic (twórcy WordPress), to kompleksowe rozwiązanie specjalnie zaprojektowane dla stron WordPress.

Łączy kluczowe funkcjonalności dla bezpieczeństwa, wydajności i marketingu, wszystko zarządzane z jednej platformy.

Nawet jeśli nie jesteś osobą techniczną, Jetpack może pomóc zwiększyć szybkość strony, wzmocnić bezpieczeństwo i poprawić doświadczenia użytkownika. (Nie potrzeba skomplikowanych ustawień!)

Stwórz Idealną Równowagę Między Pięknem a Wydajnością

Czcionki internetowe nadają Twojej stronie unikalny, piękny wygląd.

Jednak bez odpowiednich modyfikacji mogą również spowolnić jej działanie i frustrować użytkowników.

Podczas gdy omówiliśmy podstawowe techniki optymalizacji czcionek, dopracowanie wydajności obejmuje niezliczone techniczne szczegóły.

I uzyskanie najlepszych wyników może wydawać się przytłaczające.

To właśnie tutaj z pomocą przychodzą profesjonalne usługi rozwoju stron internetowych DreamHost.

Zadbamy o to, by Twoja strona była piękna i zoptymalizowana pod kątem szybkości oraz doświadczenia użytkownika.

Zajmiemy się technikaliami, a ty skup się na budowaniu strony, która naprawdę się wyróżnia.

---

Ta strona zawiera linki partnerskie. Oznacza to, że możemy otrzymać prowizję, jeśli zakupisz usługi przez nasz link, bez dodatkowych kosztów dla Ciebie.