Aplazar imágenes fuera de pantalla: cómo solucionar esta oportunidad de Google Lighthouse

Medir el rendimiento de su sitio a menudo ha sido un trabajo impredecible. Esto se debe a que las herramientas disponibles no nos dieron una idea adecuada de la experiencia del usuario en relación con el rendimiento de ese sitio. Sin embargo, Google Lighthouse soluciona muchos de estos inconvenientes y lo hace posible para que pueda adaptarse a su flujo de trabajo de desarrollo. Una de las 'oportunidades' dentro de Lighthouse es diferir las imágenes fuera de pantalla en WordPress. La buena noticia es que esto es fácil de lograr.

Para esta publicación, veremos 🔎 cómo diferir imágenes fuera de pantalla en WordPress usando código y complementos. Sin embargo, primero tenemos que aclarar algunos términos sobre Google Lighthouse, luego hablar sobre dónde debe ubicarse la métrica Deferir imágenes fuera de pantalla en su lista de prioridades.

La diferencia entre una recomendación de auditoría y una oportunidad

Antes de adentrarnos en cómo aplazar las imágenes fuera de pantalla en WordPress, es importante comprender cómo encaja esta instrucción en Google Lighthouse. Es una 'oportunidad' de desempeño más que una recomendación de auditoría. Aquí está la diferencia:

• Recomendación de auditoría . Esto tendrá un impacto definitivo en sus puntajes dentro de Google Lighthouse, y debe darle prioridad a estas métricas.
• Oportunidades Si bien estos seguirán teniendo cierta importancia, no afectarán sus puntajes de auditoría. Como tal, puede considerarlos una preocupación secundaria.

La métrica Aplazar imágenes fuera de pantalla es una oportunidad. Esto significa que aún puede tener un impacto, pero es algo que puede observar una vez que su puntaje no pueda mejorar más.

Diferir imágenes fuera de pantalla: una definición

Su sitio web probablemente utilizará imágenes en todas las secciones de sus páginas. Algunos de estos se mostrarán 'sobre el pliegue', es decir, en la pantalla sin necesidad de desplazarse. Como tal, las imágenes fuera de pantalla representan todo lo demás.

La métrica Aplazar imágenes fuera de pantalla se refiere a elementos visuales que cumplen cualquiera de los siguientes cuatro criterios:

• Una imagen debe comenzar debajo del área visible de la página y terminar tres veces la altura de esta área.
• Las imágenes superpequeñas (aquellas con un tamaño inferior a 0,02 MB) no se tendrán en cuenta en la métrica Aplazar imágenes fuera de pantalla .
• Las páginas que tardan más de 50 ms en cargarse activarán la oportunidad.
• Si su página define un atributo de carga, no verá imágenes fuera de pantalla diferidas en absoluto. Alerta de spoiler: ¡siéntete cómodo con loading="lazy" ahora!

Es más, es posible que encuentre que un sitio con muchas imágenes fuera de la pantalla verá puntuaciones deficientes en la pintura con contenido más grande (LCP). Esto trae a colación un cambio confuso en Google Lighthouse 10, que trataremos a continuación.

Mejorar el tiempo de interacción (TTI) es una métrica depreciada

En versiones anteriores de Google Lighthouse, las imágenes diferidas fuera de pantalla afectaban a TTI. Sin embargo, Google ahora considera que esta es una métrica depreciada. La ponderación del 10 % que esto le dio a la puntuación general de la auditoría de rendimiento se transfirió al cambio de diseño acumulativo (CLS) y ahora proporciona una ponderación del 25 % [1][2] .

Esto genera un problema, ya que, independientemente de si difiere o no las imágenes fuera de la pantalla, esto no provocará un cambio de diseño. Como tal, esta es la razón por la cual Aplazar imágenes fuera de pantalla ahora es solo una oportunidad, en lugar de una recomendación de auditoría completa.

Por qué Google Lighthouse le pedirá que aplace las imágenes fuera de pantalla

A pesar de la relegación de Defer offscreen images , todavía tiene cierta importancia para la velocidad de carga y el rendimiento. Puede ver el impacto de las imágenes fuera de pantalla completamente cargadas en segundos dentro de cualquier herramienta que elija:

Si bien esta métrica no afecta CLS o TTI, puede tener un impacto en LCP, aunque menor en muchos casos. También es un buen recordatorio de que solo debe cargar imágenes cuando lo necesite. A continuación, discutiremos por qué.

Por qué no deberías cargar todas tus imágenes a la vez

En la conversación, todos trabajamos sobre el 'principio cooperativo'. Esta no es una lección de ciencias sociales, así que no entraremos en muchos detalles aquí. Sin embargo, hay una faceta importante de este concepto que es importante para la métrica Deferir imágenes fuera de pantalla . La 'máxima de cantidad de Grice' establece que solo debe revelar tanta información como sea necesario para establecer el contexto.

¿Porque es esto importante? Porque si das demasiada información, esto puede causar una sobrecarga para el oyente (entre otros problemas).

Como tal, ¡tampoco deberías cargar todas las imágenes de tu sitio a la vez! Esto se debe a algunas razones sólidas:

• Un usuario no verá las imágenes fuera de la pantalla y, de lo contrario, consumirá los recursos que necesitará para los elementos en la pantalla.
• Cargar imágenes fuera de la pantalla podría contribuir a una experiencia de usuario (UX) deficiente porque una página se cargará sin que suceda nada importante dentro de la ventana gráfica.
• Para el usuario, esto también podría costarle económicamente. Por ejemplo, considere a alguien que navega a un sitio que no difiere ninguna imagen fuera de pantalla mientras usa datos móviles, en lugar de Wi-Fi.

Dado que el enfoque de Google Lighthouse está en UX y cómo lo afecta el rendimiento percibido, es vital comprender todo lo anterior. La buena noticia es que hay una forma sencilla de diferir las imágenes fuera de pantalla.

Cómo diferir imágenes fuera de pantalla en su sitio

La respuesta es: carga diferida. Esta es la forma más sencilla y eficaz de reducir el impacto de las imágenes fuera de pantalla en el rendimiento percibido de su sitio. Aún mejor, la mayoría de los navegadores admiten la carga diferida:

Sin embargo, Firefox solo admite la carga diferida para imágenes, lo que importará si elige implementar esto para marcos en línea. Aún así, tiene varias formas de implementar esto. El enfoque principal utiliza el atributo loading HTML dentro de un elemento <img> o <iframe> . Obtendrá la opción de usar tres valores diferentes:

• eager Esto le indicará al navegador que cargue estas imágenes primero. Es la opción predeterminada, y es tan buena como no incluirla en absoluto, ya que las imágenes siempre se mostrarán independientemente de dónde se encuentren en la página.
• lazy Esto aplazará la carga de una imagen o iframe hasta que alcance una distancia codificada desde la ventana gráfica. La distancia exacta puede diferir entre los navegadores, y también querrá especificar siempre las dimensiones de la imagen.
• auto El navegador elegirá la mejor opción para el trabajo.

Esto es tan simple de implementar como cabría esperar:

 <img src="image.png" loading="lazy" alt="" width="200" height="200">

Por supuesto, no hay nada que ver en la interfaz aquí, porque la imagen estará fuera de la pantalla y será invisible de todos modos.

Si elige utilizar páginas móviles aceleradas (AMP), puede implementar la carga diferida de forma automática utilizando el elemento amp-img . Cuando se trata de otras plataformas, los módulos o complementos son la mejor manera de implementar la carga diferida.

Si desea diferir las imágenes fuera de pantalla en WordPress, querrá usar un complemento dedicado para hacerlo. De forma predeterminada, WordPress implementa la carga diferida para todas las imágenes, pero es posible que este amplio espectro no se adapte a sus necesidades exactas.

Uso de complementos de WordPress para agregar carga diferida a su sitio

Siempre que desee agregar alguna funcionalidad adicional a WordPress, un complemento siempre es su mejor opción. Cuando se trata de carga diferida, este también puede ser el caso.

WordPress tiene una serie de complementos que pueden ayudarlo a agregar la carga diferida, pero no todos son iguales. Por ejemplo, algunos tienen calificaciones y reseñas bajas, otros no reciben muchas actualizaciones y algunos incluso no pueden proporcionar el nivel adecuado de funcionalidad. Sin embargo, Optimole puede entregar los productos cuando se trata de compresión de imágenes y carga diferida.

Esto no será una descripción general de lo que Optimole puede hacer en general: nuestro sitio hermano, Themeisle, puede mostrárselo. En su lugar, destacaremos las opciones rápidas y sencillas que tiene para cargar imágenes de forma diferida. Para encontrar las opciones correctas, diríjase a la pantalla Medios > Optimole > Configuración , luego busque el interruptor Escalar imágenes y carga diferida . Querrás asegurarte de que esté activado:

Una vez que haga esto, una gran cantidad de opciones estarán disponibles en la sección Avanzado> Lazyload :

Esto le brinda un valioso conjunto de opciones con las que trabajar. Por ejemplo, puede habilitar un marcador de posición para sus imágenes, alternar entre el navegador nativo o la carga diferida clásica, habilitar el escalado de imágenes y más.

Sin embargo, hay dos configuraciones que querrá investigar más a fondo. El primero le permite excluir un número determinado de imágenes de la carga. El valor predeterminado es tres, pero puede establecerlo en la cantidad de imágenes que tenga en la parte superior de la página. Significa que implementará la carga diferida para todas las imágenes en el sitio:

La otra característica interesante es la capacidad de especificar selectores de CSS para ayudarlo a cargar imágenes de fondo de forma diferida:

Esto le brinda una manera de personalizar toda la experiencia de carga diferida en función de sus necesidades y la puntuación de Lighthouse, pero conserva cierta flexibilidad. Además, ¡todo lo anterior es posible con la versión gratuita de Optimole!

Conclusión 🧐

Si las imágenes no están en la pantalla, no necesita cargarlas. Sin una solución como la carga diferida, puede prolongar el tiempo que tarda su sitio en cargarse. También afectará algunas de las métricas más importantes relacionadas con el rendimiento. La oportunidad de aplazar las imágenes fuera de pantalla de Google Lighthouse le da un empujón para implementar algún tipo de carga diferida, y hay muchas formas sin código de hacerlo.

Por ejemplo, Optimole es uno de los mejores complementos para ayudarlo a diferir imágenes fuera de pantalla en WordPress. Puede establecer opciones con una mayor especificidad que el enfoque global "siempre activo" que adopta WordPress. Sin embargo, existen otros complementos que también lo ayudan a hacer esto, como los complementos de almacenamiento en caché. Incluso la ruta de codificación es sencilla y, lo que es mejor, obtiene soporte de casi todos los navegadores.

¿Se convertirá Optimole en su método para diferir imágenes fuera de pantalla en WordPress? ¡Comparta sus pensamientos con nosotros en la sección de comentarios a continuación!