[Truco] para Optimizar Contact Form 7 ¡Acelera tu WordPress!

como-ptimizar-contact-form-7-portada

Me encanta el plugin de Contact Form 7. Es sencillo, bastante liviano y fácil de configurar. Además, tiene opciones muy útiles como la integración de Google reCaptcha.

Este plugin es uno de los más descargados de todo el repositorio de WordPress y me imagino que si estás leyendo esto tú también lo utilices.

Así que, si estás utilizando Contact Form 7 en tu blog de WordPress, te voy a enseñar un truco para optimzar su rendimiento y mejorar la velocidad de carga de tu sitio web.

A continuación muestro los resultados de Google Page Speed de este mismo blog davidzamora.blog, para que te hagas una idea del aumento de velocidad que puede suponer.

Antes de optimizar Contact Form 7

Test de Page Speed realizado antes de hacer las modificaciones que voy a comentar a continuación, con un resultado de 75.

Después de optimizar Contact Form 7

Test de Page Speed realizado después de hacer las modificaciones, con un resultado de 94.

Cómo puedes ver, el aumento de velocidad es considerable. Y por si fuera poco, implementar esta optimización no nos llevará ni 5 minutos!

Contact Form 7

Creo que estaremos todos de acuerdo en que este plugin es realmente bueno. Si no fuera así, no tendría más de 5 millones de instalaciones actualmente.

Pese a que este plugin de WordPress es realmente bueno y bastante ligero, tiene algunos aspectos que se pueden mejorar.

Uno de los problemas de Contact Form 7 es que carga por defecto sus propios CSS y Javascript en cada una de las páginas de tu WordPress. Esto significa que carga varias peticiones HTTP innecesarias, que ralentizan la carga de tu WordPress en todas tus páginas de tu sitio.

Petición css:

Petición JS:

Si además, utilizas Google reCaptcha en tus formularios de Contact Form, pasa a cargar más peticiones en cada página. Por un lado, carga el CSS y el JS del plugin y luego, además, carga el script del reCaptcha.

Supongo que a estas alturas ya sabrás lo importante que es la velocidad de carga web para el SEO. Estas peticiones de los archivos de contact form pueden suponer un aumento de la carga considerable.

Optimizar contact form 7

Para optimizar Contact Form 7 y que nuestro WordPress cargue más rápido, lo que haremos será quitar esas peticiones que carga el plugin (CSS y JS) en todas las páginas que no se utilice.

Una vez resuelto, solo cargará esos archivos cuando detecte el script del plugin en una página.

Es decir, solamente se va a cargar en aquellas páginas que contengan un formulario del propio plugin.

Esto lo haremos con una pequeña función de WordPress que copiaremos y pegaremos en el archivo functions.php de nuestra plantilla.

// Optimización Contact Form 7
function contactform_dequeue_scripts() {
    $load_scripts = false;
    if( is_singular() ) {
        $post = get_post();

        if( has_shortcode($post->post_content, 'contact-form-7') ) {
            $load_scripts = true;
        }
    }
    if( ! $load_scripts ) {
        wp_dequeue_script( 'contact-form-7' );
        wp_dequeue_script( 'google-recaptcha' );
        wp_dequeue_script( 'wpcf7-recaptcha' );     
        wp_dequeue_style( 'contact-form-7' );
		wp_dequeue_style( 'wpcf7-recaptcha' );
    }
}
add_action( 'wp_enqueue_scripts', 'contactform_dequeue_scripts', 99 );

Para acceder al archivo functions.php deberás ir al menú de WordPress seleccionar Apariencia > Editor de temas.

Y luego ir al menú de Archivos del tema (a la derecha) y seleccionar el archivo functions.php.

Todo lo que deberás hacer es pegar la función que he dejado más arriba y copiarla al final de todo del archivo functions.

Recomendaciones

Antes de hacer cualquier cambio es muy importante que hagas una copia de seguridad de tu WordPress, y cerciorarte de que el archivo functions.php (que es donde vamos a realizar las modificaciones) queda respaldado.

Una vez tengas el respaldo hecho de tu sitio web, ya podrás probar a realizar las modificaciones que consideres.

Si por lo que sea no te funciona copiando y pegando el trozo de código en el archivo functions.php, puedes probar con un plugin como WordPress Assets Manager, que se encarga de gestionar este tipo de peticiones.

Conclusiones

Como has podido comprobar, realizando una pequeña optimización del plugin Contact Form 7 hemos aumentado la velocidad de nuestra web.

En mi caso, como te he mostrado al principio de este post, he pasado de una puntuación de 75 a 94 en el test de velocidad de Google.

Si te ha gustado este pequeño truco dímelo en los comentarios y me gustaría que me dijeras si has notado mucho los cambios en Google Page Speed.

¿Te ha quedado alguna duda o tienes algún problema? Déjalo en los comentarios y te ayudaré.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *