Posponer el análisis de JavaScript en WordPress

Es una queja común al ejecutar su sitio de WordPress a través de cualquier herramienta de “puntaje de velocidad de página”: “Retrasar el análisis de JavaScript” y/o “eliminar a JavaScript que bloquea la representación”. Hoy, a partir de un artículo que Fred escribió por primera vez en 2015, discutiré una solución. Es posible de WordPress 4.1, que ha introducido un nuevo filtro, script_loader_tag. Este filtro nos permite cambiar fácilmente la marca HTML de los elementos del script en Enqueue d – es decir, los archivos JavaScript que se han agregado correctamente en un sitio de WordPress utilizando el wp_enqueue_script una función de WordPress.
Con script_loader_tag, ahora podemos resolver fácilmente un problema que puede tener un impacto significativo en la velocidad de la página: mucho JavaScript que bloquea la obra. El problema: JavaScript que bloquea la representación de los archivos de JavaScript largos puede retrasar el navegador para mostrar el contenido de la página, porque su comportamiento predeterminado es primero para interpretar los archivos JS en sí. JavaScript puso la cola que aparece en la sección principal del documento HTML. En Internet, como en la naturaleza, lo principal de una cabeza es que está por encima de un cuerpo, y eso significa algo bastante serio sobre la velocidad del sitio, porque Javascript puede bloquear la representación.
El “bloqueo de la lesión” proviene del comportamiento predeterminado de un navegador web: quiere recibir y procesar todo lo que aparece arriba en la página, antes de moverse a continuación. Esto significa que los archivos de JavaScript largos en su cabeza pueden retrasar el navegador para mostrar el contenido de la página del cuerpo, porque su comportamiento predeterminado es primero para interpretar los archivos JS en sí. En otras palabras, JS bloquea la función de crisol del navegador para mostrar la página para que el usuario realmente lo vea. El resultado puede ser sitios lentos y usuarios frustrados. Google PageSpeed ​​Insights subrayan este problema durante algún tiempo: haga clic para aumentar

Sin embargo, antes de 4.1 y script_loader_tag, la única solución que sabía era mover las escrituras al sótano del sitio. Mover los guiones al sótano es difícil de hacer manualmente. Y los complementos que probé que afirman hacer automáticamente no funcionaron como esperaba. Pasemos directamente a nuestra exitosa historia: Propósito: mucho menos JS que bloquea la reproducción Esto es lo que hemos alcanzado con la solución que presentaremos a continuación:
Haga clic para aumentar

Ahora tenemos solo tres archivos JavaScript que pueden ralentizar una página. El resto todavía está allí, pero se carga en paralelo con el contenido de la página, en lugar de antes.
Remedio: JavaScript pospuesto y asincronizado Lo primero que debe entender son las alternativas a JS de bloqueo: Diferir y Async. Explicaremos la diferencia, pero ambos funcionan de manera similar: permiten que el navegador cargue un recurso JS “en la medida en que el tiempo permita”, mientras se trata de otras cosas (como la representación de la página). Esto significa que no puede confiar en un archivo de JavaScript pospuesto o asincronizado antes de la representación de la página, como podría hacer sin estos atributos, pero la ventaja es que el archivo no ralentizará la velocidad con la que la página se hace visible. Estos son conceptos, – Ahora para el código. (El código completo está disponible en GitHub. Necesitaremos estas manijas para todos los scripts y, desafortunadamente, obtenerlos no es muy simple. Sin embargo, es posible:/ * * Obtener etiquetas de script * gracias http://wordpress.stackexchange.com/questions/54064/how-do-ge-the-handle-for-anqueued-/ad_action (‘wp_print_scripts’,,, ‘wsds_detect_enqueed_scripts’); función wsds_detect_enqueed_scripts () {global $ wp_scripts; Foreach ($ wp_scripts-> cola como $ handle): echo $ handy. ‘| ‘; EndForeach; } Este código imprime una lista de manijas puestos en la cola, separados por | , justo en la cabeza de cada página:
Hará esto solo una vez, luego use “Vea la fuente de la página” para copiar y pegar los manijas en sí.Una vez que haya hecho esto, deshabilite esta sección del código: tenemos nuestras manijas, por lo que no obstruiríamos la cabeza con ellos.Por lo tanto, esta sección se comenta sobre el código GitHub: ¡no quiero ejecutar cada vez!2. El aplazamiento y la asincronización de JavaScript para bloquear la rebelión que descubrí que necesitamos usar diferir y no async para wpshout, por lo que pasaré por el código de diferir.La mayoría de las tareas pesadas aquí provienen de un artículo de Scott Nelle;¡Gracias Scott!
add_filter (‘script_loader_tag’, ‘wsds_defer_scripts’, 10, 3); Función wsds_defer_scripts ($ etiqueta, $ handle, $ src) {// Los mangos de los enqueados queremos diferir $ _scripts = array (‘prismjs’, ‘admin-bar’, et_monarch-oiibunce ‘,’ et_emonarch-cubestom- js ‘,’ wpshout-js-cookie-demo ‘,’ cookie ‘,’ wpshout-no-brogen ‘,’ Goodbye-Captcha-Up-Inscript ‘,’ DevicePX ‘,’ Search-Box-Value ‘,’ Page- Min-height ‘,’ kamn-js-widget-easy-trfeed-widget ‘,’ __ytprefs__ ‘,’ __ytprefsfitVids__ ‘,’ jquey-migra ‘,’ iceram ‘,’ descuC ‘,); if (in_array ($ handle, $ defer_scripts)) {return ‘ ‘. ”

“;} Return $ tag;} La línea add_filter nos dice que este código debe ejecutar un archivo JavaScript en cualquier momento. Está a punto de imprimirse en la página como un elemento de script HTML. Permitirnos filtrar que HTML es el propósito de script_loader_tag.
La verificación más grande en este código es hacer una cosa que define la matriz $ diferencial.Esta matriz enumera los mangos de todos los elementos que queremos posponer: los mangos que hemos encontrado en el paso 1. (¡Por supuesto, sus manijas variarán!) La lógica bajo la definición de la matriz (comenzando con if (in_array ()) Buscando el mango de atributo del script actual en la pintura que acabamos de definir. Si el mango coincide con un elemento de la matriz, entonces cambiamos el script para tener la misma fuente, pero con una nueva propiedad: Difer = “Defer”, que hará que el script no bloquee la representación. Con esta modificación realizada, devuelva el HTML y estamos listos para irnos! (Y finalmente, si no se encuentra el mango, simplemente devolvemos la etiqueta original y sin cambios.). Sepa que este complemento funciona cuando ve la fuente de la página y vea algo como esto en la cabeza:

Cuando se usa async en lugar de la aplazamiento, use async cuando se conecta directamente a una biblioteca de JavaScript externa. El enlace se parecería a algo así como: . Observe lo que es un enlace a la URL completo y JavaScript se ingresará en la cola de Encyuses externos es mucho menos común, al menos para nosotros, porque la mayoría de nuestras colas están en los temas y complementos que alojan su propio código. En cualquier caso, el código Async es exactamente el mismo que el código de diferir, pero con las dos palabras deshabilitadas. Por lo tanto, si tiene muchos scripts de Enquouue alojados externamente, obtener su asíncrono es un proceso técnico muy similar al que acabo de cubrir. Qué retrasar los scripts y las escrituras asincrónicas aún bloquean la representación. Aquí están las reglas básicas a este respecto:
No hace nada por JQuey. JQUEY (TRAT JQUEY) es una adicción clave a muchos otros archivos JS y quiere dejar que se cargue antes.

Cualquier archivo que esté empaquetado en una llamada jQuery. Este código dice prácticamente “espere hasta que se cargue todo el objeto del documento (DOM)”, por lo que la carrera para cargar el archivo JavaScript en la cabeza no tiene demasiado propósito.
En general, puede posponer los archivos JavaScript que se basan en las interacciones del usuario, como clics y cruce de mouse, y archivos que reparan los detalles, como el centro o ocultan un conjunto de elementos.Una vez más, se basan en una página cargada para funcionar de todos modos (es por eso que casi todos se empaquetarán en jQuery (documento) .ready (function () {}). Por lo tanto, debe estar seguro para eliminar la página de antemano. Desafortunadamente, es imposible usar este método para los archivos JavaScript que se han agregado de otra manera que el método correcto para ponerlos en enqueue. Esta es otra razón para preferir este método a otros scripts de modos de carga que pueden parecer funcionar bien a primera vista.
¿Quieres una solución más simple? Retrasar el análisis de JavaScript en WordPress con un complemento debido a la necesidad de posponer el análisis de JavaScript en WordPress, puede encontrar arados ya escritos para hacerlo. La metodología precisa se vuelve un poco menos importante para usted. Si eres una persona tan apresurada (comprensible), apoyarte. Una nota rápida para esas personas apresuradas: qué tan bien puede posponer el análisis de JavaScript con una simple activación de complementos dependerá en gran medida de la naturaleza de su configuración de WordPress. Si tiene un sitio simple con algunos complementos bien mantenidos, supongo que el simple cambio a un complemento como Async JavaScript (del fabricante AutOptimize) es probable que funcione bien. Pero tenga en cuenta que estos complementos pueden causar rupturas de características (basadas en JavaScript) de maneras sutiles que puede notar durante un período. (Esto también es cierto cuando escribe y mantiene el código que discutimos anteriormente, pero probablemente tomará una prueba más exhaustiva cuando escribió el código de análisis de JavaScript que cuando fue tan fácil como una activación de un complemento). Entonces, en ambos casos, ve con cuidado. Los productores de estos complementos probablemente se probaron en general, pero debido a que los sitios de WordPress son tan diversos y variados, probaría una cantidad suficiente antes de usar cualquiera de estos complementos que pospongan JavaScript. Aquí están los tres que encontré en mi investigación: JavaScript Async (arriba) es, con mucho, el más popular y de las personas que crearon el famoso enchufe de cabeza autovalorada. (Rulem Autoptimice aquí en WPShout)
Speed ​​Booster Pack: parece un poco más completo con funciones que el complemento JavaScript Async y algo menos popular JavaScript WP: esto parece estar abandonado, pero incluya aquí para estar completo
Dos formas de posponer (o asíncronizar) el JavaScript de WordPress En esencia, hemos cubierto una forma muy genial y bastante rápida de mejorar la velocidad de su sitio y la satisfacción de los usuarios.El análisis de JavaScript posponiendo puede hacer que su sitio de WordPress sea un gran rango sin ningún impacto notable en la experiencia de lectura.Espero que ahora sepa lo suficiente como para posponer y asíncronizar sus propios archivos JavaScript y ¡gracias por leer!Me encantaría escuchar comentarios o preguntas a continuación.Imagen de crédito: Celine Nadeau