WordPress versnellen met Preconnect

Het gebruik van Preconnect is één van de vele manieren om je WordPress website te versnellen. Preconnect vraagt aan de browser om alvast HTTP-verbindingen tot stand te brengen met externe domeinen.

Preconnect is een onderdeel van Recource Hints en hiermee kan je in feite de browser proactief externe verbindingen laten maken voordat er daadwerkelijk iets met deze verbinding gedaan moet worden. Recource Hints verbeteren de prestaties van je website. Zodra de browser zich realiseert dat hij een externe verbinding moet maken, heeft hij dat al gedaan!

Wat is Preconnect?

Een webpagina bevat vaak meerdere interne en externe links. Sterker nog, wanneer je de Yoast SEO plugin gebruikt, zal het je adviseren om gebruik te maken van een externe link. Externe links die op je pagina zijn ingesloten kunnen echter voor vertraging zorgen. Wanneer een bezoeker gebruik maakt van deze link, moet de browser eerst een HTTP-verbinding tot stand brengen. Maak dus gebruik van Preconnect om de laadtijd van externe links en scripts op je pagina te verbeteren.

Welke bronnen zijn geschikt voor Preconnect?

Naast externe links zijn er ook externe script die gebruik kunnen maken van Preconnect. Denk hierbij aan:

• Scripts zoals jQuery, Google Analytics, Google AdSense enz.
• Font bestanden zoals Google Fonts
• Media bestanden die zijn ingesloten vanuit een extern domein, zoals YouTube video’s.

Een goed voorbeeld hiervan is het instellen van een Preconnect voor Google Fonts. Wanneer jouw website gebruik maakt van Google fonts kan je een Preconnect voor de domeinen fonts.gstatic.com en fonts.googleapis.com instellen.

Hoe controleer je Preconnect problemen?

Om je website te controleren op Preconnect problemen ga je naar de Google PageSpeed Insights tool en test je daar je website.

Wanneer externe scripts op je website geen gebruik maakt van Preconnect, zie je bovenstaande suggesties staan onder ‘Aanbevelingen‘.

Preconnect instellen in WordPress

Er zijn een aantal mogelijkheden om gebruik te maken van Preconnect binnen WordPress. Eén optie is het handmatig toevoegen van een link meta tag in het header gedeelte van je thema. Er zijn echter ook plugins waarbij je kan aangeven welke scripts er gebruik mogen maken van Preconnect.

Handmatig Preconnect instellen met Meta Tags

Zoals eerder vermeld kan je een Preconnect instellen met behulp van een rel attribute in een link tag. Deze link-tags zijn handmatig toe te voegen in de header van je website. Stel dat je veel YouTube video’s embed, voeg dan de volgende meta tags toe in het header.php bestand van je WordPress thema:

<link rel="preconnect" href="https://www.youtube.com">

Met deze link-tag zal de browser een connectie opzetten met youtube.com nog voordat gebruikers de video bekijken. Er zijn echter nog meer externe script die vaak gelanden worden op je WordPress website. Hieronder volgen er een aantal veelgebruikte externe domeinen. Voeg echter alleen de gebruikte domeinen toe!

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://static.doubleclick.net">
<link rel="preconnect" href="https://www.youtube.com">
<link rel="preconnect" href="https://www.google-analytics.com">
<link rel="preconnect" href="https://googleads.g.doubleclick.net">

Om Google Fonts correct te laden is het nodig om de crossorigin parameter te gebruiken. Maak een lijstje met alle externe domeinen die je wilt verbinden via Preconnect en voeg ze toe aan het header.php bestand van je thema:

Ga hiervoor naar Weergave (1) > Thema Editor (2) en selecteer je actieve thema. Klik vervolgens op header.php (3) en zet de code net boven de </head> tag. Sla de wijzigingen op en controleer Goolge PageSpeed of het Preconnect probleem is opgelost.

Preconnect instellen met een WordPress plugin

Het nadeel van het handmatig instellen is dat je het thema bestand moet bewerken, en wanneer je geen gebruik maakt van een child theme, de wijzigingen verloren gaan bij een thema update. Als alternatief kunnen we de gratis plugin Pre Party Recource Hints installeren.

Na de installatie van de plugin voeg je eenvoudig Preconnect Recource Hints toe via het Pre* Party menu in het dashboard.

Volg deze stappen om bijvoorbeeld Google Fonts toe te voegen en te laden als preconnect:

• Geef als URL: https://fonts.gstatic.com
• DNS-Prefetch: Preconnect
• Selecteer Crossorigin
• Klik op ‘Insert Resource Hint’

Alle aangemaakte Recource Hints zijn op dezelfde pagina te beheren:

Een handige optie van de plugin is de automatische Preconnect functie. Handmatig toevoegen van de scripts is dan niet meer nodig! Om deze functie te activeren ga je naar ‘Settings‘ en activeer je ‘Enable Auto Preconnect?‘

Tot slot

Afhankelijk van je website zijn er verschillende mogelijkheden om je website te versnellen. Enkele van de meest populaire optimalisatiemethoden is het gebruik van caching plugins en het optimaliseren van afbeeldingen. Weinig website beheerders maken echter gebruik van Recource hints zoals Preconnect. Maak hier gebruik van!

Beoordeel dit artikel