Cómo cargar imágenes + videos de forma diferida en WordPress (y reemplazar iFrames de YouTube con una imagen de vista previa) para obtener mejores resultados de GTmetrix

Cuál es la mejor manera de imágenes y videos de carga perezosa en WordPress?


Esto depende de si ya está utilizando un complemento de caché que admite carga diferida (WP Rocket, W3 Total Cache, Swift, LiteSpeed ​​Cache). Si su complemento de caché admite imágenes y videos de carga diferida, es mejor usarlo para evitar tener que instalar un complemento adicional. Pero si su complemento de caché no admite la carga diferida, recomiendo usar uno que lo haga (especialmente WP Rocket), de lo contrario, enumeré complementos de carga diferida alternativos a continuación, puede instalar individualmente.

¿Qué es la carga perezosa??
La carga diferida significa que las imágenes y los videos solo se cargan una vez que los usuarios se desplazan hacia abajo en la página y realmente los ven. Esto da como resultado menos solicitudes HTTP en la página, sin embargo, si tiene muchas imágenes o videos incrustados, es necesario cargarlos constantemente. Desplácese hacia abajo en la página.

¿Qué significa reemplazar el iframe de YouTube con una imagen de vista previa??
Si inserta videos en su sitio de WordPress, esto solo carga el “reproductor gordo de YouTube” una vez que las personas hacen clic en el botón Reproducir. En otras palabras, lo único que se carga inicialmente es una imagen de vista previa.

Debería cargar imágenes y videos con pereza?
No tengo que cargar imágenes de forma diferida porque cargar imágenes constantemente a medida que se desplaza hacia abajo puede ser molesto para los usuarios. Sin embargo, todas mis imágenes están optimizadas al 100% en GTmetrix. Hago videos de carga diferida y reemplazo el iframe con una imagen de vista previa. Dado que cada video incrustado puede tardar 2 segundos en cargarse (mucho más pesado que una imagen), el beneficio de cargar videos diferidos es significativo.

1. WP Rocket

WP Rocket es mi opción n. ° 1 para la carga diferida y fue el complemento de caché n. ° 1 en las encuestas de Facebook.

Como ya tiene una carga lenta incorporada, esto significa que no tiene que instalar un complemento adicional. Ese es el beneficio completo de WP Rocket; viene con más funciones que casi cualquier otro complemento de caché (lo que resulta en mejores tiempos de carga y puntajes de GTmetrix), pero menos complementos en su sitio. WP Rocket tiene extensa documentación sobre carga diferida y la configuración de WP Rocket.

WP Rocket

Cómo habilitar la carga diferida en WP Rocket
Para habilitar la carga diferida en WP Rocket, vaya a Configuración > WP Rocket > Medios de comunicación > Carga lenta. Puede habilitarlo para imágenes, iframes y videos, y reemplazar los iframes de YouTube con una imagen de vista previa.

Lazy Load Images WP Rocket

2. SG Optimizer

SiteGround introdujo la carga perezosa en su gran actualización de SG Optimizer.

Por supuesto, debe ser un cliente de SiteGround para usar este complemento (lo que haría para el alojamiento compartido teniendo en cuenta que fueron calificados como el host # 1 en más de 20 encuestas de Facebook). SG Optimizer es comparable a WP Rocket, pero no tiene casi tantas funciones. Entonces, si está utilizando SiteGround para su host, aún preferiría WP Rocket sobre su SG Optimizer.

SiteGround SG Optimizer

Cómo habilitar la carga diferida en SG Optimizer
Para habilitar la carga diferida en SG Optimizer, vaya a Configuración > SG Optimizer > Por defecto del sitio > Optimización de imagen. Puede cargar imágenes de manera diferida, Gravatars, miniaturas, imágenes receptivas y widgets. Si tiene comentarios en su blog, Gravatars de carga lenta puede ayudar enormemente.

SG Optimizer Lazy Loading

3. Caché total W3

Si ya está utilizando W3 Total Cache, también tienen un opción de carga diferida.

W3 Total Cache se consideró abandonado por algún tiempo, pero el desarrollador ha comenzado a mantener su complemento. Tengo un extenso tutorial para configurar la configuración de W3 Total Cache.

Complemento de caché total W3

Cómo habilitar la carga diferida en la caché total de W3
Para habilitar la carga de carga en W3 Total Cache, vaya a Configuración > Configuración general > Experiencia de usuario > Carga lenta. Active esto, luego vaya a Experiencia de usuario > Carga lenta. Elija procesar etiquetas de imagen HTML, imágenes de fondo, excluir palabras y método de inserción de script.

W3 Total Cache Carga diferida

4. caché Litespeed

Caché literalizado carga lenta también hará el trabajo (Litespeed es un plugin de caché bien revisado).

Plugin LiteSpeed ​​Cache

Cómo habilitar la carga diferida en la memoria caché LiteSpeed
Para habilitar la carga de carga en LiteSpeed ​​Cache, vaya a LiteSpeed ​​Cache > Configuraciones > Medios de comunicación > Configuraciones de medios. Aquí puede habilitar imágenes de carga diferida, iframes, excluir imágenes, solicitar automáticamente la optimización a través del trabajo cron, incluir la biblioteca Javascript en línea y alternar otras configuraciones.

Lazy Load Images Videos Litespeed Cache

5. Rendimiento rápido

Rendimiento rápido es otro complemento de caché que admite carga diferida. Swift obtuvo excelentes críticas en el grupo de WordPress Speed ​​Up Facebook, pero las revisiones en la página del complemento de WordPress son solo de 4 estrellas. No he probado Swift Performance; Estoy perfectamente feliz con WP Rocket.

Complemento Swift Performance Lite

Cómo habilitar la carga diferida en un rendimiento rápido
Para habilitar la carga de carga en Swift Performance, vaya a Configuración > Medios de comunicación > Carga lenta. Aquí tendrá la opción de cargar imágenes diferidas, excluir ciertas imágenes e imágenes de carga diferida en línea.

Imágenes de carga perezosa Rendimiento rápido

6. Optimización automática

La optimización automática a menudo se usa con hosts como GoDaddy y WP Engine, donde tienen su propio sistema de almacenamiento en caché incorporado y complementos de caché de lista negra. En este caso (dado que desea ocuparse de otras optimizaciones de velocidad), Autoptimize suele ser el complemento para eso. Una de sus muchas características es carga lenta, pero también te permite optimizar HTML, CSS, JavaScript y Google Fonts.

Complemento de optimización automática

Cómo habilitar la carga diferida en la optimización automática
Para habilitar la carga de carga en Optimización automática, vaya a Configuración > Imágenes > Imágenes de carga perezosa. También tiene la opción de usar el CDN de ShortPixel que para la optimización de la imagen (este es el complemento que uso).

Las imágenes de carga diferida se optimizan automáticamente

7. Smush

Smush es un complemento de optimización de imagen que admite carga diferida. Fue desarrollado por WPMU, sin embargo, personalmente uso ShortPixel para una compresión sin pérdidas, ya que es el único que he usado que hace que mis imágenes sean 100% en GTmetrix (y he probado muchos complementos de optimización de imágenes).

Complemento Smush

Cómo habilitar la carga perezosa en Smush
Para habilitar la carga de carga en Smush, vaya a Smush > Tablero > Carga lenta. Puede elegir qué tipos de archivos desea cargar de forma diferida (.jpeg, png, .gif, .svg, iframe) y si desea habilitarlos para contenido, widgets, miniaturas, Gravatars. Incluso tiene configuraciones de animación de carga diferida.

Smush Lazy Load

8. Carga perezosa por WP Rocket

Carga perezosa por cohete WP es bueno si no estás usando WP Rocket pero quieres cargar imágenes de forma diferida.

Plugin de carga diferida

Cómo habilitar la carga diferida en la carga diferida por WP Rocket
Ir a la configuración > Carga lenta. Tiene la opción de cargar imágenes diferidas, iframes & videos y reemplace los videos de YouTube por miniaturas. No hay muchas configuraciones para configurar; Personalmente desearía que hubiera más. Quizás es por eso que este complemento de carga diferida no tiene las mejores críticas.

Carga perezosa por cohete WP

9. A3 Lazy Load

A3 Carga perezosa admite la carga diferida de imágenes y videos.

a3 Plugin de carga diferida

Cómo habilitar la carga diferida en A3 Lazy Load
Para habilitar la carga de carga en A3 Lazy Load, vaya a la configuración > A3 Carga perezosa. Puede configurar los ajustes para las imágenes de carga diferida, videos, iframes, Gravatars y elegir qué áreas de su sitio web desea que se aplique la carga diferida (incluidos los dispositivos móviles). También hay opciones para habilitar un efecto de carga diferida, cargar el color de fondo y la opción de excluir URL y tipos de publicaciones.

a3 Configuración de carga diferida

10. BJ Lazy Load

BJ Lazy Load no parece estar bien mantenido, por lo que probablemente usaría otro complemento.

Complemento BJ Lazy Load

Cómo habilitar la carga diferida en BJ Lazy Load
Para habilitar la carga de carga en BJ Lazy Load, vaya a Configuración > BJ Lazy Load. La configuración es relativamente simple y le da la opción de cargar imágenes diferidas, iframes, Gravatars y excluir la carga diferida del contenido, los widgets de texto y publicar miniaturas. También hay una opción para incluir una imagen de marcador de posición, umbral de vista y usar una imagen de vista previa de baja resolución cuando se carga de forma diferida.

Configuración de carga diferida de BJ

11. Carga perezosa para imágenes

Carga perezosa para imágenes es bueno si solo quieres hacerlo por imágenes.

Complemento Lazy Load for Images

Cómo habilitar la carga diferida para imágenes
No hay configuraciones para configurar en el complemento Lazy Load For Images (es automático).

12. Carga diferida para videos

Carga perezosa para videos reemplaza videos incrustados con imágenes de vista previa en las que se puede hacer clic.

Plugin de carga diferida para videos

Cómo habilitar la carga diferida en la carga diferida para videos
Para habilitar la carga de carga en Lazy Load For Videos, vaya a Configuración > Carga perezosa para videos. Elija cargar solo CSS / JS cuando sea necesario, personalizar el botón de reproducción y aplicar CSS personalizado.

Plugin de carga diferida para videos

13. Carga diferida para comentarios

Puede cargar comentarios diferidos utilizando el Carga perezosa para comentarios enchufar.

Esto puede ayudar a hacer menos solicitudes HTTP si tiene muchos comentarios en su blog, especialmente porque Gravatars puede tardar mucho tiempo en cargarse entre todas las solicitudes de terceros.

Plugin de carga diferida para comentarios

Cómo habilitar la carga diferida en la carga diferida para comentarios
Para habilitar la carga de carga en Lazy Load For Comments, vaya a Configuración > Discusión > Comentarios de carga diferida. Esa es la única configuración de configuración para este complemento, pero tiene buenas críticas.

Comentarios de carga diferida

14. WP YouTube Lyte

WP YouTube Lyte es uno de mis complementos favoritos (y mejor revisados) para videos de carga diferida. Fue creado por el equipo de Autoptimize que tiende a tener buenas revisiones de complementos en todo.

Complemento WP YouTube Lyte

Cómo habilitar la carga diferida en WP YouTube Lyte
Para habilitar la carga de carga en WP YouTube Lyte, vaya a Configuración > WP YouTube Lyte. Agarra tu Clave API de YouTube e ingréselo en Autoptimize. Seleccione el tamaño de su reproductor, si desea incluir enlaces, posición del jugador, forzar HD, actuar como enlace / iframes normales de YouTube y agregar microdatos. El almacenamiento en caché de miniaturas localmente a menudo puede corregir los errores de GTmetrix al incrustar videos de YouTube.

Miniaturas de YouTube GTmetrix

Configuración de Wp YouTube Lyte

Aún necesitas ayuda?

Tengo un gran video sobre la optimización de velocidad de WordPress:

También tengo tutoriales para optimizar imágenes, configurar WP Rocket, reducir los tiempos de respuesta del servidor y más. Puedo obtener el 100% (o cerca) de las puntuaciones de GTmetrix en casi todas mis publicaciones con estos consejos. Si tiene alguna pregunta, no dude en enviarme un comentario, me alegra ayudarlo!

Preguntas frecuentes

&# x2705; ¿Qué complemento es mejor para cargar imágenes de forma diferida??

Si ya está utilizando un complemento de caché que admite carga diferida (por ejemplo, WP Rocket, SG Optimizer, W3TC, Swift, LiteSpeed), lo mejor es intentarlo primero. De lo contrario, Autoptimize o el complemento Lazy Load de WP Rocket son buenos complementos de carga diferida.

&# x2705; ¿Qué pasa con la carga perezosa de videos??

WP Rocket y algunos otros complementos de caché le permiten cargar videos de manera diferida y reemplazar el iframe de YouTube con una imagen de vista previa. De lo contrario, WP YouTube Lyte funcionará.

&# x2705; La carga diferida perjudicará la experiencia del usuario?

No tengo carga lenta de imágenes en este sitio web, pero sí videos de carga lenta porque tardan mucho más en cargarse. La carga lenta de imágenes puede ser molesta para los usuarios y disminuir las ventas de mis afiliados, por lo que la desactivé.

&# x2705; ¿Qué hace la carga diferida??

La carga lenta acelera los tiempos de carga iniciales al esperar para cargar imágenes y videos hasta que los usuarios se desplazan hacia abajo en la página y realmente los ven.

&# x2705; Cómo desactivar la carga diferida en páginas específicas?

La mayoría de los complementos te permiten hacer esto. Por ejemplo, si está utilizando WP Rocket y edita una página o publicación, verá una opción en su tablero para deshabilitar (o habilitar) la carga diferida en ese contenido específico.

Salud,
Tom

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map