Optymalizacja czcionki na stronie

Dzisiejszy wpis chciałbym rozpocząć od informacji o tym, iż optymalizacja czcionki na stronie przyniosła mi korzyść w postaci odchudzenia samej strony i ilości pobieranych danych. Bardzo często na stronach widzimy przeróżne kroje czcionek, jedne bardziej, inne mniej czytelne. U mnie na stronie do tej pory używałem kroju Ubuntu, bo w sumie taki mi się podobał. Kwestię gustu i tego, czy czcionka jest ładna lub nie, pomijam.

System fonts vs Web fonts

Czcionka systemowa (system font) to taka, która jest zainstalowana na komputerze. Jest ona zwykle dostarczana z systemami operacyjnymi, ale może być również dołączana do niektórych programów lub instalowana ręcznie.

Czcionka internetowa (web font) to plik czcionki przechowywany na serwerze strony, który przeglądarka tymczasowo pobiera w celu wyświetlenia strony internetowej zgodnie z projektem dewelopera.

Czcionki internetowe zaczęły zdobywać popularność wraz z wprowadzeniem usług takich jak Typekit w 2009 roku.

Wybór lepszego systemu czcionki

Czy jest lepsze miejsce serwowania czcionki użytkownikowi? To pytanie nie ma jednoznacznej odpowiedzi. Czcionkę można pobierać z serwera lokalnego, czyli tego, na którym jest umieszczona sama strona lub z serwera zewnętrznego np. usługa Google Fonts. Jest to o tyle ciekawe rozwiązanie, gdyż serfując po stronach pobierają nam się czcionki do pamięci przeglądarki. W przypadku odwiedzenia kilku witryn z taką samą czcionką pobraną z Google Fonts, czcionka wczyta nam się bardzo szybko.

Optymalizacja czcionki na stronie

Zacznijmy temat właściwy. Jak już wspomniałem, do tej pory na mojej stronie używałem czcionki Ubuntu i serwowałem ją z usługi Google Fonts. Kilka dni temu postanowiłem przyjrzeć się dokładniej ile kilobajtów pobiera w tle strona.

Owszem, otworzyłem stronę bez cache (bez pamięci podręcznej), jednak okazało się, że same czcionki zjedzą ponad 230KB. To sporo. Postanowiłem więc coś z tym zrobić i przeprowadzić optymalizację czcionki.

Na czym ta optymalizacja czcionki polegała? Otóż wyrzuciłem czcionkę Ubuntu pobieraną z Google Fonts i użyłem czcionek wbudowanych w system.

font-family: -apple-system, system-ui, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Liberation Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;

Co tu się wydarzyło? To proste, czcionka jaką obecnie używam na stronie to czcionka systemowa, czyli można powiedzieć, że zaoszczędziłem użytkownikowi 230KB transferu danych. Oczywiście oszczędność ma miejsce pod warunkiem, że user nigdzie w przeglądarce nie ma zapisanej czcionki Ubuntu. Na stronie teksty będą renderowane za pomocą czcionek kolejno systemowa od Apple, jeśli tej przeglądarka nie znajdzie spróbuje czcionki system-ui, następnie kolejnej itd.

Kompatybilność między przeglądarkami lub systemami

Niektóre systemy operacyjne lub też przeglądarki mogą inaczej renderować daną czcionkę. Na przykład nowsze urządzenia z Androidem zamieni Georgia lub Palatino na Noto Serif. Twoja witryna nie musi wyglądać dokładnie tak samo w każdej przeglądarce i na każdym urządzeniu. Jest to spowodowane różnymi silnikami renderującymi stronę.