Cómo acelerar un sitio web de WordPress

Aplazar los métodos de Javascript y Javascript asíncrono

En el artículo anterior hablamos Cómo acelerar un sitio web de WordPress utilizando el método de optimización de imágenes. Por supuesto, esto afecta en gran medida la velocidad del sitio web. Sin embargo, no estará completo si no continuamos con la siguiente técnica para acelerar el sitio web, es decir, Defer Javascript o Async Javascript.

En el mundo del desarrollo de sitios web, JavaScript se considera un “recurso de bloqueo del analizador”. Esto significa que Javascript tiene la capacidad de bloquear o detener temporalmente la carga de HTML (páginas del sitio web), provocando así un cuello de botella. El HTML comenzará a ejecutarse nuevamente cuando Javascript haya terminado de cargarse.

Los cuellos de botella ciertamente no son fáciles de usar. De hecho, un buen sitio web tiene una velocidad promedio de alrededor de 3 a 5 segundos para cargar todo el contenido de la página.

Entonces, para superar el cuello de botella en JavaScript, afortunadamente existen 2 métodos de atributos. el primero es Javascript asíncrono (JS y HTML cargando simultáneamente) y también Aplazar Javascript (HTML se carga primero hasta que finaliza, luego se ejecuta Javascript). Veamos las diferencias con más detalle. Javascript asíncrono Y Aplazar Javascript.

Carga normal de JavaScript

Bien, antes de discutir Async y Defer, primero examinemos cómo funciona la carga de Javascript en un sitio web. De forma predeterminada, cuando Javascript comienza a cargarse, detendrá automáticamente todos los procesos de análisis de HTML. hace que el sitio web se cargue, sin que aparezca nada.

Ejemplo de JavaScript normal

<html>
<head> ... </head>
<body>
    ...
    <script src="https://www.yasir252.com.es/tutorial/website/wordpress/cara-mempercepat-website-async-defer-javascript/script.js">
    ....
</body>
</html>

Javascript se carga en el contenido del cuerpo, lo que dará como resultado embotellamiento como sigue

Si miramos el gráfico anterior, el análisis HTML (carga de elementos de la página web) experimenta una pausa cuando Javascript comienza a cargarse en el medio del camino. Una vez que JavaScript se ha ejecutado (ejecutado), el análisis HTML se ejecuta nuevamente y termina de cargar el sitio web.

Carga asíncrona de JavaScript

Esto es diferente de Async Javascript, que permite que JavaScript Fetch se ejecute simultáneamente con HTML Parsing. Por lo tanto, no es necesario pausar el análisis de HTML mientras se carga JavaScript. Pero debe saber que este método Async Javascript aún permitirá que Javascript se ejecute antes de cerrar el análisis HTML. La razón es que, a veces, el método async no funciona bien con algunos complementos de Javascript, sino que hace que el sitio web sea aún más lento.

Por lo general, este método Async es muy adecuado para complementos de JavaScript que se almacenan o se extraen de fuentes externas. Pero nuevamente, primero debe investigar antes de conocer los cambios en la velocidad de su sitio web.

Veamos la gráfica de Javascript asíncrono :

Aplazar la carga de Javascript

Otro método que discutiremos en “cómo acelerar un sitio web de WordPress” es Defer Javascript. Ahora, ligeramente diferente del método anterior, Defer Javascript también permite cargar un complemento al mismo tiempo que HTML Parsing. Sin embargo, la diferencia es que Defer Javascript contendrá todo el Javascript para que pueda ejecutarse cuando se complete el análisis de HTML.

En pocas palabras, Defer Javascript no permitirá que Javascript se cargue antes de que el HTML haya terminado de analizarse. El riesgo es que el complemento Javascript se dañe y es seguro que JQuery no podrá ejecutarse. Bueno, ¿qué podemos hacer? El HTML terminó de cargarse, JQuery acaba de ejecutarse, hay una gran posibilidad de que no se ejecute.

Por lo tanto, Defer Javascript es adecuado para complementos que no afectan la apariencia del sitio web. Por ejemplo, Google Analytics.js, Adsense.js, Popup.js o widgets externos que no afecten al aspecto general del sitio web.

Veamos la gráfica de Aplazar Javascript :

Cómo utilizar Async y aplazar Javascript

Bien, después de comprender las diferencias entre los tres, pasemos al tutorial.

Para saber qué Javascript debe ser diferido o asíncrono, puede analizar el sitio web de WordPress que utiliza GTMetrix primero. La puntuación media recomendada en GTMetrix es de aprox. 71%. Si cae por debajo de ese valor, se recomienda encarecidamente que su sitio web ejecute Javascript diferido y asíncrono.
Abra su WordPress> Luego agregue un nuevo complemento llamado Javascript asíncrono
Instalar y activar como de costumbre
Vaya a la página Configuración del complemento en Configuración > Javascript asíncrono
Desde esta configuración, verifica la lista de verificación Habilitar Javascript asíncrono
Método de uso: Aplazar (para el método global, utilice aplazar)
Puedes activar el método Async en jQuery
Para Script To Async, puede elegir .js, que generalmente puede afectar la apariencia de la web. Por ejemplo extend-lib.js, retina.min.js, ajax.js, webfont.js
Mientras tanto, para Script to Defer, puedes forzar un complemento que sea un poco testarudo y no afecte la apariencia del sitio web, por ejemplo Google Analytics.js o PopUp.js.
También puede desactivar ciertos complementos ingresando Exclusiones de complementos
Listo, y los resultados finales tras ser probado nuevamente en GTMetrix

Vale, muy fácil, ¿verdad? Entonces, si pregunta, ¿es posible aplazar Javascript y Async Javascript sin utilizar un complemento? ¡La respuesta es sí!

Para posponer el análisis de JavaScript, puede copiar el código siguiente y colocarlo en la línea debajo del script en el archivo wp-includes/functions.php.

function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return "$url' defer ";
}
add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );

Pero no recomiendo ingresar esto manualmente. Especialmente si algunos de nosotros todavía somos principiantes, parece bastante arriesgado editar archivos principales como funciones.php. En realidad, incluso si el complemento que recomiendo no funciona, todavía hay otros complementos que puedes usar. Por ejemplo : WP JavaScript diferido. o Paquete de refuerzo de velocidad

DE ACUERDO. Eso es todo por nuestro tutorial sobre cómo acelerar un sitio web de WordPress en este segundo episodio de Defer Javascript. A continuación, analizaré cómo acelerar un sitio web de WordPress utilizando el método Leverage Browsing Cache. Sólo estad atentos, ¿vale?

Lea también:

Acelere WordPress con optimización de imágenes

Limpieza del código interno de WordPress

Deshabilitar Jetpack de solicitud externa en WordPress

#Sitio #web