Wczytanie kroju pisma z serwerów Google uruchamia żądanie wychodzące z przeglądarki odwiedzającego, przed jakąkolwiek zgodą. To żądanie przekazuje jego adres IP, adres przeglądanej strony i identyfikator przeglądarki podmiotowi trzeciemu spoza Unii Europejskiej. To przetwarzanie danych osobowych bez podstawy prawnej, trywialnie sprawdzalne przez każdego, kto otworzy inspektor przeglądarki.
Orzeczenie sądu krajowego w Monachium z 2022 roku ukarało operatora strony dokładnie na tej podstawie, a sprawa dała początek fali wezwań w Niemczech. Organy ochrony danych podjęły temat w swoich rekomendacjach. Ryzyko nie jest teoretyczne.
Dlaczego zgoda nie rozwiązuje problemu
Można by pomyśleć o blokowaniu krojów do momentu zgody, jak skryptu analitycznego. W praktyce to podejście nie działa: strona, która czeka na zgodę, zanim wczyta kroje, wyświetla się najpierw czcionką systemową, a potem przełącza, co daje istotne przesunięcie wizualne i pogarsza doświadczenie wszystkim.
Hosting własny to jedyna odpowiedź rozwiązująca naraz zgodność i wydajność. Pobierasz pliki raz, serwujesz je z własnej domeny i żadne żądanie nie wychodzi do podmiotu trzeciego.
Gdzie chowają się wywołania w PrestaShop
To część, którą większość migracji pomija. Wywołanie usunięte z szablonu nie oznacza, że serwis jest czysty.
- Szablon. Znacznik odnośnika do fonts.googleapis.com w pliku nagłówka, czasem z dyrektywą wstępnego łączenia.
- Arkusze stylów. Reguła importu na początku pliku CSS, często pomijana, bo nie widać jej w kodzie szablonów.
- Moduły. Moduł karuzeli, licznika albo okna wyskakującego wczytujący własny krój. Każdy moduł potencjalnie dodaje wywołanie.
- Ikony. Biblioteki ikon hostowane u tego samego dostawcy rodzą dokładnie ten sam problem.
- Treść. Strona CMS albo opis produktu wklejony z zewnętrznego edytora może zawierać znacznik stylu importujący zdalny krój.
Moduł Google Fonts Local PrestaShop 8/9: czcionki hostowane lokalnie, zgodne z RODOTwoje czcionki Google Fonts, hostowane u Ciebie. Zero żądań do Google, zero zmodyfikowanych plików motywu.€59,00
Procedura
Cztery kroki, w tej kolejności.
1. Inwentaryzacja. Otwórz zakładkę Sieć w przeglądarce, przefiltruj po domenach krojów i przeładuj kilka typowych stron: główną, kategorię, kartę produktu, koszyk, stronę CMS. Zapisz każdą rodzinę i każdą faktycznie pobieraną grubość.
2. Pobranie. Weź pliki w formacie WOFF2, który pokrywa wszystkie aktualne przeglądarki. Zachowaj tylko te grubości, których naprawdę używasz: rodzina wczytana w sześciu grubościach, gdy szablon używa dwóch, to kilkaset zbędnych kilobajtów.
3. Deklaracja. Umieść pliki w szablonie i zadeklaruj każdą rodzinę własną regułą kroju, wskazując zachowanie wyświetlania typu swap, żeby uniknąć niewidocznego tekstu podczas ładowania.
4. Sprzątanie. Usuń wszystkie zdalne odwołania znalezione w kroku 1, w tym dyrektywy wstępnego łączenia, które otwierają połączenie nawet bez pobierania pliku.
Kontrola końcowa
Test wykonuje się w zakładce Sieć, w trybie prywatnym, z opróżnionym cache. Przefiltruj po domenach zdalnych krojów: oczekiwane zero żądań, na wszystkich typowych stronach, zalogowany i niezalogowany.
Warto wykonać dwie dodatkowe weryfikacje. Zaplecze czasem wczytuje własne zdalne kroje, co nie dotyczy odwiedzających, ale zasługuje na obsługę ze względu na zespół. A e-maile transakcyjne w formacie HTML też mogą zawierać wywołania krojów, co przekazuje dane przy każdym otwarciu wiadomości.
Zysk wydajnościowy
Hosting własny usuwa z krytycznej ścieżki renderowania jedno rozwiązanie DNS, jedno uzgodnienie TLS i jedno połączenie z obcą domeną. Przy przeciętnym połączeniu mobilnym oznacza to zwykle kilkaset milisekund zysku na wyświetleniu tekstu.
Dwa ustawienia dopełniają zysk. Wstępne wczytanie głównego kroju, zadeklarowane w nagłówku, uruchamia go przed analizą CSS. A ograniczenie zestawu znaków do faktycznie używanych alfabetów odchudza każdy plik, często o połowę po usunięciu znaków cyrylickich i greckich z uniwersalnego kroju.
Kwestia licencji
Niemal wszystkie kroje rozpowszechniane przez Google są na wolnej licencji, co pozwala na hosting własny bez formalności. Sprawdź mimo to licencję rodzin, które ściągasz do siebie, zwłaszcza jeśli pozyskałeś je gdzie indziej, i przechowuj plik licencji obok plików kroju.
Automatyzacja migracji
Moduł Lokalne Google Fonts dla PrestaShop obsługuje ten łańcuch w PrestaShop 8 i 9: wykrywanie zdalnych wywołań w szablonie i modułach, pobranie i lokalny hosting używanych rodzin, przepisanie odwołań oraz kontrolę, czy nie zostało żadne żądanie.
