Cómo diferir las imágenes fuera de pantalla en WordPress con una carga lenta

Una de las sugerencias de rendimiento de Google PageSpeed Insights es aplazar las imágenes fuera de la pantalla en WordPress con carga lenta.

La carga perezosa de imágenes en WordPress reduce el tiempo de carga inicial y la carga de la página, sin sacrificar el contenido. La carga perezosa mejora la experiencia del visitante, al servir sólo lo que sus visitantes necesitan cuando lo necesitan. Es mucho más eficiente que el enfoque de cargar todas las imágenes sólo en el caso que resulta en un atasco de tráfico de imágenes de carga lenta.

En este post, voy a mostrarles 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 Lazy Loading?

La carga lenta es una técnica para mejorar la velocidad de la página inicial y la carga útil mediante el aplazamiento de la carga de los activos no críticos que están “por debajo del pliegue” o, en otras palabras, todo lo que no está actualmente en el puerto de visualización del navegador. Aplazar las imágenes fuera de pantalla en WordPress significa básicamente esperar a cargar las imágenes que no podemos ver todavía.

Fíjese que dije activos y no imágenes porque muchas cosas en su página web pueden ser cargadas de forma perezosa, siempre y cuando no se necesiten para servir el diseño del sitio y la parte superior de la página web que su visitante ve primero.

Las imágenes son un caso de uso ideal para la carga perezosa porque son muy intensivas en recursos. Los videos, los guiones y los comentarios también son candidatos ideales porque tienden a añadir mucho peso a una página web.

Con la carga perezosa, un activo no se carga hasta el momento en que se necesita, pero si el usuario nunca lo alcanza, entonces nunca se carga en absoluto.

¿Por qué es mejor la carga perezosa que la carga normal?

La carga perezosa de tus imágenes en WordPress mejora el rendimiento del sitio, el SEO y la experiencia del visitante.

Lazy loading sirve una página web inicial mucho más ligera y añade elementos según sea necesario. Con la carga perezosa, el navegador primero construirá el DOM para que el usuario pueda comenzar a interactuar con su sitio, incluso cuando la página completa no haya terminado de cargarse.

La carga lenta no reduce el tamaño de los archivos de imagen o de la página web. Si tienes una página de 3 MB, así de grande será tu página con o sin carga lenta. Esto no es como comprimir imágenes. Pero la carga lenta 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 utiliza páginas orinadas como factor de clasificación y recomienda cargar las imágenes con pereza para mejorar el rendimiento. También sabemos que Google premia a los sitios más rápidos y con mejores clasificaciones, por lo que la carga perezosa de sus imágenes es una forma de mejorar indirectamente el posicionamiento de su imagen.

Leer
Los 5 mejores plugins de traducción para tu sitio de WordPress

Antes de activar el cargamento de Smush Pro

He creado una página con varias imágenes enormes. Realicé una auditoría de mi sitio de prueba en Google PageSpeed Insights y mi puntuación aumentó de 89 a 91 con sólo añadir la carga perezosa usando Smush Pro (sí, Smush ahora tiene carga perezosa). Puede que no parezca mucho, pero esa es la diferencia entre la media (50-89) y la rapidez (90-100) de mis amigos.

Después de activar la carga perezosa de Smush Pro

La carga perezosa también utiliza menos datos. Sus visitantes que están usando una conexión móvil lenta se lo agradecerán. La carga lenta reduce los recursos que se utilizan cuando un visitante no carga todas sus imágenes porque dejó de navegar y pasó a la siguiente página.

¿Cómo funciona la carga perezosa?

Así es como diferirías las imágenes fuera de pantalla en WordPress sin un plugin.

En primer lugar, tienes que determinar qué imágenes quieres cargar de forma perezosa. Debes cargar las imágenes que no sean visibles en el visor y que no contribuyan a la estructura de tu página. Por ejemplo, las imágenes de logotipos en el encabezado o las imágenes de héroes sobre el texto del cuerpo no deben cargarse de forma perezosa. Para ofrecer la mejor experiencia al usuario, también debería cargar imágenes que estén a menos de 500px del visor, para que tengan tiempo de cargarse antes de que el visitante llegue a ellas.

Evitar que las imágenes se carguen de forma normal

Cuando se utiliza la carga perezosa, hay que evitar que las imágenes se carguen de forma regular en su sitio. Una forma de hacer esto para las imágenes que utilizan el tag is by removing the image URL from the srcattribute and moving it to another attribute, such as data-src, to be stored there temporarily.

Determinar cómo el navegador detectará las imágenes en el Viewport

Lo siguiente que hay que hacer es dirigir cómo el navegador determinará si la imagen ha entrado en el puerto de visualización. Puedes usar un manejador de eventos Javascript o la API de Intersection Observer.

JavaScript Event Handler

Si la compatibilidad de los navegadores es crucial, entonces el uso del desplazamiento, el cambio de tamaño y la orientación, los manejadores de eventos de JavaScript son la forma ideal de determinar si un elemento ha llegado al puerto de visualización porque este método es compatible con todos los navegadores. Desafortunadamente, esto requiere que incluyas un paso adicional para detectar la visibilidad del elemento usando getBoundingClientRect. También puede causar un ligero retraso al renderizar las imágenes. Puedes ver un ejemplo aquí.

Leer
Cómo desarrollar WordPress localmente con MAMP

La API del Observador de Intersección

La API del Observador de Intersección es la forma más moderna y eficiente para que los navegadores compatibles averigüen cuándo una imagen ha pasado al puerto de visualización. También es más rápido que el uso de manejadores de eventos. Escribirás mucho menos código porque puedes saltarte la parte en la que tienes que idear un método de detección de la visibilidad de la imagen y simplemente registrar un observador para que observe los elementos y determine lo que el navegador debe hacer cuando la imagen sea visible.

La API de Intersection Observer tiene un soporte bastante bueno entre los navegadores, pero aún no ha sido adoptada universalmente, por lo que es posible que tenga que utilizar los manejadores de eventos de Javascript como una solución alternativa para los navegadores no compatibles.

Mueve el URL de la imagen al atributo src

Una vez que el navegador detecta que la imagen está “en escena” o cerca de ella, entonces es el momento de poner la URL de la imagen en el atributo srcor srcsetattribute para que la imagen pueda ser descargada y renderizada. Cuando esto se hace, podemos eliminar cualquier clase añadida a la imagen para ayudar a su código JavaScript a identificarla, y eliminar el observador.

Cómo cargar perezosamente las imágenes en WordPress

La carga perezosa puede ser añadida a tu sitio de WordPress con plugins o Javascript. Todos producen resultados similares. Lazy loading es relativamente fácil de implementar, así que incluso si optas por un plugin, los tamaños de los archivos son generalmente alrededor de 1-3kb y por lo tanto ligeros.

Opción 1: Usar JavaScript simple para diferir las imágenes fuera de la pantalla en WordPress

Si te sientes cómodo usando un JavaScript directo y quieres tener el control total, puedes añadir la carga perezosa directamente a tu sitio. La mejor manera de añadir esta funcionalidad es crear un plugin para tu código JavaScript, por supuesto. Hay dos ejemplos en esta página. Uno muestra cómo utilizar los manejadores de eventos y el otro muestra cómo utilizar la API de Intersection Observer.

Opción 2: Usar JavaScript Lazy Loading Library

Si quieres usar una biblioteca de JavaScript para ayudar, hay mucho para elegir. Muchos se adhieren al proceso que he descrito anteriormente para que puedas empezar rápidamente.

  • react-lazyload – Una librería de carga perezosa de React, no usa el Observador de Intersección
  • lozad.js – Sólo usa el Observador de Intersección, super ligero
  • blazy – También es súper ligero, pero no usa el Observador de Intersección
  • yall.js – Utiliza el Observador de Intersección y recae en los manejadores de eventos
  • lazysizes – Puede cargar perezosamente video y iframes también

También puedes usar un plugin de jQuery para el trabajo ya que jQuery está incluido en el núcleo de WordPress.

Opción 3: Usar un Plugin de Carga Perezosa

[youtube https://www.youtube.com/watch?v=UY7pOM1VnjY?rel=0]

Leer
3 cajas de títulos de WordPress

Pero la forma más fácil de empezar a cargar es usar un plugin de WordPress. La mayoría de los plugins de optimización de imágenes de primera calidad, como Smush Pro, tienen la carga lenta incorporada. También lo hemos incluido en nuestra versión gratuita de Smush en WordPress.org

Para activar la carga perezosa con Smush, hemos hecho el proceso super duper simple. Sólo tienes que ir a la sección Carga Perezosa en Smush Pro y pulsar el botón Activar .

Instala Smush Pro y consigue una carga lenta en menos de 2 minutos

Eso es todo. Si quieres tener más control sobre las imágenes que se cargan de forma perezosa, tendrás opciones adicionales disponibles una vez que actives la carga perezosa. Cuando actives la carga lenta en Smush Pro, también cargarás tus imágenes de forma lenta para los usuarios de móviles.

Cosas a las que hay que prestar atención cuando se cargan imágenes perezosas

  • Si bien la carga perezosa puede no añadir peso extra que ralentice su sitio, puede interferir con la capacidad del motor de búsqueda para rastrear su sitio si no se hace correctamente.
  • Cuando se trata de mantener las imágenes por encima del pliegue, el pliegue varía según el dispositivo, así que tenlo en cuenta cuando intentes decidir qué imágenes aplazar.
  • Use una imagen de marcador de posición en lugar de dejar el circulo en blanco. Y especifica una altura y anchura para tu imagen para que tu contenido no se desplace a medida que tus imágenes se cargan.
  • Utilice el marcador <noscript para especificar lo que debe ocurrir si su visitante tiene el JavaScript desactivado.

Eso es todo

El aplazamiento de las imágenes fuera de pantalla y otros activos es una forma excelente y fácil de mejorar el rendimiento de su sitio. Esta técnica funcionará para todas las imágenes de una etiqueta de su sitio, desde las imágenes de su página de inicio hasta las imágenes de sus publicaciones y páginas. Si quieres cargar perezosamente imágenes de fondo en CSS, utilizarás una técnica similar, pero usarás identificadores CSS para dirigir las imágenes. Aquí tienes un ejemplo de cómo cargar perezosamente imágenes de fondo.

La forma más fácil de empezar con la carga perezosa es con Smush free o Smush Pro. Smush Pro añade otras funciones que pueden ayudarte con otras oportunidades de Google PageSpeed Insights. Puede ayudarle a servir imágenes en formatos de última generación convirtiendo sus imágenes en archivos WebP y a escalar sus imágenes con la CDN de Smush Pro. Smush Pro es incluso compatible con el popular plugin WP Retina 2x, por lo que podrás cargar perezosamente esas enormes imágenes Retina sin ralentizar WordPress.

Pruebe Smush Pro gratis durante 30 días y compruebe la diferencia que puede suponer para su sitio web.

1,6 millones de superhéroes de WordPress leen y confían en nuestro blog. Únete a ellos y recibe entradas diarias en tu bandeja de entrada – ¡gratis!

Etiquetas:

  • imágenes
  • javascript
  • jquery
  • rendimiento

Deja una respuesta