[CSS] 3 sposoby na optymalizację ładowania czcionek na stronie o których nie miałeś do tej pory pojęcia

W poprzednim wpisie, w którym recenzowałem szablon do Joomla!, poruszyłem kwestię optymalizacji czcionek z ikonami. W tym artykule chciałbym rozszerzyć ten temat przedstawiając kilka ciekawych sposobów na ich optymalizację.

Zapewne znasz jakieś kolekcje czcionek zapewniających ikony na strony internetowe, chociażby takie jak: FontAwesome, Glyphicons z Bootstrap, itd., itp. Dzięki nim nasze strony czy też aplikacje internetowe nabrały charakteru i można w łatwy sposób za pomocą symboli przedstawić znaczenie danego elementu interfejsu użytkownika.

Section 1Problem z wielkością plików z czcionkami

Problemem tych czcionek jest jednak ich wielkość. Przykładem może być czcionka FontAwesome, która zawiera ponad 500 symboli przez co waga pliku z czcionką waha sie od 56kB do ponad 300kB zależnie od wersji czcionki obsługiwanej przez przeglądarkę użytkownika. To jest bardzo dużo, tym bardziej, że w zdecydowanej większości przypadków nie potrzebujemy aż 500 symboli. Najczęściej ograniczamy się do około 10-20 symboli na stronę czy aplikację internetową. To oznacza że wykorzystujemy około 4% możliwości danej czcionki. 96% danych z czcionki jest zupełnie nam niepotrzebnych. Czy możemy sprawić, że będziemy ładować na stronę tylko to co naprawdę wykorzystujemy? Jak najbardziej, wystarczy że wykorzystamy do tego aplikację Icomoon.io.

Section 2Przygotowanie własnej czcionki

Przygotowanie własnego zestawu czcionek jest bardzo proste. Wystarczy wejść na stronę internetową Icomoon.io, następnie zacząć wybierać potrzebne ikony:

Po wybraniu pożądanych przez Ciebie ikon należy kliknąć w przycisk Generate font i powinno pojawić się następujące okno, w którym będzie można zdecydować jaką klasę CSS będzie miała wybrana ikona oraz jaki przedrostek/przyrostek a także jaką nazwę będziemy miał wybrany przez Ciebie zestaw ikon:

Okno z dodatkową konfiguracją pojawi się gdy klikniesz w ikonę trybiku obok przycisku Download:

Gdy już skonfigurujemy sobie swój zestaw ikon, to możemy przystąpić do pobrania paczki. Mając taki zestaw ikon u siebie na dysku możemy przystąpić do umieszczania ich w plikach naszej strony bądź aplikacji internetowej. Pliki czcionek umieszczamy w dowolnym miejscu naszego projektu (w moim przypadku to będzie katalog fonts). Następnie, kopiujemy style z pliku style.css dołączonego do naszego zestawu ikon i wklejamy je do pliku CSS, który jest odpowiedzialny za wygląd naszej strony/aplikacji. Kod CSS dołączony do zestawu ikon powinien wyglądać w podobny sposób do tego poniżej (ustawienia domyślne, sugerowane przez aplikację Icomoon.io):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

@font-face {
  font-family: 'icomoon';
  src: url('fonts/icomoon.eot?-ld8mhq');
  src: url('fonts/icomoon.eot?#iefix-ld8mhq') format('embedded-opentype'),
    url('fonts/icomoon.woff?-ld8mhq') format('woff'),
    url('fonts/icomoon.ttf?-ld8mhq') format('truetype'),
    url('fonts/icomoon.svg?-ld8mhq#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
 
[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
 
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
 
.icon-search:before {
  content: "\f002";
}

I gotowe, mamy własny zestaw ikon na naszej stronie. Od teraz wszyscy użytkownicy nie będą musieli ściągać kilkudziesięciu kilobajtów zbędnego kodu. W przypadku wybrania 9 ikon, waga plików z czcionkami waha się od 3kB do 7kB. To jest niecałe 6% początkowej wagi pliku z czcionkami. Jest to ogromna oszczędność.

Section 3Inne sposoby optymalizacji ładowania czcionek na stronie

Oprócz sposobu podanego powyżej, czyli optymalizację ładowania czcionek poprzez redukcję wagi pliku w wyniku usunięcia zbędnych ikon/symboli, ładowanie czcionek możemy zoptymalizować na jeszcze 3 inne sposoby:

1. Trzymanie referencji do czcionki w localStorage, czyli podręcznej bazie danych przeglądarki,
2. Ładowanie ikon jako kod SVG wstawiony bezpośrednio w kod HTML strony

Section 4Ładowanie czcionek z wykorzystaniem localStorage

Za pomocą localStorage możemy zapamiętać pobrane czcionki, dzięki temu przy ponownym wejściu na stronę użytkownik nie będzie zmuszony pobierać z serwera plików z czcionką jeszcze raz, tylko pobierze je bezpośrednio z pamięci przeglądarki. Pamięć localStorage jest obsługiwana za pomocą kodu JS i jest nieulotna, tj. dane nie zostają wyczyszczone wraz z zamknięciem okna przeglądarki.

Aby móc trzymać czcionki w localStorage, musimy zapisać ten plik w naszym projekcie następnie wstawić go do sekcji <HEAD> w naszym kodzie HTML za pomocą znacznika <script src="[ścieżka-do-pliku]/fontloader.js"></script>. Należy pamiętać, aby w tym przypadku plik JS był ładowany przed wszystkimi plikami stylów CSS. W innym przypadku ten sposób nie zadziała poprawnie.

Section 5Wstawianie ikon jako kod SVG do kodu HTML

Drugi sposób jest inny. Polega na wstawieniu kodu SVG do kodu HTML (kod SVG przypomina HTML), najlepiej zaraz po znaczniku otwierającym <body> oraz dołączeniu do stylów naszej strony małego kodu CSS poprawiającego rozmiar ikony:

1
2
3
4
5
6
7
8
9

<body>
<svg display="none" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-search" viewBox="0 0 951 1024">
  <title>search</title>
  <path class="path1" d="M658.286 475.429q0-105.714-75.143-180.857t-180.857-75.143-180.857 75.143-75.143 180.857 75.143 180.857 180.857 75.143 180.857-75.143 75.143-180.857zM950.857 950.857q0 29.714-21.714 51.429t-51.429 21.714q-30.857 0-51.429-21.714l-196-195.429q-102.286 70.857-228 70.857-81.714 0-156.286-31.714t-128.571-85.714-85.714-128.571-31.714-156.286 31.714-156.286 85.714-128.571 128.571-85.714 156.286-31.714 156.286 31.714 128.571 85.714 85.714 128.571 31.714 156.286q0 125.714-70.857 228l196 196q21.143 21.143 21.143 51.429z"></path>
</symbol>
</defs>
</svg>

Kod CSS:

1
2
3
4
5
6
7
8
9
10

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
}
 
.icon-search {
  width: 0.9287109375em;
}

Następnie, aby wstawić ikonę w wybrane przez nas miejsce trzeba będzie użyć następującego zapisu:

<svg class="icon icon-search"><use xlink:href="#icon-search"></use></svg>

To podejście różni się od poprzednich w których aby wstawić ikonę należało wykorzystać czcionkę i CSS. Z jednej strony zapewnia to lepszą skalowalność ikony, z drugiej natomiast sprawia, że trzeba będzie pobrać plik HTML większy o kilka kilobajtów. Ikony SVG można wygenerować za pomocą aplikacji Icomoon.io klikając w przycisk Generate SVG, PNG, PDF.

Section 6Podsumowanie

Mam nadzieję, że udało mi się Ciebie zaciekawić tym tematem i sprawić, że będziesz w stanie zoptymalizować swoją stronę internetową tak, aby osiągała ona jak najwyższy ranking w Google Page Speed. Starałem się przedstawić 3 najciekawsze sposoby na optymalizację ładowania czcionek. Zapraszam do komentowania i dzielenia się swoimi doświadczeniami.

źródło