Como ya hemos mencionado anteriormente en Redteca, la multimedia de una página web es un recurso importante para un sitio web, no solo ayuda al factor estético, esta a su vez llama la atención del usuario y puede transmitir la idea principal de un contenido en un solo vistazo.
Tener las imágenes o vídeos optimizados no es suficiente, y menos cuando es necesario usar un montón de ellas, ya que representan el 78% del peso de una página o entrada de acuerdo a un reporte de HTTP Archive.
En los modelos tradicionales de carga, las imágenes y vídeos deben descargarse en el navegador antes de que la página sea mostrada al usuario.
Entre más imágenes mayor es el tiempo de carga y más tiempo deben esperar los usuarios, lo que merma su experiencia de navegación y haciendo que no quieran permanecer ni volver a visitar el sitio web.
Esto también afecta negativamente al SEO, puesto que la experiencia de navegación y los bajos tiempos de carga son un aspecto que es tomado en cuenta por los motores de búsqueda para otorgar mejores posiciones a las webs.
En este artículo hablaremos de la carga diferida, un método que ayuda a mejorar los tiempos de carga y el SEO de una web y por supuesto como podemos conseguir estos beneficios usando a3 Lazy Load, un complemento para WordPress.
¿Qué es y cómo funciona la carga diferida?
Conocido en inglés como Lazy Load, la carga diferida es una técnica para la optimización del contenido de una página web, carga solo la parte superior o la que es visible para el usuario y retrasa la carga del resto del contenido de esa página entrada.
Funciona de la siguiente manera:
- El método de carga crea en el navegador una versión web DOM de la web sin descargar las imágenes y precargar los vídeos.
- Un script Java es usado para determinar que imágenes se encuentran en la parte superior y que son visibles una vez que se muestre la página al usuario.
- La carga del resto de imágenes y vídeos es retrasado y va cargando cuando ya la página ha sido mostrada al usuario.
En palabras simples la página carga solamente el texto, algunos scripts o código CSS y las imágenes que están arriba y se muestran al entrar a la web como las imágenes destacadas o banners, el resto de las imágenes y vídeos se van cargando de forma escalonada y solo aparecen cuando el usuario hace scroll para ver el resto de la página. En consecuencia, se reduce la cantidad de solicitudes HTTP que llegan al servidor al mismo tiempo, ya que las imágenes se van obteniendo de una en una.
En el método de carga tradicional todos los elementos deben ser cargados al navegador antes de ser mostrados, con la carga diferida se carga una pequeña parte de la página y se muestra al usuario, el resto va cargando sobre la marcha.
Esto reduce dramáticamente los tiempos de carga, la página parece abrir inmediatamente, lo que mejora la experiencia de usuario algo que ha pasado a ser una prioridad para los motores de búsqueda, quienes otorgan mejores posiciones a webs que estén optimizadas en este aspecto.
A3 Lazy Load- Carga Diferida para WordPress
Como es normal en WordPress, para cada problema existen docenas de soluciones en forma de Plugin. La carga diferida no es la excepción, pero a3 Lazy Load se destaca sobre la demás por ser muy fácil de usar por todo tipo de usuarios y sobre todo por su eficiencia. Está activo en más de 300 mil instalaciones de WordPress.
Luego de su instalación y activación, simplemente hay que ingresar al plugin y comenzar a elegir entre sus configuraciones predefinidas a través de un simple sistema de interruptores on/off, guardar los cambios y listo.
Hay que escoger entre las opciones que más convengan al sitio web y la forma en la que se desea que se visualice.
Puede elegir activar o desactivar la carga diferida para:
- Todo el sitio web o solamente entradas y algunas páginas o contenido personalizado.
- Barra lateral, cabecera, pie de página y widgets de publicidad
- Miniaturas y gravatares
- Vídeos embebidos a través de URL en todas las áreas, vídeos de youtube, vimeo y otros servicios populares de streaming.
- Contenido de IFrame (Contenido embebido de WordPress, cajas de “Me Gusta” de Facebook y Twitter y mapas de Google).
Es compatible con los temas y los plugins más populares de optimización de WordPress incluido compatibilidad total con WooCommerce.
a3rev Software empresa creadora del plugin muestra el funcionamiento de la carga diferida de su plugin con una demostración usando imágenes (clic aquí) y para vídeos (Clic aquí).
Conclusiones
La optimización de un sitio web empieza por escoger un buen servidor y hosting que proporcionen buenos tiempos de carga. Luego hay que conseguir que el código del sitio esté bien depurado y el tema usado sea liviano.
Si no se usan muchas imágenes en un sitio web y ya se tienen tiempos de carga inferiores a 5 segundos entonces para mejorarlos solo bastaría con optimizar esas imágenes como mostramos en este artículo.
Métodos como la carga diferida son realmente útiles y deberían ser utilizados en sitios con gran cantidad de archivos multimedia, pues estos métodos están siempre funcionando de forma activa en el servidor y hosting lo cual consume recursos, por lo que no tiene sentido gastar recursos en optimizar la carga de un par imágenes que tal vez no hagan mucha diferencia.
En cambio sí un sitio emplea muchas imágenes o vídeos de buena calidad entonces se verá realmente beneficiado usando a3 Lazy Load y su método de carga diferida.
