Cómo usar Lazy Loading para obtener un resultado de velocidad móvil perfecto

¿Su sitio pasa la prueba de velocidad de sitios móviles de Google? ¿No? Es posible que desee ver imágenes de carga diferida.

El rendimiento del sitio web es fundamental. Si su blog o sitio web tarda en cargar, es terrible para la experiencia del usuario.

Nadie va a esperar cinco o diez segundos para que se cargue su sitio. La velocidad de Internet o la velocidad de descarga debe ser rápida. Un sitio web lento aumentará su tasa de rebote y reducirá su tasa de conversión.

Cuando realiza una prueba de velocidad del sitio web para su sitio, la velocidad de su escritorio generalmente está bien. Pero, ¿cómo funcionan sus páginas para una prueba de velocidad móvil?

Prepárese para usuarios móviles

La mayoría de los programas de blogs y sitios web están razonablemente bien construidos para su visualización en el escritorio.

Utilizan un diseño receptivo para ofrecer una versión móvil.

Si bien esta es una solución práctica, tiene un inconveniente importante.

Si su sitio es receptivo, funcionará en dispositivos móviles.

Pero los tamaños de archivo de sus imágenes son para escritorio, por lo que la velocidad de su sitio móvil es mucho más lenta.

Si realiza una prueba de Google Pagespeed Insights, su resultado puede ser razonable y estar en verde para el escritorio, pero se ve así para su versión móvil.

Cuando considera que la mitad, o incluso más, de los visitantes de su sitio web utilizan dispositivos móviles, realmente necesita mejorar el tiempo de carga de su página y la velocidad móvil.

Google se está moviendo para utilizar su primer índice móvil como factor de clasificación.

Hay muchos servicios gratuitos de prueba de velocidad de sitios web que puede usar para monitorear el rendimiento.

Sin embargo, no todas las aplicaciones más rápidas miden las velocidades de los sitios móviles. Así que no se tranquilice con los buenos resultados en la velocidad de la página de su sitio de escritorio.

WebpageTest te permite seleccionar diferentes versiones móviles, por lo que es una alternativa a Google.

Siempre asegúrese de que puede verificar su versión móvil porque los dispositivos se conectan con una velocidad de conexión a Internet mucho más lenta.

Si sus resultados no son satisfactorios, tiene trabajo que hacer.

¿Cómo mejora el rendimiento de su móvil?

Muchos factores contribuyen a la velocidad lenta del sitio tanto en computadoras de escritorio como en dispositivos móviles.

Los archivos Javascript y CSS pueden cargarse demasiado pronto y bloquear la representación. Si está utilizando WordPress, puede solucionarlo fácilmente mediante el uso de un complemento de almacenamiento en caché.

Es posible que tenga un problema con su servidor web que hace que su TTFB (Tiempo hasta el primer byte) sea un poco más alto que medio segundo.

Sin embargo, la mayoría de los hosts están, como máximo, entre un 10 y un 20 por ciento por encima de este tiempo, lo que no es un gran problema.

El mayor problema son casi siempre las imágenes y los iframes. Cuando agrega una imagen a una publicación, no está comprimida, dimensionada o formateada para dispositivos móviles.

Puedes usar un complemento para ayudar. Smush es un complemento popular para comprimir imágenes cuando las carga. El resultado mejorará un poco tu versión de escritorio, pero no tu versión móvil.

Para mejorar el tiempo de carga de la página en dispositivos móviles, debe publicar imágenes mucho más pequeñas. Pero esto implica mucho trabajo.

Hasta hace poco, la mejor solución era tener una versión móvil separada de su sitio o usar páginas AMP. De cualquier manera, todas las imágenes en el sitio existente tuvieron que ser reemplazadas con imágenes de próxima generación.

El trabajo involucrado en cualquiera de las soluciones podría llevar semanas o meses, según el tamaño de su sitio.

Para la mayoría de los propietarios de sitios, si no conoce una API de observador de intersecciones o un img src, el atributo data src, lazy class, las etiquetas img o la clase img, entonces no estará creando un nuevo sitio móvil.

Seamos sinceros. Es demasiado difícil y lleva mucho tiempo.

Más lecturas: Cómo detener el formulario de contacto y comentar el spam

Aplicar el comportamiento de carga diferida

Afortunadamente, hay una manera fácil de arreglar el tiempo de carga de su página móvil. La respuesta es hacer que todas sus imágenes se carguen de forma perezosa.

La carga diferida retrasa la entrega de imágenes hasta que el lector las necesita. A medida que un lector se desplaza por una página web, las imágenes debajo de lo que se puede ver se retienen.

Al hacerlo, el tiempo de carga inicial de una página se reduce enormemente desde el tiempo de carga ansiosa. Existen muchos complementos y soluciones para agregar carga diferida a su blog o sitio web.

Ejecución de pruebas de carga diferida

Durante las últimas semanas, he estado probando en versión beta una nueva forma de hacer que un sitio móvil destaque.

Es posible que haya oído hablar de las redes de entrega de contenido, la carga diferida y las imágenes fuera de pantalla diferidas.

Si no lo ha hecho, son elementos que solo muestran imágenes cuando se carga una página y cuando el usuario se desplaza hacia abajo por la página. Es posible que haya visto esto en acción en sitios como Medium.

Cuando visite un sitio por primera vez, una imagen aparecerá borrosa por una fracción de segundo. Se llaman imágenes de marcador de posición.

Entonces la imagen aparece claramente en un instante.

Esta es la carga diferida en acción. A medida que un usuario se desplaza hacia abajo en la página, las imágenes no se cargan hasta que se necesitan.

Hace que una página funcione súper rápido, especialmente en dispositivos móviles. Se puede aplicar un cargador diferido a cualquier cantidad de imágenes en páginas web.

Pero todavía falta un elemento en esta solución. Las imágenes no están en formatos de próxima generación.

Afortunadamente, ahora hay una solución, por lo que no tiene que reemplazar todas sus imágenes. Optimole es un complemento de WordPress que hace mucho trabajo pesado.

No solo carga imágenes de forma diferida, sino que también reemplaza sus imágenes con una nueva URL de imagen que ofrece imágenes de próxima generación.

Además de eso, cambia el tamaño de las imágenes sobre la marcha.

Poniendo Optimole a prueba

Hice muchas pruebas y cada vez que revisaba una página, obtenía una puntuación muy alta en una prueba de velocidad móvil de Google.

Una de mis pruebas fue con una página web de ancho completo que contenía diez imágenes grandes sin comprimir y sin tamaño.

En otras palabras, puse un montón de imágenes grandes en una página y las publiqué. (Las imágenes fueron cortesía de Pixabay, por lo que no necesitaban atribución de creative commons).

La página era tan grande que no podía mostrarles una imagen. Entonces, te lo mostraré en un video.

Cuando probé la página en Google, este fue el resultado.

No es sorprendente, considerando el tamaño de todas las imágenes.

Entonces activé Optimole. Puedes ver la configuración que usé a continuación. Eso es todo lo que tienes que hacer.

Entonces cual fue el resultado?

Para escritorio, una puntuación perfecta.

Para dispositivos móviles, una puntuación casi perfecta.

En GTmetrix, la puntuación vuelve a ser casi perfecta.

Recuerda que estos son resultados del mundo real para una página llena de imágenes enormes en alta resolución.

Instalar el complemento y obtener una clave API tomó solo unos minutos, y solo unos segundos para activar la configuración.

Entonces, en menos de cinco minutos, tenía una página y un sitio móvil casi perfectos.

Más información sobre Optimole

Para ver el complemento en acción en el mundo real, visite el sitio web de CodeinWP. Se está ejecutando en Optimole, por lo que puede realizar pruebas en la velocidad de su sitio.

Puede consultar su sitio yendo al sitio web de Optimole.

Haga clic en el botón Verificar mi sitio e ingrese la URL de su sitio. Verá una lista de todas sus imágenes y los ahorros que se pueden hacer en su sitio web.

Si tiene un sitio pequeño, hay una versión gratuita del complemento disponible. Pero si tiene un sitio grande, es posible que desee considerar una opción premium.

Le tomó más tiempo leer este artículo de lo que le tomará hacer que su sitio web funcione súper rápido para sus visitantes móviles. ¿Entonces, Qué esperas?

Más alternativas de carga diferida

Si no desea configurar la entrega de CDN de imágenes Nextgen, hay muchas opciones gratuitas que puede usar.

WordPress ahora incorpora carga diferida por defecto. Sin embargo, usted tiene poco control sobre cómo funciona. Por lo general, es mejor usar un complemento para que pueda ajustar el rendimiento.

Smush es un complemento de WordPress popular y gratuito para reducir imágenes cuando las carga en su biblioteca de medios.

Pero tiene una opción para activar la carga diferida. Lo he probado en algunos de mis sitios y funciona perfectamente. Simplemente activa la opción y listo.

A3 Lazy Load es otro complemento gratuito. Lo he usado durante mucho tiempo en muchos de mis sitios, incluido este.

Lo que me gusta es que puedo refinar muchas opciones. Tiene la opción de excluir widgets, lo que resuelve algunos problemas de salto con algunos temas.

BJ Lazy Load existe desde hace mucho tiempo. Tiene más de 90.000 usuarios. Sin embargo, hace tiempo que no se actualiza.

Lazy Load es un complemento gratuito con 60,000 instalaciones. Es un componente gratuito de WP Rocket, que es una solución todo en uno para la optimización de la velocidad del sitio.

Un último complemento es Lazy Load for Videos. Es una buena herramienta para usar si tiene muchos videos de Youtube en su sitio.

¡Qué elección! Ahora no tienes ningún motivo para tener un sitio web móvil lento.

Nota: No tengo afiliación con este producto. Mi revisión de Optimole se basa en mis experiencias como usuario.

Más lecturas: Verificadores de sitios web gratuitos y herramientas de SEO