Met Pagespeed Insights kun je de performance van je website testen. Als blijkt dat je website traag laadt, langer dan 2 seconden, dan haken gebruikers sneller af om je website te bekijken. Gebruik de volgende tips om je website te verbeteren.
Controleer de snelheid van je website
Ga naar https://pagespeed.web.dev, geef jouw website url in en klik op Analyseer. Je krijgt een overzicht met verbeterpunten voor je website.
Tip 1: Renderblokkering verminderen
Renderblokkerende issues hebben vaak te maken met javascript of css die geladen wordt op de pagina vóórdat de gebruiker iets te zien krijgt. Hierdoor duurt het langer voordat de gebruiker jouw website content kan lezen.
jQuery uitschakelen als je het niet nodig hebt
In onderstaand voorbeeld zie je een geschatte besparing staan van 600 milliseconden. Het grootste “renderblocking” bestand is jQuery.
In ons geval gebruiken we geen jQuery. We waren dan ook verrast deze geladen werd. Het blijkt dat de plugin Email Encoder jQuery nodig had om de mailadressen op de pagina’s te encoderen. Zet de Email encoder op Automatisch de beste methode (exclusief JavaScript) om jQuery uit te schakelen.
Dashicons uitschakelen
De tweede renderblocking issue die we tegenkwamen was Dashicons. Na wat uitzoekwerk blijkt dat Dashicons gebruikt worden voor de admin om icoontjes weer te geven in de admin bar op je website. Normale bezoekers hebben dus helemaal geen dashicons nodig.
Schakel dashicons uit om de website snelheid te verbeteren. Dit doe je door het volgende stukje code te kopiëren en te plakken in je functions.php. Je functions.php vind je onder Gereedschap > Thema bestand editor > Themafuncties. Lukt het hier niet om het bestand bij te werken. Dan zul je moeten inloggen bij je hosting omgeving. Eenmaal daar navigeer je naar wp-content > themes > jouw thema > functions.php.
/**
* Registreren van dashicons ongedaan maken voor eindgebruikers
*/
add_action( 'wp_enqueue_scripts', 'my_deregister_styles', 100 );
function my_deregister_styles() {
if(!is_user_logged_in()) {
wp_deregister_style( 'dashicons' );
}
}Tip 2: Afbeeldingslevering verbeteren
Zorg ervoor dat afbeeldingen in moderne en de juiste formats geleverd worden.
Gebruik SVG in plaats van PNG of JPG
SVG is een efficiënter formaat om afbeeldingen weer te geven. Met name voor logo’s is dit een goed bestandstype. Converteer je logo’s naar SVG en zet ze in je WordPress. Om met SVG te kunnen werken voeg je de volgende code toe aan je functions.php.
/**
* SVG upload toestaan in WordPress mediabibliotheek
*/
function cc_mime_types($mimes) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');Let op: het toestaan van SVG op je website brengt beveiligingsrisico’s met zich mee. Zorg er dus voor dat je weet wat je doet.
Tip 3: Gebruik maken van caching
Zorg ervoor dat media bestanden, zoals afbeeldingen, video’s en tekstformats gecached worden. Minstens 1 jaar.
Bewerk je .htaccess bestand en voeg de volgende code toe om mediabestanden een jaar lang te cachen:
# Caching van media bestanden
<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/svg "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType text/css "access plus 1 year"
ExpiresByType font/ttf "access plus 1 year"
ExpiresByType font/woff2 "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/avif "access plus 1 year"
</IfModule>Conclusie
Het resultaat van de verbeteringen leidt tot een score van 77 naar 97:
