Als het gaat om de prestaties van je website, zijn er veel factoren die samenwerken om de laadtijden van je site te verhogen of te verlagen. Het meten en bewaken van de prestatiestatistieken is vrij eenvoudig, maar verbeteringen doorvoeren kan lastiger zijn.
Gelukkig kunnen hulpprogramma’s voor paginasnelheid, zoals GTMetrix, nuttige inzichten bieden in wat je site vertraagt. Of je nu naar de server moet kijken, de inhoud wilt optimaliseren of de code van je site wilt kraken, je vindt solide aanbevelingen in de resultaten van de prestatietest.
In dit artikel kijken we specifiek naar inhoudelijke wijzigingen die je kunt aanbrengen om de snelheid van je site te verhogen.
Inzicht in factoren die de prestaties van de site beïnvloeden
Als het gaat om de prestaties van de site, zijn er een heleboel mogelijke redenen voor trage laadtijden. Ze kunnen worden toegeschreven aan zoiets groots als de server, zo gedetailleerd als de code van je site of verschillende factoren daartussenin.
Wat de inhoud van je site betreft, zijn de prestaties grotendeels afhankelijk van het aantal verzoeken dat de browser van een gebruiker moet doen om je site weer te geven. Hoe minder aanvragen nodig zijn, hoe sneller de browser je inhoud aan de gebruikers kan tonen.
Dit betekent dat je de inhoud moet optimaliseren voor efficiënte levering van server aan gebruiker. Er zijn verschillende manieren om dit aspect van de site te verbeteren, waarover we later in dit artikel zullen ingaan.
Onthoud echter dat de enige manier om de prestaties van je site volledig te maximaliseren, is door alle invloedsgebieden aan te pakken.
Het optimaliseren van de inhoud voor prestaties kan weliswaar vervelend zijn. Als je echter de tijd neemt om de onderstaande factoren aan te pakken, kun je je site sneller maken voor een verbeterde gebruikerservaring (UX) en een lager bouncepercentage. Je inspanningen zullen vrijwel zeker hun vruchten afwerpen.
1. Verwijder query strings uit statische bronnen om caching in te schakelen
Voordat we kunnen ingaan op het verwijderen van query strings uit statische bronnen, moeten we de onderdelen die bij dit proces zijn betrokken, uitsplitsen. Allereerst is een query strings onderdeel van een URL en kan deze om een aantal verschillende redenen nuttig zijn.
Kortom, het doel van een query string is om elke keer dat een pagina wordt geladen een nieuwe URL te produceren, terwijl toch steeds dezelfde inhoud wordt weergegeven. Ze worden gebruikt om caching te omzeilen, analyses bij te houden, advertenties opnieuw te laden en tal van andere taken.
Meestal kun je een query string identificeren omdat deze een vraagteken (?) en/of een en-teken (&) bevat. In de onderstaande URL is het gedeelte met en na het vraagteken bijvoorbeeld een query string:
Je kunt zien dat als de query string wordt verwijderd en de pagina opnieuw wordt geladen, exact dezelfde inhoud wordt weergegeven:
Een statische bron verwijst naar een deel van je website dat niet verandert. Je pagina ‘Over’ bijvoorbeeld toont waarschijnlijk altijd dezelfde inhoud en bestaat daarom uit statische bronnen. Aan de andere kant wordt een startpagina met een koptekstafbeelding die verandert telkens wanneer de pagina wordt geladen, als dynamisch beschouwd.
Omdat ze caching kunnen voorkomen, kunnen query strings de laadtijden van statische pagina’s vertragen door browsers te dwingen elke keer dezelfde pagina opnieuw te laden. Door query strings uit statische bronnen te verwijderen, zorg je ervoor dat caching kan plaatsvinden en verhoog je daarmee de laadsnelheid van de pagina.
Query strings verwijderen met behulp van code
Er zijn verschillende methoden om query strings uit statische bronnen te verwijderen. Een daarvan is door code toe te voegen aan de functies.php bestand. Om dit te doen, moet je toegang krijgen tot de server via File Transfer Protocol (FTP) en een client zoals FileZilla. Het wordt aanbevolen om eerst een back-up van de site te maken.
Nadat je het bestand function.php in de map van je thema hebt gevonden, klik je er met de rechtermuisknop op en selecteer je de optie Bekijken/bewerken. Voeg vervolgens de onderstaande code toe aan het einde van het bestand:
//* WL – Remove Query String from Static Resources
function remove_css_js_ver( $src ) {
if( strpos( $src, '?ver=' ) )
$src = remove_query_arg( 'ver', $src );
return $src;
}
add_filter( 'style_loader_src', 'remove_css_js_ver', 10, 2 );
add_filter( 'script_loader_src', 'remove_css_js_ver', 10, 2 );Nadat je dit hebt gedaan, sla je de wijzigingen op en zorg je ervoor dat het bestand naar de server wordt geüpload. Controleer ten slotte de frontend op query strings.
Wanneer je een website door ons laat ontwikkelen, zorgen wij er al voor dat query strings worden verwijderd van de statische bronnen.
Een plug-in gebruiken om query strings te verwijderen
De andere (eenvoudigere) optie is om een plug-in te gebruiken en WP Rocket is een van de meest populaire en hoog gewaardeerde plug-ins. Wij gebruiken deze plug-in voor iedere website en webshop die wij opleveren.
Navigeer eenvoudig naar de cache-instellingen van de plug-in in WordPress en zorg ervoor dat de optie ‘Query strings van statische bestanden verwijderen’ is ingeschakeld:
Sla de wijzigingen op en je zou een afname van laadtijden moeten zien waar eerder zoekopdrachtreeksen bestonden.
2. Verminder de HTTP-aanvragen van de site om de efficiëntie te verhogen
Hypertext Transfer Protocol (HTTP) -verzoeken zijn gewoon de methode waarmee de server informatie levert aan de browser van de gebruiker. Elke keer dat de site wordt geladen, wordt een HTTP-verzoek gedaan om toegang te krijgen tot de bestanden die de inhoud van je site bevatten.
Over het algemeen wil je zo weinig mogelijk aanvragen voor snelle laadtijden van pagina’s. Stel je voor een vergelijking voor dat je in een restaurant bent. Je vraagt eerst je ober om je drankje en vervolgens om ijs om in je drankje in te doen.
Vervolgens bestelt je je hoofdgerecht, plaats je een afzonderlijke bestelling voor elk van je kruiden, bestek, servet en dessert. Natuurlijk zullen deze verzoeken lang duren en je waarschijnlijk een behoorlijk gefrustreerd gevoel geven.
De gebruikers van je site zullen hetzelfde voelen. Er zijn een paar manieren om het aantal verzoeken dat browsers op je server moeten doen te verminderen, zoals het verkleinen en combineren van CSS en JavaScript.
Afbeeldingen optimaliseren
Naast het optimaliseren van je code, kun je ook werken aan het optimaliseren van de afbeeldingen om HTTP-aanvragen te verminderen. Elk vereist zijn eigen verzoek, dus het verwijderen van overbodige afbeeldingen die je niet echt nodig hebt, zal de snelheid van je site helpen verbeteren.
Afbeeldingen kunnen echter (natuurlijk) waarde toevoegen aan je site. Voor degenen die je op je site wilt houden, is het het beste om ze te optimaliseren en te comprimeren om onnodige bestandsinformatie te verwijderen en ze gemakkelijker op te halen. Een plug-in zoals ShortPixel kan dit proces voor je automatiseren:
Je kunt ook kijken naar Lazy Loading, dat JavaScript gebruikt om afbeeldingen te laden wanneer ze in het zicht van gebruikers komen terwijl ze naar beneden scrollen. Dit is tevens een onderdeel van de WP Rocket plug-in.
Afbeeldingen en andere mediabestanden behoren tot de grootste van je site, dus als je deze optimaliseert, kun je de prestaties van je website aanzienlijk verbeteren.
Externe scripts verminderen
Site-integraties van derden kunnen nuttige en interessante functies voor je gebruikers bieden. Ze kunnen echter ook bijdragen aan het aantal HTTP-aanvragen dat nodig is om de inhoud te laden, waardoor de snelheid van je site wordt verlaagd.
Functies zoals live sociale media-feeds en betalingsgateways kunnen je site aanzienlijk beïnvloeden met extra verzoeken. Het is mogelijk dat deze functies cruciaal zijn voor het functioneren van je site. In dat geval is het misschien niet de moeite waard om ze te verwijderen.
Als je site echter vol zit met extra functies die niet veel van een doel dienen, is het beter om ze te verwijderen. Concentreer je op de elementen waar de gebruikers daadwerkelijk mee bezig zijn en waarvan ze profiteren, en laat de rest gaan.
Verwijder verbroken links
Soms kiezen website-eigenaren ervoor om inhoud op hun websites te verplaatsen of te vernietigen. Wanneer dit gebeurt, gaan links naar die pagina ‘kapot’. Wanneer een gebruiker op een verbroken link op je site klikt, hoeft de browser alleen een verzoek in te dienen om de gebruiker een foutmelding te bezorgen.
Om deze verspillende verzoeken te voorkomen, is het verstandig om je site regelmatig te controleren op verbroken links. Een plug-in zoals Broken Link Checker kan het proces stroomlijnen.
Nadat je de verbroken links van je site heeft gevonden, kun je deze volledig verwijderen of vervangen door werkende. Het is een eenvoudig en snel proces dat praktisch een prestatieverbetering garandeert.
Conclusie
De prestaties van je site zijn niet iets om laks over te zijn. Het beperken van de factoren die bijdragen aan de trage laadtijden van je site is slechts de eerste stap. De oorzaken aanpakken is cruciaal voor het succes van je website.