Cómo posponer imágenes fuera de pantalla en WordPress con carga perezosa

Una de las sugerencias de rendimiento Google PageSpeed ​​Insights es el aplazamiento de las imágenes fuera de la pantalla en WordPress con carga perezosa. La carga perezosa de imágenes en WordPress reduce el tiempo de carga inicial y la carga útil de la página, sin sacrificar el contenido. La carga perezosa mejora la experiencia de sus visitantes, dando solo lo que sus visitantes necesitan cuando la necesitan. Es mucho más efectivo que el enfoque de la carga de todas las imágenes, para cualquier eventualidad, lo que da como resultado un bloque de carga de imagen lento. En esta publicación, le mostraré cómo la carga perezosa puede mejorar el rendimiento de la página y cómo funciona. Luego veremos cómo cargar perezosamente sus imágenes en WordPress.
¿Qué es la carga perezosa? La carga perezosa es una técnica para mejorar la velocidad inicial de la página y la carga útil posponiendo la carga de activos no críticos que son “subobjetivos” o, en otras palabras, todo lo que no está actualmente en la ventana de vista del navegador. Retrasar las imágenes fuera de la pantalla en WordPress significa prácticamente esperar para cargar las imágenes que aún no podemos ver. Tenga en cuenta que he dicho elementos y no imágenes, porque muchas cosas en su página web pueden ser perezosas siempre que no se necesiten para mostrar el aspecto del sitio y la parte superior de su página web. Por primera vez.
Las imágenes son un caso ideal de uso para la carga perezosa, porque consumen muchos recursos. Los videos, scripts y comentarios también son candidatos ideales, porque tienden a agregar mucho peso a una página web. Con la carga perezosa, un activo no se carga hasta que se necesita el momento, pero si el usuario nunca lo alcanza, entonces no se carga en absoluto. ¿Por qué la carga perezosa es mejor de lo habitual? La carga perezosa de sus imágenes en WordPress mejora el rendimiento del sitio, el SEO y la experiencia de sus visitantes. Con la carga perezosa, el navegador primero construirá el domo para que el usuario pueda comenzar a interactuar con su sitio, incluso cuando toda la página no haya terminado. Imagen o tamaño del archivo de su página web. Si tiene un tamaño de página de 3 MB, por lo que será su página con o sin carga perezosa. Esto no es como comprimir imágenes. Pero la carga perezosa mejorará enormemente la forma en que el usuario percibe su sitio. Se siente más rápido y eso puede ser suficiente para mantenerlos en la página. Google también usa PEEDS como factor de clasificación y recomienda imágenes de carga perezosa para mejorar el rendimiento. También sabemos que Google recompensa sitios más rápidos con clasificaciones más altas, por lo que las imágenes perezosas son una forma de mejorar indirectamente el SEO de la imagen.
Antes de activar la carga floja de Smush Pro

Creé una página con varias imágenes enormes. Hice una auditoría de mi sitio de prueba de Google PageSpeed ​​Insights y mi puntaje ha aumentado de 89 a 91 solo agregando carga perezosa usando Smush Pro (sí, Smush ahora tiene una carga perezosa). Puede que no parezca larga, pero esa es la diferencia entre mis amigos promedio (50-89) y rápido (90-100). Después de activar la carga floja de Smush Pro
La carga perezosa también usa menos datos. Sus visitantes que usan una conexión móvil lenta le agradecerán. La carga perezosa reduce los recursos utilizados cuando un visitante no carga todas sus imágenes, porque dejó de navegar y fue a la página siguiente.

¿Cómo funciona la carga perezosa? Así es como pospones las imágenes fuera de pantalla en WordPress sin un complemento. En primer lugar, debe determinar qué imágenes desea cargar perezosamente. Debe perezcar cualquier imagen que no sea visible en la ventana de vista y no contribuya a la estructura de su página, por ejemplo, las imágenes del encabezado o las imágenes heroicas sobre el texto del cuerpo no deben ser perezosas. Para proporcionar la mejor experiencia de uso, también debe cargar imágenes que sean unos 500 píxeles en la ventana de vista para que tengan tiempo de cargar antes de que el visitante les llegue.
Evite la carga de imágenes en modo normal Al usar la carga perezosa, debe evitar que las imágenes se carguen generalmente en su sitio. Una forma de hacerlo para las imágenes usando
etiqueta
es eliminando la URL de la imagen del atributo SRC y moviéndola a otro atributo, como Date-SRC, que se almacenará allí temporalmente. Determine cómo el navegador detectará las imágenes en la ventana de vista Lo siguiente que debe hacer es abordar cómo el navegador determinará si la imagen ha ingresado a la ventana de vista. Puede usar un manipulador de eventos JavaScript o el API de intersección Obeerver. JavaScript Event Manager Si la compatibilidad del navegador es crucial, entonces el uso de JavaScript Scroll, Redize y OrientionChange es la forma ideal de determinar si un elemento ha llegado a la visualización de la ventana, Porque este método es compatible con todos los navegadores. Desafortunadamente, esto requiere un paso adicional para detectar la visibilidad del elemento usando GetBoundingClient. También puede causar un ligero retraso en la representación de las imágenes. Puedes ver un ejemplo aquí. El observador de intersección API de la API de intersección es la forma moderna y más efectiva para que los navegadores compatibles descubran cuándo ha pasado una imagen a la ventana de vista. También es más rápido que el uso de controladores de eventos. Escribirá mucho menos código, porque puede omitir la parte en la que tiene que encontrar un método de visibilidad de la imagen y solo registrar un observador para seguir los elementos y determinar qué debe hacer el navegador cuando la imagen es visible.

La API del observador de intersección tiene un muy buen apoyo entre los navegadores, pero aún no se ha adoptado universalmente, por lo que es posible que necesite usar los eventos de JavaScript como una alternativa a los navegadores no compatibles. Mueva la URL de la imagen al atributo SRC una vez que el navegador detecta que la imagen está “en el escenario” o cerca de ella, entonces es hora de dibujar la URL de la imagen en el atributo SRC o SRCSET para que la imagen se pueda descargar y renderizar. Cuando esto se haga, podemos eliminar cualquier clase agregada a la imagen para ayudar al código JavaScript a identificarlo y eliminar el observador. Cómo se puede agregar la carga perezosa de WordPress a su sitio web de WordPress con complementos o JavaScript. Todos producen resultados similares. La carga perezosa es relativamente fácil de implementar, por lo que, incluso si opta por un complemento, las dimensiones de los archivos generalmente son de 1-3kb y, por lo tanto, ligera. Opción 1: Use JavaScript simple para posponer imágenes fuera de pantalla en WordPress Si se siente cómodo usando JavaScript Direct y desea un control total, puede agregar una carga perezosa directamente a su sitio. La mejor manera de agregar esta funcionalidad es crear un complemento para JavaScript Código, por supuesto. Hay dos ejemplos en esta página. Uno le muestra cómo usar la administración de eventos, y el otro le muestra cómo usar la API de intersección.

Opción 2: use la biblioteca de carga Lazy JavaScript si desea usar una biblioteca JavaScript para ayudarlo, tiene mucho que elegir. Muchos se adhieren al proceso que describí anteriormente, por lo que puede comenzar rápidamente.
React LazyLoad-una biblioteca de reacción perezosa, no utiliza intersección observatlozad.js-usa solo observación de intersección, súper fácil

Chazazy: también muy fácil, pero no utiliza la observación de la intersección
Yall.js – usa intersección observador y regresa a los gerentes de eventos
Lazysizes – puede subir perezosamente videos y marcos
También puede usar un complemento JQuey para el trabajo, porque JQuey está incluido en el núcleo de WordPress. Opción 3: Use un complemento de carga perezoso, pero, con mucho, la forma más fácil de comenzar con la carga perezosa es usar un complemento de WordPress. La mayoría de los complementos de optimización de imágenes premium, como Smush Pro, han construido en una carga perezosa. También lo incluimos en nuestra versión gratuita de Smush en WordPress.org para activar la carga de flojo, simplifiqué el proceso. Todo lo que tiene que hacer es ir a la sección de carga perezosa de Smush Pro y presione el botón Activar.
Instale Smush Pro y obtenga una carga perezosa en menos de 2 minutos
Eso es todo. Si desea más control sobre las imágenes que sean perezosas, tendrá opciones adicionales disponibles después de activar la carga perezosa. Cuando active la carga perezosa en Smush Pro, cargará perezosamente imágenes para usuarios móviles. Cosas a las que tener cuidado cuando subes perezosamente las fotos
Si bien la carga perezosa puede no agregar un peso adicional que ralentice su sitio, puede interferir con la capacidad del motor de búsqueda para rastrear el sitio si no se hace correctamente.
Cuando intenta mantener imágenes sobre el pliegue, el pliegue varía según el dispositivo, así que tenga en cuenta esto cuando intente decidir qué imágenes posponerse. Use una imagen sustituta en lugar de dejar el atributo SRC en blanco.Y especifique una altura y ancho para su imagen para que su contenido no cambie a medida que se cargan las imágenes.
Use la marca para especificar qué debería suceder si su visitante ha desactivado JavaScript.

Esta es todo el aplazamiento de las imágenes fuera de la pantalla y otros materiales es una manera excelente y fácil de mejorar el rendimiento de su sitio. Esta técnica funcionará para todas las imágenes en una etiqueta en su sitio, desde las imágenes en su página de inicio hasta las imágenes en sus publicaciones y páginas si desea cargar perezosamente las imágenes de fondo en CSS, utilizará una similar. Técnica, pero utilizará identificadores CSS para apuntar a las imágenes. Aquí hay un ejemplo de cómo las imágenes de fondo perezoso. La forma más fácil de comenzar con la carga perezosa es con Smush Free o Smush Pro. Smush Pro agrega otras funciones que pueden ayudarlo con otros tsights de Google PageSpeed. Puede ayudarlo a servir imágenes en formatos de nueva generación convirtiendo imágenes en archivos WebP y las imágenes correctas escalando imágenes con Smush Pro CDN. Smush Pro es incluso compatible con el popular complemento WP Retina 2X, por lo que puede perezrir esas enormes imágenes de retina sin ralentizar WordPress. Pruebe gratis Smush Pro por su cuenta o como parte de un período de prueba de membresía gratuito y vea cuánto puede marcar la diferencia para su sitio, ¿aún intenta perezoso en su sitio? ¿Mejoró su nota en Google PageSpeed ​​Insights?
Etiquetas:
imágenes
Javascript
JQuery
actuación