Contact form 7 beter laden
Iedereen die ooit gewerkt heeft met WordPress of doet aan WordPress website ontwikkeling kent de plugin contact form 7. Een eenvoudige plugin voor het maken van contact formulieren. Vele klagen dat contact form 7 langzaam is dus wordt het tijd om uit te leggen hoe contact form 7 beter te laden.
Wie bekend is met Contactform 7 weet dat je overal in de content een contactformulier kan tonen door simpel weg een shortcode te plaatsen. Dat is het mooie van Contact form 7. Omdat er gebruik wordt gemaakt van een shortcode kunnen we hier gebruik van maken.
Hier behandelen we:
Contact form 7 is niet langzaam maar heeft een beetje extra aandacht nodig.
Waarom Contact form 7 beter laden
Er gebeurt hetzelfde als bij de meeste plugins. Het JS CSS-bestand worden op alle pagina’s geladen. Op de gehele website is er maar één contactformulier dus waarom alles op alle pagina’s laden. Dat klinkt logisch want je moet nooit meer laden dan je nodig hebt. Is er geen contactformulier dan zouden die bestanden ook niet geladen worden.
Als je bestanden laad die niet nodig zijn is dat slecht voor page speed en web vitals. Deze onderdelen worden steeds belangrijker voor SEO optimalisatie. Het is een onderdeeltje van SEO maar belangrijkste is om dit te doen voor de bezoekers. Zorg dat de bezoekers een prettige gebruikerservaring hebben als men de website bezoekt. Als de website soepel loopt zullen mensen ook eerder iets kopen of een dienst afnemen. Als een website langzaam laad dan zijn ze vaak al weg voordat je een eerste indruk kan maken.Contact form 7 beter laden is niet zo moeilijk en kan eigenlijk iedereen doen die toegang heeft tot bestanden van de website.
Contact form 7 beter laden
De volgende code is het enige dat in de functions.php geplaatst hoeft te worden. Dit bestand vindt je in de map van het thema. Plaatst de code onderin in dit bestand.
Maak voor de zekerheid een back-up voor het geval er iets verkeerd mocht gaan.
// Contact form 7 beter laden
// Filter om de css niet te laden
add_filter('wpcf7_load_css', '__return_false');
// Registreer de stylesheet opnieuw volgens de gebruikelijke manier.
function clw_register_cf7_style() {
wp_register_style('clw-cf7', plugins_url('contact-form-7/includes/css/styles.css'));
wp_enqueue_style('clw-cf7');
}
add_action('wp_enqueue_scripts', 'clw_register_cf7_style');
// Functie om CF7 niet te laden als er geen shortcode aanwezig is.
function clw_enqueue_cf7() {
// Eerst voor de zekerheid niets laden
$load_scripts = false;
// Check of een pagina of post is
if(is_singular()) {
$post = get_post();
// Check of de shortcode in de content voorkomt
if(has_shortcode($post->post_content, 'contact-form-7')) {
$load_scripts = true;
}
}
// Als de shortcode niet in de content staat, niets laden.
if(!$load_scripts) {
wp_dequeue_script('contact-form-7');
wp_dequeue_style('clw-cf7');
}
}
add_action('wp_enqueue_scripts', 'clw_enqueue_cf7', 99);
Eerst wordt de CSS van de plugin uitgeschakeld. Verder kijkt deze code of de shortcode van het contactformulier in de content staat. Als de shortcode erin staat gebeurd er niets en anders worden de files gewoon geladen.
Vraag vrijblijvende een offerte aan.
Contact form 7 is niet perfect
Geen enkele plugin is perfect maar Contact form 7 is perfect voor het maken van contactformulieren. Als je de shortcode alleen in content gebruikt en niet in widgets of dergelijken dan heb je hier de perfecte code om Contact form 7 beter te laden.
LET OP!! Dit werkt alleen als de shortcode in de content wordt gebruikt. Als je een page builder gebruikt die er een andere shortcode voor gebruikt werkt het niet. Ook als in het thema de do_shortcode() wordt gebruikt om het contactformulier te tonen zal dit niet werken.
Het is ook mogelijk om de CSS te kopiëren naar het stylesheet van het thema om zo nog minder files te laden. Het probleem is dat de CSS dan wel overal wordt geladen.
Wil je dit doen verwijder dan regels 5 t-m 10 en regel 27.
Wie denkt dat WordPress langzaam is en dit wil optimaliseren kan eens een kijkje nemen op “WordPress langzaam?“.
Er zijn nog geen reacties. Wees de eerste..!!