¿Por qué puede necesitar WordPress Lazy Load para acelerar una página web?

¿Por qué cargar más datos de los que podemos mostrar?

Un sitio web rápido es más sostenible y, en general, más eficiente para atraer a más usuarios que pueden encontrar lo que necesitan de forma rápida y sencilla. Pero, si las imágenes no se optimizan correctamente, también pueden resultar en una carga significativa que puede ralentizar la carga de la página, la capacidad de respuesta y más.

Según Akamai, el 47 por ciento de los visitantes espera que una página web se cargue en dos segundos o menos . Si una página tarda más de 3 segundos en cargarse, el 40 por ciento de los visitantes abandonará el sitio web. Además, una demora de 1 segundo puede costar una disminución del 7 por ciento en las ventas. Porque:

Nadie quiere "esperar" a que se cargue una página web.

No solo esto, el gigante de los motores de búsqueda, Google, también prefiere sitios web que tienen tiempos de carga rápidos de menos de 2-3 segundos.

Por lo general, una página web o una publicación / página de WordPress consta de varios contenidos de página que incluyen HTML, CSS, JavaScript, imágenes, videos, comentarios, etc. Generalmente, hay varias formas de acelerar un sitio web de WordPress, pero la mayoría de las técnicas van desde minimizar el código hasta la técnica de carga diferida en WordPress.

En esta guía, explicaremos la carga diferida, sus ventajas / desventajas, casos de uso y luego le mostraremos cómo cargar imágenes, videos, comentarios y cómo usar el desplazamiento infinito de WordPress .

¿Qué es una carga diferida?

Cuando un visitante abre una página web, todo el contenido de la página comienza a descargarse y procesarse, sin importar qué tan pesado sea el contenido. Hay posibilidades de que un visitante cierre una página web solo después de ver la primera página.

Visitar una página consume ancho de banda y usa memoria para guardar los datos almacenados en caché. Salir de la página muy rápidamente puede resultar en un desperdicio de memoria y ancho de banda. Aquí es donde entra la carga diferida:

La carga diferida es una técnica para cargar contenido web cuando es necesario en lugar de todo a la vez.

Al utilizar la técnica de carga diferida, el contenido de la página se carga solo cuando se vuelve visible en la ventana gráfica (pantalla).

¿Cómo funciona la carga diferida?

Básicamente, la carga diferida coloca un atributo src de referencia a los recursos de la página web cargados de forma diferida (imagen, video, etc.) y agrega otro atributo para el contenido original, luego usa JavaScript para detectar la posición de desplazamiento de los visitantes de una página. Cuando la posición de desplazamiento está más cerca de un objeto de referencia, reemplaza el atributo src de referencia con el src real y carga el contenido.

Por ejemplo, si un visitante abre una página web y la abandona inmediatamente, no se carga nada más allá de la parte superior de una página web.

La carga de activos en tiempo de ejecución reduce la cantidad de solicitudes que una página tiene que enviar al servidor para la carga inicial, lo que resulta en una comunicación más rápida y mínima entre el servidor de alojamiento de WordPress y el visitante de una sola vez.

¿La carga diferida afecta el SEO?

La carga diferida no es compatible con SEO (al menos en el momento de redactar esta guía). Dado que el contenido (imágenes, videos, comentarios, etc.) no se carga inicialmente para los visitantes, el mismo flujo es para las arañas de los motores de búsqueda. Existe la posibilidad de que algunos de los contenidos Lazy Loaded (imágenes, videos) no se indexen en la sección de imágenes / videos de Google, lo cual no es bueno desde la perspectiva de SEO.

Existen soluciones alternativas, como agregar enlaces a su contenido Lazy Loaded. De esta manera, Google la tomará como una página web estándar e indexará el contenido en consecuencia. Sin embargo, los visitantes seguirán viendo una página web como Lazy Loaded.

El gigante de los motores de búsqueda, Google, está trabajando y preparando los documentos de ayuda sobre cómo se puede aprovechar Lazy Loading y hacer que el contenido de Lazy Loaded sea detectable por GoogleBot.

¿Los medios ralentizan los sitios web?

Las imágenes y los videos forman parte de los elementos de contenido web de una página web. Así, sí, el impacto en el tiempo de carga.

Cuanto más pesado sea el tamaño de una página web, más tiempo tardará en cargarse.

Por lo tanto, siempre se sugiere optimizar las imágenes antes de subirlas a un sitio de WordPress. Puede usar WP Compress, ShortPixel, WP Smush It, etc. para reducir el tamaño de la imagen.

Además, especifica las dimensiones de la imagen, como si tuvieras una imagen de 1000 × 1000 px pero la escalaste a 100 × 100 px, el navegador cargará diez veces más de lo necesario. Además, evite formatos de archivo complejos como TIFF, BMP, etc., porque los navegadores pueden cargar imágenes JPG, PNG y GIF rápidamente.

¿Debería utilizar la carga diferida?

¡Esta es la era de la velocidad!

Todo visitante espera que una página web se cargue en un abrir y cerrar de ojos. Debe seguir buscando formas de mejorar los tiempos de carga de la página y la carga diferida es una de las formas de hacerlo.

Con el crecimiento masivo de usuarios móviles, más del 52% del tráfico mundial se atiende a través de teléfonos inteligentes. Definitivamente, uno debe considerar a los usuarios móviles al optimizar un sitio web de WordPress.

3 casos de uso de carga diferida

La mayoría de las veces, la carga diferida se usa para imágenes, pero esto no se limita solo a imágenes. Puede usarse para integrarse con videos, comentarios, scripts, etc. Los gigantes de Internet ya están usando la carga diferida de una forma u otra. Éstos son algunos de ellos:

1. Medio

Si alguna vez ha visitado Medium, debe haber observado que muestra un marcador de posición borroso para las imágenes de carga diferida hasta que la imagen real de alta resolución se haya cargado por completo, por lo que los visitantes esperan que se esté cargando una imagen. Esto mejora la experiencia del usuario al mostrar algunos de los contenidos cargados inicialmente para mantener la atención del visitante.

2. YouTube

De forma predeterminada, lo primero que muestra YouTube es el video que desea ver y no carga comentarios ni miniaturas de otros videos sugeridos en la carga inicial. Cuando comience a desplazarse, comenzará a cargar los elementos cargados con pereza, como miniaturas y comentarios. De esta manera, el visitante no tiene que esperar a que se cargue una página completa. Puede comenzar a ver el video de inmediato.

3. Imágenes de Google

Es posible que haya observado que, cuando busca una imagen en Google, reemplaza las imágenes de marcador de posición con miniaturas y, después de mostrar varias imágenes, carga más imágenes. Google utiliza un enfoque diferente para combinar el desplazamiento infinito y la carga diferida para mejorar sus resultados de búsqueda.

Agregar carga diferida a un sitio web de WordPress

Puede reducir la cantidad de solicitudes implementando una técnica de carga diferida en un sitio web de WordPress que ayuda a reducir el tiempo de respuesta del servidor, lo que resulta en una experiencia de carga de la página más rápida.

Implementar la carga diferida en el contenido de WordPress no es tan técnico, gracias a la comunidad de WordPress por sus contribuciones.

1. Complementos de carga diferida de WordPress

Si busca " carga diferida " en el directorio de complementos de WordPress, encontrará una serie de complementos de carga diferida. Pero para esta guía, elijo a3 Lazy Load , uno de los complementos más populares, ricos en funciones y ampliamente utilizados para implementar la técnica de carga diferida en un sitio web de WordPress.

2. Imágenes de carga diferida de WordPress

Las imágenes requieren muchos recursos y consumen mucho ancho de banda y espacio de almacenamiento. Con el complemento a3 Lazy Load, puede alternar entre ON / OFF. No solo esto, cuando la carga diferida de imágenes está activada, puede controlar dónde debería funcionar, lo que incluye:

• Publicaciones, páginas y tipos de publicaciones personalizadas (todas las áreas de contenido)
• Widgets (barra lateral, encabezado y pie de página)
• Aplicar para publicar miniaturas
• Aplicar a Gravatars

3. Vídeos de carga lenta de WordPress e iFrames

a3 Lazy Load no se limita solo a imágenes de carga diferida, sino que también le permite cargar vídeos de forma diferida. Es compatible con todas las incrustaciones de video de WordPress que usan iFrames para cargar videos en la carga inicial. Nuevamente, contiene conmutadores para ENCENDIDO / APAGADO. Si está activado, puede controlar las áreas mencionadas a continuación:

• Vídeos incrustados por URL en publicaciones y páginas (todas las áreas de contenido)
• Vídeos en tipos de widgets, widgets de texto y widgets HTML
• Totalmente compatible con el popular complemento de inserción de YouTube

4. Comentarios de carga diferida de WordPress

Hay una serie de complementos de comentarios de WordPress que utilizan la mayoría de los usuarios de WordPress. La carga diferida se puede aplicar a muchos de ellos mediante el uso de diferentes complementos de carga diferida de WordPress:

• Para comentarios predeterminados de WordPress, puede usar Carga diferida para comentarios
• Para los comentarios de Disqus, puede usar la carga condicional de Disqus
• Para los comentarios de Facebook, puede usar Comentarios perezosos de Facebook

5. 5. Más complementos de carga diferida para WordPress

Además de a3 Lazy Load, hay varios complementos útiles que pueden considerar:

• a3 Carga diferida
• Bj carga perezosa
• WordPress Infinite Scroll - Ajax Cargar más
• Carga perezosa de WP Rocket
• Cargar más productos para WooCommerce
• Carga diferida para comentarios
• Carga condicional de Disqus
• Carga diferida para videos

Desplazamiento infinito de WordPress

Como sugiere el nombre, el desplazamiento infinito agrega automáticamente la página siguiente, lo que le ahorra tiempo de una página completa para cargar de una vez. Por ejemplo, es probable que lo haya experimentado en Facebook Newsfeed. Simplemente sigue desplazándote hacia abajo y el feed se actualiza automáticamente en lugar de cargar toda la página.

En WordPress, puede implementar esto utilizando el complemento Descargar WordPress Infinite Scroll - Ajax Load More. Se utiliza para cargar publicaciones de forma diferida, publicaciones individuales, páginas, comentarios y más con consultas impulsadas por AJAX.

No solo esto, sino que también es útil para un desplazamiento sin fin con complementos de comercio electrónico populares como WooCommerce y Easy Digital Downloads que muestran miles de productos sin cargar toda la página web.

Google Chrome puede integrar la carga diferida de forma predeterminada

Google está trabajando para hacer que el contenido cargado de forma perezosa sea más accesible. También está experimentando con las posibilidades de agregar soporte para carga diferida en Google Chrome. Por lo tanto, solo cargará las partes de las páginas que se muestran actualmente en la pantalla y todo lo que está "debajo de la página" se cargará a medida que se desplaza hacia abajo.

Actualmente, está disponible para probar en Google Chrome Canary, una versión de lanzamiento anticipada destinada a desarrolladores y usuarios pioneros. Para probarlo, descarga Canary, luego ingresa a continuación en la barra de direcciones:

• chrome: // flags / # enable-lazy-image-loading
• chrome: // flags / # enable-lazy-frame-loading

Cuando estas banderas están activas, Google Chrome no cargará ninguna imagen o iFrames que no estén visibles actualmente en la pantalla. Ayudará a cargar páginas web más rápido en Google Chrome y reducirá el uso de ancho de banda, lo que la convierte en una característica particularmente útil para los navegadores móviles. ¡Continúe y atienda a sus visitantes móviles de una manera mejor!