Saltar al contenido
Codif铆ca.me | Desarrollo web | Programaci贸n

Optimizaci贸n del formulario de contact 7 para un mejor rendimiento #wp #WPO #PageSpeed

28 abril, 2019
contactform7

El plugin contact 7 es uno de los plugins de formulario de contacto gratuito m谩s utilizados. Actualmente tiene m谩s de 18 millones de descargas. Creo que es justo considerarlo como el plugin de formulario de contacto m谩s usado.

Con esta gran audiencia, optimizar el uso del Formulario de Contact 7 parece importante para un n煤mero significativo de usuarios de WordPress. Si a煤n no lo sabes, el Formulario de Contact 7 incluye sus archivos CSS y JavaScripts en todas y cada una de las p谩ginas de tu sitio.

Es decir incluye todas sus librer铆as en todos los sitios de tu WordPress por lo que te bajar谩 el rendimiento en pagespeed.

驴Por qu茅 estamos haciendo esto?

Un archivo CSS y/o JavaScript extra en cada una de p谩ginas ser谩 como una carga extra para tu web que no es necesario que tengamos. Dos peticiones HTTP adicionales pueden afectar negativamente al tiempo de carga de su sitio.

C贸mo ya sabr谩s Google le encanta clasificar bien en los primeros resultados del buscador los sitios que tienen tiempo de carga de la p谩gina por debajo de 1 segundo. Por lo tanto los primeros 14 KB son los m谩s cr铆ticos.

contactform7

Es posible que quieras cargar estos archivos CSS y JavaScript s贸lo en las p谩ginas en las que est谩 utilizando el plugin Formulario de contact 7 para crear un formulario, esto ser铆a lo ideal claro. Y con esto har铆as que tu p谩gina cargar谩 estos archivos adicionales en cada p谩gina en que los utilice en lugar de cargar esos archivos siempre.

Bien, pues vamos a hacerlo ya.

Formulario de contact 7 y optimizaci贸n

Paso 1: Desregistro de los archivos CSS del CF7
En primer lugar, tenemos que comprobar qu茅 p谩ginas tienen formularios de contacto. Luego tenemos que eliminar el archivo CSS generado por el plugin CF7 para todas las dem谩s p谩ginas.

Buscar la URL de las p谩ginas que utilizan el contact 7

Vamos a ver un ejemplo expl铆cito: Imag铆nese que tiene una p谩gina titulada “Cont谩ctenos” que tiene una URL slug contact-us. Agregue el siguiente c贸digo en el archivo functions.php de su tema al final.

Desregistrar librer铆as del Formulario de contact 7


add_action( 'wp_print_styles', 'quitando_styles', 100 );
function quitando_styles() {
if (! is_page( 'contact-us') ) {
wp_deregister_style( 'contact-form-7');
}
}

Este c贸digo a帽ade una funci贸n quitando_styles() que comprueba si la p谩gina no tiene un formulario y luego elimina el estilo CSS de CF7 para otras p谩ginas.

Paso 2: Desregistro de los archivos JavaScript CF7

As铆 mismo con los JavaScript, realizaremos la misma operaci贸n lo daremos de baja para todas las p谩ginas excepto para aquellas con formularios de contacto.

A帽ade el siguiente c贸digo en el archivo functions.php de tu theme:

Borrar formulario de contacto 7 archivos JavaScript en todas las p谩ginas sin formulario.


add_action( 'wp_print_scripts', 'quitando_javascript', 100 );
function quitando_javascript() {
if (! is_page( 'contact-us') ) {
wp_deregister_script( 'contact-form-7');
}
}

Este c贸digo a帽ade una funci贸n quitando_javascript() que comprueba si la p谩gina no es contact-us y luego elimina el archivo JavaScript por CF7 para todas las dem谩s p谩ginas.

Eso es todo. Hecho esto te cargar谩 las librer铆as solo en el caso de que sea necesario.