Ejecuta código solo donde sea necesario en WordPress

Cuando estamos desarrollando un sitio web, ya sea con WordPress o una página web sencilla es clásico cargar todo nuestro código PHP, JavaScript y CSS a la vez en todas las páginas del sitio web.

Como la mayoría de los sitios web están construidos en WordPress, es donde nos enfocaremos ya que muchos desarrolladores desarrollan temas y/o plugins para esta plataforma y no siempre piensan en el performance de su código.

¿En qué afecta cargar código innecesario?

Bien, cuando ejecutas código PHP, JavaScript y CSS en una página estás usando CPU, memoria RAM, entre otros recursos de tu servidor y al final eso se traduce en un costo monetario para tu cliente.

Entre más recursos ocupes, tu sitio web podría presentar estos problemas:

• La carga de tu sitio web será muy lenta (A no ser que tu servidor sea escalable y esté bien configurado).
• Perderás usuarios y dinero si tu sitio web es lento.
• Para servidores en la nube no bien administrados, puede generar un costo alto.
• Kilobytes o Megabytes cargados innecesariamente.
• Puntajes malos en PageSpeed Insights.

WordPress siempre cargará los archivos PHP, CSS y JavaScript del tema y plugins activos, así que entre más plugins activos tengas, más recursos usará tu servidor.

Identifica JavaScript y CSS innecesarios

Un código innecesario puede existir en un archivo de PHP, JavaScript y CSS, y podemos identificarlo de las siguientes formas:

Network

Firefox y Google Chrome (u otro navegador) tienen una opción llamada Network o Red donde puedes ver los archivos JavaScript y CSS cargados en la página que estás visitando actualmente.

¿Ves un archivo que no pertenece a la página actual que estás visitando? Probablemente no está siendo cargado adecuadamente.

Coverage

Google Chrome tiene una opción llamada Coverage la cual permite encontrar el código JavaScript y CSS usado y no usado en la página que quieras analizar.

¿No sabes cómo usar el Coverage? He creado un video sobre cómo utilizar el Coverage en Google Chrome:

WebPageTest

Este servicio para analizar el performance de tu sitio web hace algo similar que la opción Network, te mostrará los recursos cargados desde que inicia y termina tu sitio web.

¿Cómo cargar mal un recurso?

Los archivos CSS y JavaScript comúnmente son cargados usando las funciones wp_enqueue_style() y wp_enqueue_script(); mientras que un código PHP se puede ejecutar dentro de action y filter hooks y en el dashboard de WordPress o en el frontend.

Un ejemplo es el siguiente código, donde estamos cargando el script wp-countup-show-counter.min.js en el frontend:

<?php

add_action( 'wp_enqueue_scripts', 'rmr_load_assets' );

function rmr_load_assets() {
   wp_enqueue_script(
     'wp-countup-js-plugin',
     WP_COUNTUP_JS_URL . 'assets/js/wp-countup-show-counter.min.js',
     array( 'jquery' ),
     WP_COUNTUP_JS_VERSION,
     $in_footer
   );
}

El problema del código es que está cargando el script en todas las páginas de tu sitio web pero tu sólo estás usando el script, digamos que, en la página /contact. ¿No tiene sentido que cargues tu script en todas las páginas, verdad?

¿Cómo cargar bien un recurso?

Retomando el ejemplo anterior, queremos que el script wp-countup-show-counter.min.js solo se ejecute en la página /contact. Para eso solo tenemos que agregar una condición de guardia donde si la página actual no es /contact entonces no cargues el script:

<?php

add_action( 'wp_enqueue_scripts', 'rmr_load_assets' );

function rmr_load_assets() {
  if ( ! is_page( 'contact' ) ) {
    return;
  }

  wp_enqueue_script(
     'wp-countup-js-plugin',
     WP_COUNTUP_JS_URL . 'assets/js/wp-countup-show-counter.min.js',
     array( 'jquery' ),
     WP_COUNTUP_JS_VERSION,
     $in_footer
  );
}

Pueden existir múltiples condiciones para cargar un script o estilo, en el ejemplo anterior utilizamos una página como condición pero también puedes usar:

• Roles de usuario.
• Post Types.
• Si el usuario tiene sesión iniciada o no.
• Cookies.
• El contenido de una URL.
• Cualquiera de las condiciones establecidas por WordPress.

Desactiva código JavaScript y CSS en tu WordPress

Ya que hayas identificado el código innecesario en tu WordPress, es hora de desactivarlos. Para eso, WordPress te provee dos funciones wp_dequeue_script() y wp_dequeue_style() para desactivar los scripts y estilos registrados.

Esta sección merece su propio post y lo puedes leer en el siguiente enlace.

Y ten en cuenta que lo explicado en este post lo puedes aplicar para cualquier sitio web, incluso si no está hecho en WordPress.

Espero hayas aprendido y apliques los conocimientos que aquí he plasmado, si lo haces, podrás darle a tus sitios web más performance para que tus usuarios tengan una buena experiencia.

Si tienes alguna duda y/o comentario puedes dejarlo en los comentarios.