Ben jij niet zeker hoeveel informatie bedrijven als Google, Facebook en Cloudflare verzamelen over het verkeer op jouw website? Wil jij liever niet meer gebruik maken van diensten als Google Fonts, Google Analytics, Cloudflare CDN? Lees dan dit blog artikel eens door, misschien staat er iets in wat je kunt toepassen op je eigen website.
Google Fonts
Om Google Fonts te kunnen verwijderen van je website moet je natuurlijk eerst zorgen dat ze op een andere manier worden geladen. Je wilt ze ook niet vervangen door lettertypen die standaard staan geïnstalleerd op de computer van de gebruiker. Daarom zal je ze moeten downloaden naar je de webserver van je hosting provider. Als je WordPress gebruikt is daar een handige plugin voor te krijgen, OMGF (Optimize My Google Fonts) die je in één klik kunt installeren via het dashboard. Zodra je de plugin hebt geïnstalleerd en geactiveerd zal er een extra subitem verschijnen onder Instellingen (of Settings). Klik daar op Optimize Google Fonts. Dan zal je moeten kiezen tussen verschillende opties, het automatisch detecteren of handmatig alle lettertypes selecteren. We leggen je uit hoe je de automatische manier kunt gebruiken:
Gebruik van plugin
Klik op de blauwe Auto Detect knop en wacht tot de pagina is herladen. Vervolgens open je de homepagina van je website in een ander tabblad. Nadat deze is geladen keer je terug naar de instellingen van OMGF waar een bericht is verschenen met de optie om de pagina te herladen. Klik daarop. Wacht opnieuw tot de pagina is herladen, nu zouden alle Google Fonts op je website moeten verschijnen in de lijst. Controleer of dit klopt en voeg eventuele extra lettertypes nu toe. We raden je aan om Preload bij elk font in te schakelen om de prestaties te verbeteren. Klik vervolgens op Download Fonts en wacht tot alle fonts zijn gedownload. Klik daarna op Generate Stylesheet. Nadat het stylesheet is gegenereerd dien je op Advanced Settings te klikken om daar de eerste optie (Auto Remove) in te schakelen. Deze optie probeert alle requests naar de domeinnamen van Google Fonts te blokkeren. Vergeet niet om onderaan de pagina op Save Settings te drukken.
Controleren
Je kunt nu met behulp van DevTools in Chrome of Developer Tools in Firefox controleren of inderdaad alle requests naar Google Fonts worden geblokkeerd. Volg daarvoor onderstaande stappen:
- Klik op je toetsenbord op de F12 toets of druk op de rechtermuisknop en vervolgens op Inspecteren (Chrome) of Element inspecteren (Firefox).
- Selecteer in het menu dat is verschenen op het tabblad Sources (Chrome) of Debugger (Firefox).
- Controleer in de lijst die nu links verschijnt of je een domeinnaam van Google Fonts ziet staan. De meest bekende domeinnamen van Google Fonts zijn als volgt:
- fonts.googleapis.com
- fonts.gstatic.com
- etc.
Indien je nog wel domeinnamen van Google Fonts ziet staan in de lijst raad ik je aan om de Pro versie van de OMGF plugin aan te schaffen tegen een maatschappelijke prijs. Dat kan je doen via de website van de ontwikkelaar: https://woosh.dev/wordpress-plugins/host-google-fonts-pro/.
Je kunt ook kiezen om een extra plugin te installeren die als enige functie heeft om alle requests naar Google Fonts te verwijderen en blokkeren. Deze plugin heet Disable and Remove Google Fonts en is ook beschikbaar in de WordPress Plugin Store. Controleer na het activeren van de plugin opnieuw of Google Fonts daadwerkelijk niet wordt geladen via bovenstaand stappenplan. Let er op dat je misschien de Cache van je website moet legen!
Font Awesome CDN (Cloudflare)
Op onze websites maakten we gebruik van Cloudflare’s Content Delivery Netwerk dat de Font Awesome Stylesheets moest laden. Omdat we wederom geen controle hebben over de verzamelde gebruikersgegevens besloten we om het te verwijderen. Voor ons was dat een vrij eenvoudig proces omdat we in ons thema uit konden schakelen om ze te laden van Cloudflare. We moesten echter wel zorgen dat het op een andere manier zou worden geladen, anders zouden alle icoontjes vervangen worden door vierkantjes. En dat wil, zoals je wel begrijpt, niemand.
Handmatig toevoegen
De eerste stap is het downloaden van de webversie van Font Awesome via hun website. Klik op Download Free for Web om het juiste ZIP bestand te downloaden. Zodra het bestand is opgeslagen op je computer moet je het uitpakken. Daarvoor kan je de ingebouwde functie van je besturingssysteem (Windows, macOS of Linux) gebruiken of software van bijvoorbeeld 7ZIP of WinRar. Zodra je het .ZIP bestand hebt uitgepakt dien je een connectie te openen met de (S)FTP server van je webhost. Dat doe je via FileZilla of WinSCP (op Windows). Neem contact op met je hostingprovider voor meer informatie. Voordat je begint met uploaden is het handig om een Child Thema te maken, daarvoor zijn talloze handleidingen te vinden op het internet. Wij kunnen dit tegen een kleine vergoeding (vanaf €15,- inclusief BTW, afhankelijk van de grootte van je website) ook voor je doen. In de map van je Child Thema kan je de map van Font Awesome uploaden. Vervolgens open je het functions.php bestand van je Child Thema en voeg je onderstaande code toe aan het bestand:
/**
* Enqueue Font Awesome 5 Free
* @author Proxeuse
*/
add_action( 'wp_enqueue_scripts', 'enqueue_fontawesome' );
function enqueue_fontawesome() {
wp_enqueue_style('font-awesome-free', get_stylesheet_directory_uri().'/fonts/font-awesome/css/all.min.css', array(), '5.13.1');
}Controleer of de bestandslocatie overeenkomt, in bovenstaand voorbeeld zijn we uitgegaan van /fonts/font-awesome/css/all.min.ccs. Als je geen flauw idee hebt wat je aan moet passen, stuur ons dan gerust een mailtje. We helpen je graag.
Het is nu zaak om te zorgen dat Font Awesome niet wordt geladen door een externe partij. Vaak staat er in de functions.php van het thema een regel die dit doet. Neem gerust contact met ons op, we kunnen met je kijken hoe we het blokkeren.
Snelheid
Je denkt misschien “Maar wat gebeurt er met de snelheid van mijn website?” Daar kunnen we kort over zijn, die zal omhoog gaan! De browser van de bezoeker hoeft namelijk maar naar één domeinnaam een aanvraag te doen en dat scheelt veel rekenwerk. Zoals op onderstaande plaatjes goed te zien is laadt onze website na het implementeren van bovenstaande verwerkingen een halve seconde sneller. Dat is écht een grote verbetering.
Overige partijen
Wil je zeker weten dat er geen resources van derde partijen wordt geladen op je website, neem dan gerust eens contact met ons op. We kijken vrijblijvend welke partijen op je website zitten (verscholen). We sturen je na onze analyse een rapport met aanbevelingen. Een voorbeeld is om een zelf de statistieken te verzamelen, hosten en verwerken in plaats van de afhankelijkheid van Google Analytics.
Daarnaast is het natuurlijk belangrijk dat je hostingprovider duidelijk aangeeft wat ze doen met de data die jij aan ze toevertrouwd. Ook is het natuurlijk belangrijk dat jouw hostingprovider gebruik maakt van software en hardware die vertrouwd is en daar controle over heeft. Bij Proxeuse werken we met software van partijen als Plesk, Nextcloud en WordPress. Daarnaast maken we gebruik van hardware van merken als AMD en Toshiba. Benieuwd naar al onze voordelen? Neem een kijkje op onze website of neem contact met ons op.
Conclusie
Het is met weinig technische kennis relatief eenvoudig om Google Fonts te weren van je website. Font Awesome (Cloudflare) is daarentegen wat ingewikkelder maar is voor iemand met wat meer technische ervaring zeker mogelijk. Naast de privacyoverwegingen brengt het ook een aantal snelheidsvoordelen met zich mee. Je bent dus niet afhankelijk van de grote techbedrijven. Neem de controle in eigen handen!
Vond je dit blogartikel leuk om te lezen? Of heb je het gebruikt om je website te versnellen of privacy-vriendelijker te maken? Laat het ons en de rest van de wereld weten in de reacties!
