Cómo cargar perezosamente imágenes en WordPress (+ qué es la carga nativa perezosa)

Última actualización: junio de 2021 a nadie le gusta un sitio lento de WordPress. Sin embargo, las imágenes son el formato de medios más popular en la web. Son uno de los recursos más difíciles cargados por la mayoría de los sitios web y ocupan más ancho de banda que cualquier otro activo. Como resultado, los tiempos de carga de página lentos son un problema para muchos sitios de WordPress. Es por eso que la optimización de imágenes en WordPress es crucial. Sin embargo, hay un límite de cuánto puede optimizarlos. Si tiene demasiadas fotos en su página web, entonces hay una gran posibilidad de que sus visitantes salten justo antes de que la página esté cargando.
Es por eso que las imágenes perezosas son perezosas es un paso esencial para que su sitio de WordPress cobre más rápido. Con la carga perezosa, solo puede cargar imágenes cuando un usuario se ejecuta a la imagen específica. Al forzar las imágenes debajo del pliegue para cargar solo cuando el usuario se ejecuta, la carga perezosa también es una solución fácil para reducir la reproducción crítica sin afectar la experiencia del usuario. En esta publicación, aprenderá cómo activar y deshabilitar cargas perezosas para imágenes y videos de su sitio web de WordPress. También comprenderá lo que el perezoso WordPress es vago y cómo funciona. ¡La carga perezosa ya no tendrá secretos para usted!
Qué es la carga perezosa y cómo funcionan las imágenes perezosas que funcionan significa cargar las imágenes en su sitio web de WordPress. En otras palabras, la carga de imágenes y otros contenidos en su página web en diferentes momentos. En resumen, así es como funciona la carga perezosa: cuando alguien visita su sitio web, las imágenes se cargarán en el pliegue, pero las imágenes restantes solo se descargarán cuando se vean en la pantalla del usuario. En otras palabras, la carga perezosa significa posponer imágenes fuera de la pantalla. Muchos sitios web ricos en imágenes usan esta técnica. A medida que atienda la página, verá sustituyentes que se llenan rápidamente de imágenes reales. Un gran ejemplo es mediano, el popular sitio de blogs.
Carga perezosa en acción en el sitio medio. Como puede ver en la imagen de arriba, Medium muestra una imagen sustituyente poco clara hasta que la imagen de alta resolución real se cargue por completo. Por lo tanto, los visitantes saben que se acerca una imagen. La carga perezosa en la carga de perezoso móvil funciona en dispositivos móviles, ya que funciona en el escritorio, y lo mismo es cierto para cómo se debe implementar la carga perezosa. Además, la carga de muebles perezosos brinda a los usuarios un mayor beneficio, ya que no tienen que consumir datos móviles para cargar imágenes que no ejecutan.

Tenga en cuenta que la OMI para imágenes no funciona igual. AMP-IMG utiliza JavaScript para administrar la carga perezosa con una alternativa a la imagen principal si JS está deshabilitado. ¿Cuál es la carga perezosa de la imagen nativa? La carga perezosa nativa es una tecnología innovadora que permite que los navegadores de Chrome compatibles (comenzando con Chrome 76) gestionen la carga perezosa solo, sin usar JavaScript. En otras palabras, el navegador cargará automáticamente una imagen que tenga una marca específica “Carga = Lazy”. Más detalles sobre el atributo “Carga” un poco más adelante en el artículo. Esto es indudablemente una ventaja para el rendimiento web, porque todos los sitios web visitados de versiones de Chrome compatibles se beneficiarán automáticamente de la carga perezosa. Cómo funciona la carga perezosa de las imágenes nativas: el atributo de “carga” en el HTML5 Después de la introducción del atributo de carga HTML para las etiquetas y , Lazy Load se ha convertido en un estándar web. Le brinda control sobre el momento en que un navegador debe comenzar a cargar imágenes y elementos de iframe. Aquí hay un ejemplo de atributo de carga perezosa para incluir en el código:

Demostración nativa para imágenes perezosas en el navegador Chrome (Fuente: Google) Puede ver la demostración completa que se muestra arriba y puede verse cómo el atributo de carga maneja una página con 100 imágenes.
El atributo de carga HTML acepta los siguientes tres valores:

Lazy: pospongo la carga de elementos de imagen o iframe hasta que cumple con ciertas condiciones. Estas condiciones pueden variar según varios factores, como el formato de imagen, el navegador y la potencia de la conexión a la red.
Auto: si no especifica ningún valor, el valor predeterminado del atributo de carga es el automóvil, lo que permite al navegador decidir el comportamiento predeterminado de la carga perezosa.
Nota: El atributo de carga solo acepta las etiquetas y ahora. Por ejemplo, no puede usarlo en imágenes de fondo CSS perezosas.

WordPress 5.5 introdujo la carga perezosa nativa y predeterminada las imágenes perezosas que se cargan a través del atributo de carga HTML nativo. ¡Leerás más en la siguiente sección!
Dar soporte nativo para imágenes de carga perezosa lo ayuda a mejorar el rendimiento de su sitio.
No tiene que instalar bibliotecas JS externas, como JQuey, para activar la funcionalidad de la carga perezosa en su sitio.
Al hacer la funcionalidad de la parte de carga perezosa del estándar HTML asegurará que funcione perfectamente en todos los navegadores principales.
Los ahorros de datos mejorados y los costos de ancho de banda para usuarios y propietarios de sitios web.
Compatibilidad y compatibilidad con el navegador de carga perezosa nativa De acuerdo con Can I Usar, el atributo de carga es aceptado por los navegadores utilizados por más del 72% de la audiencia global de Internet. En particular, la carga nativa de Lazy es aceptada por Google Chrome y Opera. Con Chrome 77, Google ha implementado la posibilidad de utilizar el nuevo atributo de carga para recursos de carga perezosa. Las dos opciones principales son actualmente Safari e iOS Safari, ambas utilizadas por más del 15% de los usuarios en línea.
El soporte para el atributo “Carga” en los principales navegadores que no aceptan el atributo de carga no verá ninguna ventaja de la carga perezosa, pero incluir el atributo de carga = Lazy en su código no tendrá ningún impacto negativo en el rendimiento de su sitio: Nota:: Nota:: Puede activar manualmente el atributo de carga en los navegadores Safari e iOS Safari desde el menú avanzado> Funciones experimentales. La carga perezosa de la imagen nativa en WordPress 5.5 Introducción del agua de carga perezosa nativa en el núcleo de WordPress es un debate continuo entre los colaboradores de WordPress durante muchos años. Sin embargo, sin un estándar adecuado en vigor, entonces no fue un proceso simple.
La introducción del atributo de carga HTML nativo y su posible soporte por los principales navegadores han cambiado esto.Unos meses más tarde, el equipo de desarrollo básico de WordPress anunció imágenes nativas de carga perezosa en WordPress 5.5.Cómo se implementa la carga perezosa en WordPress WordPress 5.5 agregará la carga de pares valiosos de atributo = “Lazy” a cada imagen con los atributos de ancho y altura ya especificados.Esta condición se incluye para evitar el cambio acumulativo (CLS).Este es el momento en que la aparición de la página web cambia repentinamente, creando una experiencia de usuario inquietante.
Un ejemplo de una mala experiencia de usuario debido a CLS (Fuente: Google) Google evalúa los sitios web en función de su puntaje CLS. Los que son estúpidos son penalizados por Google en la clasificación de los resultados de búsqueda. Debido a que incluir los atributos de tamaño para el ancho y la altura en las imágenes pueden ayudar a eliminar los cambios de apariencia, es una buena condición de tener. Desde un punto de vista técnico, la función de carga de imagen de WordPress nativa funciona de manera similar a la forma en que ya administran imágenes receptivas agregando atributos SRCSET y tamaños. Además de lo anterior, WordPress completará todas las etiquetas IMG con atributos de ancho y altura si aún no están presentes. Está hecho para asegurarse de que todas las imágenes en su sitio se beneficien de la carga perezosa. El equipo base también requiere una nueva función que obliga a todas las imágenes a tener atributos de ancho y altura. Por defecto, WordPress agrega la carga de atributo = “Lazy” a todas las etiquetas de imagen como resultado de las siguientes funciones o ganchos: the_content (): las imágenes en el contenido de la publicación.
The_Excerpt (): Imágenes de publicaciones de extractos.

widget_text_content: imágenes en widgets de texto.
Get_avar (): imágenes con avatar.

WP_GET_ATTACHMENT_IMAGE (): Se agregaron imágenes como un archivo adjunto a WordPress. También se llaman imágenes de plantilla.
Cada uno de los resultados de estas funciones conduce a un “contexto” específico en WordPress. Descubrirá la importancia de estos cinco contextos en la siguiente sección. WordPress también agregó un conjunto de nuevas funciones básicas para facilitar esta transición en los recursos de su servidor a continuación, se encuentra una lista de todo, con una breve descripción de qué: WP_FILTER_CONTENT_TAGS (): Cambia las etiquetas HTML del contenido de la publicación para incluir nuevos atributos. Por ejemplo, cambie las etiquetas IMG llamando a las siguientes tres funciones si es necesario. Funciones similares se pueden agregar más tarde para optimizar otros elementos HTML.
wp_img_tag_add_width_and_height_attr (): agrega atributos de ancho y altura a las etiquetas IMG.
wp_img_tag_add_srcset_and_sizes_attr (): agrega atributos SRCSET y tamaño a las etiquetas IMG existentes.
wp_img_tag_add_loading_attr (): agregue el atributo de carga a las etiquetas IMG.
Personalización de la carga perezosa de la imagen nativa en WordPress Puede personalizar el comportamiento predeterminado de la carga perezosa de las imágenes nativas en WordPress a través de diferentes filtros:
El más importante de ellos es el filtro wp_lazy_loading_enabled que acepta tres parámetros para personalizaciones: $ default, $ tag_name y $ context. Puede conectarse a este filtro y deshabilitar la carga perezosa para todas las imágenes de plantilla. Si desea saber más sobre la desactivación de la carga perezosa, ¡vaya a la sección dedicada!
Otro nuevo filtro llamado wp_img_tag_add_loading_attr se puede conectar para cambiar las imágenes en contextos relacionados con el contenido, como The_Content, the_excerpt y widget_text_contant.
Para contextos que solo producen imágenes (por ejemplo, wp_get_attachment_image ()), puede modificarlas directamente usando PHP. El equipo básico de WordPress ha publicado algunos ejemplos de personalización con carga perezosa para ayudarlo a familiarizarse con todas sus características. Si es un desarrollador de WordPress de tema o complemento, le recomendamos cálidamente que los mire.
De ahora en adelante, WordPress acepta la funcionalidad nativa de la carga perezosa solo para imágenes. Pero pueden extenderlo a otros elementos HTML (por ejemplo, iframes) en el futuro. ¿Por qué la carga perezosa de WordPress 5.5 no funciona? Si WordPress Lazy Load no funciona, probablemente sea porque las imágenes que desea cargar son imágenes de fondo. Las imágenes de fondo no tienen las etiquetas , las únicas etiquetas que WordPress vago. También debe tener en cuenta que la tarea nativa de perezosa tiene un umbral. Las imágenes sobre este umbral se cargarán. Las imágenes sobre el umbral no se cargarán perezosamente, incluso si la carga perezosa desde un punto de vista técnico. Si usa WP Rocket y sus imágenes no son flojas, es porque:
Las imágenes se agregan en una hoja de estilo.
Las imágenes se agregan dinámicamente con un script.
Las imágenes contienen uno de los atributos excluidos, como Date-Src y Data-Nozy (la lista es bastante larga).
Puede leer más sobre por qué algunas imágenes no son flojas con WP Rocket en el recurso dedicado.Cómo activar la carga perezosa en imágenes y videos en WordPress Hay muchas opciones para agregar una carga perezosa a su sitio. Puede consultar nuestra lista con los mejores complementos de carga perezosos.Pero, con mucho, la forma más fácil de agregar una carga perezosa en su sitio es con WP Rocket.Se tarda menos de un minuto en activarse.La compatibilidad con el cohete WP Rocket WP WP Rocket viene con su carga de imagen perezosa llamada Lazylad.WP Rocket desactiva automáticamente la carga perezosa de la imagen nativa de WordPress cuando lazando la carga está activa para evitar cualquier conflicto. Activando la función LazyLoad desde el cohete WP, puede activar fácilmente LazyLoad accediendo a> WP Rocket>
El panel de medios en el tablero de WordPress. En la sección LazyLoad en la parte superior de la página, haga clic en “Habilitar imágenes” y luego “Guardar los cambios”. Eso es todo lo que tienes que hacer. Ahora su sitio cargará perezosamente fotos para los visitantes. Al igual que con cualquier actualización o cambio en su sitio, es importante tener en cuenta cualquier conflicto. Entonces, si nota que la activación de la carga perezosa ha roto algo en su sitio, consulte esta lista de problemas frecuentes con la carga perezosa. La función de carga perezosa se excluirá de las imágenes agregadas por complementos como Revolution Slider y Envira Gallery, que puede causar conflictos. Aquí está la lista completa de complementos compatibles. A diferencia de la implementación nativa de WordPress, LazyLoad permite la carga perezosa para otros elementos HTML, como iframe y videos. También cargará perezosamente las imágenes de fondo si se aplica en línea para ciertos elementos HTML. Puede deshabilitar la opción LazyLoad en WP Rocket si desea utilizar la carga perezosa de la imagen nativa de WordPress. Sin embargo, algunos navegadores aún no aceptan el nuevo atributo de carga. Además, WordPress enfoca su implementación solo en imágenes. Si su sitio web incluye muchas imágenes, videos e incorporación, LazyLoad de WP Rocket sigue siendo la mejor opción general. Cómo activar la carga perezosa nativa con el cohete WP incluso si WP Rocket no incluye la compatibilidad automática con los navegadores Chrome que usan la carga perezosa nativa, puede elegir el soporte para la carga perezosa nativa de Chrome: puede activarlo a través de una ayuda. Con este útil complemento, puede asegurarse de que:
Todas sus imágenes tendrán la marca HTML necesaria para aprovechar la carga perezosa nativa; los navegadores cromados compatibles utilizarán automáticamente la carga perezosa nativa;

Todos los demás usarán automáticamente Lazylad de WP Rocket.
Todavía puede disfrutar de nuestro poderoso sistema LazyLoad o decidir usar la carga perezosa nativa de Chrome. ¡Tú decides! Pruebe ambas soluciones en su sitio y decida qué es lo mejor para usted. Cómo perezarse imágenes de fondo en WordPress Como se explicó anteriormente, las imágenes de fondo pueden ser la razón por la cual la carga perezosa no funciona. La forma más fácil de las imágenes de fondo perezosas es usar un complemento como WP Rocket. WP Rocket acepta la carga perezosa de imágenes de fondo siempre que el estilo de fondo se incluya en el HTML para los siguientes elementos:
div
glabro
sección

a ellos
figura
A
Aquí hay un ejemplo de marcado compatible:
Puede leer más sobre la carga perezosa de las imágenes WP WP WP en nuestra documentación técnica. Si está utilizando especialmente Elementary, puede probar el complemento de imágenes de fondo de elemento de carga perezosa. La carga perezosa para la carga perezosa de WooCommerce para WoCommerce funciona de la misma manera que cualquier otra carga perezosa. Mientras aplique una carga perezosa, como se explicó anteriormente, las imágenes o videos de sus productos de WooCommerce serán perezosos. Puede activar y deshabilitar fácilmente la carga perezosa siguiendo la información incluida en nuestra guía. Por esta razón, debe tener en cuenta que cualquier cosa sobre el umbral no será perezoso. Cómo videos perezosos en WordPress Si desea videos perezosos en su sitio de WordPress, puede usar un complemento como la velocidad o la carga perezosa. Tenga en cuenta que estos complementos solo pueden perezcar los videos alojados en YouTube y Vimeo perezosamente. Si quieres videos de MP4 perezosos perezosos, puedes vago usando los atributos “precargados” y “póster”. Puede encontrar más del artículo dedicado a Google. Cómo desactivar la carga perezosa en WordPress La función de carga perezosa del cohete WP tiene más que comenzar y detenerla. El complemento incluye opciones para eliminar las cargas perezosas para ciertas publicaciones e imágenes y la aplicación manual de carga perezosa para ciertas imágenes.
Por ejemplo, esta opción puede ser útil para desactivar la carga perezosa en una determinada imagen por encima del pliegue y mejorar el contenido más alto.Además, con algún código, puede continuar personalizando el complemento para agregar una imagen de desvanecimiento con carga perezosa.Vamos a ver.Deshabilitar LazyLoad en ciertas publicaciones y páginas ¿Tiene una publicación o página que no desea usar la carga de lazada?Cualquiera sea la razón, es fácil detenerse.Para desactivar la carga perezosa en una determinada publicación o página, abra la publicación o página, y en las “Opciones de caché” de Metacase, dispersen la opción “LazyLoad for Images”.Recuerde publicar o actualizar la publicación o página para guardar sus cambios.
Puede activar y deshabilitar la carga perezosa para ciertas publicaciones y páginas en la metacasa “caché”. Si las opciones de “Lazyload para imagen” son incoloras, debe activarlo globalmente en la configuración de cohetes WP (configuración> WP Rocket> Básico) Desactivar la carga perezosa Si desea más control sobre cómo funciona la carga perezosa en su sitio. en WP Rocket con código. Aunque la inserción de los fragmentos de código en el archivo Functions.php de un tema es una manera fácil de personalizar un tema, también es una mala práctica. Los desarrolladores de cohetes de WP recomiendan crear un complemento MU personalizado. Es fácil: puedes leer más al respecto aquí. Una vez que haya configurado el complemento MU, puede pegar cualquiera de los siguientes fragmentos de código. Deshabilitar la carga perezosa en todas las páginas Este fragmento es útil si desea imágenes perezosas para sus publicaciones, pero no para páginas. add_filter (‘wp’, ‘__deatate_rockete_lazyload_if_page’); Function __DedeAte_rcket_lazyload_if_page () {if (is_page ()) {add_filter (‘do_rockeet_lazyload’, ‘__return_false’); }} Desactivar la carga perezosa en la página inicial Este fragmento deshabilitará la carga perezosa para la primera página de su sitio (la página que configuró en Configuración> Leer> Primera página). add_filter (‘wp’, ‘__deatate_rockete_lazyload_if_page’); Function __DedeAte_Rocket_lazyLoad_if_page () {if (is_front_page ()) {add_filter (‘do_rocket_lazyload’, ‘__return_false);
}} Desactivar la carga perezosa en la página del blog Este fragmento desactivará la carga perezosa para la página que establece como una página de inicio del blog (la página que establece y en Configuración> Leer> Primera página). add_filter (‘wp’, ‘__deatate_rockete_lazyload_if_page’); Function __DedeActate_Rocket_lazyLoad_if_page () {if (is_home ()) {add_filter (‘do_rocket_lazyload’, ‘__return_false); }} Desactivar la carga perezosa en publicaciones individuales Si desea deshabilitar la carga perezosa para todas las publicaciones individuales, pero manténgala activada para páginas y la página de inicio de su blog, use este fragmento: add_filter (‘wp’, ‘__deatacto_rockete_lazy_if_page’); Function __DedeAte_Rocket_lazyLoad_if_page () {if (is_single ()) {add_filter (‘do_rockeet_lazyload’, ‘__return_false); }} Desactivar lazando la carga en ciertas imágenes puede deshabilitar la carga perezosa para ciertas imágenes con el atributo date-nozy:

Fat en efecto para imágenes con carga perezosa Cuando carga imágenes de Lazylad, puede ser un poco molesto para los visitantes cuando sus imágenes aparecen repentinamente en la página. Afortunadamente, con algunos efectos sutiles, puede dar una experiencia más agradable al usuario. La decoloración de la imagen es un efecto popular de asociarse con la carga perezosa. El siguiente fragmento CSS agregará un efecto de mitigación a su sitio. Simple el código en style.css (¡recuerde crear un tema infantil primero!): /* Imagen con ‘Fecha’