Wat betreft het optimaliseren van je pagina’s kan je nooit ver genoeg gaan. Na verloop van tijd zorgen alle kleine trucs en optimalisaties dat er al met al toch een aanzienlijk deel van je algehele laadtijd wordt afgeschaafd. In een eerder artikel deelden we met je hoe je emoji’s kan uitschakelen in WordPress. In dit artikel willen we met je delen hoe je insluitingen, ook wel embeds genoemd, uitschakelt in WordPress.
De oEmbed functie werd aan de core toegevoegd bij het uitbrengen van WordPress 4.4. Je hebt ze waarschijnlijk wel eens gezien of gebruikt. Je gebruikt ze namelijk om YouTube video’s, tweets en andere bronnen aan je site toe te voegen door ze in te sluiten, ook wel embedden genoemd. Je hoeft hiervoor alleen een URL te plakken, die WordPress vervolgens automatisch insluit en waarmee je een live preview kan zien in de visuele editor. Als we bijvoorbeeld deze Twitter URL plakken: https://twitter.com/kinsta/status/760489262127120385 dan wordt dit geconverteerd naar wat je hieronder ziet. Je kan de officiële lijst met ondersteunde embed types zien.
WordPress was al heel lang een oEmbed consument, maar sinds deze update is WordPress ook een oEmbed provider geworden. Deze functie is voor veel mensen handig en de kans bestaat dat je hem gewoon ingeschakeld wil laten. Dit betekent dat je site echter ook een extra HTTP verzoek genereert op je WordPress site, om het bestand wp-embid.min.js te laden. En dit bestand laadt op elke afzonderlijke pagina. Hoewel het bestand maar 1,7KB groot is, telt dit na verloop van tijd wel op. Het verzoek zelf is daarbij belangrijker dan de daadwerkelijke downloadgrootte van de content.
(Leessuggestie: Zo los je het Facebook oEmbed probleem op in WordPress).
Embeds uitschakelen in WordPress
Er zijn een aantal verschillende manieren om embeds uit te schakelen in WordPress. Je kan het met een gratis plugin doen, met code of de geminificeerde JS inlinen.
1. Met een plugin embeds uitschakelen in WordPress
De eerste manier om embeds uit te schakelen is door gebruik te maken van een gratis plugin genaamd Disable Embeds, ontwikkeld door Pascal Birchler, die ook bijdrages levert aan de WordPress core.
Deze plugin is super lichtgewicht, slechts 3KB om precies te zijn. Op moment van schrijven heeft de plugin meer dan 10.000 actieve installaties met een score van 4,5 uit 5. Je kan hem downloaden vanuit de WordPress repository of door binnen je WordPress dashboard te zoeken naar de plugin onder “Nieuwe toevoegen” onder plugins. Je hoeft niks in te stellen. Het enige wat je hoeft te doen is installeren, activeren en het extra JavaScript bestand is verdwenen. Beschikt over het volgende:
- Voorkomt dat vreemden dingen kunnen embedden op je site.
- Voorkomt dat je andere sites toevoegt die niet in de lijst met toegestane sites staan.
- Schakelt het laden van het JavaScript bestand uit op je WordPress site.
Je kan nog steeds dingen van YouTube en Twitter embedden met behulp van hun embed iframe scripts. Je kan ook een premium plugin gebruik als perfmatters (ontwikkeld door een teamlid van Kinsta), waarmee je embeds kan uitschakelen, samen met andere optimalisaties voor je WordPress site.
2. Met code embeds uitschakelen in WordPress
Als je niet nóg een plugin wil installeren, kan je ook door middel van code embeds uitschakelen. Begin door een back-up van je site te maken en een child-thema te maken zodat je wijzigingen niet verloren gaan als je je thema bijwerkt. Vervolgens voeg je het volgende toe aan het functions.php bestand van je child-thema. Opmerking: de code is afkomstig van de plugin Disable Embeds die we hierboven hebben beschreven.
Belangrijk! Het bewerken van de broncode van een WordPress thema kan je site beschadigen als je dit niet correct uitvoert. Als je niet zeker weet of je het goed doet, neem dan eerst contact op met een ontwikkelaar.
function disable_embeds_code_init() {
// Remove the REST API endpoint.
remove_action( 'rest_api_init', 'wp_oembed_register_route' );
// Turn off oEmbed auto discovery.
add_filter( 'embed_oembed_discover', '__return_false' );
// Don't filter oEmbed results.
remove_filter( 'oembed_dataparse', 'wp_filter_oembed_result', 10 );
// Remove oEmbed discovery links.
remove_action( 'wp_head', 'wp_oembed_add_discovery_links' );
// Remove oEmbed-specific JavaScript from the front-end and back-end.
remove_action( 'wp_head', 'wp_oembed_add_host_js' );
add_filter( 'tiny_mce_plugins', 'disable_embeds_tiny_mce_plugin' );
// Remove all embeds rewrite rules.
add_filter( 'rewrite_rules_array', 'disable_embeds_rewrites' );
// Remove filter of the oEmbed result before any HTTP requests are made.
remove_filter( 'pre_oembed_result', 'wp_filter_pre_oembed_result', 10 );
}
add_action( 'init', 'disable_embeds_code_init', 9999 );
function disable_embeds_tiny_mce_plugin($plugins) {
return array_diff($plugins, array('wpembed'));
}
function disable_embeds_rewrites($rules) {
foreach($rules as $rule => $rewrite) {
if(false !== strpos($rewrite, 'embed=true')) {
unset($rules[$rule]);
}
}
return $rules;
}Of je kan ook de functie wp_dequeue_script gebruiken.
function my_deregister_scripts(){
wp_dequeue_script( 'wp-embed' );
}
add_action( 'wp_footer', 'my_deregister_scripts' );3. Geminificeerde JS inlinen
Een derde optie is om de inhoud van het wp-embed.min.js bestand inline in te sluiten. Dit moet alleen worden gedaan met kleine bestanden of als er niet veel code bij betrokken is. Een voorbeeld hiervan is wanneer je alleen het HTTP verzoek wil verwijderen maar ondersteuning voor embeds nog wel wil houden.
