WP Rocket 3.19: Mejoras sin esfuerzo para mejorar la LCP y la estabilidad del diseño

¿Recuerdas cómo los equipos de Fórmula 1 ganan carreras? No es solo un gran cambio, sino muchas pequeñas mejoras que se suman a largo plazo. Nuestro nuevo lanzamiento importante refleja una vez más esta visión de optimizaciones incrementales e inteligentes: ¡conocer a WP Rocket 3.19!

Nuestra última versión se centra en mejorar dos características para que sean accesibles para todos, independientemente de su experiencia técnica. Tomamos procesos complejos que requirieron una optimización manual por página para ser eficientes y los convirtieron en características que funcionan en el fondo, haciendo su magia.

¿Los resultados? WP Rocket 3.19 aporta una mejor experiencia de usuario para sus visitantes gracias a mejorar la estabilidad del diseño y prevenir los cambios de contenido, junto con una mayor velocidad percibida y una mejor calificación de pintura contenta más grande.

En WP Rocket, creemos que todos merecen un sitio web rápido, por eso estamos constantemente encontrando formas de simplificar la optimización de velocidad al tiempo que aseguramos que todos nuestros clientes puedan beneficiarse de nuestras potentes características.

¿Listo para ver cómo estas mejoras fáciles e inteligentes pueden sumar a un mejor rendimiento para su sitio web? Vamos a sumergirnos en los detalles del WP Rocket 3.19 o ver el video a continuación.

Lo que implica WP Rocket 3.19

WP Rocket 3.19 presenta dos mejoras que funcionan detrás de escena para aumentar el rendimiento de su sitio web.

La primera mejora está relacionada con las fuentes de precarga: la característica mantiene el mismo nombre mientras cambia la forma en que funciona y su ubicación, como lo leerá a continuación.

El segundo se enfoca en automatizar la función de solicitudes de solicitudes DNS previas, que ha cambiado a llamarse preconnect a dominios externos y eliminado de la interfaz del complemento; aprenderá la razón detrás de esta elección en la sección dedicada.

Fuentes de precarga en un solo clic

Demos un paso atrás y comprendamos qué es la precarga de fuentes y por qué es importante para el rendimiento de su sitio web.

Explicando la precarga de fuentes

La precarga de fuentes es una poderosa técnica de optimización que puede mejorar la forma rápida y sin problemas que aparece el texto en su sitio web.

He aquí por qué: cuando un visitante llega a su sitio web, su navegador necesita cargar no solo el contenido de sus páginas, sino también sus fuentes relacionadas. Sin precargar, esto es lo que típicamente sucede:

1. El navegador comienza a mostrar su texto usando una fuente predeterminada.

2. Luego descubre en su CSS que necesita cargar una fuente personalizada, la que eligió.

3. Una vez que se carga la fuente personalizada, el texto cambia para usar esta nueva fuente en lugar de la predeterminada.

Este proceso puede causar lo que se conoce como un destello de texto no establecido (fout). Fout es un breve momento en que su texto de repente cambia de apariencia a medida que se carga la fuente personalizada.

Puede adivinar lo que sucede después: el diseño de su página tiende a cambiar. Tal cambio no solo es visualmente desagradable, sino que también puede afectar negativamente el grado de desplazamiento acumulativo de diseño (CLS), uno de los vitales de la web principales de Google.

La precarga de fuentes ayuda a abordar este problema diciéndole al navegador que sus fuentes personalizadas son importantes y que deben descargarse de inmediato, incluso antes de analizar todo el código CSS. Como resultado, es más probable que la fuente personalizada esté lista cuando el navegador muestra por primera vez el texto, reduciendo o eliminando el cambio de fuente y garantizando más estabilidad de diseño.

¿Por qué deberías precargar las fuentes?

El beneficio de precargar las fuentes y evitar los cambios de diseño está estrechamente relacionado con la mejora de la experiencia del usuario, lo que significa entregar una excelente primera impresión y asegurarse de que sus visitantes estén dispuestos a permanecer en su sitio web y potencialmente convertirse.

Además, la precarga de fuentes también puede mejorar su grado de pintura contento más grande (LCP), otra vital web central que mide la rapidez con que el elemento de contenido más grande en su página se vuelve visible. Al sumergirse en los detalles, la precarga de fuentes puede optimizar el rendimiento de LCP cuando el elemento LCP es un nodo de texto, que es el caso de un promedio de 20% de los sitios web entre dispositivos móviles y escritorio.

3.19: Conozca la nueva función de fuentes de precarga

Si bien la precarga de fuentes puede generar estas ganancias de rendimiento significativas, notamos que nuestros clientes apenas usaron esta función o no siempre se implementó correctamente. Todo lo contrario: las fuentes de precarga demostraron ser contraproducentes en cuanto al rendimiento. Es por eso que queríamos hacer que esta opción sea más fácil y accesible para todos nuestros clientes al tiempo que reduce su implementación incorrecta.

Y aquí estamos: WP Rocket 3.19 hace de las fuentes de precarga un proceso automatizado que puede habilitar con un solo clic.

Ya no necesita identificar manualmente las URL de los archivos de fuentes correctos y precargarlas para que la función funcione de manera efectiva. Después de habilitar la opción, WP Rocket detecta automáticamente, en cada página, que las fuentes se usan anteriormente y deben priorizarse, tanto en dispositivos móviles como de escritorio. Luego precede solo estas fuentes relevantes, lo que resulta en una optimización más precisa y eficiente.

Esta optimización marca la diferencia porque la precarga de los activos no utilizados podría dañar el rendimiento. Por ejemplo, si una fuente precargada no se usa dentro de los primeros segundos de la carga de la página, los navegadores como Chrome pueden emitir una advertencia. Al centrarse solo en las fuentes que realmente se necesitan por encima de la reducción, la nueva opción de fuentes de precarga lo ayuda a evitar estos problemas potenciales y garantiza la precarga óptima de la fuente.

Tenga en cuenta que ahora encontrará la nueva función de fuentes de precarga en la pestaña Medios:

Si ha especificado previamente fuentes manualmente, la opción automatizada se habilitará de forma predeterminada.

En pocas palabras : la nueva función de fuentes de precarga optimiza automáticamente la carga de fuentes, asegurando una experiencia más suave para sus visitantes desde el momento en que aterrizan en su sitio web, y solo requiere un clic.

Preconectar a dominios externos: un nuevo proceso automatizado

En cuanto a la característica anterior, comencemos explicando brevemente el impacto de la preconección de los dominios externos en la velocidad de su sitio web.

Preconectar a dominios externos en inglés simple

Preconectar a los dominios externos es una poderosa técnica de optimización que afecta positivamente la carga de recursos.

Cuando su sitio web necesita cargar recursos como fuentes o scripts de dominios externos, su navegador generalmente necesita establecer una conexión con estos dominios primero. Este proceso de conexión puede agregar un retraso innecesario al proceso de descarga de activos externos, impactando métricas específicas que dependen de esos activos externos.

Preconnect aborda este problema diciéndole al navegador de antemano qué conexiones se necesitarán. Esto permite al navegador configurar estas conexiones temprano, reduciendo el tiempo que lleva cargar recursos externos cuando se necesitan.

Esta optimización trae dos beneficios:

1. Tiempo de carga mejorado : al configurar las conexiones por adelantado, su sitio web puede comenzar a cargar recursos externos más rápido, y las páginas también se cargan más rápido.

2. Rendimiento de LCP mejorado : si su elemento de pintura contento más grande es una fuente de un dominio de terceros, preconnect puede ayudarlo a cargarse más rápido, mejorando potencialmente la puntuación LCP.

3.19: desde las solicitudes de DNS prefetches hasta la preconente hasta dominios externos

Notamos que la función de solicitudes DNS previas también estaba subutilizada y a menudo mal aplicada. Es por eso que decidimos automatizar esta opción, eliminándola de la interfaz WP Rocket y renombrándola para preconectar a dominios externos.

Con WP Rocket 3.19, esta potente optimización funciona en segundo plano y no necesita estar habilitada. Es por eso que ya no encontrarás esta característica en la configuración del cohete WP.

Esto es lo que necesita saber sobre esta mejora:

1. Es un proceso totalmente automatizado : ya no tiene que identificar manualmente qué dominios incluir al implementar la optimización. WP Rocket ahora lo maneja automáticamente.

2. Se aplica solo en páginas donde se necesita, tanto en dispositivos móviles como en escritorio, lo que resulta en un enfoque más eficiente y dirigido que es consistente en todos los dispositivos.

Como se explicó anteriormente, esta característica puede conducir a tiempos de carga de página más rápidos y una puntuación LCP mejorada, todo sin que tenga que levantar un dedo.

Si desea deshabilitar la función, debe aplicar el siguiente filtro:

 add_filter('rocket_preconnect_external_domains_optimization', '__return_false');

Sugerimos deshabilitarlo solo si su sitio web tiene más de diez dominios para precargar; en este caso de borde, es mejor dejar que el navegador administre el proceso. Si bien generalmente hay un par de dominios externos por página, puede verificar si este escenario se aplica a su sitio web mirando el código fuente de la página y el número de ocurrencias de datos de datos de datos de datos.

En pocas palabras : la característica de los dominios externos es una nueva mejora automatizada que establece conexiones más rápidas entre su sitio web y los recursos externos al tiempo que elimina el riesgo de implementación incorrecta.

Rendimiento ajustado: optimizaciones automatizadas en acción

Hablando de las características del cohete de WP que funcionan automáticamente, preconnect to Dominios externos es la última, y ​​se suma a las existentes:

• Caché de la página (incluido el caché móvil)

• Optimizar imágenes críticas

• Representación perezosa automática

• Almacenamiento en caché del navegador

• Compresión gzip

• Soporte de origen cruzado para fuentes web

• WooCommerce refrescar fragmentos de carro caché

• Optimizar los archivos de Google Fonts

• Desactivar WordPress Emoji

Todas estas características no tienen una interfaz de usuario, solo funcionan. Tenga la seguridad de que si lo necesita, siempre puede deshabilitarlos usando un filtro o un complemento auxiliar.

Estas características automatizadas se encuentran en la parte superior de las opciones que se activan cuando activa por primera vez WP Rocket, como Minify CSS y JS, Cache Lifespan, precarga de caché, enlaces de precarga y control de corazón.

¡No es de extrañar que su sitio web obtenga un impulso de velocidad tan pronto como habilita nuestro complemento!

Si tiene curiosidad sobre el impacto del mundo real de estas automatizaciones, tenga en cuenta que los resultados pueden variar según su sitio web específico. Si bien WP Rocket 3.19 trae nuevas mejoras, las mejoras de rendimiento que verá se suman a las ganancias de velocidad ya logradas por nuestras características existentes.

Concluir

WP Rocket 3.19 fortalece nuestro compromiso de seguir el enfoque de "decisiones, no opciones" y hacer optimizaciones complejas como procesos automatizados. Nos esforzamos por tomar las decisiones correctas para usted, para que no tenga que gastar tiempo y esfuerzo para comprender qué es lo mejor para su sitio web.

Estamos eliminando gradualmente las barreras al alto rendimiento, asegurando que más usuarios puedan beneficiarse de las optimizaciones avanzadas, ¡y aún está por llegar!

¿Listo para ver cómo estas nuevas funciones automatizadas pueden ayudar a su sitio? Actualice a WP Rocket 3.19 o pruébelo con nuestra garantía de devolución de dinero de 14 días. ¡Experimente de primera mano cómo estamos haciendo que la optimización sea más simple y háganos saber sus pensamientos en los comentarios!