Desactivar lazy loading wordpress
Contenidos
Un problema común de la experiencia del usuario en los sitios web modernos es el llamado desplazamiento del diseño, a menudo causado por recursos multimedia de carga lenta, como las imágenes: Por defecto, sólo después de cargar una imagen, el navegador puede maquetar la página correctamente, lo que provoca que el contenido, por ejemplo debajo de la imagen, se desplace. Este problema puede resolverse fácilmente proporcionando atributos de anchura y altura a las etiquetas img, ya que el navegador los utilizará para determinar la relación de aspecto de la imagen de modo que pueda deducir el diseño de la página antes de cargar la imagen.
Para las imágenes que aparecen dentro de un blob de contenido (por ejemplo, the_content, the_excerpt, widget_text_content), se puede utilizar otro filtro nuevo wp_img_tag_add_loading_attr, que recibe los siguientes parámetros:
Para las imágenes que se envían a través de wp_get_attachment_image(), el atributo puede controlarse simplemente a través del parámetro $attr de la función, que puede tener los mismos valores posibles que el parámetro $value del filtro anterior. Para no cargar una imagen de forma perezosa, se debe especificar un valor de atributo falso, lo que hará que se omita el atributo. Por ejemplo:
¿Tiene WordPress la función lazy loading?
Lazy loading en WordPress ayuda a que la página web cargue más rápido. Carga las imágenes y otros elementos multimedia solo cuando el usuario llega a esa sección.
¿Qué es la carga diferida nativa?
9 de mayo de 2022 5 min read. La carga lenta es una técnica de optimización de sitios web en la que los elementos de una página, como las imágenes, sólo se cargan cuando alcanzan una distancia calculada de la ventana gráfica.
Lazy load wordpress plugin
A nadie le gusta un sitio web WordPress lento. Sin embargo, las imágenes son el formato multimedia más popular en la web. Son uno de los recursos más pesados 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.
Por eso es crucial optimizar las imágenes en WordPress. Sin embargo, hay un límite en cuanto a la optimización. Si tiene demasiadas imágenes en su página web, entonces hay una alta probabilidad de que sus visitantes reboten incluso antes de que se cargue la página.
He aquí por qué la carga perezosa de imágenes es un paso esencial para hacer que su sitio WordPress cargue más rápido. Con la carga lenta, puede cargar imágenes sólo cuando un usuario se desplaza hacia abajo a la imagen específica. Al obligar a las imágenes por debajo del pliegue para cargar sólo cuando el usuario se desplaza hacia abajo, la carga perezosa es también una solución fácil para reducir la ruta de renderizado crítico sin perjudicar la experiencia del usuario.
En este artículo, aprenderá a activar y desactivar la carga lenta de imágenes y vídeos en su sitio de WordPress. También entenderás qué es y cómo funciona el lazy loading nativo de WordPress. ¡Lazy loading no tendrá más secretos para ti!
Carga perezosa de imágenes
Lazy, que se activará en WordPress 5.4 por defecto, significa esperar hasta que la ventana del navegador del usuario esté dentro de una cierta distancia antes de descargar la imagen. Este comportamiento acelerará la experiencia del usuario en los sitios de WordPress.
Tenga en cuenta que loading=”lazy” sólo se añadirá si la etiqueta correspondiente aún no incluye un atributo de carga. En otras palabras, para evitar que una imagen se cargue perezosamente, se recomienda especificar loading=”eager””.
Según los comentarios de WordPress, los atributos lazy-loading se implementarán de forma que sea fácil eliminarlos. Esto es importante en caso de que los futuros navegadores empiecen a cargar todas las imágenes por defecto, sin necesidad de un atributo loading.
El equipo de WordPress ha lanzado oficialmente un plugin de carga perezosa para WordPress diseñado con fines de prueba. Los editores que deseen probarlo y dar su opinión pueden descargar el plugin y probarlo.
WordPress desactivar lazy load imágenes
El GIF de arriba muestra la implementación de lazy loading en las imágenes. Las imágenes visibles en la ventana gráfica (o a poca distancia) se cargan al instante, mientras que las imágenes situadas más abajo sólo se obtienen cuando el usuario se desplaza cerca de ellas.
Aunque la mayoría de los navegadores modernos soportan de forma nativa la carga lenta de imágenes con el atributo <img loading=lazy>, los navegadores más antiguos pueden no ser compatibles con esta función. En tales casos, el navegador simplemente ignoraría el atributo sin efectos secundarios.
Para manejar los navegadores que no soportan de forma nativa la carga perezosa, puede utilizar una biblioteca de terceros o un polyfill. En este tutorial, usaremos el polyfill para construir la página mostrada arriba.
Hay muchas opciones de polyfill disponibles para ayudar con la implementación de lazy loading en navegadores antiguos. Utilizaremos un paquete ligero y muy eficiente llamado loading-attribute-polyfill para implementar de forma nativa la carga lenta en imágenes e iframes.
Puedes utilizar el paquete loading-attribute-polyfill de dos maneras. La primera opción es instalar el paquete a través de npm o Bower. Alternativamente, puede cargar el polyfill de forma asíncrona a través de CDN, un método que es muy fácil de configurar.