Als het gaat om de prestaties van WordPress, is er veel te zeggen over plugins. Elke plugin voegt PHP code toe die moet worden uitgevoerd, bevat meestal scripts en stijlen en kan zelfs extra query’s tegen de database uitvoeren. Dit betekent dat onnodige plugins de paginasnelheid kunnen beïnvloeden en een negatieve invloed kunnen hebben op de gebruikerservaring en je paginaranking.
Neem als voorbeeld een plugin die aangepaste formulieren maakt en weergeeft op voorpagina’s, zoals Contact Form 7. Normaal gesproken heb je maar één formulier nodig op één pagina, maar idealiter zou je een formulier op elke pagina willen kunnen insluiten met behulp van de shortcode van de plugin. Daarom laadt Contact Form 7 scripts en stijlen op elke pagina van je website.
Maar wil je echt de code van de plugin uitvoeren en scripts en stijlen op elke pagina van je WordPress website laden?
In dit artikel laat ik je zien hoe je kunt voorkomen dat onnodige plugins worden geladen op specifieke berichten/pagina’s, zodat je extra plugins kunt installeren (uiteraard met mate) en je WordPress website toch snel kan laden. Om dit te doen, gaan we WordPress plugins programmatisch uitschakelen op specifieke berichten en pagina’s. Dit is een proces in vier stappen:
- Kies de populairste plugins die aan je behoeften voldoen en vergelijk hun features en effecten op paginasnelheid.
- Maak programmatisch een lijst van plugins en filter ze voordat de pagina wordt geladen.
- Filter en deactiveer onnodige plugins programmatisch met een mu-plugin.
- Filter onnodige plugins en deactiveer ze met een plugin.
- Track de prestaties van de site.
Laten we beginnen.
Drie algemene regels om te volgen bij het kiezen van een plugin
De volgende algemene regels kunnen handig zijn bij het kiezen van een plugin:
- Installeer alleen goed gecodeerde plugins van betrouwbare developers: houd rekening met actieve installaties, gebruikersbeoordeling, klantondersteuning, updatefrequentie en alle nuttige informatie uit de WordPress community.
- Geef de voorkeur aan schaalbare plugins: vergelijk vergelijkbare plugins op het gebied van prestaties, maak gebruik van browser dev tools en/of online diensten zoals Google Pagespeed Insights, Pingdom en GTmetrix om de impact van elke plugin op de laadtijd van pagina’s te evalueren.
- Installeer geen onnodige plugins: het zou voor de hand moeten liggen, maar het is het vermelden waard dat je nooit een plugin moet installeren die je niet echt nodig hebt omwille van de veiligheid en prestaties. Zorg er ook voor dat je je plugins van tijd tot tijd opnieuw bekijkt en verwijder de plugins die je niet meer nodig hebt en niet meer gebruikt.
Een voorbeeld uit de praktijk
Contact Form 7 is een geweldige plugin voor het maken en weergeven van formulieren in WordPress. Het is een perfect voorbeeld voor onze doeleinden, omdat het de volgende bestanden op elke pagina bevat, zelfs als de pagina geen formulier bevat:
- style.css
- scripts.js
Een plugin kan je website vertragen, maar we kunnen WordPress dwingen om plugins selectief uit te schakelen, afhankelijk van de URL van het verzoek. Als je een developer bent, lees dan het volgende gedeelte waarin we leren hoe we plugins programmatisch kunnen beheren en een mu-plugin kunnen bouwen die onnodige plugins filtert. Als je geen developer bent, ga dan gerust naar het gedeelte over plugins waarmee je plugins kunt filteren en organiseren.
Hoe krijg je een programmatische lijst van alle actieve plugins?
Allereerst kun je een lijst van alle actieve plugins op je WordPress website krijgen met een eenvoudig stukje PHP code. Je kunt de volgende code toevoegen in een eigen plugin of in de editor van een gratis WordPress plugin zoals Code Snippets. Als je kiest voor je eigen plugin, vergeet dan niet de plugin header toe te voegen zoals hieronder te zien is.
Elke actieve plugin wordt opgeslagen in de tabel wp_options waar options_name active_plugins is. We kunnen dus de lijst van die plugins opvragen met een eenvoudige call get_option. Hier is de code:
<?php
/**
* @package active-plugins
* @version 1.0
*
* Plugin Name: Active Plugins
* Plugin URI: http://wordpress.org/extend/plugins/#
* Description: This is a development plugin
* Author: Your Name
* Version: 1.0
* Author URI: https://example.com/
*/
add_shortcode( 'activeplugins', function(){
$active_plugins = get_option( 'active_plugins' );
$plugins = "";
if( count( $active_plugins ) > 0 ){
$plugins = "<ul>";
foreach ( $active_plugins as $plugin ) {
$plugins .= "<li>" . $plugin . "</li>";
}
$plugins .= "</ul>";
}
return $plugins;
});Wijzig de plugindetails, sla dan het active-plugins.php bestand op en upload het naar je /wp-content/plugins/ map. Maak een nieuw blogbericht en voeg de [activeplugins] shortcode toe. Er zou nu een lijst met alle actieve plugins moeten worden weergegeven.
Nu dat gedaan is, kunnen we nog een stap verder gaan en plugins programmatisch toevoegen of verwijderen door gebruik te maken van het option_active_plugins filter. Dit filter behoort tot de option_$option_name groep van filters, waarmee elke optie kan worden gefilterd nadat deze is opgehaald uit de database. Aangezien alle actieve plugins worden opgeslagen in de tabel wp_options waar option_value active_plugins is, biedt het filter option_active_plugins een manier om plugins programmatisch te activeren of deactiveren.
We kunnen dus een plugin programmatisch activeren. Stel, als voorbeeld, dat je de ACF plugin wilt activeren. Hier is de code:
add_filter( 'option_active_plugins', function( $plugins ){
$myplugin = "advanced-custom-fields/acf.php";
if( !in_array( $myplugin, $plugins ) ){
$plugins[] = $myplugin;
}
return $plugins;
} );In dit voorbeeld gaan we ervan uit dat de plugin is geïnstalleerd en nog niet is geactiveerd.
De bovenstaande code voegt de plugin simpelweg toe aan de lijst met actieve plugins op elke pagina van onze website. Niet erg handig, maar je snapt wat ik bedoel.
Bovendien moet de plugin laden vóór elke andere plugin, anders zou onze code niet kunnen werken zoals verwacht. Om het laden van onze plugin prioriteit te geven, moeten we ons script toevoegen aan een plugin die je moet gebruiken.
Hoe maak je een plugin die je moet gebruiken om plugins programmatisch te deactiveren?
We gaan een Must Use plugin maken, dat is een plugin die zich in een specifieke submap /wp-content bevindt en die vóór elke gewone plugin wordt uitgevoerd.
Helaas mogen we in deze situatie geen voorwaardelijke tags gebruiken, omdat voorwaardelijke query tags niet werken voordat de query is uitgevoerd. Voor die tijd retourneren ze altijd false. We moeten onze voorwaarden dus op een andere manier controleren, bijvoorbeeld door de URI van het verzoek te parsen en het bijbehorende URL pad te controleren.
Voeg de volgende code toe aan het bestand active-plugins.php en verplaats het naar /wp-content/mu-plugins:
$request_uri = parse_url( $_SERVER['REQUEST_URI'], PHP_URL_PATH );
$is_admin = strpos( $request_uri, '/wp-admin/' );
if( false === $is_admin ){
add_filter( 'option_active_plugins', function( $plugins ){
global $request_uri;
$is_contact_page = strpos( $request_uri, '/contact/' );
$myplugin = "contact-form-7/wp-contact-form-7.php";
$k = array_search( $myplugin, $plugins );
if( false !== $k && false === $is_contact_page ){
unset( $plugins[$k] );
}
return $plugins;
} );
}
Laten we eens in deze code kijken:
- parse_url retourneert het pad van de opgevraagde URL.
- strpos vindt de positie van de eerste herhaling van
'/wp-admin/', en retourneertfalseals de string niet wordt gevonden.$is_adminvariabele slaat de geretourneerde waarde op. - De voorwaarde voorkomt dat het filter wordt uitgevoerd in het beheerpaneel, zodat we veilig toegang hebben tot de instellingenpagina’s van de plugin. Als de URI van het verzoek geen
'/wp-admin/'bevat, dan callen we de filteroption_active_plugins. - Tot slot, als de huidige plugin niet in de array van actieve plugins staat en de URI van de huidige pagina geen
/contact/bevat, dan verwijderen we de plugin van$plugins.
Sla nu je plugin op en upload deze naar je /wp-content/mu-plugins/ map. Wis de cache en voeg de shortcode [activeplugins] toe aan verschillende pagina’s. De plugin zou alleen op de pagina /contact/ in de lijst moeten worden weergegeven.
We kunnen dan een reeks plugins in één keer verwijderen met een beetje extra PHP.
$request_uri = parse_url( $_SERVER['REQUEST_URI'], PHP_URL_PATH );
$is_admin = strpos( $request_uri, '/wp-admin/' );
if( false === $is_admin ){
add_filter( 'option_active_plugins', function( $plugins ){
global $request_uri;
$is_contact_page = strpos( $request_uri, '/contact/' );
$myplugins = array(
"contact-form-7/wp-contact-form-7.php",
"code-snippets/code-snippets.php",
"query-monitor/query-monitor.php",
"autoptimize/autoptimize.php"
);
if( false === $is_contact_page ){
$plugins = array_diff( $plugins, $myplugins );
}
return $plugins;
} );
}In dit voorbeeld hebben we eerst een array van plugins gedefinieerd die moeten worden verwijderd, daarna verwijderen we ze met array_diff. Deze functie “vergelijkt array1 met een of meer andere arrays en geeft de waarden in array1 terug die in geen van de andere arrays voorkomen”.
Je kunt de volledige code van deze plugin downloaden van Gist.
Nu kun je de plugin uploaden naar de mu-plugins map en elke pagina van je website inspecteren. De mu-plugin kan in hoge mate worden aangepast door meer voorwaarden toe te voegen en meer URI’s te controleren, maar elke voorwaarde moet handmatig aan de code worden toegevoegd en op de lange termijn kan deze eenvoudige mu-plugin moeilijk en lastig te onderhouden worden.
Om deze reden kun je de volgende plugins bekijken.
Plugins die plugins filteren
Als alternatief kunnen we kijken naar een aantal goede plugins waarmee we filters kunnen toevoegen die beheerd kunnen worden vanuit het WordPress adminpanel.
Plugin Load Filter
Plugin Load Filter is een gratis optie voor WordPress gebruikers die plugins onder verschillende voorwaarden moeten filteren.
Op dit moment ondersteunt het de volgende functies:
- Bericht formats
- Aangepaste berichttypen
- Jetpack modules
- WP contentkaarten insluiten
- URL filter voor expert (REST API / Heartbeat / AJAX / AMP / etc)
Zodra een filter is geactiveerd, kan de beheerder aangeven waar in de site het moet worden toegepast, zoals in de afbeelding hieronder.
Plugin Organizer
Plugin Organizer is een populaire plugin met meer dan 10.000 actieve installaties en een indrukwekkende waardering van 5 van de 5 sterren. Het is een uitgebreidere plugin waarmee sitebeheerders het volgende kunnen:
- Selectief plugins deactiveren per berichttype en URL’s opvragen
- Selectief plugins deactiveren per gebruikersrol
- Groepen van plugins aanmaken
- De laadvolgorde van plugins wijzigen
- Extra functies
De pagina Globale plugins opties biedt een drag&drop mogelijkheid waarmee de beheerder globaal plugins kan uitschakelen, zodat WordPress niet één of meer plugins overal op de site kan uitvoeren, tenzij het anders is ingesteld voor afzonderlijke berichten of pagina’s. Dezelfde functie is beschikbaar voor zoekpagina’s en berichttypen.
De plugin voegt een metabox toe in het bewerkingsscherm van berichten, zodat de beheerder globale instellingen en instellingen voor berichttypen kan overschrijven. Deze functie kan ook worden geactiveerd voor berichttypen door het corresponderende item aan te vinken in het scherm General Settings. Een geweldige functie is de Plugin Organizer Debug Message, die de sitebeheerder voorziet van nuttige informatie over plugins die invloed hebben op elke pagina van de site.
Meer informatie is te vinden in de documentatie.
Plugin Perfmatters
Een gedeeltelijk andere benadering komt van de Perfmatters plugin. Het is een premium alternatief waarmee de sitebeheerder selectief thema- en plugin-activa kan laden, afhankelijk van URL of aangepast berichttype. Het is een geweldig hulpmiddel voor zowel plugin als thema optimalisatie. Het is zelfs ontwikkeld door een teamlid van Kinsta!
De plugin heeft een functie genaamd Script Manager, waar alles wordt gegroepeerd op plugin- of themanaam. Dit maakt het supergemakkelijk om een hele plugin in één keer uit te schakelen, of afzonderlijke CSS- en JavaScript bestanden erin.
Je kunt zelfs scripts uitschakelen met regex. Dit is vooral handig voor sites met een complexere URL structuur of dynamisch gegenereerde pagina’s.
Dit is erg krachtig en kan de snelheid van je WordPress sites (vooral je homepage) drastisch verhogen. Een paar voorbeelden van waar dit voor gebruikt kan worden:
- Plugins om sociale media te delen moeten alleen worden geladen bij je berichten. Je kunt deze eenvoudig overal uitschakelen en alleen laden op berichttypen, of zelfs aangepaste berichttypen.
- De populaire Contact Form 7 plugin laadt zichzelf op elke pagina en bericht. Je kunt deze eenvoudig met één klik overal uitschakelen en alleen inschakelen op je contactpagina.
- Als je hebt geüpgraded naar WordPress 5.0 maar niet de Gutenberg Block Editor gebruikt, misschien gebruik je nog steeds de Classic Editor, dan zijn er twee extra front-end scripts die sitebreed worden toegevoegd en die je kunt uitschakelen:
/wp-includes/css/dist/block-library/style.min.cssen/wp-includes/css/dist/block-library/theme.min.css
Je kunt in deze review van perfmatters zien dat het hun totale laadtijd met 20,2% verminderde. Alleen al op hun homepage konden ze het aantal HTTP verzoeken terugbrengen van 46 naar 30! De paginagrootte kromp ook van 506,3 KB naar 451,6 KB.
Prestaties tracken: De Dev Tools van de browser
Een fundamentele stap op de weg naar prestatieoptimalisatie is het meten van de laadtijd. We hebben een aantal plugins en online tools die we kunnen gebruiken om de prestaties van websites bij te houden, zoals Google Pagespeed Insights en Pingdom. Maar eerst en vooral kunnen we de Dev Tools van de browser gebruiken, die veel zinvolle informatie geven.
Elke browser-inspector heeft een Network paneel dat een lijst van netwerkverzoeken en gerelateerde informatie weergeeft. Volg deze links voor gedetailleerde documentatie:
In een WordPress installatie met 18 actieve plugins hebben we herhaaldelijk een berichtpagina geïnspecteerd met Firefox Dev Tools. We hebben eerst de paginasnelheid gemeten en de opgevraagde resources opgesomd voordat we een filterende plugin installeerden. De volgende afbeelding toont de uitvoer van de tool voor prestatieanalyse die beschikbaar is in de Firefox Network Monitor.
De Network Monitor geeft de volgende resultaten (lege cache):
- grootte: 255,19 Kb
- laadtijd: 1,24 seconden
- verzoeken: 12
Hierna hebben we de Plugin Organizer geïnstalleerd om te voorkomen dat WordPress de CF7 plugin uitvoert. Het taartdiagram verandert hierdoor enigszins.
Nu laadt de pagina sneller (lege cache):
- grootte: 104,21 Kb
- laadtijd: 0,80 seconden
- verzoeken: 8
Vervolgens hebben we verschillende onnodige plugins gedeactiveerd en de volgende afbeelding laat zien hoeveel we de paginaprestaties hebben verbeterd.
Na het uitschakelen van alle onnodige plugins geeft de lege browsercache van de Network Monitor de volgende gegevens:
- grootte: 101,98 Kb
- laadtijd: 0,46 seconden
- verzoeken: 8
We kunnen de resultaten van onze tests vergelijken. De grootte van de resources is met 60,04% afgenomen, de laadtijd is teruggebracht van 1,24 seconden naar 0,46 seconden en het aantal HTTP verzoeken is afgenomen van 12 naar 8. Dit bevestigt dat plugins de paginaprestaties kunnen beïnvloeden en dat we de paginasnelheid kunnen verhogen door gebruik te maken van een pluginfilter.
Samenvatting
Of je nu je eigen scripts maakt of externe tools installeert, het organiseren en filteren van plugins is iets waar je altijd rekening mee moet houden als het gaat om prestatieoptimalisatie. Vergeet niet dat niet alle plugins zijn ontwikkeld met het oog op prestaties. Daarom kan het verstandig zijn om even de tijd te nemen en te bepalen welke plugin assets (CSS en JS) waar worden geladen.
Maar leren hoe je WordPress plugins uitschakelt is slechts een van de vele andere technieken om de snelheid van je site te verhogen. Hier is een lijst met een aantal andere nuttige gidsen en tutorials met betrekking tot websiteprestaties:
- Zo versnel je WordPress (ultieme handleiding)
- Een beginnersgids voor snelheidsoptimalisatie van websites
- Zo verminder je TTFB om de laadtijd van WordPress pagina’s te verbeteren
- Zo stel je een diagnose voor hoog Admin-Ajax gebruik op je WordPress site
- Zo ruim je je wp_options tabel op en verwijder je autoloaded data
- Zo schakel je WordPress plugins uit (zonder toegang tot WP admin)
Carlo is een gepassioneerd liefhebber van webdesign en front-end development. Hij werkt al meer dan 10 jaar met WordPress, ook in samenwerking met Italiaanse en Europese universiteiten en onderwijsinstellingen. Hij heeft tientallen artikelen en gidsen over WordPress geschreven, gepubliceerd op zowel Italiaanse als internationale websites en in gedrukte tijdschriften. Je kunt Carlo vinden op X en LinkedIn.
Laat een reactie achter