Om jouw WordPress website sneller te maken zijn heel veel technieken beschikbaar. In dit artikel gaan we kijken naar hoe je jouw code kunt optimaliseren om nog meer snelheidswinst te behalen.

Dit artikel hoort bij een reeks van 5 artikelen over WordPress performance optimalisatie:

1. 1. Afbeeldingen optimaliseren 
   2. Caching gebruiken
   3. Code optimaliseren
   4. Server instellingen verbeteren
   5. Geavanceerde technieken

WordPress website sneller maken met code

De belangrijkste code-types die invloed hebben op de performance van een website zijn:

• Javascript
• CSS
• HTML

We gaan naar de volgende 2 methodes kijken om de performance van jouw WordPress website te verbeteren:

1. Code samenvoegen, minimaliseren en plaatsing verbeteren
2. Geavanceerd: WordPress code injecties verwijderen

Code samenvoegen, minimaliseren en plaatsing verbeteren

Wanneer jouw website een aantal plugins heeft zal er vanuit verschillende bronnen code worden toegevoegd. Het kan voorkomen dat jouw website om die reden veel verschillende bestanden moet inladen, wat de laadtijd niet ten goede komt. Een manier om dit tegen te gaan is om deze bestanden samen te voegen, te minimaliseren en eventueel de plaatsing te verbeteren. 

Om dit te verbeteren maken we gebruik van de plugin Autoptimize (https://wordpress.org/plugins/autoptimize/). Wanneer je deze plugin hebt geïnstalleerd kun je naar “Instellingen > Autoptimize” gaan om de instellingen te bekijken. Vervolgens kun je per type code optimalisaties doorvoeren.

Javascript

Voor de javascript raad ik aan om de JS-bestanden samen te voegen en te minimaliseren. Ook zal Autoptimize alle code in de footer van de website plaatsen, wat ervoor zorgt dat deze pas ingeladen wordt wanneer de HTML en CSS ingeladen zijn. De gebruiker kan de website dan al wel zien, maar heeft misschien nog niet alle functionaliteiten. 

CSS

Hier raad ik aan om ook alle code samen te voegen en te minimaliseren. Ook kun je hier de CSS uit de HTML laten samenvoegen, omdat dit niet snel voor problemen zal zorgen. De andere opties zou ik uitlaten.

HTML

De HTML code kan ook samengevoegd worden met deze optie. De commentaren zou ik hier ook bij meenemen, want deze zijn meestal niet belangrijk.

Let op: Test altijd even of alles nog goed werkt op de website. Het kan zijn dat het samenvoegen van code ervoor zorgt dat bepaalde functionaliteiten niet goed meer werken.

Geavanceerd: WordPress code injecties verwijderen

Niet alleen plugins zorgen voor meer code, ook WordPress zelf injecteert standaard code die niet altijd gebruikt wordt. Je kunt ervoor kiezen om deze code weg te halen om nog meer bandbreedte te besparen.

Om deze aanpassingen door te voeren moet je een aanpassing doen aan een thema bestand: de functions.php. Dit bestand kan worden aangepast via de WordPress backend. Ga naar “Weergave > Thema editor” en klik vervolgens op “function.php” om dit bestand aan te passen. 

Kopieer vervolgens de onderstaande code snippet in de functions.php en sla het op.

/**
* Disable the emoji’s
*/
function ztn_wp_disable_emojis()
{
remove_action(‘wp_head’, ‘print_emoji_detection_script’, 7);
remove_action(‘admin_print_scripts’, ‘print_emoji_detection_script’);
remove_action(‘wp_print_styles’, ‘print_emoji_styles’);
remove_action(‘admin_print_styles’, ‘print_emoji_styles’);
remove_filter(‘the_content_feed’, ‘wp_staticize_emoji’);
remove_filter(‘comment_text_rss’, ‘wp_staticize_emoji’);
remove_filter(‘wp_mail’, ‘wp_staticize_emoji_for_email’);
add_filter(‘tiny_mce_plugins’, ‘ztn_disable_emojis_tinymce’);
}
add_action(‘init’, ‘ztn_wp_disable_emojis’);/**
* Filter out the tinymce emoji plugin.
*/
function ztn_disable_emojis_tinymce($plugins)
{
if (is_array($plugins)) {
return array_diff($plugins, array(‘wpemoji’));
} else {
return array();
}
}
/**
* Remove dashicons CSS in frontend
*/
function ztn_dequeue_dashicon()
{
if (current_user_can(‘edit_posts’)) {
return;
}
wp_deregister_style(‘dashicons’);
}
add_action(‘wp_enqueue_scripts’, ‘ztn_dequeue_dashicon’);

Deze code zorgt ervoor dat code die gebruikt wordt voor het weergeven van emoji’s niet meer geïnjecteerd wordt en ook wordt er code weggehaald welke iconen weergeven. Vaak (meestal) worden deze dingen niet gebruikt op jouw website en kun je die dus beter weghalen. Uiteraard geldt ook hier dat je even moet testen of alles nog naar behoren werkt na deze aanpassing.

Conclusie

Met deze twee methodes heb je weer een goede stap gezet om jouw WordPress website sneller te maken. Wil je liever de performance optimalisatie van jouw website uitbesteden? Bekijk hier de mogelijkheden.

In het volgende artikel gaan we kijken hoe we jouw serverinstellingen kunnen verbeteren om jouw website performance te verhogen.