¿Qué es la carga diferida? Un concepto claro

Un concepto claro sobre lo que es la carga diferida. Cómo mejorar la velocidad de carga del sitio aplicando la técnica de carga diferida. ¿Cuáles son los complementos de carga diferida de imagen recomendados y más?

La carga diferida es una técnica en la que las imágenes, el video y otros archivos multimedia se cargan solo cuando es necesario (en este caso, la página se desplaza hacia abajo hasta la imagen).

Google popularizó la carga diferida. Google lo ha implementado en la mayoría de los sitios web de alto tráfico que poseen.

En realidad, es una excelente manera de mejorar el rendimiento de su sitio web para sus usuarios.

Esta es una mejor manera de implementar la carga dinámica de recursos que la precarga porque es de naturaleza lenta y solo carga los activos cuando es necesario.

Cuando se desplaza hacia abajo en la página, se cargan los archivos multimedia y las imágenes en particular. Esto reduce significativamente el tiempo inicial de carga de la página al reducir la cantidad de solicitudes realizadas para recursos HTML, CSS y JavaScript.

Las imágenes de carga diferida siempre se pueden implementar utilizando complementos de terceros, pero en realidad es bastante simple de implementar en su sitio web existente si se siente cómodo con el código HTML/CSS.

¿Por qué debo agregar la carga diferida a mi sitio?

Durante mucho tiempo, cargar todos los elementos de la página en paralelo fue la mejor práctica. Pero hoy en día es muy común que los usuarios tengan conectividad limitada y redes móviles rápidas.

Por esta razón, es una buena idea cargar solo lo que necesita al principio y luego cargar recursos adicionales más adelante cuando sean necesarios.

La carga diferida también puede reducir la cantidad de trabajo que debe realizar el navegador en el momento de la carga de la página. En última instancia, esto significa que obtendrá una carga de página más rápida para el usuario.

Hay muchas maneras de implementar la carga diferida en su sitio web. Como cualquier técnica, hay algunos pros y contras asociados con cada método.

¿Cómo agregar la carga diferida en el sitio de WordPress?

Puede agregar carga diferida a cualquier sitio web con algunas adiciones simples de código CSS y JavaScript. Todo lo que necesita es un poco de etiquetado HTML también.

Pero en esta publicación, hablaré solo sobre los complementos de carga diferida de WordPress que le permiten disfrutar de las ventajas de las imágenes de carga diferida en un sitio de WordPress.

¿Cómo agregar carga diferida usando un complemento?

Hay muchos complementos de WordPress disponibles que agregarán automáticamente la funcionalidad de carga diferida a su sitio web con un solo clic.

Si desea aumentar el tiempo de carga general del sitio, le recomendaré el complemento de optimización de velocidad de Permatters. Este complemento optimizará su sitio web para una mejor experiencia y rendimiento del usuario. También tiene algunas características adicionales, como carga diferida, compresión gzip, etc.

Si desea ensuciarse las manos con el código o tiene algún requisito avanzado, le recomendaré otros complementos siguientes.

WP Rocket es uno de los complementos de caché de WordPress más populares. También es el complemento más popular para imágenes de carga diferida. Le ayudará a reducir la velocidad de carga y aumentar el total de páginas vistas. Puedes leer la reseña de WP Rocket.

También puede usar el complemento Light Speed ​​Cache, que es otro complemento popular entre los usuarios de WordPress. Le permite utilizar reglas avanzadas de almacenamiento en caché para su sitio web, lo que ayuda a mejorar el tiempo de carga de la página y también reduce el uso del ancho de banda.

Además, los complementos anteriores ayudan a cargar iFrames. Te recomiendo estos complementos para eso.

Carga diferida frente a carga dinámica frente a precarga de JavaScript frente a carga diferida ansiosa

La gran diferencia entre los cuatro términos es lo que sucede cuando un usuario visita su sitio por primera vez.

Carga diferida: con la carga diferida, los recursos se cargan según sea necesario (como sugiere el nombre). Esto significa que, dependiendo de las acciones de los usuarios, es posible que ciertos elementos no se carguen en absoluto.

Carga dinámica : con la carga dinámica, tendrá que precargar todo, incluso si no es necesario. Entonces, dependiendo de la cantidad de datos que tenga que enviar, esto podría aumentar significativamente el tiempo de carga de la página, incluso si nadie ve parte de ese contenido.

Precarga de JavaScript:

La precarga de JavaScript es una parte importante del proceso de carga diferida de imágenes. Facilita la memoria caché del navegador mediante la entrega de HTML (y CSS si está utilizando una solución basada en estilos).

Utiliza AJAX para entregar un archivo separado para cada imagen en su página. Esto permite que los navegadores comiencen a descargar imágenes antes de que se hayan cargado por completo, lo que aumenta la cantidad de imágenes que se pueden cargar a través de una conexión de red lenta o con una computadora cliente lenta.

Carga diferida ansiosa : esto es similar a la carga diferida, y cargará recursos según sea necesario. La diferencia es que con el método impaciente, no tienes que preocuparte de si algo está visible o no en este momento. Si ya está cargado, muy bien; de lo contrario, simplemente cárguelo cuando sea necesario.

Comprender la carga diferida para SEO

A algunas personas les preocupa que las imágenes de carga diferida afecten negativamente la capacidad de un SEO para acceder a su contenido.

Google hace un gran trabajo al almacenar en caché los recursos de su sitio web cada vez que lo rastrea, por lo que si carga elementos de una manera que permanece rápida con el tiempo y no cambia con demasiada frecuencia, no creo que nadie deba preocuparse por afectar su búsqueda. rango del motor.

Carga diferida y CDN

Hay algunos CDN útiles en la industria que pueden ayudarlo a distribuir sus archivos de imagen y multimedia. La mayoría de estos servicios brindan una excelente experiencia de usuario al implementar la funcionalidad de carga diferida para usted.

Cloudflare CDN es uno que me gustaría destacar entre otros servicios de CDN.

Cloudflare es una red de distribución de contenido que ofrece CDN gratuitos y de pago para todos los usuarios de sus cuentas. También optimiza su sitio web y mejora la seguridad al implementar algunas estrategias avanzadas como la optimización de la velocidad de la página, HTTP/2 y muchas más. También le ayuda a cargar de forma diferida la imagen de su sitio web y los archivos multimedia.

Lazy Loading In Desktop o Mobile: ¿Cómo afecta el SEO de Google?

La carga diferida ha existido en los escritorios durante mucho tiempo. Es una función que está disponible en la mayoría de los principales navegadores, pero hay algunas funciones, como la precarga y la carga parcial, que no están disponibles para todos los navegadores.

Sin embargo, con los dispositivos móviles, la carga diferida es algo a lo que deberá prestar atención.

Es importante que piense en ello como un factor de clasificación SEO porque Google ahora está prestando atención a las imágenes de carga diferida en dispositivos móviles.

La clave aquí no es solo implementar la carga diferida, sino también asegurarse de que carga los recursos de una manera rápida y eficiente. Si no es así, existe la posibilidad de que su clasificación en los motores de búsqueda se vea afectada negativamente.

Imagen de carga diferida en diferentes tamaños

Otra razón por la que deberías centrarte en las imágenes de carga diferida es el aumento del uso de dispositivos móviles.

A las personas les gusta navegar y buscar con sus teléfonos, pero no son tan rápidos ni precisos cuando se trata de hacer clic en enlaces, por lo que tener imágenes más grandes significa que es probable que las personas hagan clic antes de que se cargue la imagen completa.

Por lo tanto, tener imágenes más pequeñas obviamente será mejor para los dispositivos móviles, incluso si significa que se necesita cargar más datos, a la larga vale la pena porque las personas harán clic en lugar de abandonar su sitio web por completo.

¿Qué Frameworks se utilizan en la carga diferida?

Hay algunas opciones disponibles para usted:

1. Picturefill (uso predeterminado)

Picturefill es un script que proporciona una funcionalidad de carga diferida para sus imágenes. Esta biblioteca ligera de JavaScript funcionará con casi todos los principales navegadores y también responde. Por lo tanto, cambiará su comportamiento según el tipo de dispositivo que esté utilizando.

2. LazyLoadJS (uso predeterminado)

LazyLoadJS es un script que proporciona una funcionalidad de carga diferida para sus imágenes y es muy liviano y funciona con todos los principales navegadores. Así que no tienes que preocuparte por ningún problema al usarlo.

También presenta múltiples colas para mejorar el rendimiento general de su sitio web y es muy fácil de usar: los desarrolladores de todos los niveles no deberían tener problemas para usarlo.

3. LoadCSS (uso predeterminado)

LoadCSS es un script que proporciona una funcionalidad de carga diferida para sus hojas de estilo, a diferencia de otras bibliotecas que solo funcionan con imágenes o archivos de video. Esto también precargará HTML y JavaScript.

4. SlimerJS (no disponible)

SlimerJS es un script que proporciona la funcionalidad de carga diferida para sus imágenes y no utiliza ninguna biblioteca de JavaScript, pero tiene su propia API que puede usar para configurar la forma en que funciona la carga diferida de su imagen.

También es muy liviano y rápido, por lo que no afectará el rendimiento de su sitio web de ninguna manera.

¿Funciona la carga diferida en las imágenes de fondo?

Sí, funcionaría en imágenes de fondo.

Conclusión

La carga diferida es una de las técnicas de optimización de rendimiento menos utilizadas cuando se trata de WordPress y sitios web en general.

Es muy fácil de implementar una vez que sabes cómo hacerlo, pero no mucha gente lo sabe. Si desea mejorar la velocidad de carga de su página, le recomiendo encarecidamente que implemente la carga diferida para archivos de imagen y multimedia.