Desactivar lazy load wordpress
Contenidos
Redimensionar y comprimir correctamente las imágenes antes de subirlas a la web es algo que debes hacer si quieres que tu página tenga un buen rendimiento, pero ¿qué pasa después de subirlas? ¿Hay alguna forma de optimizarlas un poco más y mejorar el tiempo de carga de la página?
En este artículo, vamos a echar un vistazo al principio del lazy loading, una técnica beneficiosa que aplaza la carga de imágenes, dejándolas “fuera de pantalla” hasta que las necesites. También responderemos a las principales preguntas en torno a las cargas perezosas, como por ejemplo por qué la carga perezosa es una buena práctica SEO y cuándo debe utilizarla.
La idea básica de la carga perezosa es cargar imágenes o iframes sólo cuando los usuarios necesiten visualizarlos: no tendrán que esperar a que se carguen todos los elementos de la página y, por tanto, podrán empezar a utilizar la página web antes.
Quizá se pregunte si la carga lenta es realmente importante. La verdad es que hay varias razones por las que deberías cargar tus imágenes de forma perezosa en lugar de dejar que se carguen todas a la vez. Por supuesto, las ventajas de la carga perezosa están relacionadas con la aceleración de tu sitio y la optimización del mismo, ¡no te lo pierdas!
¿Qué dos cambios deberías hacer para que las fotos se carguen más rápido?
Hoy en día, las imágenes son fundamentales para cualquier sitio web y aplicación. Ya sean banners de marketing, imágenes de productos o logotipos, es imposible imaginar un sitio web sin imágenes. Lamentablemente, las imágenes son de gran tamaño, lo que las convierte en el elemento que más contribuye al tamaño de la página. Según los últimos datos de HTTP Archive, el tamaño medio de las páginas en los ordenadores de sobremesa es de 1511 KB. Las imágenes representan casi 650 KB de ese tamaño, aproximadamente el 45% del tamaño total de la página. Ahora bien, como no podemos prescindir de las imágenes, tenemos que hacer que nuestras páginas web carguen rápido con ellas. En esta guía, hablaremos de las imágenes de carga lenta, una técnica que ayuda a mejorar el tiempo de carga de la página y reduce su tamaño, al tiempo que conserva todas las imágenes de la página.
Si te fijas, las 3 primeras imágenes del ejemplo se cargan por adelantado. La URL está presente directamente en el atributo src en lugar del atributo data-src. Esto es esencial para una buena experiencia de usuario. Dado que estas imágenes están en la parte superior de la página, deben hacerse visibles lo antes posible. No debemos esperar a un evento o a la ejecución de JS para cargarlas.Uso de Intersection Observer API para activar la carga de imágenesIntersection Observer API es una API relativamente nueva en los navegadores. Hace que sea muy sencillo detectar cuando un elemento entra en la ventana gráfica, y tomar una acción cuando lo hace. En el método anterior, teníamos que enlazar eventos, tener en cuenta el rendimiento e implementar una forma de calcular si el elemento estaba en la ventana gráfica o no. La API de observadores de intersección simplifica mucho este proceso, ayuda a evitar los cálculos y ofrece un gran rendimiento.Ejemplo de uso de la API de observadores de intersección para la carga diferida de imágenes:Adjuntamos el observador a todas las imágenes que se van a cargar diferidamente. Una vez que la API detecta que el elemento ha entrado en la ventana gráfica, utilizando la propiedad isIntersecting, tomamos la URL del atributo data-src y la movemos al atributo src para que el navegador active la carga de la imagen. Una vez hecho esto, eliminamos la clase lazy de la imagen, y también eliminamos el observador de esa imagen.
Carga perezosa de imágenes
Puedes cargar perezosamente imágenes en el contenido de la entrada o en el texto del widget, además de miniaturas, avatares y emoticonos. LazyLoad también se encarga de la carga lenta de iframes: podrás sustituir fácilmente los iframes de Youtube por una vista previa en miniatura para acelerar aún más el tiempo de carga de tu sitio web.
El plugin es genial, pero no funciona en dispositivos móviles con ajax scroll infinito. Probado en varios dispositivos, varios teléfonos. Cuando se debe cargar los próximos productos de woocommerce, próximas imágenes de los productos no se muestran. Espere a que sus mejoras. Untile entonces el módulo se desactivará.
“LazyLoad Plugin – Lazy Load Images, Videos, and Iframes” se ha traducido a 12 idiomas. Gracias a los traductores por sus contribuciones.Translate “LazyLoad Plugin – Lazy Load Images, Videos, and Iframes” into your language.Interested in development?Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Carga lenta de imágenes en WordPress
¿Cuál es el mejor plugin gratuito de WordPress lazy load que todos ustedes recomiendan para diferir la carga de imágenes fuera de pantalla y el almacenamiento en caché? Estoy pensando en desechar SG Optimizer por completo y empezar de nuevo con nuevos plugins para la velocidad del sitio, ¡pero me pone muy nerviosa!
Yo también estoy siempre buscando maneras de acelerar mi sitio de WordPress y sucede que he probado varios plugins diferentes de carga lenta de WordPress mientras trato de diferir las imágenes fuera de pantalla para aumentar la velocidad de mi página, así que pensé en compartir esas experiencias en una entrada de blog para aquellos que puedan beneficiarse de ellas.
Nota: Algunos de los enlaces en mis posts son enlaces de afiliados. Obtengo comisiones por las compras realizadas a través de esos enlaces. Como asociada de Amazon, gano por las compras que cumplan los requisitos cuando usted compra algo a través de esos enlaces.
Cuando un visitante llega a su sitio, su navegador hace una petición al servidor para el contenido de la página. El servidor responde con todo el código HTML, las imágenes, los vídeos, los activos de audio, etc… que componen el contenido de la página.