Imágenes, infografías y efectos de fantasía son excelentes ayudas para promover cualquier tipo de contenido en un sitio web. Son captadores de atención infalibles y pueden transmitir la esencia del contenido en un solo cuadro. No es de extrañar que dependamos de las imágenes para captar la atención del lector y mejorar la participación del usuario en Internet.
Por otro lado, las imágenes suelen tardar en cargarse en una página web. Y si tiene una conexión lenta, puede parecer que tarda una eternidad en cargar. Esto puede ser un gran obstáculo para los usuarios, que probablemente se alejarán de la página.
¿Cómo podemos hacer que las páginas con imágenes pesadas se carguen más rápido?
¿Por qué las imágenes tardan en cargarse? Bueno, podemos explicarlo así: una página web se compone de muchos elementos: texto, imágenes, medios, guiones y más. Para que cada elemento se cargue, su navegador realiza una solicitud al sitio web (llamada solicitud HTTP). Muchos de los elementos, especialmente las imágenes, tienen muchos bytes y tardan en cargarse. Normalmente todos los elementos intentan cargarse al mismo tiempo y esto retrasa la carga de toda la página web.
Lo lógico es hacer que el contenido de carga rápida aparezca primero en el navegador y mantenga la atención del espectador. Al mismo tiempo, retrase la carga de imágenes con muchos datos. Es probable que este enfoque convenza a los usuarios de que esperen, ya que hay algo en la pantalla para llamar su atención.
¿Qué es la carga diferida?
Podemos retrasar las imágenes utilizando la técnica de carga diferida: cargue solo el texto o el contenido seleccionado primero y permita que las imágenes o los elementos de carga lenta se retrasen. La carga de imágenes está escalonada, por lo que mejora el tiempo hasta el primer byte de la página web. A medida que un usuario se desplaza hacia abajo, las imágenes se obtienen de una en una. En consecuencia, se reduce la cantidad de solicitudes HTTP que llegan al servidor al mismo tiempo.
Las imágenes se colocan en un marcador de posición para cargarlas más tarde. A medida que las imágenes llegan al área de visualización, se obtienen del servidor. Aparecen en la pantalla a medida que se mueven hacia el área «arriba del pliegue». En caso de desplazamiento infinito, ajax se usa para cargar más cuando el usuario toca la parte inferior de la pantalla.
Cómo puede ayudar la carga diferida
La carga diferida reduce los tiempos de carga. Un sitio web más rápido es bueno para la experiencia del usuario y los motores de búsqueda. También reduce el ancho de banda del servidor al cargar imágenes solo cuando son realmente necesarias. Esto ahorra ancho de banda, tanto en el servidor como en el usuario. Puede aplicar la carga diferida a páginas seleccionadas o en todo el sitio.
Un inconveniente de la carga diferida es que es posible que los motores de búsqueda no encuentren el contenido que viene después del plegado. Es posible que los motores de búsqueda no reconozcan el contenido de desplazamiento infinito. Para superar este inconveniente, al menos en parte, necesitamos estructurar las URL para que puedan ser procesadas por los motores de búsqueda. Esto puede hacer que los marcadores de posición sean más visibles para los motores de búsqueda hasta que se cargue la imagen.
Hay una serie de complementos que pueden hacer que la carga diferida funcione en su sitio web de WordPress. Veamos algunos de los complementos populares,
Bj carga perezosa
Para reemplazar todas o algunas de las imágenes de sus publicaciones, publicar miniaturas, imágenes de gravatar e iframes de contenido con un marcador de posición, use Bj carga perezosa. También puede reemplazar los iframes, y esto significa que puede cargar videos incrustados de YouTube y Vimeo. También funciona para widgets de texto. Con un filtro simple, las imágenes y los iframes de su tema pueden retrasarse.
Para que el complemento funcione en su sitio web, simplemente descárguelo, instálelo y actívelo. A continuación, puede visitar la configuración y averiguar qué elementos deben retrasarse durante la carga. Agregue su propia imagen de marcador de posición, si lo desea.
Este complemento utiliza JavaScript. Como resultado, un visitante sin JavaScript verá los elementos originales sin ningún retraso en la carga.
Carga lenta
Un complemento de uso común para agregar carga diferida a sitios web de WordPress, Carga lenta es un complemento simple de instalación y activación. Puede probarlo con confianza, sabiendo que está desarrollado utilizando una combinación de código del equipo VIP de WordPress.com en Automattic, el equipo de rediseño de TechCrunch 2011 y Jake Goldman (10up LLC).
Además, no necesita hacer nada más después de la activación. Sin embargo, si desea realizar algunos cambios, puede hacerlo editando el archivo php. Los autores han proporcionado algunos fragmentos de código útiles a los que puede consultar para modificar la imagen del marcador de posición, para cargar imágenes de forma diferida en su tema o para cargar de forma diferida todas sus imágenes mediante el almacenamiento en búfer de salida.
Ajax Load More – Desplazamiento infinito
Ajax Cargar más es apto para la carga retrasada en páginas web largas que se ven desplazándose hacia abajo. Úselo para publicaciones de carga diferida, tipos de publicaciones personalizadas, publicaciones individuales, páginas y comentarios.
Además, puede utilizar Shortcode Builder para enmarcar consultas personalizadas de WordPress. Agregue el código abreviado que se genera a las páginas que seleccione a través del editor de contenido o directamente a los archivos de plantilla. Vea la página desde la interfaz y verifique Ajax Load More cargando el contenido incluso mientras se desplaza hacia abajo.
Además, Ajax Load More funciona bien con WooCommerce y Easy Digital Downloads, por lo que es adecuado para páginas de productos largas.
Carga diferida para videos
Si está ejecutando un sitio web que tiene varios videos incrustados, este es para usted. Carga diferida para videos reemplaza sus videos incrustados con una imagen en la que se puede hacer clic. La página web no carga videos tan pronto como un visitante llama a la página. Los videos se cargan solo cuando se hace clic en la imagen.
El complemento inspecciona los videos incrustados y reemplaza todos los archivos externos con una imagen estática y un botón de reproducción. Los videos se cargan solo cuando un visitante hace clic en el botón. Esto puede tener un impacto real en la velocidad de carga de la página, especialmente si tiene muchos videos. Y para el usuario, es una experiencia fluida.
a3 Carga diferida
Dado que los sitios web se visualizan cada vez más en dispositivos portátiles, también deben optimizarse para una experiencia móvil. a3 Carga diferida está diseñado para mejorar la velocidad del sitio en dispositivos móviles al retrasar la carga de elementos de página seleccionados. Los elementos se pueden seleccionar en la configuración de administrador.
El complemento ofrece soporte para contenido en iframes ubicados en cualquier parte del contenido o widgets. Los medios integrados de WordPress, los cuadros Me gusta de Facebook con perfiles, los botones Me gusta, los botones Recomendar, los perfiles de Google+, Google Maps y otros contenidos multimedia similares se pueden seleccionar para la carga diferida.
Además, no hay conflicto con Accelerated Mobile Pages (AMP): la carga diferida no se aplica al /amperio punto final. Solo cuando el navegador tiene una URL sin /amperio esa carga perezosa entra en juego.
WP YouTube Lyte
Si su sitio web se basa en gran medida en YouTube, WP YouTube Lyte puede beneficiarle mucho. Inserta «incrustaciones de YouTube Lite» que parecen similares a las incrustaciones de YouTube. Pero los videos se solicitan solo cuando se hace clic en ellos.
Para que este complemento funcione en su sitio web, es necesario registrarse en YouTube como nuevo solicitante. El complemento utiliza la API de YouTube de cada video para obtenerlo del repositorio de YouTube. Para usar esa API en su sitio web, la clave API que le proporcionó YouTube debe estar habilitada. Debe completar la clave del servidor que recibe de YouTube.
Una vez que haya habilitado las claves de la API de YouTube, ajuste la configuración para obtener las dimensiones y la posición del reproductor a su gusto.
Página de carga con pantalla de carga
Con Página de carga con pantalla de carga, los usuarios pueden tener una idea del tiempo de espera antes de que se cargue la página. El complemento muestra una pantalla que muestra el progreso de la carga como un porcentaje de finalización.
Elija mostrar el progreso solo en la página de inicio o en todas las páginas. Con la versión gratuita, solo se usa una barra de progreso para la visualización. Para obtener más opciones, deberá actualizar a la versión premium. Además, la versión premium aplica la carga diferida a las imágenes.
Algunos complementos más,
- Cargar más es una función útil en las páginas de productos extensas. Estos se encuentran comúnmente en los sitios web de WooCommerce. WooCommerce Infinite Scroll y paginación Ajax convierte la paginación del producto predeterminada en desplazamiento infinito o paginación Ajax. Para el usuario, esto significa que no tiene que hacer clic repetidamente en ‘Página siguiente’. Cuando un usuario llega al final de la página, el siguiente conjunto de productos se recupera y carga automáticamente. Hay diferentes opciones de paginación disponibles para dispositivos móviles.
- Cargar más productos para WooCommerce se puede agregar para cargar más productos desde la página siguiente usando Ajax con desplazamiento infinito o un botón Cargar más. Para efectos de animación y personalización, una versión pro está disponible.
- Imágenes Lazyload y presentación de diapositivas – Con este complemento, puede elegir agregar un efecto de caja de luz o un efecto de galería personalizado a cualquier imagen, así como retrasar la carga. Viene con 3 efectos, y también puedes agregar los tuyos.
- Carga perezosa del cohete – Es extremadamente ligero (menos de 2kb). Inyecta un poco de Javascript en el encabezado de su sitio que funciona en miniaturas, todas las imágenes en una publicación, en un texto de widget o avatares. Retrasa las imágenes en todo el sitio sin utilizar ninguna biblioteca de JavaScript como jQuery.
- Loco perezoso – Hace el mismo trabajo mientras es liviano, fácil de instalar y usar, y no necesita configuración. Cualquier imagen se puede excluir simplemente agregando un atributo a la imagen.
- Carga diferida XT – Es un complemento rápido que funciona para imágenes, marcos, videos de YouTube y Vimeo. Es totalmente personalizable.
Muchos controles deslizantes como Royal Slider y Carrusel eléctrico WP también incorporan el principio de carga diferida para cargar imágenes. Event Booking Pro admite un calendario de carga diferida.
En conclusión
La carga diferida es una forma eficaz de mejorar la velocidad del sitio, especialmente en sitios web que tienen varias imágenes y videos. Existen muchos otros métodos, como la optimización de imágenes y el almacenamiento en caché, que también pueden ayudar a mejorar la velocidad del sitio. Elija el complemento que mejor se adapte a su sitio web y optimice el rendimiento para que sea una mejor experiencia para el usuario.
