Dlaczego Twój motyw PrestaShop ładuje 15 czcionek, których nie potrzebujesz

Ukryty koszt nadmiaru czcionek w motywach PrestaShop

Otwórz DevTools w przeglądarce, przejdź do karty Sieć (Network), przefiltruj po "Font" i przeładuj swój sklep PrestaShop. Jeśli widzisz więcej niż trzy lub cztery pliki czcionek do pobrania, masz problem, który po cichu kosztuje Cię klientów. Większość motywów PrestaShop jest dostarczana z oszałamiającą liczbą zasobów czcionek, których przeciętny sklep nigdy nie używa, a każdy z nich opóźnia moment, w którym Twoi odwiedzający mogą faktycznie przeczytać treść.

Nadmiar czcionek to jeden z najbardziej pomijanych problemów wydajnościowych w PrestaShop. Właściciele sklepów spędzają godziny na optymalizacji obrazów, włączaniu CCC (Combine, Compress, Cache) i dostrajaniu konfiguracji serwera, a jednocześnie ignorują fakt, że ich motyw ładuje 800KB lub więcej plików czcionek przy każdym załadowaniu strony. Ten artykuł wyjaśnia dokładnie, dlaczego tak się dzieje, jak przeprowadzić audyt ładowania czcionek i co z tym zrobić.

Jak motywy PrestaShop dołączają czcionki

Motywy PrestaShop są dystrybuowane jako samodzielne pakiety. Kiedy deweloper motywu buduje motyw, chce, aby działał od razu po instalacji dla jak największej liczby sklepów. Oznacza to, że dołącza każdy wariant czcionki i bibliotekę ikon, które mogą się hipotetycznie przydać. Rezultatem jest motyw dostarczany ze znacznie większą liczbą zasobów czcionek, niż jakikolwiek pojedynczy sklep kiedykolwiek użyje.

Typowy motyw PrestaShop zawiera trzy kategorie czcionek. Po pierwsze, czcionki wyświetlane używane do nagłówków, tekstu głównego i elementów interfejsu. Są to zazwyczaj czcionki Google Fonts, takie jak Roboto, Open Sans, Lato lub Montserrat. Po drugie, czcionki ikonowe, takie jak FontAwesome, Material Icons lub zestawy ikon specyficzne dla motywu. Po trzecie, czcionki zapasowe lub dekoracyjne, które motyw używa do specyficznych komponentów, takich jak banery, odznaki lub sekcje promocyjne.

Problem się potęguje, ponieważ każda rodzina czcionek zazwyczaj jest dostarczana w wielu grubościach i stylach. Pojedyncza czcionka jak Roboto może zawierać Regular (400), Medium (500), Bold (700) i ich warianty kursywne, każdy jako osobny plik WOFF2. Pomnóż to przez dwie lub trzy rodziny czcionek plus bibliotekę ikon, a szybko dojdziesz do 12 do 15 indywidualnych plików czcionek ładowanych na każdej stronie.

Problem z FontAwesome

FontAwesome zasługuje na osobną sekcję, ponieważ jest największym sprawcą problemów wydajnościowych związanych z czcionkami w motywach PrestaShop. Pełna biblioteka FontAwesome 5 waży około 150KB za sam plik webfont, plus kolejne 60-80KB za CSS. FontAwesome 6 jest jeszcze większy. Biblioteka zawiera ponad 1600 ikon, ale przeciętny sklep PrestaShop używa może 20 do 30 z nich.

Oznacza to, że zmuszasz każdego odwiedzającego do pobrania ponad 200KB danych czcionek i CSS tylko po to, żebyś mógł wyświetlić ikonę koszyka, lupę wyszukiwania i kilka logotypów mediów społecznościowych. To absurdalny kompromis, który ma miejsce, ponieważ deweloperzy motywów uważają za łatwiejsze dołączenie całej biblioteki niż tworzenie podzbioru dla konkretnych potrzeb każdego sklepu.

Motyw Classic w PrestaShop 1.7 i 8.x zawiera FontAwesome 4.7, który jest nieco mniejszy, ale nadal zawiera setki ikon, których nigdy nie użyjesz. Motyw Hummingbird w PrestaShop 8.x odszedł od FontAwesome na rzecz ikon SVG, co jest znaczącą poprawą, ale wiele motywów i modułów firm trzecich nadal polega na FontAwesome i ładuje własną kopię na wierzchu tego, co dostarcza motyw.

Google Fonts i podatek wydajnościowy

Google Fonts to najpopularniejsza usługa czcionek webowych, a motywy PrestaShop intensywnie z niej korzystają. Jednak ładowanie Google Fonts w domyślny sposób tworzy łańcuch żądań zabijających wydajność.

Kiedy Twój motyw ładuje Google Fonts przez standardowy tag link, przeglądarka musi najpierw połączyć się z fonts.googleapis.com, aby pobrać plik CSS. Ten plik CSS następnie informuje przeglądarkę, aby pobrała właściwe pliki czcionek z fonts.gstatic.com. Każde z tych połączeń wymaga rozwiązywania DNS, uzgadniania TCP i negocjacji TLS. Na połączeniach mobilnych ten łańcuch może dodać 300-500ms opóźnienia, zanim pojedynczy znak tekstu wyrenderuje się na ekranie.

Co gorsza, CSS Google Fonts używa deskryptora font-display ustawionego na "swap" domyślnie od 2019 roku, ale wiele starszych motywów nadal odwołuje się do adresów URL CSS Google Fonts sprzed tej zmiany. Bez font-display: swap przeglądarka może ukryć cały tekst na stronie do momentu pobrania czcionki, tworząc przerażający Flash of Invisible Text (FOIT), gdzie odwiedzający widzą pustą stronę przez jedną do trzech sekund.

Istnieje również kwestia prywatności. Ładowanie czcionek z CDN Google oznacza, że Google otrzymuje informacje o każdym odwiedzającym Twój sklep, w tym jego adres IP i odwiedzane strony. Zgodnie z RODO wymaga to wyraźnej zgody, a niemiecki sąd orzekł w styczniu 2022, że używanie Google Fonts bez zgody narusza RODO, co skutkuje karami.

Jak przeprowadzić audyt ładowania czcionek

Zanim będziesz mógł naprawić problem, musisz dokładnie zrozumieć, jakie czcionki ładuje Twój motyw i które z nich faktycznie potrzebujesz. Oto systematyczne podejście.

Otwórz Chrome DevTools (F12), przejdź do karty Sieć (Network) i zaznacz pole "Wyłącz cache" (Disable cache). Przeładuj stronę i przefiltruj po "Font" w pasku filtrów. Zobaczysz każdy plik czcionki pobierany przez przeglądarkę. Zanotuj nazwy plików, rozmiary i kolumnę inicjatora, która informuje, który plik CSS zażądał każdej czcionki.

Następnie użyj karty Pokrycie (Coverage) w DevTools (Ctrl+Shift+P, następnie wpisz "Coverage"). Rozpocznij nagrywanie pokrycia i nawiguj po swoim sklepie. Karta Pokrycie pokazuje dokładnie, ile każdego pliku CSS jest faktycznie używane. Dla CSS FontAwesome zazwyczaj zobaczysz 90% lub więcej oznaczonych jako nieużywane.

Możesz również użyć audytu Lighthouse w DevTools. Uruchom audyt wydajności i poszukaj rekomendacji "Zmniejsz nieużywane CSS" (Reduce unused CSS) i "Upewnij się, że tekst pozostaje widoczny podczas ładowania czcionek webowych" (Ensure text remains visible during webfont load). Lighthouse specyficznie wskaże problemy wydajnościowe związane z czcionkami.

Dla bardziej dokładnej analizy użyj WebPageTest (webpagetest.org), aby uruchomić test z połączenia mobilnego. Spójrz na wykres kaskadowy (waterfall) i znajdź żądania czcionek. Zanotuj, kiedy zaczynają się ładować w stosunku do innych zasobów i ile czasu zajmują. Na połączeniu 3G opóźnienia ładowania czcionek stają się boleśnie oczywiste.

Usuwanie nieużywanych czcionek krok po kroku

Kiedy już wiesz, jakie czcionki ładuje Twój motyw i które faktycznie potrzebujesz, czas usunąć nadmiar. Podejście różni się w zależności od architektury Twojego motywu.

Dla motywów, które ładują Google Fonts przez tag link w szablonie nagłówka, znajdź plik szablonu zawierający odniesienie do Google Fonts. W większości motywów jest to templates/layout/head.tpl lub podobny plik. Jeśli używasz motywu potomnego, skopiuj ten szablon do katalogu motywu potomnego przed edycją. Usuń lub zmodyfikuj link Google Fonts, aby zawierał tylko grubości i rodziny, których faktycznie używasz.

Dla FontAwesome sprawdź, czy Twój motyw ładuje go przez plik CSS w katalogu assets/css, czy przez link CDN. Jeśli jest to plik lokalny, masz dwie opcje. Możesz zastąpić pełny pakiet FontAwesome podzbiorem zawierającym tylko ikony, których używasz, lub możesz całkowicie zastąpić użycie czcionek ikonowych inline SVG.

Aby stworzyć podzbiór FontAwesome, użyj narzędzia takiego jak IcoMoon (icomoon.io) lub Fontello (fontello.com). Narzędzia te pozwalają wybrać tylko konkretne ikony, których potrzebujesz, i wygenerować niestandardowy plik czcionki, który może mieć 5-10KB zamiast 150KB. Będziesz musiał zaktualizować nazwy klas CSS, jeśli narzędzie generuje inne, ale większość pozwala zachować oryginalne nazwy klas FontAwesome.

Dla Google Fonts sprawdź każdy plik CSS w swoim motywie pod kątem deklaracji @font-face. Deweloperzy motywów czasami importują czcionki bezpośrednio w CSS zamiast przez szablon nagłówka. Użyj wyszukiwania DevTools (Ctrl+Shift+F), aby przeszukać wszystkie załadowane zasoby pod kątem "@font-face" i "fonts.googleapis.com".

Implementacja font-display: swap

Jeśli zachowujesz jakiekolwiek czcionki webowe, upewnij się absolutnie, że używają deskryptora font-display: swap. To informuje przeglądarkę, aby natychmiast wyświetliła tekst używając zapasowej czcionki systemowej, podczas gdy czcionka webowa pobiera się w tle. Gdy czcionka webowa jest gotowa, przeglądarka ją podmienia. To eliminuje FOIT i zapewnia, że Twoja treść jest czytelna natychmiast.

Dla Google Fonts ładowanych przez CDN dodaj parametr display=swap do adresu URL. Na przykład zmień fonts.googleapis.com/css2?family=Roboto:wght@400;700 na fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap. Zauważ, że Google dodał ten parametr domyślnie w 2019 roku, ale wiele motywów PrestaShop nadal używa starszych formatów adresów URL.

Dla czcionek hostowanych samodzielnie z deklaracjami @font-face w CSS dodaj font-display: swap do każdego bloku @font-face. Otwórz plik CSS motywu zawierający reguły @font-face i dodaj tę właściwość. Umieszcza się ją wewnątrz bloku @font-face obok font-family, src i font-weight.

Pamiętaj, że font-display: swap może powodować Flash of Unstyled Text (FOUT), gdzie tekst krótko pojawia się w czcionce zapasowej przed przełączeniem na czcionkę webową. Jest to znacznie lepsze doświadczenie niż niewidoczny tekst, ale możesz zminimalizować wizualne szarpnięcie, wybierając czcionki zapasowe, które ściśle odpowiadają metryce Twojej czcionki webowej. Właściwości CSS size-adjust, ascent-override i descent-override pomagają w tym.

Samodzielne hostowanie czcionek vs ładowanie z CDN

Samodzielne hostowanie czcionek zamiast ładowania z CDN Google oferuje kilka znaczących zalet dla sklepów PrestaShop.

Wydajność poprawia się, ponieważ eliminujesz dodatkowe wyszukiwanie DNS i połączenie z serwerami Google. Twoje czcionki ładują się z tej samej domeny co inne zasoby, co oznacza, że przeglądarka może ponownie wykorzystać istniejące połączenia. Dzięki HTTP/2 lub HTTP/3 wszystkie pliki czcionek mogą pobierać się jednocześnie przez jedno połączenie.

Zgodność z przepisami o prywatności staje się prostsza, ponieważ dane odwiedzających nie są już wysyłane do Google. To całkowicie eliminuje problem z RODO i nie musisz dodawać Google Fonts do swojego banera zgody na pliki cookie.

Niezawodność poprawia się, ponieważ nie jesteś zależny od zewnętrznej usługi. Jeśli CDN Google ma problem (rzadko, ale się zdarza), Twoje czcionki nadal się ładują.

Aby samodzielnie hostować Google Fonts, użyj narzędzia google-webfonts-helper (gwfh.mranftl.com/fonts), które zapewnia prosty interfejs do pobierania dowolnej czcionki Google w formacie WOFF2 z prawidłowym CSS @font-face. Pobierz tylko grubości i style, których potrzebujesz, umieść pliki w katalogu assets/fonts Twojego motywu i dodaj CSS @font-face do arkusza stylów motywu.

Jedyną potencjalną wadą samodzielnego hostowania jest utrata możliwości trafienia w cache, jeśli odwiedzający załadował już tę samą czcionkę z CDN Google na innej stronie. Jednak przeglądarki w dużej mierze wyeliminowały to międzystronowe cachowanie ze względów prywatności od 2020 roku, więc ta zaleta w praktyce już nie istnieje.

Podzbiory czcionek: Opcja nuklearna

Tworzenie podzbiorów czcionek oznacza usuwanie znaków, których nie potrzebujesz, z pliku czcionki. Typowa łacińska czcionka webowa zawiera znaki dla kilkudziesięciu języków, z których wielu Twój sklep nie używa. Tworząc podzbiór tylko do znaków, których Twój sklep potrzebuje, możesz zmniejszyć rozmiary plików czcionek o 50-70%.

Narzędzie pyftsubset z biblioteki Python fonttools to najbardziej niezawodny sposób tworzenia podzbiorów czcionek. Możesz określić dokładnie, które zakresy Unicode mają być uwzględnione. Dla sklepu działającego tylko po angielsku możesz stworzyć podzbiór ograniczony do Basic Latin (U+0020-007F) plus Latin-1 Supplement (U+00A0-00FF) dla symboli walut i znaków diakrytycznych.

Dla sklepów działających w wielu językach musisz być ostrożniejszy. Uwzględnij zakresy Unicode dla wszystkich języków obsługiwanych przez Twój sklep. CSS Google Fonts faktycznie robi to automatycznie za pomocą deskryptorów unicode-range, ładując podzbiory znaków na żądanie, ale czcionki hostowane samodzielnie wymagają ręcznego tworzenia podzbiorów.

Prostszym podejściem jest używanie wyłącznie formatu WOFF2 i porzucenie wsparcia dla starszych formatów. WOFF2 używa kompresji Brotli i tworzy pliki o 30% mniejsze niż WOFF. Każda nowoczesna przeglądarka obsługuje WOFF2, więc chyba że musisz obsługiwać Internet Explorer 11, nie ma powodu, aby dołączać formaty WOFF, TTF czy EOT. Wiele motywów PrestaShop nadal dostarcza wszystkie cztery formaty ze względu na kompatybilność wsteczną, która nie jest już potrzebna.

Stosy czcionek systemowych: Alternatywa za zerowym kosztem

Najbardziej radykalnym rozwiązaniem problemu wydajności czcionek jest nieużywanie czcionek webowych w ogóle. Nowoczesne systemy operacyjne dostarczają wysokiej jakości czcionki, które wyglądają doskonale na ekranie. Stos czcionek systemowych używa czcionki dostarczanej przez system operacyjny, co oznacza zero plików czcionek do pobrania i natychmiastowe renderowanie tekstu.

Nowoczesny stos czcionek systemowych wygląda tak: font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif. Daje to San Francisco na urządzeniach Apple, Segoe UI na Windows i Roboto na Android. Wszystkie to czyste, nowoczesne, dobrze czytelne czcionki bezszeryfowe.

GitHub, Bootstrap 5 i wiele wysoko wydajnych stron internetowych używa stosów czcionek systemowych. Różnica wizualna między czcionką systemową a czcionką Google Fonts jak Open Sans czy Roboto jest minimalna, szczególnie dla tekstu głównego. Większość Twoich klientów nie zauważy ani nie będzie dbać o to, czy Twój sklep używa Roboto załadowanego z serwera, czy Roboto już zainstalowanego na ich telefonie z Androidem.

Aby zaimplementować stos czcionek systemowych w PrestaShop, musisz zmodyfikować CSS motywu, aby zastąpić istniejące deklaracje font-family, usunąć reguły @font-face i tagi link Google Fonts oraz usunąć pliki czcionek z katalogu assets motywu. Jeśli używasz motywu potomnego, możesz nadpisać deklaracje czcionek motywu nadrzędnego bez modyfikowania plików motywu nadrzędnego.

Co z czcionkami ikonowymi?

Jeśli usuniesz FontAwesome lub inną czcionkę ikonową, potrzebujesz alternatywy do wyświetlania ikon. Najlepszym nowoczesnym podejściem jest inline SVG. Ikony SVG renderują się ostro w każdym rozmiarze, mogą być stylowane za pomocą CSS i dodają wagę tylko za konkretne używane ikony, zamiast ładować całą bibliotekę ikon.

Motyw Hummingbird PrestaShop używa ikon SVG natywnie, co jest jednym z powodów jego lepszej wydajności w porównaniu do Classic. Jeśli Twój motyw używa FontAwesome, możesz zastąpić poszczególne ikony za pomocą SVG ze źródeł takich jak Heroicons, Feather Icons, a nawet własne pliki SVG FontAwesome (które są dostępne oddzielnie od wersji czcionkowej).

Dla sklepu PrestaShop zazwyczaj potrzebujesz mniej niż 30 unikalnych ikon: koszyk, wyszukiwanie, konto użytkownika, serce/lista życzeń, strzałki, logotypy mediów społecznościowych i kilka ikon specyficznych dla kategorii. Jako inline SVG mogą one łącznie ważyć 10-15KB, w porównaniu do 150-200KB za pełną czcionkę FontAwesome i CSS.

Mierzenie wpływu

Po usunięciu nieużywanych czcionek zmierz poprawę. Uruchom Lighthouse przed i po, porównując wynik Wydajności (Performance), First Contentful Paint (FCP) i Largest Contentful Paint (LCP). Optymalizacja czcionek zazwyczaj poprawia FCP o 200-500ms na połączeniach mobilnych.

Sprawdź łączny rozmiar transferu w karcie Sieć (Network) DevTools. Dobrze zoptymalizowany sklep PrestaShop powinien transferować mniej niż 50KB danych czcionek łącznie. Jeśli przejdziesz na czcionki systemowe, ta liczba spada do zera.

Zweryfikuj również, że Twój sklep nadal wygląda poprawnie. Sprawdź każdy typ strony: stronę główną, kategorię, produkt, koszyk i zamówienie. Niektóre motywy używają specyficznych czcionek dla specyficznych elementów i usunięcie czcionki może spowodować nieoczekiwane renderowanie z czcionką zapasową. Zawsze dokładnie testuj przed wdrożeniem zmian czcionek na produkcji.

Podsumowanie: Lista kontrolna ładowania czcionek

Przeprowadź audyt aktualnego ładowania czcionek za pomocą karty Sieć (Network) DevTools przefiltrowanej po czcionkach. Zidentyfikuj, które czcionki są faktycznie używane, sprawdzając pokrycie CSS. Usuń wszystkie rodziny lub grubości Google Fonts, których nie używasz. Zastąp pełne czcionki ikonowe wersjami podzbiorów lub inline SVG. Dodaj font-display: swap do wszystkich pozostałych deklaracji @font-face. Hostuj czcionki samodzielnie zamiast ładować z CDN Google. Rozważ użycie wyłącznie WOFF2, aby wyeliminować starsze, większe formaty. Oceń, czy czcionki systemowe mogłyby całkowicie zastąpić Twoje czcionki webowe. Zmierz przed i po za pomocą Lighthouse i WebPageTest. Cel jest prosty: ładuj tylko to, czego potrzebujesz, ładuj to efektywnie i nigdy nie zmuszaj odwiedzających do czekania na czcionki, których nie widzą.