• Blog
  • Darmowe konsultacje
  • O mnie
  • Kontakt
Wyklikane.pl
  • Blog
  • Darmowe konsultacje
  • O mnie
  • Kontakt

SEO / Optymalizacja

  • Strona główna
  • SEO / Optymalizacja
  • 3 porady jak przyspieszyć ładowanie Google Fonts

3 porady jak przyspieszyć ładowanie Google Fonts

  • Opublikowane przez Damian Kmieciak
  • Data 26 września 2022
  • Komentarze 0 komentarzy
3 porady jak przyspieszyć ładowanie Google Fonts

Wszyscy lubimy czytelne czcionki. Wszyscy lubimy ładnie wyglądające i intuicyjne strony internetowe. Nie wszyscy jednak lubimy czekać na otwarcie strony i załadowanie wszystkich jej elementów. Niektóre strony, wczytują się szybko, inne wolniej. Na prędkość ładowania się strony wpływa wiele czynników. Szybkość serwera, jego wydajność, rodzaj dysku i ogólna zdolność do obsługi ruchu sieciowego. Po stronie treści natomiast dużo zależy od zastosowanego motywu, ilości skryptów, styli CSS, kompresji obrazów, metod wczytywania zasobów a w tym również czcionek. Czcionki ładowane z zewnętrznego serwisu Google potrafią spowolnić ładowanie się strony. W tym wpisie, mam dla Ciebie 3 porady jak przyspieszyć ładowanie Google Fonts.

Dlaczego Google Fonts spowalnia wczytywanie?

Gdy Twoja strona korzysta z czcionek udostępnianych w usłudze Google Fonts, to standardowo przy każdych jej odwiedzinach, przeglądarka łączy się z serwerem Google, pobiera czcionkę a następnie używa jej do wyświetlenia tekstu. Pozostałe zasoby, takie jak obrazy czy skrypty czekają na swoją kolejkę. Wszystkie operacje wykonywane są milisekundach. Lecz przy założeniu, że strona musi wykonać takich operacji kilkadziesiąt – daje to już kilka sekund.

Pół biedy, jak owe kilka sekund czekania daje oczekiwany rezultat po delikatnym zniecierpliwieniu. Zdecydowanie gorzej jednak, gdy cała strona czeka długo na czcionki, bo serwer CDN Google akurat przestał odpowiadać. Albo odpowiada znacznie wolniej niż zwykle…

Jak przyspieszyć ładowanie Google Fonts?

Poniżej przedstawiam kilka prostych, acz skutecznych porad na rozwiązanie problemu.

1) Zmniejsz liczbę używanych stylów czcionek

Każda czcionka ma kilka stylów. Występują one we wszelakich kombinacjach. Standardowo każda czcionka występuje w przynajmniej trzech grubościach (light, regular, bold) oraz dwóch stylach (normalny i kursywa). Daje to minimum 6 różnych kombinacji, które strona musi pobrać aby poprawnie wyświetlić wszystkie treści (jeśli z nich korzysta).

Idealnie byłoby, gdybyś korzystał tylko z dwóch, maksymalnie trzech. Zastanów się, czy musisz korzystać ze wszystkich grubości we wszystkich kombinacjach. Może jesteś w stanie zrezygnować z kursywy? 

Pamiętaj, że każdy wariant oprócz zwykłych liter alfabetu zawiera także cyfry, symbole i znaki specjalne. Taka rodzina czcionek Roboto, zawiera 12 wariantów a w każdym 282 symbole. Daje to aż 3,384 symbole. A to tylko jeden krój czcionki. Strach pomyśleć, ile ich będzie gdy używasz ich więcej niż jeden!

2) Przechowuj czcionki Google na swoim serwerze

Wszystkie czcionki Google Fonts można pobrać na własny dysk i wgrać na serwer strony internetowej. Dzięki temu, czcionki będą serwowane użytkownikowi z tej samej lokalizacji co pozostałe zasoby. Odpada ci zatem czas oczekiwania na połączenie z Google CDN i pobieranie czcionek.

Gdy wybierzesz już ulubioną czcionkę, kliknij przycisk “Download family”. Następnie przy pomocy protokołu FTP wgraj je do dowolnego folderu na serwerze strony. Możesz w tym celu utworzyć katalog /fonts i tam wgrać pliki. Musisz je następnie osadzić w pliku CSS motywu.

3 porady jak przyspieszyć ładowanie Google Fonts
Całą rodzinę czcionki z Google Fonts możesz pobrać na dysk.

3) Stosuj atrybut “preconnect” dla czcionek Google

Czcionki Google Fonts, pobierane są z serwera CDN Google. Trzeba przyznać, że serwer ten jest dość szybki, ale Twoja strona łączy się z nim relatywnie późno w hierarchii wszystkich plików do załadowania.

Jeśli wystąpi problem z połączeniem i czcionki nie zostaną pobrane, przeglądarka wyświetli stronę z systemową czcionką na komputerze użytkownika. Następnie zacznie pobierać pozostałe pliki, takie skrypty i obrazy a następnie spróbuje pobrać czcionki jeszcze raz. Widzisz wtedy takie charakterystyczne “mrugnięcie” strony.

Aby tego uniknąć, możesz w linku do czcionki Google zastosować atrybut “preconnect”. Informuje on przeglądarkę, żeby połączyła się wstępnie z CDN Google i zaoszczędziła cenne milisekundy. Więcej o samym atrybucie i jego stosowaniu przeczytasz w bardzo dobrym wpisie tutaj.

Podsumowanie

Czy warto stosować czcionki Google? Zdecydowanie tak. Czy muszą one spowalniać stronę? Niekoniecznie. Większość użytkowników ani nawet administratorów stron nie zauważy problemu z wolniejszym ładowaniem. Walczymy tu przecież o ułamki sekundy. Warto jednak znać metody na poprawę wydajności strony, kiedy koniecznie chcemy uzyskać perfekcyjny wynik w Google Page Speed 😉

Jeśli masz dodatkowe pytania lub przemyślenia – zostaw mi je w komentarzu pod wpisem lub napisz do mnie na e-mail albo przez formularz kontaktowy. Odpowiadam na wszystkie wiadomości 🙂

ZAPISZ SIĘ DO NEWSLETTERA!

Bądź na bieżąco! W newsletterze będziesz otrzymywać m.in. informacje o nowych wpisach na blogu, poradnikach na YouTube, e-bookach oraz ważnych wydarzeniach ze świata WordPress. Wysyłam jedynie wartościowe treści.

Tag:Google Fonts

  • Udostępnij:
author avatar
Damian Kmieciak

Programista, twórca gier i aplikacji na urządzenia mobilne oraz komputery PC. Projektant stron i sklepów internetowych, logotypów, wizytówek, opakowań, ulotek i etykiet. Ostatnio pracownik FIBARO odpowiedzialny za utrzymanie i rozwój strony internetowej.

Poprzedni wpis

Jak podpiąć Google Analytics 4
26 września 2022

Następny wpis

Jak kompletnie wyłączyć Google Fonts
10 października 2022

Może Ci się spodobać

atrybut “alt” dla obrazków
Czy atrybut “alt” dla obrazków pomaga w SEO?
21 listopada, 2022
Jak przyspieszyć Elementor
Jak przyspieszyć Elementor
24 października, 2022
Jak kompletnie wyłączyć Google Fonts
Jak kompletnie wyłączyć Google Fonts
10 października, 2022

Znajdź na stronie

Kategorie

  • Darmowe motywy
  • Design / Grafika
  • Elementor
  • SEO / Optymalizacja
  • Serwer / IT
  • WooCommerce
  • WordPress

Najnowsze wpisy

Przyklejone menu Elementor
Jak zrobić przyklejone menu w Elementor
27mar2023
Jak wyłączyć prawy przycisk myszy w WordPress
Jak wyłączyć prawy przycisk myszy w WordPress
13mar2023
Własny kod JavaScript w WordPress
Jak dodać własny kod JavaScript w WordPress
27lut2023
Jak przyspieszyć sklep internetowy
Jak przyspieszyć sklep internetowy. 5 metod na szybszy WooCommerce
13lut2023
Jak wymusić 9 cyfr numeru telefonu w WooCommerce
Jak wymusić 9 cyfr numeru telefonu w WooCommerce
30sty2023
Wyklikane Logo
+48 503 865 645
kontakt@wyklikane.pl