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 tarda un navegador en representar un sitio web. Los tiempos de carga más rápidos aseguran que una mayor proporción de sus visitantes permanezcan en su sitio web mientras se carga. La velocidad de la página también determina parcialmente la clasificación de su sitio web en los resultados de los motores de búsqueda. Por lo tanto, acelerar un sitio web de WordPress suele estar 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 supone que ha verificado un factor subyacente: ejecutar su sitio web en un host de WordPress lo suficientemente rápido.
¿Por qué diferir el análisis de JavaScript?
Para comprender la técnica de aplazar el análisis de JavaScript, retrocedamos un paso 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 devuelta 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. Además, los recursos presentes en la página deben descargarse. De forma predeterminada, 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.
Los grandes recursos afectan negativamente al 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 renderizar su página.
¿Qué scripts aplazar?
Para un sitio web relativamente pequeño que utiliza un mínimo de JavaScript, es posible que ninguna secuencia de comandos sea esencial 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 la página.
Una forma de realizar este análisis es eliminar los scripts uno por uno y comprobar 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 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 la evalúe. En la página de resultados, diríjase a la pestaña PageSpeed y expanda la sección «Aplazar el análisis de JavaScript». Esta sección le muestra una lista de scripts no esenciales que se cargan durante el proceso de renderizado.
Atributos asíncronos frente a diferidos
Hay dos formas de asegurarse de que la descarga de un script no interfiera con la representación de una página web.
Primero, puede agregar un async
atribuir a la script
etiqueta. Esto le dice al navegador que cargue el script de forma asincrónica. 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 muestra script
etiqueta a continuación muestra cómo agregar el async
atributo:
<script src="https://athemes.com/tutorials/defer-parsing-of-javascript-in-wordpress/path/to/script" async></script>
En segundo lugar, puede agregar un defer
atribuir a la script
etiqueta. Esto le dice al navegador que no descargue el recurso hasta que se complete el análisis de la página. Una vez que se realizan el análisis y la representación, el navegador descarga la lista de scripts diferidos que encontró anteriormente. La muestra script
etiqueta a continuación muestra cómo agregar el defer
atributo a una página HTML:
<script src="https://athemes.com/tutorials/defer-parsing-of-javascript-in-wordpress/path/to/script" defer></script>
La principal diferencia entre el defer
y async
atributos es cuando se descargará el recurso.
Supongamos 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 utiliza async
, es posible que B termine de descargar antes de que A se haya descargado por completo. Esto dará lugar a un error, ya que B se ejecutará en ausencia de A.
Sin embargo, si usa defer
, A y B se descargarán secuencialmente al final, lo que no dará lugar a un error.
Si solo tiene unos pocos scripts en la ruta de renderizado, no encontrará ninguna diferencia entre el uso de async
y defer
. Sin embargo, si tiene una aplicación web compleja, puede ser una buena idea utilizar defer
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, deberías usar funciones integradas de WordPress para solicitar recursos.
Entonces, si desea agregar un async
o defer
atributo a cualquiera de sus scripts, debe agregar la siguiente función a su tema functions.php expediente:
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 olvide que antes de agregar el defer
y async
atributos a las etiquetas del script, también necesita 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. Utilice un complemento
Editando el código fuente a través del functions.php El archivo puede no ser ideal para todos. Si no es un experto en tecnología, simplemente puede usar un complemento para diferir el análisis de JavaScript en su sitio de WordPress.
JavaScript asíncrono
JavaScript asíncrono es un complemento gratuito que puede descargar e instalar en su sitio de WordPress para realizar esta tarea.
Para habilitar la función, marque la Habilitar JavaScript asíncrono opción en el área de configuración del complemento. Luego, desplácese hacia abajo hasta el Método JavaScript asíncrono y seleccione si desea utilizar el método asincrónico o diferido.
Para opciones más avanzadas, desplácese hacia abajo en la página. Aquí, puede enumerar los scripts a los que desea aplicar el async
y defer
etiquetas a. 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.
Autoptimizar
La opción de aplazar el análisis de sus scripts también está disponible como parte de la Autoptimizar complemento creado por el mismo autor que Async JavaScript.
En la página de configuración del complemento, marque la Optimizar el código JavaScript opción y sus scripts no esenciales se aplazarán y se moverán al pie de página. En el Extra pestaña, también puede enumerar los scripts que desea agregar async
atribuir a.
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 debería posponer el análisis de JavaScript.
Finalmente, analizamos dos opciones a través de las cuales puedes lograrlo en WordPress. Puede editar el functions.php archivo para agregar el async
o defer
atributos a tu script
etiquetas o utilice un complemento como JavaScript asíncrono o Autoptimizar 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.