Optimización de Contact Form 7 para un mejor rendimiento

Contact Form 7 es uno de los complementos de formularios de contacto gratuitos más utilizados. Hasta el día de hoy, tiene más de 16 millones de descargas. Creo que es justo considerarlo el complemento de formulario de contacto más utilizado.

Con esta gran audiencia, optimizar el uso del Formulario de Contacto 7 parece optimizar un número significativo de usuarios de WordPress. Si aún no lo sabes, el formulario de contacto 7 incluye sus archivos CSS y JavaScript en todas y cada una de las páginas de tu sitio.

Esta inclusión redundante y derrochadora debe ser abordada.

¿Por qué estamos haciendo esto?

Un archivo CSS y/o JavaScript extra en cada página será como un equipaje extra que no querrás llevar cuando estés caminando a pie. Dos peticiones HTTP adicionales pueden afectar negativamente el tiempo de carga de tu sitio.

Si has leído mi Guía para principiantes de WordPress SEO de Yoast, eres consciente del hecho de que a Google le encanta clasificar los sitios que tienen un tiempo de carga de página inferior a 1 segundo. Los primeros 14 KB son críticos.

Es posible que quieras cargar estos archivos CSS y JavaScript solo en las páginas en las que estás usando el complemento Contact Form 7 para crear un formulario. Esto evitará que tu sitio web cargue archivos extra en cada página, en cambio se cargarán solo en las páginas con formularios de contacto.

Según el autor del complemento, Takayuki Miyoshi:

Comprendo el problema, pero hay una dificultad técnica que impide que un plugin distinga entre una página que contiene formularios de contacto de una que no al inicio de la carga.

Optimizar Contact Form 7

Paso 1: Dar de baja los archivos CF7 CSS

En primer lugar, tenemos que comprobar qué páginas tienen formularios de contacto. Entonces necesitamos dar de baja el archivo CSS generado por el plugin CF7 para todas las demás páginas.

Buscar el Slug del URL de página

Encontremos el slug de tu página con el formulario de contacto Ve a "Páginas". Haz clic en Edición rápida y copia el slug.

Tomemos un ejemplo explícito: Imagina que tienes una página titulada "Contáctanos" que tiene un URL slug contact-us. Añade el siguiente código en el archivo functions.php de tu tema al final.

1

// Deregister Contact Form 7 styles

2

add_action( 'wp_print_styles', 'aa_deregister_styles', 100 );

3

function aa_deregister_styles() {

4

    if ( ! is_page( 'contact-us' ) ) {

5

        wp_deregister_style( 'contact-form-7' );

6

    }

7

}

8

Este código añade una función aa_deregister_styles() que comprueba si la página no es contact-us y luego reemplaza el estilo CSS por CF7 para otras páginas.

Paso 2: Dar de baja CF7 de los archivos JavaScript

Así mismo con las fuentes de JavaScript, lo daremos de baja en todas las páginas excepto en aquellas con formularios de contacto.

Añade el siguiente código en el archivo functions.php de tu tema al final:

1

// Deregister Contact Form 7 JavaScript files on all pages without a form

2

add_action( 'wp_print_scripts', 'aa_deregister_javascript', 100 );

3

function aa_deregister_javascript() {

4

    if ( ! is_page( 'contact-us' ) ) {

5

		wp_deregister_script( 'contact-form-7' );

6

	}

7

}

Este código añade una función aa_deregister_javascript() que comprueba si la página no es contact-us y luego anula el archivo JavaScript por CF7 en todas las demás páginas.

Eso es todo. Haz optimizado con éxito tu complemento CF7.

¿Qué pasa si tengo varios formularios en varias páginas?

La respuesta a esta pregunta es simple: Estoy usando la función is_page() que tiene una referencia de función masiva en el Codex de WordPress: is_page(). Puedes añadir una serie de páginas. Puedes obtener el valor del parámetro como ID de la página, título de la página o el Slug de la página.

1

/**

2

 * is_page( array( ID, 'slug', 'Title' ) );

3

 * Returns true when the Pages displayed is either post ID 42, or post_name "about-me", or post_title 

4

 */

5

is_page( array( 42, 'about-me', 'Contact' ) );

Recursos

• Código de WordPress: is_page()
• Contact Form 7 (Formulario de contacto 7)