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.


Publicado el

por

Comentarios

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

  1. Avatar de Lewes

    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.

    1. Avatar de Roel Magdaleno
      Roel Magdaleno

      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

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *