Independientemente del propósito de su sitio web, los sitios web lentos atraerán a los visitantes de inmediato.
La carga rápida, también conocida como «rendimiento del sitio», es crucial para una excelente experiencia de usuario en la web. En 2019, el indicador de velocidad media (que es el tiempo medio que tarda un sitio web en mostrar elementos visibles) tendencias de unos seis segundos. E incluso esta vez pone a prueba nuestra paciencia. En dispositivos móviles, el tiempo de carga aumenta de un segundo a seis segundos más que duplica la tasa de rebote.
¿Por qué puede llevar mucho tiempo cargar un sitio web? Una posible razón es el tamaño de la página, más precisamente, la cantidad de contenido en el sitio web y los tamaños de archivo de cada contenido. Múltiples imágenes, videos y otros medios pueden ralentizar la velocidad de su página y enviar a los visitantes frustrados a otra parte.
Afortunadamente, existe una solución que no requiere ningún recorte de contenido. Se llama carga lenta. La carga diferida mejora el rendimiento del sitio, reduce el uso de ancho de banda e incluso aumenta el SEO de su sitio.
En esta publicación, explicaré la carga diferida y su contraparte, la carga celosa. También discutiremos por qué la carga diferida puede ser una gran característica en su sitio web y cómo agregarla a sus páginas.
¿Qué es la carga diferida?
Lazy loading es una técnica utilizada por los sitios web para optimizar los tiempos de carga. Con la carga diferida, el sitio web primero carga solo el contenido requerido y espera a que se cargue el resto del contenido de la página hasta que el usuario lo necesite. La carga diferida reduce el tiempo que se tarda en abrir un sitio web, ya que el navegador solo carga una fracción del contenido de la página a la vez.
Este proceso se llama «perezoso» porque retrasa la carga hasta que se necesita, de la misma manera que alguien podría posponer una tarea. Pero en este caso, la pereza es una gran cosa.
Probablemente hayas visto la carga diferida antes. Pasemos a los gráficos de Google, por ejemplo. Si estoy buscando fotos de perros salchicha (que hago regularmente), Google encontrará algunas fotos para mí en una página de resultados.
No tendría sentido cargar todas estas imágenes en la página a la vez, ya que probablemente no me desplazaré mucho hacia abajo hasta que encuentre una imagen que me guste y me vaya. ¿Por qué desperdiciar valioso tiempo de carga y datos en perros salchicha que nunca veré?
Google Graphics implementa la carga diferida en su lugar. Para contenido oculto, carga imágenes de marcador de posición que reemplazan las imágenes reales. Estos marcadores de posición tardan mucho menos tiempo en cargarse que el contenido totalmente renderizado. Las imágenes reales se cargan rápidamente cuando aparece su marcador de posición (es decir, cuando me desplazo hacia abajo).
Tales técnicas de cobro bajo demanda se utilizan en toda la red. Visite algunos de sus sitios favoritos con muchas imágenes; es probable que estén usando esta técnica. Si bien la carga diferida se usa más comúnmente con imágenes, se puede aplicar a cualquier elemento de la página, incluidos texto, videos y otro contenido incrustado.
¿Qué está dispuesto a cargar?
La carga voluntaria es lo opuesto a la carga perezosa. Con carga rápida, el sitio web carga todo su contenido de inmediato. La carga voluntaria permite que el navegador almacene en caché todo el contenido del sitio web en su caché, lo que puede ser útil si los visitantes regresan a la página. Sin embargo, este método puede ser lento cuando se cargan archivos de sitios web más grandes.
Las páginas con menos datos tienden a cargarse rápidamente. Tome su página promedio de Wikipedia: estos artículos están dominados por texto que ocupa mucho menos espacio de archivo que las imágenes. Por lo tanto, Wikipedia elige la carga rápida en lugar de la carga diferida para el contenido de la página.
Ahora que conocemos la diferencia entre estos métodos de carga, analicemos qué opción es mejor para su sitio web.
Carga perezosa versus carga ansiosa
La carga ansiosa genera todo el contenido de la página web lo más rápido posible, mientras que la carga diferida retrasa la visualización de contenido irrelevante. La carga diferida es una excelente opción para archivos de páginas grandes con más contenido. Sin embargo, las páginas más simples con una cantidad fija de texto y algunas imágenes y/o videos deberían usar la carga rápida.
¿Cuándo usar Lazy Loading?
La carga diferida es ideal para páginas web largas con mucho contenido pesado (como imágenes, gifs y videos) que no es esencial para la comodidad del usuario cuando se carga por primera vez.
No existen pautas estrictas sobre qué páginas requieren carga diferida, pero para hacer esta llamada, puede probar el rendimiento de su sitio y la participación del usuario con y sin carga diferida. Dependiendo de los resultados, otras medidas para extender el tiempo de carga pueden valer más la pena.
Aplicar la carga diferida al contenido de su página tiene muchos beneficios potenciales:
- Ayuda a cargar la página más rápido. Esto mejora la experiencia del visitante, aumenta el número de visitantes comprometidos y también las conversiones. ayuda con seo.
- Reduce el consumo de datos ya que el navegador carga una fracción del contenido total de la página por visita. Esto ahorra costos de datos tanto para usted como para sus visitantes: pagará menos para cargar menos elementos y sus usuarios no necesitarán tantos datos para cargar sus páginas web.
- Ahorra la energía necesaria para cargar el contenido, lo que prolonga la duración de la batería. También protege a las computadoras del sobrecalentamiento y del ruido de los motores a reacción.
- Mantiene a los visitantes en su sitio si continúa ofreciendo contenido relevante. Un ejemplo perfecto de esto es el pergamino infinito. Las redes sociales hacen esto todo el tiempo para llamar nuestra atención.
¿Cuándo usar Carga Voluntaria?
La carga diferida puede brindarle a su sitio web grandes beneficios, pero no siempre. A veces es mejor optar por el enfoque antiguo de carga rápida. Estos casos incluyen:
Todo el contenido se muestra «sobre el pliegue»
El pliegue es la parte inferior de la ventana del navegador web. Dado que el espacio sobre la pestaña se muestra después de cargar la página, el contenido de esta área debe ser visible de inmediato para los usuarios. Curl se encuentra en diferentes lugares para diferentes tamaños de pantalla y ventana, así que navegue por su sitio en diferentes dispositivos y use su criterio para determinar en qué parte de la página desea comenzar la carga diferida de contenido.
Cuando los recursos necesitan cargarse en segundo plano
Cualquier código o medio especial que se ejecute en segundo plano en su sitio web debería cargarse rápidamente. Un ejemplo de esto son las aplicaciones web que requieren que la mayoría o todas sus funciones estén completamente cargadas antes de ejecutarse.
Si su sitio web tiene un contenido pesado mínimo
No utilices la carga diferida si no la necesitas. Hay varias razones por las que la carga diferida puede dañar su sitio web:
- Demasiada carga dinámica en su sitio web provoca interrupciones y perturba la experiencia del usuario.
- Ocultar mucho contenido puede ir en contra del SEO. Si cierto contenido no se muestra, existe la posibilidad de que los motores de búsqueda no lo indexen. Para asegurarse de que Google lee correctamente su sitio, véalos una guía para el contenido de carga diferida.
- Lazy loading consiste en modificar el código de tu sitio web. Necesitará recursos y/o tiempo para realizar estos cambios y probarlos.
En conclusión, si la página es corta y/o contiene principalmente contenido liviano (es decir, con texto dominante y un mínimo de imágenes/videos), es mejor evitar el exceso de ingeniería con carga diferida. Mi blog de perros salchicha funcionará sin él.
Cómo implementar la carga diferida de imágenes
Hay diferentes formas de agregar carga diferida a su sitio web dependiendo de si desea o no interactuar directamente con el código de su sitio web. Algunos navegadores también pueden usar automáticamente la carga diferida de páginas web.
Usa el complemento
Para una opción rápida y fácil, busque un complemento de sistema de administración de contenido o un creador de sitios web confiable y bien mantenido. Por ejemplo, WordPress tiene varios complementos de carga diferida de imágenes que harán la mayor parte del trabajo por usted. Otras plataformas CMS ofrecen complementos/módulos/extensiones con el mismo propósito.
Utilice el atributo de «carga» de HTML
Puede alternar las rutinas de carga para cada imagen en una página web con el atributo «cargando». Para especificar la configuración de carga agregue un atributo a la etiqueta de la siguiente manera:
// lazy-loads an image
<img src="https://blog.hubspot.com/website/image.png" loading="lazy" alt="..." />
// eager-loads an image
<img src="https://blog.hubspot.com/website/image.png" loading="eager" alt="..." />
// defers to the loading behavior of the browser (the same has having no “load” attribute)
<img src="https://blog.hubspot.com/website/image.png" loading="eager" alt="..." />
Para obtener métodos prácticos adicionales para implementar la carga diferida, consulte La guía de Mozilla para la carga diferida y Guía completa de ImageKit.
La carga diferida es una excelente opción para mejorar el rendimiento de la página y retener a los visitantes de su sitio. Si elige la carga diferida, pruebe su sitio web con esta nueva característica antes de lanzarlo. Cualquier error puede evitar que se muestre el contenido oculto, y ningún contenido es peor que el contenido lento. Sin embargo, si se hace bien, la carga diferida hará que sus páginas brillen.
