Page Speed es uno de los aspectos más importantes de su sitio web. No importa cuánto tenga que ofrecer su sitio web, a nadie le gusta esperar unos minutos antes de que se cargue su sitio web. Al mismo tiempo, si su sitio web se carga más rápido, es más probable que retenga visitantes.
Además, Page Speed también representa la clasificación de su sitio web en los motores de búsqueda. Ayuda a los rastreadores a comprender la eficacia y el mantenimiento de su sitio web. En este tutorial, veremos Cómo diferir el análisis de JavaScript en WordPress.
¿Por qué es importante aplazar el análisis de JavaScript?
Para comprender completamente el concepto de análisis diferido de JavaScript, deberá comprender cómo un navegador representa una página web. Cuando su navegador solicita una página, su servidor web la devuelve, que se descarga en forma de documento HTML.
El documento HTML contiene varios elementos y recursos que el navegador lee mientras se descargan los recursos adicionales. Y finalmente, la página se procesa solo cuando se descargan todos los recursos.
Create Amazing Websites
Con el mejor generador de páginas gratuito Elementor
Empezar ahoraLos recursos que son de mayor tamaño requieren mucho más tiempo para descargarse. Las imágenes representan la mayoría de estos recursos, por lo que es importante optimizar sus imágenes. Además, puede diferir la descarga de scripts innecesarios identificándolos y acelerando su página web.
¿Cómo identificar qué scripts aplazar?
Para un sitio web mínimo que no usa mucho JavaScript, es posible que no haya scripts vitales para cargar la página. Por el contrario, es importante para un sitio web bastante complejo tener un análisis detallado de todos los scripts para comprender cuáles son esenciales para la carga de la página.
El primer método para eliminar los scripts innecesarios es eliminar los scripts uno por uno y comprobar simultáneamente cualquier error en la consola de JavaScript. Al mismo tiempo, este método requiere un esfuerzo y conocimiento considerables sobre JavaScript.
El otro método consiste en utilizar la herramienta de prueba de velocidad para evaluar qué scripts son esenciales para la carga de la página. Una de estas herramientas incluye GTmetrix , donde todo lo que tiene que hacer es ingresar la URL de su sitio web, mostrando los resultados. En la pestaña Velocidad de página, encontrará la sección Aplazar análisis para JavaScript, que mostrará la lista de scripts innecesarios cargados durante la representación de su página al expandirse.
Con la información, puede eliminar las secuencias de comandos que no tienen en cuenta la representación de su página.
Atributos diferidos o asíncronos
Hay dos formas de eliminar la descarga de scripts cuando se procesan las páginas.
Primero, al agregar el atributo Aplazar a la etiqueta de secuencia de comandos, puede asegurarse de que el navegador no descargue recursos a menos que se realice el análisis de la página. Una vez que se han completado la representación y el análisis de la página, el navegador puede descargar todos los scripts diferidos. A continuación se muestra una etiqueta de secuencia de comandos de muestra que muestra cómo agregar el atributo deferir a una página HTML.
<script src="path/to/script" defer></script>Por otro lado, puede agregar un atributo asíncrono a la etiqueta de secuencia de comandos. Esto guiará al navegador para que cargue el script por separado. Esto significa que el navegador comenzará a descargar los recursos cuando encuentre el código mientras analiza por separado el HTML simultáneamente. La secuencia de comandos de muestra que se muestra a continuación muestra cómo agregar un atributo asíncrono.
<script src="path/to/script" async></script>Ambos atributos difieren en su forma de descargar recursos. Para un sitio web mínimo, no es fácil notar diferencias entre atributos asíncronos y diferidos. Al mismo tiempo, para una aplicación web más compleja, se recomienda utilizar la técnica de aplazamiento.
Aplazar el análisis de JavaScript
Estos son los dos métodos que puede utilizar para diferir el análisis de JavaScript.
1. Personaliza el archivo functions.php
Si está acostumbrado al desarrollo de WordPress, debe saber que no es una buena idea dd scripts directamente en el marcado HTML. Pero puede usar las funciones integradas de WordPress para solicitar recursos.
Para agregar un atributo asíncrono o diferido a sus scripts, debe agregar la siguiente función al archivo functions.php de su tema de WordPress.
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;
}Asegúrese de poner en cola cada script antes de agregar los atributos defer y async a las etiquetas del script.
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. Complementos para diferir el análisis de JavaScript
Es comprensible que no todo el mundo tenga un conocimiento y una habilidad considerables para seguir el método anterior. Por lo tanto, para los principiantes, algunos complementos se pueden usar para diferir el análisis de JavaScript.
JavaScript asíncrono
Async JavaScript es un complemento de WordPress de uso gratuito que puede instalar en su WordPress para realizar la tarea.
Una vez que haya instalado y activado el complemento, vaya a la configuración del complemento y marque la opción Habilitar JavaScript asíncrono .
Desplácese hacia abajo para seleccionar entre el método asíncrono o diferido .
Desplácese hacia abajo para ver opciones más avanzadas donde puede agregar o quitar scripts por separado para async y diferir. Además, puede eliminar complementos y temas de los cambios que realizará este complemento.
Autoptimizar
Autoptimize es otro complemento que le permite diferir el análisis de JavaScripts.
Después de instalar y activar el complemento, marque la opción Optimizar código JavaScript en la página de configuración . Esto aplazará todos los scripts innecesarios y los moverá al pie de página.
También puede agregar los scripts para el atributo async en la pestaña Extra .
Puede editar el archivo functions.php o usar complementos como Autoptimize y Async JavaScript . Estos son los dos métodos confiables para agregar el atributo async y defer a las etiquetas de script.
Esperamos que estas técnicas le ayuden a acelerar su sitio web. No dude en unirse a nosotros en Facebook y Twitter para mantenerse actualizado sobre nuestras publicaciones.
