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) 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 🙂