homefinance blog
Las imágenes y los videos son imprescindibles para cada sitio de WordPress hoy. Es difícil imaginar un sitio web sin pancartas de marketing, imágenes de productos, logotipos, galerías o incluso tutoriales en video. Desafortunadamente, las imágenes y los videos pueden ser pesados, lo que hace que los mayores contribuyentes al tamaño de la página. La pregunta es: ¿cómo podemos asegurarnos de que nuestras páginas web se carguen rápidamente incluso si usamos muchas imágenes y videos? El uso de un complemento de carga perezoso es una de las soluciones para optimizar la velocidad de su sitio. Como escribí en un artículo exhaustivo sobre la carga perezosa para WordPress, el script de carga de lazada carga las imágenes y videos solo cuando el usuario llega a esa sección (y no antes).
En esta guía, descubrirá qué es el script de carga perezosa y sabrá los mejores 7 complementos de carga perezosa que pueden ayudarlo a mejorar el rendimiento de su sitio. ¿Por qué debería elegir un complemento de carga perezoso para comenzar con los elementos básicos? La carga de perezosa es una técnica de optimización que carga el contenido visible, pero pospone el contenido del contenido que puede ver a continuación. Se aplica principalmente a imágenes fuera de la pantalla o videos que no se cargan hasta que se necesite. La carga perezosa es una manera fácil de optimizar la velocidad de la página y mejorar la experiencia del usuario final, ya que evita descargas innecesarias o ejecutar el código.
Por encima del pliegue vs. Debajo del pliegue, por ejemplo, si una página tiene una imagen que el visitante debe ejecutar para ver, entonces puede perezarse la imagen completa y mostrarla solo cuando el usuario llega a la ubicación. La verdad es que no tiene que monopizar todos los recursos del sistema para cargar todas las imágenes y videos de su sitio al mismo tiempo. ¿Por qué utilizar recursos para cargar algo que no se ve actualmente y ralentiza su sitio? De esta manera, se mejora el rendimiento del sitio, especialmente para sitios web con múltiples videos e imágenes de alta resolución. Debe considerar usar la carga perezosa si las páginas y las publicaciones que usan tienen más imágenes de alta resolución y videos construidos. En resumen, la carga perezosa reduce las llamadas de los visitantes en el servidor de su sitio, ya que usted dice que los medios se cargan solo cuando los visitantes los tienen en su pantalla. Para identificar si la implementación de la carga perezosa es fundamental para su sitio, probando el El rendimiento de su sitio de WordPress puede ser muy útil. Supongamos que tiene un sitio de noticias con muchas imágenes de alta resolución. Usted decide llevar a cabo una auditoría de rendimiento en Google PageSpeed Insights. En el informe del faro, descubra algunos problemas de imagen que ralentizan su sitio. ¿Cómo? Si presta atención a la sección las oportunidades a continuación, verá la recomendación “retrasar las imágenes fuera de la pantalla”.
La sección de oportunidades de PSI Lazing puede ayudar a mejorar el rendimiento, como se explicó anteriormente, la carga perezosa reduce los tiempos de carga y todos sabemos que un sitio web rápido mejora la experiencia del usuario. Antes de comenzar a implementar el script de carga perezosa, aquí hay una lista de beneficios en su página web: optimizar el ancho de banda y los recursos: el contenido se entregará a sus visitantes. Solo si lo solicitan. Esto tiene como objetivo reducir el uso del ancho de banda y reducir los costos con los recursos, porque el promedio se entrega solo cuando el usuario lo necesita, en lugar de todo a la vez.
Reducir el tiempo de carga inicial: la carga perezosa reduce el peso de su página web, lo que permite que su página se cargue mucho más rápido. ¡Los visitantes acceden a su contenido más rápido!
Mejor restricción del cliente: el contenido se transmite a los usuarios sin interrupciones. ¡Este es el camino a seguir para mantenerlos interesados!
Implementación de la carga perezosa en su sitio de WordPress para implementar la carga perezosa, deberá usar el “Script de carga perezosa” que cobra gradualmente las imágenes y videos a medida que ingresan a la ventana View. ¡La buena noticia es que no tiene que viajar manualmente cada soporte de medios de medios de su biblioteca para agregar el guión!
En esta guía, seleccionamos 7 complementos que permiten imágenes y videos perezosos. Los mejores y más rápidos complementos de carga perezoso como siempre, para un problema, WordPress ofrece una solución. Muchos complementos gratuitos del director de complementos de WordPress pueden implementar el script de carga perezosa en videos e imágenes. Hoy cubrimos 7 de ellos y también realizamos una auditoría de velocidad usando el complemento de carga perezosa de WP Rocket. Carga perezosa por WP Rocket
A3 Carga perezosa
Rubor
Óptimo
Cargador perezoso
Carga perezosa para videos
Optimizar automáticamente
Vamos a profundizar en ellos.
1. Carga perezosa por WP Rocket
Lazy Load by WP es un complemento extremadamente fácilmente desarrollado por el bien conocido complemento de cohetes de caché de caché (¡sí, lo estamos!). Es una de las herramientas más populares que lo ayudan a hacer sus imágenes y videos visibles solo cuando están justo por encima del pliegue. Cada promedio en el sitio es cuidado: avatares, miniaturas, marcos de iframe, videos de YouTube, imágenes de fondo e imágenes ordinarias, por lo que la velocidad nunca se compromete. El complemento es fácil (2kb), pero muy fuerte: inyecta un poco de JavaScript en el encabezado de su sitio y retrasa las imágenes en todo el sitio sin usar ninguna biblioteca de JavaScript, como jQuery.
También puede reemplazar iframes YouTube con una miniatura de vista previa para acelerar aún más tiempo de carga su sitio y cereza en la parte superior: es completamente gratuito. Dos notas importantes: si ya usa nuestro complemento de cohete WP Cache WP, no tiene que instalar la carga perezosa de WP Rocket, ya que es una característica incluida. ️ Si no usa nuestro complemento de cohete WP WP, entonces nuestro complemento gratuito: la carga perezosa de WP Rocket será útil. En cualquier caso, si desea que su sitio web se ejecute más rápido y mejorar los vitales de la web central, recomendamos verificar todas las funciones de optimización que ofrece nuestro caché.2. A3 Carga perezosa
A3 Lazy Load es el complemento más conocido que se dedica exclusivamente a la carga perezosa. Este complemento está orientado hacia dispositivos móviles y fácil de usar: puede configurarlo y personalizarlo fácilmente, incluso si tiene menos o ninguna experiencia. Sus fotos serán cargas más rápido y cambiarán rápidamente el proceso de ejecución en videos y marcos de iframe. También puede agregar algunas animaciones con efectos de desvanecimiento y spinner cuando se cargan las imágenes. Hay un simple encendido | Función deshabilitada que le permite incluir o excluir una imagen. También funciona para una URL del video que puede especificar en el tablero.
Importante: la carga perezosa A3 solo se puede aplicar a los soportes que se agregan utilizando las funciones básicas de WordPress. Si el tema o el desarrollador de su complemento agrega objetos, como imágenes o videos, a través de una función escrita personalizada, A3 Lazy Load no puede saber cuál es esa función personalizada y no puede aplicar el script de carga perezoso en un objeto. Viene con un período gratuito de prueba gratuita 14 días después; Le costará $ 24.99/mes para cinco sitios. 3. Smushsmush es un complemento de optimización de imágenes otorgado con más de 1 millón de instalaciones activas. Está desarrollado por el famoso equipo WPMudev. Las dos características principales son, a saber, las imágenes perezosas y la compresión de las imágenes.
Con Smush, las imágenes en su sitio web no afectarán su sitio y su rendimiento. Puede activar fácilmente el complemento Smush con unos pocos clics. Una vez activado, puede optar por optimizar cada imagen individual o hacer el proceso de optimización de bloques (hasta 50 imágenes al mismo tiempo). Smush le permite limitar la carga perezosa a ciertas ubicaciones de salida y medios, como widget-uri, áreas de contenido y miniaturas. Es compatible con otros complementos de WordPress, por lo que puede mantener su sitio optimizado y para que pueda retener a los visitantes del sitio. Tampoco tiene que comprar la versión premium de Smush para la activación de carga perezosa. La versión gratuita se puede descargar desde el almacén de WordPress, mientras que la versión Pro tiene precios diferentes. 4. Optimole
Optimole es un complemento todo en uno para la optimización de imágenes, el corte avanzado y la carga perezosa inteligente. El proceso de optimización se gestiona en la nube, en una base de caso. Una vez que haya instalado el complemento, Optimole reemplazará todas las URL de sus imágenes con URL basadas en la nube. Puede comprimir o cambiar el tamaño de las imágenes e incluso puede integrar CDN para que pueda poner fotos rápidamente. La función de carga perezosa se utiliza para evitar cambios de apariencia para que los visitantes del sitio web no enfrenten ninguna forma de interrupción. Aquí está el precio del complemento Optimole. Todo depende de la cantidad de visitantes que tenga cada mes. 5. El cargador perezoso recibe un cargador perezoso si está buscando un complemento sin campana. En resumen, se sabe que el complemento es la carga perezosa más completa y simple de complemento en WordPress.
Este complemento compila las imágenes en el pliegue, videos, contenido de audio e incluso iframes. También puede ocuparse de los scripts de fondo, estilo de página e imágenes. Los usuarios avanzados sabrán que, con un código en particular, el cargador perezoso le permite apagar o activar la carga perezosa en ciertos elementos de la página. Si está buscando una solución a las imágenes de fondo perezosas junto con una opción para cambiar el umbral al que se cargan las imágenes, entonces el complemento hecho es para usted! 6. Carga perezosa para videos
Si quieres perezoso tus videos perezosamente, entonces la carga de los videos es el complemento que debes elegir. Este complemento puede reemplazar cualquier videos de Vimeo o YouTube que se incorporen con la vista previa de la imagen en la que se puede hacer clic. Esto ahorrará el tiempo de los usuarios y mejorará el tiempo de carga de la página, porque no se cargará JS inútil. El complemento se encuentra con ventajas adicionales que cualquier usuario apreciará: puede establecer fácilmente la incorporación de su sitio web para reproducir automáticamente un video en su sitio después de que finalizara el primer video.
Ocultar las anotaciones y los comandos de YouTube, para dar un aspecto limpio.
Cambie el estilo del botón de reproducción.
Minimice las sugerencias relacionadas con el video después de su finalización.
Lazy Load for Videos es un complemento gratuito de WordPress y puede descargarlo de forma gratuita del almacén de WordPress. 7. Optimización automática
Con más de 1 millón de instalación activa, la autoevaluación es el complemento de carga perezoso más popular. El complemento está bastante avanzado y aplica el script de carga perezosa en las imágenes. La autoevaluación ayuda a agregar, minimizar y almacenar todos los scripts y estilos de CSS, independientemente del tema o el complemento que use. También minimiza el código HTML en sí, facilitando su página. También ofrece otras funciones de optimización de rendimiento. Como se mencionó anteriormente, puede optimizar y cargar las imágenes, con soporte para los formatos WebP y AVIF. El complemento de autoevaluación y su soporte son gratuitos. Deberá optar por la prima si desea algunos servicios de optimización de rendimiento. Podemos colocar este complemento en algún lugar entre una solución de carga perezosa y un complemento de caché completo. Por cierto, AutoPtimize es totalmente compatible con el complemento WP Rocket Cache, puede leer más sobre cómo usarlos juntos en un artículo dedicado. Hay muchos complementos que pueden ayudarlo a implementar imágenes y videos perezosos. Pero no crea la palabra y vea cómo el uso de uno de estos complementos afecta el rendimiento de mi sitio de WordPrpri. El impacto del cohete de la carga de WP de la perezosa en el rendimiento ha realizado una auditoría de rendimiento y Google PageSpeed Insights (Lighthouse). Pasamos por tres fases principales:
Analizar el rendimiento de una página web sin imágenes o videos.
Agregar imágenes y videos en la página web y la ejecución de la auditoría nuevamente.
Instalación de complementos Lazy Lazy by WP Rocket para mostrar mejoras finales.
De acuerdo, veamos cómo nuestro complemento de carga perezosa influye en la velocidad de una página web. 1. Analizar el rendimiento de una página web sin imágenes o videos. Comencemos auditando nuestra página web de “pago” que contiene solo texto y algunos íconos. No hay imágenes, fondo, galerías o videos de YouTube, como puede ver a continuación: resultados de rendimiento sin imágenes y videos (Pingdom)
Tamaño de la página: 220.2 KB
Tiempo de carga: 793 ms
Solicitudes: 6
2. Agregar imágenes y videos a la página web y la ejecución de la auditoría nuevamente. Ahora agrego 15 imágenes y un video construido en la ley en mi página. Veamos cómo el puntaje afecta la adición de más contenido.
Al agregar más contenido a mi página web, las fotos y los videos ofrecen la vida y la personalidad de su sitio, pero de acuerdo con el archivo HTTP, ¡las imágenes representan más del 60% de los datos cargados en las páginas web! Resultados de rendimiento Después de agregar imágenes y videos (pingdom) En general, podemos ver una página más lenta, lo que tiene sentido, porque lo agregué difícil:
Tamaño de la página: 1.5 MB
Tiempo de carga: 1.37 s
Solicitudes: 28
También puede realizar otra prueba con PSI. En este caso, nuestra nota de rendimiento general no es buena (32/100):
El puntaje del faro de mi página web – Fuente: PSI para ver el diagnóstico de faros para implementar algunas técnicas y mejorar el rendimiento.
La sección de oportunidad después de ejecutar la prueba con PSI – Fuente: PSI importante: mi sección de auditoría contiene alertas rojas críticas y muchos KPI para mejorar, tal como la representación ”. Sugerimos que use nuestro complemento de cohetes WP WP que implementa automáticamente el 80% de las mejores prácticas de rendimiento para obtener una mejor nota y resolver estos problemas. Entre la sección “Oportunidad”, PSI me aconseja que “posponga imágenes fuera de pantalla” y use un complemento de WordPress perezoso. Y adivina qué hay en el almacén de complementos de carga perezosa? WordPress Warehouse 3. Instalación de complementos LAZAY LAD por WP Rocket para mostrar las mejoras finales. Ahora, activemos el complemento Lazy Lazy by WP Rocket para ver qué sucede con mi nota de rendimiento. ️ Nota: puede implementar el mismo script de carga perezoso a través del tablero de cohetes WP. Esta característica es parte de WP Rocket, toda nuestra solución de almacenamiento de caché para acelerar su sitio en unos pocos clics.
La función de carga perezosa incluida en el complemento WP Rocket WP. La siguiente auditoría se realizó utilizando el cohete Lazy Load de WP (complemento gratuito).
Activación de complementos Lazy Lazy por WP Rocket Plateau Resultados con imágenes, videos y carga perezosa de WP Rocket: la buena recomendación #1 “Publicar las imágenes fuera de la pantalla” ahora está en la sección “Auditoría pasada”:
La auditoría activó el complemento Lazy Lazy by WP Rocket El buen resultado #2 El tamaño de mi página, el tiempo de carga y el título de rendimiento son mucho mejores cuando se activan el complemento Lazy Lad de WP Rocket. ¡El tiempo de carga ha pasado de 1.37 segundos a 892 ms! Y el número de solicitudes HTTP pasadas de 28 a 10. Para completar, el complemento LAZY LAD por WP Rocket facilitó mi página, dividió el número de solicitudes de servidor a 3 y pasó mi nota de rendimiento general:
Breaking News
- 12 pluginuri WordPress COVID-19 pentru statistici, hărți, grafice și widget-uri Live Corona
- 21 de pluginuri WordPress WooCommerce obligatorii de care aveți nevoie pentru magazinul dvs. [2022]
- Cum să creezi un antet lipicios uimitor folosind Elementor (tutorial Elementor)
- Cum să îmbunătățești designul site-ului web utilizând Logo Carusel și Testimonial Carusel
- SuperbThemes Review
- Ce este nou în WordPress Gutenberg Editor
- Cloudways: Unul dintre cei mai buni furnizori de găzduire WordPress pentru utilizatorii Elementor
- Elementor: Ultima poveste de la început
- Cum să creați ferestre pop-up captivante cu Elementor care convertesc
- Vă prezentăm șabloane de editare a paginii întregi ale Happy Addons
