Saltar al contenido

Cómo aplazar el análisis de JavaScript en WordPress

Una medida crítica del rendimiento de su sitio web es la velocidad de la página. La velocidad de la página es el tiempo que necesita un navegador para representar un sitio web. Los tiempos de carga más rápidos aseguran que una mayor proporción de sus visitantes permanezca en su sitio web a medida que se carga. La velocidad de la página también determina el rango de su sitio web en los resultados del motor de búsqueda. Por lo tanto, acelerar un sitio web de WordPress a menudo está en la parte superior de la lista de deseos del propietario del sitio.

En este tutorial, discutiremos el aplazamiento del análisis de JavaScript durante la carga de la página web, una técnica clave para eliminar el peso muerto de su sitio web.

La velocidad de la página es una parte importante de la experiencia del usuario que depende de muchas cosas. Este artículo presume que ha verificado un factor de higiene subyacente: ejecutar su sitio web en un host de WordPress lo suficientemente rápido.

¿Por qué aplazar el análisis de JavaScript?

Para comprender la técnica de diferir el análisis de JavaScript, demos un paso atrás y analicemos cómo un navegador web representa una página. Cuando su navegador envía una solicitud a su servidor web, la página enviada por el servidor se descarga en forma de documento HTML. Este documento HTML contiene texto, código que representa varios elementos DOM y recursos como imágenes, hojas de estilo y scripts.

El navegador lee este marcado HTML línea por línea. Los recursos presentes en la página deben descargarse adicionalmente. Por defecto, el navegador descarga secuencialmente estos recursos a medida que los encuentra en el documento. La representación de la página web solo se reanuda una vez que se ha descargado un recurso.

Grandes recursos afectan negativamente el tiempo de carga de la página. Como las imágenes forman una parte significativa del tamaño de la página, se recomienda optimizar las imágenes para su sitio de WordPress. Para los archivos JavaScript, debe identificar qué scripts son necesarios para representar su página correctamente. Puede aplazar la descarga de scripts no esenciales para acelerar su página web.

En la siguiente sección, veremos formas de identificar qué scripts son necesarios para representar su página.

¿Qué guiones aplazar?

Para un sitio web relativamente pequeño que usa JavaScript mínimo, puede que no sea necesario ningún script para cargar la página. Sin embargo, si administra un sitio web más complejo, un análisis cuidadoso de todos los scripts en su sitio web puede revelar qué scripts son esenciales para la carga de páginas.

Una forma de realizar este análisis es eliminar los scripts uno por uno y verificar si hay algún error en la consola de JavaScript durante la carga de la página. Sin embargo, este proceso requiere un conocimiento considerable de JavaScript y las tecnologías web.

Un método más fácil para evaluar qué scripts son críticos para la carga de su página es usar una herramienta de prueba de velocidad como GTmetrix. Ingrese la URL de su sitio web y espere a que la herramienta lo evalúe. En la página de resultados, dirígete a la pestaña PageSpeed ​​y expande la sección «Aplazar el análisis de JavaScript». Esta sección le muestra una lista de secuencias de comandos no esenciales que se cargan durante el proceso de representación.

Aplazar el análisis de JavaScript en GTMetrix

Atributos asíncrono vs. diferido

Hay dos formas de garantizar que la descarga de un script no interfiera con la representación de una página web.

Primero, puede agregar un atributo asíncrono a la etiqueta del script. Esto le dice al navegador que cargue asincrónicamente el script. En otras palabras, el navegador comienza a descargar el recurso tan pronto como lo encuentra en el código, pero continúa analizando el HTML mientras el recurso aún se está descargando. La siguiente etiqueta de script de muestra muestra cómo agregar el atributo asíncrono:

En segundo lugar, puede agregar un atributo de aplazamiento a la etiqueta del script. Esto le indica al navegador que no descargue el recurso hasta que se complete el análisis de la página. Una vez que se realiza el análisis y la representación, el navegador descarga la lista de secuencias de comandos diferidas que ha encontrado anteriormente. La siguiente etiqueta de script de muestra muestra cómo agregar el atributo de aplazamiento a una página HTML:

La principal diferencia entre los atributos diferidos y asíncronos es cuándo se descargará el recurso.

Digamos que tiene dos scripts: A y B. B aparece en el código después de A, B tiene una dependencia de A, pero A es significativamente más grande que B.

Si usa asíncrono, es posible que B termine la descarga antes de que A se haya descargado por completo. Esto conducirá a un error, ya que B se ejecutará en ausencia de A.

Sin embargo, si usa diferir, A y B se descargarán secuencialmente al final, lo que no conducirá a un error.

Si solo tiene unos pocos scripts en la ruta de representación, no encontrará ninguna diferencia entre el uso de async y diferir. Sin embargo, si tiene una aplicación web compleja, puede ser una buena idea usar diferir para garantizar que se satisfagan las interdependencias.

Analicemos ahora las formas de aplazar la descarga de scripts en WordPress.

Aplazar el análisis de JavaScript en WordPress

1. Edite el archivo functions.php

Si ha trabajado en el desarrollo de WordPress, sabe que no se recomienda agregar scripts directamente a través del marcado HTML. En su lugar, debe usar las funciones integradas de WordPress para solicitar recursos.

Entonces, si desea agregar un atributo asíncrono o diferido a cualquiera de sus scripts, debe agregar la siguiente función a su tema funciones.php archivo:

add_filter('script_loader_tag', 'add_defer_tags_to_scripts');
function add_defer_tags_to_scripts($tag){
    # List scripts to add attributes to
    $scripts_to_defer = array('script_a', 'script_b');
    $scripts_to_async = array('script_c', 'script_d');
 
    # add the defer tags to scripts_to_defer array
    foreach($scripts_to_defer as $current_script){
        if(true == strpos($tag, $current_script))
             return str_replace(' src', ' defer="defer" src', $tag);
    }
 
    # add the async tags to scripts_to_async array
    foreach($scripts_to_async as $current_script){
        if(true == strpos($tag, $current_script))
             return str_replace(' src', ' async="async" src', $tag);
    }
     
    return $tag;
 }

No olvides que antes de agregar los atributos de aplazamiento y asíncrono a las etiquetas de script, también debes poner en cola cada script para que WordPress pueda acceder a él:

add_action('wp_enqueue_scripts', 'enqueue_custom_js');
function enqueue_custom_js() {
    wp_enqueue_script('script_a', get_stylesheet_directory_uri().'/script_a.js');
    wp_enqueue_script('script_b', get_stylesheet_directory_uri().'/script_b.js');
    wp_enqueue_script('script_c', get_stylesheet_directory_uri().'/script_c.js');
    wp_enqueue_script('script_d', get_stylesheet_directory_uri().'/script_d.js');
}

2. Use un complemento

Edición del código fuente a través de funciones.php El archivo puede no ser ideal para todos. Si no tiene conocimientos técnicos, simplemente puede usar un complemento para diferir el análisis de JavaScript en su sitio de WordPress.

JavaScript asíncrono

Async JavaScript es un complemento gratuito que puede descargar e instalar en su sitio de WordPress para realizar esta tarea.

Para habilitar la función, verifique el Habilitar JavaScript asíncrono opción en el área de configuración del complemento. Luego, desplácese hacia abajo hasta Método JavaScript asíncrono sección y seleccione si desea utilizar el método asíncrono o diferido.

IU de complemento asíncrono de JavaScript

Para opciones más avanzadas, desplácese hacia abajo de la página. Aquí, puede enumerar los scripts a los que desea aplicar las etiquetas asíncronas y diferidas. A continuación, puede agregar una lista de scripts para excluir también. También puede enumerar los complementos y temas que se excluirán de cualquier cambio que realice este complemento.

Scripts de inserción de JavaScript asíncrono

Optimización automática

La opción de diferir el análisis de sus scripts también está disponible como parte del complemento Autoptimize creado por el mismo autor que Async JavaScript.

En la página de configuración del complemento, verifique el Optimizar código JavaScript opción y sus scripts no esenciales serán diferidos y movidos al pie de página. En el Extra pestaña, también puede enumerar los scripts a los que desea agregar el atributo asíncrono.

Configuración automática del complemento

Terminando

En este tutorial, primero discutimos la importancia de la velocidad de la página y cómo funciona la representación de JavaScript. Luego, exploramos las razones por las que debe aplazar el análisis de JavaScript.

Finalmente, observamos dos opciones a través de las cuales puedes lograrlo en WordPress. Puedes editar el funciones.php archivo para agregar los atributos asíncronos o diferidos a sus etiquetas de script o use un complemento como Async JavaScript o Autoptimize para optimizar sus scripts.

¿Alguna pregunta sobre cómo aplazar el análisis de JavaSript en WordPress? Si es así, no dude en preguntar en los comentarios a continuación.