Lazy Sube una imagen con dimensiones aplicadas en WordPress

En este artículo, discutiremos cómo cargar perezosamente una imagen con dimensiones aplicadas en WordPress. Es posible navegar a través de su consola Chrome DevTools y cumplir con este mensaje de error: [Intervención] Un elemento fue cargado con carga = Lazy, pero no tiene dimensiones especificadas. La especificación de tamaño mejora el rendimiento. ¿Qué significa este error de carga perezoso? Antes de que podamos remediar este error, definamos exactamente lo que significa. Si ve este mensaje de error, probablemente usted sea perezoso en WordPress. Lo que esto significa es que la imagen no se cargará a menos que el visitante se ejecute. Esto reduce la cantidad de datos transferidos cuando el sitio se carga y acelera la velocidad general de la página.
Este video rápido visualiza perfectamente cómo funciona la carga perezosa. Hay muchos complementos de carga perezosos comunes que puede usar para implementar esta función en su sitio de WordPress:


Y muchas otras opciones. Estos complementos generalmente implementan una carga perezosa al encontrar cada etiqueta de imagen y agregar un atributo de carga perezoso. Esto se hace de la siguiente manera:

También puede elegir hacer esto manualmente, agregando el atributo cargando = “perezoso” Necesita tener esta funcionalidad.
La definición oficial de lo que esto realmente hace es la siguiente: * “perezoso” para posponer la carga hasta que la imagen o el iPhame alcancen un umbral de distancia desde la ventana de vista. Este error se activa porque tiene una carga activada perezosa, pero no especifica el tamaño de la imagen. Esto significa que los espacios sustituyentes se han colapsado antes de que se cargue la imagen. Especificando las dimensiones de una imagen antes de cargar, el navegador cargará un sustituto de que se cargue esa imagen específica. Por ejemplo, cada uno especifica una imagen que tiene un tamaño de 500 x 600 píxeles, habrá un espacio de 500 x 600 píxeles para cargar. Esto significa que no empujará el contenido hacia arriba y hacia abajo (el término oficial para este fenómeno está “reflejando”). Si no especifica las dimensiones del sustituyente, la imagen empujará el contenido hacia arriba y hacia abajo (fuera de la carretera) A medida que se carga, cuando el visitante se ejecuta en la ventana de vista. A Chrome no le gusta esto, desencadenando el error de carga perezoso: [Intervención] Un elemento estaba cargado con carga = perezoso, pero no tenía dimensiones especificadas. La especificación de tamaño mejora el rendimiento. Este es un problema con las imágenes reales, no con el complemento individual y se desencadena por la carga perezosa nativa de Chrome. (Una nota secundaria, este es un cambio de apariencia. En algunos casos, los cambios de apariencia pueden ser malos, pero estos no se consideran cambios negativos de apariencia porque el usuario desencadenan).
¿Es este un gran problema? Si encuentra este error, no es un problema masivo. Google no penalizará la clasificación del sitio web si tiene este problema. En el peor de los casos, es una desventaja menor para los visitantes, porque el contenido se mueve a medida que la imagen se carga en la página. Cómo remediar esta la forma más fácil de solucionar el problema de carga de imágenes perezosas en WordPress es hacer como la relación de error Sugiere: Agregue dimensiones a las imágenes cargadas perezosamente en WordPress. Esto significa que, en lugar de verse así:

Tu imagen html debería verse así:


Por lo general, WordPress agregará automáticamente la imagen con atributos y altura. Sin embargo, si tiene que hacer esto manualmente, puede hacerlo desde el editor de Gutenberg o la pestaña de texto en el editor clásico. Si ninguno de estos remedios funciona, puede intentar cambiar su complemento de carga perezoso y/o tema. Sin embargo, esto puede ser poco práctico, especialmente desde el punto de vista del tema. En este caso, es posible que desee probar este complemento que encontré en GitHub. Pasa sobre todas las imágenes en la publicación y las envuelve en una estructura de la figura. También hace que la imagen receptiva tenga espacio reservado en la página, evitando así el reflujo (o movimiento de contenido).

https://github.com/sabatinomasala/codecaptain-image-to-figure-converter Otro remedio técnico sería agregar dimensiones a las funciones de las funciones.php para ciertas dimensiones de la imagen de la imagen. Puede especificar el tamaño de la imagen y luego adjuntar un tamaño estándar a ese tamaño. También puede agregar nuevas dimensiones estándar para WordPress. add_image_size (String $ name, int $ width, int $ altura, bool 600, 350, verdadero); add_image_size (‘mediano’, 600, 350, verdadero); En realidad, hay muchas cosas que puede hacer sobre esta función y se discuten en la referencia de los desarrolladores de WordPress. Esto puede funcionar, pero eliminar la capacidad de respuesta de la imagen. Otra solución más complicada, pero que probablemente funcione mejor en todas las situaciones se llama “truco de fondo”. Introducido en 2013, en un artículo de revista increíble, este truco especifica un sustituto de la relación de apariencia receptiva y un tamaño para la imagen. Básicamente, envuelve la imagen en un DIV y utiliza el fondo del relleno para dimensionar el DI para que coincida con un 16 a 9. La imagen luego se dimensiona para llenar ese espacio reservado. Aquí está el código, de este artículo:
.Img-Container {posición: relativo;Botón de relleno: 56.25%;/ * 16: 9 Relación */ Altura: 0;Desbordamiento: oculto;} .Img-Container img {posición: Absolute;Arriba: 0;Izquierda: 0;Ancho: 100%;Altura: 100%;} Conclusión En conclusión, la mejor manera de resolver este error en la consola de Chrome – [Intervención] Un elemento era perezoso con la carga = Lazy, pero no tenía dimensiones especificadas.La especificación de tamaño mejora el rendimiento.- Es para hacer lo que sugiere y agregar dimensiones a esa imagen.Puedes hacer esto en Gutenberg, el editor clásico, HTML y muchos más.¡Agregue tamaños a imágenes cargadas perezosamente en WordPress!Como siempre, si tiene alguna pregunta sobre imágenes perezosas en WordPress, comuníquese con los comentarios a continuación.