Een lettertype laden vanaf de servers van Google veroorzaakt een uitgaand verzoek vanuit de browser van de bezoeker, nog vóór elke toestemming. Dat verzoek geeft zijn IP-adres, het adres van de bezochte pagina en zijn user agent door aan een derde partij buiten de Europese Unie. Dat is een verwerking van persoonsgegevens zonder rechtsgrond, en ze is triviaal vast te stellen door iedereen die de inspecteur van de browser opent.
Een uitspraak van de rechtbank van München in 2022 veroordeelde een site-exploitant precies op die grond, en die zaak vormde de basis voor een golf aan ingebrekestellingen in Duitsland. Toezichthouders hebben het onderwerp in hun aanbevelingen overgenomen. Het risico is niet theoretisch.
Waarom toestemming het probleem niet oplost
U zou de lettertypen kunnen blokkeren tot de toestemming binnen is, zoals bij een analysescript. In de praktijk houdt die aanpak geen stand: een pagina die op toestemming wacht om haar lettertypen te laden, verschijnt eerst in het systeemlettertype en springt daarna om, wat een forse visuele verschuiving oplevert en de ervaring voor iedereen verslechtert.
Zelf hosten is het enige antwoord dat conformiteit en prestaties tegelijk regelt. U downloadt de bestanden één keer, u serveert ze vanaf uw eigen domein, en er vertrekt geen enkel verzoek naar een derde.
Waar de aanroepen zich verstoppen in PrestaShop
Dit is het deel dat de meeste opschoningen missen. Een aanroep die uit het thema is verwijderd, betekent niet dat de site schoon is.
- Het thema. Een linktag naar fonts.googleapis.com in het headerbestand, soms samen met een preconnect-instructie.
- De stylesheets. Een importregel boven aan een CSS-bestand, vaak vergeten omdat ze niet in de code van de templates voorkomt.
- De modules. Een carrousel-, afteller- of pop-upmodule die zijn eigen lettertype laadt. Elke module voegt potentieel een aanroep toe.
- De iconen. Iconenbibliotheken die bij dezelfde aanbieder worden gehost, vallen precies onder hetzelfde probleem.
- De inhoud. Een CMS-pagina of productbeschrijving die uit een externe editor is geplakt, kan een styletag bevatten die een extern lettertype importeert.
Module Google Fonts Lokaal PrestaShop 8/9: Zelfgehoste Lettertypen AVGUw Google Fonts, bij u gehost. Nul requests naar Google, nul gewijzigde themabestanden.€59,00
De procedure
Vier stappen, in deze volgorde.
1. Inventariseren. Open het tabblad Netwerk van uw browser, filter op de lettertypedomeinen en herlaad meerdere typepagina’s: home, categorie, productpagina, winkelwagen, CMS-pagina. Noteer elke familie en elke gewichtsvariant die werkelijk wordt opgevraagd.
2. Downloaden. Haal de bestanden op in WOFF2-formaat, dat alle huidige browsers dekt. Behoud alleen de gewichten die u echt gebruikt: een familie die in zes gewichten wordt geladen terwijl het thema er twee gebruikt, is enkele honderden kilobytes voor niets.
3. Declareren. Zet de bestanden in uw thema en declareer elke familie met een eigen lettertyperegel, met een weergavegedrag van het type swap om onzichtbare tekst tijdens het laden te vermijden.
4. Opruimen. Verwijder alle externe verwijzingen die u in stap 1 hebt gevonden, inclusief de preconnect-instructies, die een verbinding opzetten ook zonder dat er een bestand wordt gedownload.
De eindcontrole
De test doet u in het tabblad Netwerk, in een privévenster, met een lege cache. Filter op de externe lettertypedomeinen: nul verzoeken verwacht, op alle typepagina’s, zowel ingelogd als uitgelogd.
Twee aanvullende controles zijn de moeite waard. De back-office laadt soms zijn eigen externe lettertypen, wat uw bezoekers niet raakt maar wel aandacht verdient voor uw teams. En transactionele e-mails in HTML kunnen eveneens lettertype-aanroepen bevatten, waardoor er bij elke opening van een bericht gegevens worden doorgegeven.
De prestatiewinst
Zelf hosten schrapt een DNS-lookup, een TLS-onderhandeling en een verbinding naar een extern domein, en dat op het kritieke pad van het renderen. Op een gemiddelde mobiele verbinding levert dat vaak enkele honderden milliseconden op bij het tonen van de tekst.
Twee instellingen maken de winst compleet. Het preloaden van het hoofdlettertype, te declareren in de header, laat het starten voordat de CSS wordt geanalyseerd. En het beperken van de tekenset tot de alfabetten die u werkelijk gebruikt, maakt elk bestand lichter, vaak de helft wanneer u de cyrillische en Griekse tekens uit een universeel lettertype haalt.
Het aandachtspunt rond de licentie
Vrijwel alle lettertypen die Google verspreidt, staan onder een vrije licentie, wat zelf hosten zonder verdere stappen toelaat. Controleer toch de licentie van de families die u binnenhaalt, zeker als u ze elders hebt verkregen, en bewaar het licentiebestand naast de lettertypebestanden.
Het binnenhalen automatiseren
De module Google Fonts Lokaal voor PrestaShop behandelt deze keten op PrestaShop 8 en 9: detectie van externe aanroepen in het thema en de modules, downloaden en lokaal hosten van de gebruikte families, herschrijven van de verwijzingen en controle dat er geen enkel verzoek overblijft.
