Retrasar las páginas de ejecución de JS y precarga antes de hacer clic: Bienvenido a WP Rocket 3.7

Después de celebrar el séptimo aniversario en julio y después de un mes dedicado al desarrollo de productos, abrimos septiembre con ira: ¡Bienvenido WP Rocket 3.7! El Journal of Changes a esta nueva versión principal es rica en mejoras y no debe perderse. En este artículo, nos centraremos en las dos características principales de la versión 3.7: retraso en la ejecución de JS y la precarga del enlace. ¿Tienes curiosidad por saber más sobre ellos? ¡Solo tienes que seguir leyendo! Lo nuevo en WP Rocket 3.7 Hay muchas características que enriquecen esta nueva versión principal. Dejamos la curiosidad de descubrir en nuestro diario de cambios que tendrán un impacto más fácil en la experiencia del usuario.
Nos gustaría centrarnos por otro lado en las dos características que causarán una mejora significativa en la puntuación de la velocidad de la página, el tiempo de carga y la velocidad percibida de su sitio:
Retraso en la ejecución de JavaScript
Enlaces de precarga
Además, debido a que queremos mantener la interfaz con el usuario siempre limpia y clara como sea posible, hemos eliminado algunas opciones del fondo del cohete WP: detallaremos estos cambios a continuación en este artículo. Si prefiere tener una vista previa de video de las noticias en esta versión, aquí está nuestro video de presentación:
Para conocer v3.7 en detalle, ¡siga leyendo!
Retrasar la ejecución de JavaScript ¿Está familiarizado con el concepto de carga perezosa? Probablemente haya escuchado sobre esto en términos de gestión de imágenes y optimización. La carga perezosa para las imágenes es una de las primeras características que hemos incluido en el cohete WP, y ahora la última versión de WordPress, 5.5 “Eckstine”, lo ha introducido implícitamente. El principio detrás del estadísticas perezosas es cargar los archivos solo cuando el usuario que visita una página los necesita. Con WP Rocket 3.7, aplicamos el mismo principio a los archivos JavaScript. No todos los scripts son relevantes para el rango de la página inicial y su retraso puede mejorar el tiempo de carga. Por ejemplo, piense en un script que administra una ventana emergente con la intención de salir: dicho script no es relevante durante la carga inicial de la página, porque se activará solo cuando el usuario esté a punto de salir de la página.
La ventana emergente con la intención de salir del sitio web de WP Rocket Este tipo de script JS se puede posponer. Como resultado, reducirá el tiempo de ejecución de JavaScript. Puedes obtener una gran ganancia de rendimiento. ¿Como funciona? Al trabajar esta opción en la pestaña Optimización de archivos, WP Rocket revelará un área de texto donde puede ingresar los scripts que desea posponer. El retraso en la ejecución de JavaScript es una función de registro, por lo que depende de usted decir WP Rocket qué archivos en línea o JavaScript retrasar.

El área de los scripts prepoblados en la configuración del cohete WP para hacer esto, especifique las palabras clave que identifican archivos de aplazamiento y WP Rocket buscarán esas palabras clave. Nuestro complemento analizará todos los scripts que se encuentran en la página, no solo en su URL. Esto significa que puede incluir palabras clave que se dirigen a los atributos de datos o cualquier otro atributo en la etiqueta de script; Para JavaScript en línea, puede usar cualquier palabra clave dentro del código en sí. Lo único a lo que debe prestar atención es la elección de palabras clave únicas, de modo que WP Rocket no se confunde con la identificación del script. WP Rocket pre-Polte Esta área de texto con algunos scripts, cuando se identifica algunos que pueden retrasarse de manera segura de manera segura de manera segura de manera segura . Por ejemplo, esta es la lista de scripts de terceros que posponemos en nuestro sitio web: -Google Analytics-Facebook Pixel-Linkedin Pixel-Twitter Pixel-Optinmonster-Ylark Chat Si alguno de los scripts que WP Rocket incluye por defecto, puede hacer problemas, puede Quítelos de la lista en un momento. ? Obtenga más información sobre esta nueva característica con nuestra documentación. ¿Qué puedes obtener con esta opción? Aunque no podemos predecir números precisos que se aplican a todos los sitios web (¡sabes lo difícil que es esto cuando se trata de pruebas de velocidad!), Podemos mostrarle los resultados que hemos logrado en el sitio web de WP Rocket.

Antes de activar el retraso de la opción de ejecución de JS, probamos la velocidad del sitio web de WP Rocket con GTMTRIX:
Prueba de velocidad GTMTRIX antes de que la ejecución de JS se retrase y algunas pruebas de velocidad. Si bien el puntaje de la versión de escritorio de nuestro sitio ya era muy bueno (97), para la versión móvil comenzamos desde una puntuación bastante baja: el puntaje de la velocidad de la página para el sitio móvil WP Rocket antes de retrasar la ejecución JS está listo para ver qué ¿Sucedió cuando activé la opción de ejecución de JS de retraso? ? Después de que el cohete WP comenzó a retrasar la ejecución de JS, la relación GTMTRIX se convirtió en un campo verde. ?
Prueba de velocidad de GTMetrix después de retrasar la ejecución de JS pero PageSpeed ​​SCUENT? Ver por ti mismo.

PageSpeed ​​Score for WP Rocket Mobile Sitio Después de retrasar el tiempo de ejecución de JS, resumí los resultados en esta tabla, por lo que es más fácil evaluarlos en una mirada:

<

Como puede ver, hemos obtenido un sorprendente descuento del 65% en el tiempo de carga (desde 2.6s a 0.9s) y una mejora del 87% en la puntuación de la velocidad móvil. Dado que la velocidad móvil es cada vez más importante en los ojos y los motores de búsqueda de Google todos los días, ¿estamos muy satisfechos con este resultado?

Enlaces de precarga Hay una multitud de formas de optimizar el rendimiento de su sitio y hacer que se cargue más rápido; WP Rocket ya juega un papel importante en él. Pero, ¿qué pasa con la optimización de su sitio para que se cargue más rápido desde un punto de vista psicológico? El rendimiento percibido es una medida de lo rápido que un usuario piensa que es su sitio, no necesariamente qué tan rápido dicen las pruebas de velocidad. El propósito es mejorar su sitio para que se sienta más rápido que el tiempo de carga objetivo. He desarrollado la opción de enlaces de precarga para mejorar el rendimiento percibido.

¿Como funciona? Precaadear un enlace se llama técnicamente la precarga del enlace. ¿Qué significa? Una buena definición es la que se encuentra en los documentos web de MDN: tomar enlaces es un mecanismo de navegador, que utiliza el tiempo de inactividad del navegador para descargar o hacerse cargo de los documentos que el usuario podría visitar en el futuro cercano. Una página web le da al navegador un conjunto de pistas de precarga, y después de que el navegador ha terminado de cargar la página, comienza a silenciar los documentos especificados y los almacena en el caché. Cuando el usuario visita uno de los documentos tomados de antemano, se puede transmitir rápidamente desde el caché del navegador.

Cómo funciona precarga: la fuente WP Rocket 3.7 utilizará una estrategia de anticipación temprana para anticipar qué página aún puede navegar al usuario. Como resultado, el usuario percibirá las páginas relacionadas con esas direcciones de URL como se cargan instantáneamente. ¿Significa esto que podemos predecir el futuro ahora? Bien cerca. ? WP Rocket se ha convertido en un excelente observador de acciones que tienen lugar en una página: detecta cuándo el usuario cruza el mouse sobre un enlace o cuando toca un enlace mientras se desliza, corre o aumenta. Cuando detectamos que el usuario está interesado en una URL, precargamos esa página automática. En la pestaña precarga, encontrará una nueva sección dedicada a los enlaces de precarga. Es un cuadro de selección para activar/desactivar la opción: la opción de precarga de los enlaces en el cohete WP para evitar resultados inesperados, también pensamos en una lista de tipos de URL que WP Rocket 3.7 excluye automáticamente de este comportamiento.
Cualquier URL de WP-Admin o páginas de inicio de sesión

Las direcciones de URL ya excluidas de la caché, de acuerdo con su configuración de cohetes WP
Enlaces a archivos de imagen

Enlaces que incluyen una cadena de consulta o un ancla

URL externos
Importante: por el momento, esta función funciona solo en Chrome. Safari, Opera, IE y Edge actualmente no aceptan la adquisición previa de los enlaces. Firefox pide una solicitud de adquisición previa del enlace; Sin embargo, hay un error en Firefox que bloquea que la página anteriormente tomada se transmite desde la memoria preliminar de adquisición FF. Obtenga más información sobre esta nueva característica con nuestra documentación. Al mejorar los elementos vitales de la web básica en los últimos meses, hemos visto de cerca la evolución de los vitales de la web central de Google y trabajamos para garantizar que WP Rocket tenga estos nuevos estándares. La versión 3.7 ya hace un buen progreso en la mejora de los vitales de la web central. ? Por ejemplo, agregamos automáticamente la muestra de fuente: intercambio a archivos CSS que contienen una fuente-FAC. Al agregar esta propiedad a la fuente, instruimos al navegador que use una fuente del sistema mientras se descarga la fuente personalizada. Una vez que se completa la descarga de la fuente personalizada, la fuente del sistema se reemplaza con la fuente personalizada. Esto significa que sus usuarios pueden interactuar más rápido con el sitio web sin esperar a que la fuente descargue. Al mismo tiempo, esta mejora mejora el tiempo de representación y la pintura de contenido más grande (LCP). También mejora la experiencia del usuario, ya que evita el “rayo del texto invisible”, el texto invisible durante la carga de fuentes. Por otro lado, las nuevas funciones de enlace precargantes que acabamos de describir en el párrafo anterior mejorará valores como la primera pintura y el tiempo para interactivos;
También puede hacer que la navegación adicional se vea al instante. ¡Y esto es solo el comienzo! ¿Una breve mirada a lo que sigue? ? Ya estamos trabajando en algunas buenas noticias para las siguientes versiones de WP Rocket, como la eliminación de CSS no utilizada o la carga asincrónica para optimizar la carga y la reproducción de la fuente web. ? Una interfaz de uso más limpia: las opciones eliminadas de la interfaz de usuario “decisiones, no opciones” es el lema que ha liderado nuestra filosofía de desarrollo desde el principio, aquí en WP Rocket. No queremos que las personas que usan nuestro complemento se sientan abrumadas por docenas de opciones y opciones para hacer la configuración. Después de esta filosofía, a lo largo de los años siempre hemos tratado de mantener un equilibrio entre las opciones básicas y avanzadas y la interfaz con el usuario limpio. Con WP Rocket 3.7, aprovechamos la oportunidad para hacer algo de limpieza y centrados en estas dos características: optimizar las fuentes de Google
Minimiza html
Optimizar las fuentes de Google a partir de ahora, la función Optimizar Google Fonts es predeterminada en WP Rocket. Según los datos que tenemos, aproximadamente el 94% de nuestros clientes mantienen esta opción activada. El resto de los usuarios que no activan esta opción probablemente no usen fuentes de Google en su sitio o se deshabilitan voluntariamente por una cierta razón. Las incompatibilidades debido a esta característica son raras y podemos contar con los dedos de un soporte de los cupones de soporte que recibimos relacionados con ella. Estos factores nos ayudaron en nuestra decisión de eliminar esta opción de la interfaz de uso y mantenerla activada automáticamente en segundo plano. ? Si no ha activado previamente la opción, no tendrá activo después de actualizarse a V3.7. Para activarlo, puede acceder a la pestaña Herramientas y usar el botón “Optimización de la fuente de optimización”: cómo activar la optimización de la fuente de Google minimiza HTML. Decidimos eliminar por completo esta característica del cohete WP, porque ahora está desactualizado. Gtmetrix finalmente retiró su recomendación para minimizar HTML, porque el efecto en el rendimiento general ya no es significativo. Las herramientas de rendimiento, como las herramientas de PageSpeed ​​Insight y Pingdom, han ignorado esta recomendación durante algún tiempo, por lo que estamos seguros de que la opción Minify HTML ya no es necesaria. Como resultado de estos cambios, eliminaremos el área de configuración básica de la pestaña Optimización de archivos: