Cómo optimizar Contact Form 7 en WordPress

No es nada nuevo que os diga que uso Contact Form 7 en casi todos mis proyectos y en los de mis clientes. Salvo en algunos casos que se necesitan cosas muy específicas o por exigencias del servidor. Pero a ser posible trabajo siempre con este plugin de formularios. 

Esto está directamente relacionado con la optimización del tiempo de carga de la web (WPO), que afecta directamente al SEO dado que a Google le encantan las webs de carga rápida :). 

¿Como lo optimizamos?

Contact Form 7 viene con su propia hoja de estilo y con su script de JS. Ambos se cargan por defecto en todas y cada una de las página de nuestra web. ¿Y porque no optimizarlo para que se carguen sólo en las página o artículos donde hay un formulario de CF7? Pues bien, eso es lo que vamos a hacer. 

Con una sencilla función cargaremos los archivos CSS y JS donde queramos. Aunque esta función está publicada en la web del plugin, no fue hasta pasado un tiempo de usarlo que me la encontré por casualidad buscando otra cosa. 

El código

Lo que propone el autor es básicamente primero denegar la carga de los archivos, para luego permitirla sólo en las páginas que tenemos donde tenemos formularios.  Para denegar la carga lo podemos hacer de dos maneras. Una es a través del archivo Config.php de nuestro WordPress. Lo cual no aconsejo dado que si no conocemos bien este archivo lo mejor será no tocarlo. Pero si alguien se atreve o está acostumbrado a trabajar con él, las líneas de código son estas. 

define('WPCF7_LOAD_JS', false);
define('WPCF7_LOAD_CSS', false);

Esto mismo lo podemos hacer desde el archivo functions.php de nuestro tema. Quedaría de esta manera.

add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );

Una vez denegada la carga sistemática de los archivos pasamos a cargarlos sólo allí donde tengamos un formulario, de esa manera queda optimizado. Deberemos ver que páginas de nuestra web tienen formularios. Con el ID de estas páginas creamos la función con ese condicional. 

function custom_contact_script_conditional_loading(){
    //  Edit page IDs here
    if( is_page(83) ) {
    
        if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
            wpcf7_enqueue_scripts();
        }

        if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
            wpcf7_enqueue_styles();
        }
        
    }
}
add_action( 'wp_enqueue_scripts', 'custom_contact_script_conditional_loading' );

En mi caso sólo tenía un formulario en la web de pruebas donde implementé la función para comprobar que se cargase todo cuando se tenía que cargar. Pero en caso de tener varios formularios simplemente reúne los ID’s de las páginas y la línea de la funcion se quedaría así: 

if( is_page( array (83,145,178) ) ) {

O incluso si sabes el slug de la página puedes mezclar IDs y slugs.

if( is_page( array (83,145,'presupuesto') ) ) {

Y por supuesto, hay que hacer pruebas para ver si funciona.

Comprobando resultados

Me fui al inspector del Chrome para comprobar que tanto el script de JS como la hoja de estilos CSS se cargasen sólo en la página del formulario. Y efectivamente así era. Os dejo captura de pantalla para que lo veáis. 

Capturé una porción de menú para que veáis que si estamos en la página de contacto. Podéis ver en la carpeta de plugins la subcarpeta Contact Form 7 con los archivos del plugin. Y en la siguiente captura que la hice desde la home de la web de pruebas, ya no existe carpeta de Contact Form 7 dentro de la carpeta de plugins. 

En el foro de soporte del plugin, en el repositorio de WordPress, un usuario propone una función que hace lo mismo, pero con el condicional contrario. Es decir, que mientras que no sea la página de contacto elimina los archivos JS y CSS de Contact Form 7 de la cola de carga. Es otra manera de hacerlo. La he añadido para dar aún más opciones. 

add_action( 'wp_enqueue_scripts', 'custom_contact_script_conditional_loading' );

function custom_contact_script_conditional_loading(){
   //  Edit page IDs here
   if(! is_page(83) )    
   {		
      wp_dequeue_script('contact-form-7'); // Dequeue JS Script file.
      wp_dequeue_style('contact-form-7');  // Dequeue CSS file. 
   }
}

Si me preguntáis cual es la que uso yo, os diré que la primera. Pero la uso como plugin.

Un plugin para el plugin

Dado que es una funcionalidad y no parte del diseño de la web. En otras palabras, si algún día cambio de tema, querré que esta función continúe activa. Es lo que debemos preguntarnos para saber si debemos crear un plugin o añadirlo al archivo functions.php.

Por si alguien quiere bajarse el plugin lo he subido a mi cuenta de Github. Habrá que, como en la función, sustituir el ID de la página o páginas por las de tu web que tengan formularios de Contact Form 7.

Dado que hay que editarlo, lo mejor es copiar el código y crear un archivo PHP con él y subirlo por FTP a tu WordPress a la carpeta de /wp-content/plugins.  Puedes crear dentro de la carpeta de plugins una llamada CF7-optimization para tenerlo todo ordenado. Ya cada uno tiene su organización. 

Después ya sólo habrá que activarlo desde WordPress. Puedes comprobar que funciona desde el inspector de Chrome o cualquier otro navegador que uses. 

Para cualquier duda, aportación o pregunta no dudéis en dejar un comentario justo debajo. O me podéis mandar un mensaje a través del formulario de contacto.