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.

Pestaña de Network o Red mostrando los archivos JS y CSS cargados en la página actual.
Pestaña de Network o Red mostrando los archivos JS y CSS cargados en la página actual.

¿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.

WebPageTest mostrando los recursos cargados en la página actual.
WebPageTest mostrando los recursos cargados en la página actual.

¿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:

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.

2 comentarios en “Ejecuta código solo donde sea necesario en WordPress”

  1. I want to use WP CountUP JS, but as it is there is no way to increase its size and location on page.
    Is there a way for me to sort this, or is there an updated plugin, I can use.

    Responder
    • Hi, Lewes. To increase the size of the counter you have two ways:

      1. If you’re using Gutenberg, the Counter block allow you to increase the size using the block control. More Gutenberg controls in this wiki page.

      2. Every counter has a counter CSS class, so you can create a CSS to change the size, for example:

      .counter { font-size: 32px; }

      Would be something like that. Hope that helps, let me know. Thanks for your comment.

Deja un comentario