6 razones por las cuales las imágenes ralentizan su sitio web (y cómo solucionarlo)

¿Preguntas por qué las imágenes se están cargando lentamente en su sitio o una eternidad duradera para cargar?Lea el artículo correcto.Comencemos con dos cosas importantes para saber: las imágenes son un gran porcentaje del tráfico del sitio web, por lo que la optimización de las imágenes puede ayudar a reducir el tiempo requerido para la carga.Al mismo tiempo, las imágenes a menudo son culpables de problemas de rendimiento: ocupan los recursos de carga y es por eso que ralentizan su sitio de WordPress.

Las imágenes son responsables del mayor número de solicitudes HTTP – Fuente: Alman.http Archives
La cuestión es que es difícil imaginar un sitio web sin imágenes o imágenes.El uso de imágenes de SEO optimizadas puede generar aún más tráfico en su sitio web.¡No podemos hacer negocios sin ellos!
En esta publicación de blog, enfaticé seis razones por las cuales las imágenes ralentizan su sitio. Además, descubrirá cómo puede hacer que las fotos se carguen más rápido en su sitio (incluidos los dispositivos móviles). ¿Por qué sus imágenes se están cargando lentamente en WordPress (o lleva una eternidad cargar)? 1. Las imágenes son demasiado grandes (y puede usar demasiado) cuando se trata de la velocidad de la página web, lo primero que debe hacer es que es Optimice sus imágenes pesadas. Las altas resoluciones de alto tamaño pueden ocupar muchos anchos de banda y reducir la velocidad del tiempo de carga para los visitantes de su sitio, así que ¿por qué no cargarlos en un tamaño más pequeño? ¡Pero también no permita que la calidad de sus imágenes sufra! Utilice aplicaciones confiables y eficientes para la compresión de imágenes. Esto le asegurará que al reducir su tamaño, todavía se mantienen en la fidelidad visual, con una pequeña pérdida de calidad.
2. Las imágenes tienen dimensiones no especificadas La escala adecuada de las imágenes es importante para evitar que cargar los sitios web para que dure demasiado.No permita que el navegador escalen las imágenes en su lugar, eso le daría más datos de carga.En otras palabras, el navegador continuará cargando toda la imagen.Si tiene una imagen que tiene 2000 x 2000 píxeles, pero la ha reducido a 200 x 200 píxeles, su navegador tendrá que cobrar diez veces más de lo necesario.3. Las imágenes no están optimizadas de acuerdo con el dispositivo para evitar imágenes lentas para cargar, su página nunca debe recuperar imágenes más grandes que la versión que se muestra en la pantalla del usuario.Con palabras simples, cualquier cosa mayor que el dispositivo conduce a pérdidas bytes y ralentiza la página.
4. El navegador comienza a cargar imágenes de repente de forma predeterminada, su navegador está tratando de cargar todo al mismo tiempo. Si no prioriza las imágenes que deben cargarse primero, el navegador estará ocupado con su renderizado a la vez. Concéntrese en las imágenes más importantes que se cargarán en la ventana de la vista del visitante. 5. Use formatos pesados ​​El tamaño de sus imágenes es solo una parte del problema. Los tipos de archivos que usa también pueden ocupar un espacio valioso. ¿Utiliza un formato como .tiff o BMP? En este caso, tenga en cuenta que TIFF es un formato sin comprimir que reproduce una imagen más detallada y contiene más datos … esto creará archivos más grandes y tomará mucho almacenamiento. Si no usa .tiff, sino JPEG y PNG, debe saber que puede usar formatos incluso más ligeros, como lo estará en la siguiente sección. ¡Una conversión simple puede dar un pequeño impulso a su imagen!
6. La memoria de caché no almacena imágenes El beneficio principal de una memoria de imagen en la imagen es mejorar el rendimiento de su sitio de WordPress. El usuario debe ver las imágenes o archivos de JavaScript y CSS directamente desde su sistema, en lugar de esperar que las descarguen a través de una conexión de red. En otras palabras, sus imágenes deben almacenarse en caché en una carpeta local temporal para evitar pings innecesarios en la base de datos. Cómo remediar las imágenes que son lentas en su sitio son esenciales para la estrategia de contenido, pero no queremos tomar demasiado tiempo en cargar. La clave es usarlos correctamente para evitar ralentizar su sitio de WordPress. Veamos las seis técnicas que puede usar para mejorar la carga de imágenes en su sitio web de WordPress. Cambie el tamaño y comprimir las imágenes si desea acelerar sus imágenes, siempre debe optimizar sus fotos cambiando el tamaño y comprimirlas. La compresión con pérdidas y la compresión sin pérdidas son dos métodos comúnmente utilizados para optimizar su sitio web durante un tiempo de carga más rápido, y eventualmente aceleran la página. Estas dos tácticas de alto nivel se explican bien en nuestra guía sobre cómo reducir el tamaño de la imagen sin perder calidad.
Lossy = un filtro que elimina algunos de los datos. La calidad de la imagen se ve afectada.
Lossless = un filtro que comprime los datos sin alcanzar la calidad de la imagen.
Con los complementos correctos, puede solicitar que WordPress realice automáticamente parte del formato de imagen para usted.
El problema: las imágenes son demasiado grandes (y demasiadas). Solución: complementos para optimizar la imagen que puede usar para cargar sus imágenes más rápido: imagine
Compresión de imágenes con Imagify: La calidad sigue siendo buena, pero guardé el 87% del tamaño del archivo – Fuente: Imagify
Optimizador de imagen EWWW

Optimole (optimización de imágenes y carga perezosa por Optimole)
Optimizador de imágenes de shortpixel
Resmush.it
Comprimir imágenes JPEG y PNG
2. Establezca las dimensiones de la imagen para remediar la carga de imagen lenta en su sitio, asegúrese de establecer las dimensiones de imagen apropiadas. Establezca el ancho y la altura para todas las imágenes para guardar datos y mejorar el tiempo de carga de la página. ¿Como funciona esto? Agregar atributos de ancho y altura a la marca le indicará al navegador que guarde espacio para la imagen. Si no hace esto, esto creará un cambio de contenido, y su puntaje acumulativo para cambiar la apariencia se verá afectada. Como resultado, Lighthouse le dará a Core Web Vital una puntuación bastante mala, dañando su SEO y rendimiento.
Veamos un ejemplo a continuación para comprender mejor el impacto de cambiar la imagen en la experiencia del usuario.
El texto cambiará si las dimensiones de la imagen no se proporcionan al navegador.
Fuente: Smashingmagazine 2. El texto no se moverá (CLS no se ve afectado) si se proporcionan las dimensiones de la imagen para que se pueda asignar el espacio apropiado.
Fuente: Smashingmagazine Problema: las imágenes tienen dimensiones no especificadas. Solución: Agregue las dimensiones y atributos de la imagen faltantes usando WP Rocket. Este es un complemento poderoso que también hará la memoria en el caché, la optimización del código, la carga perezosa y más para aumentar la velocidad de su sitio.

3. Servir imágenes optimizadas para cada dispositivo de “imágenes receptivas” es la estrategia utilizada para difundir imágenes adecuadas dependiendo del dispositivo (tableta, móvil y escritorio). En otras palabras, cree más versiones de cada imagen y defina usar en su código utilizando consultas de medios, tamaño de visualización, etc. Web.dev incluso dice que “la difusión de imágenes de tamaño de escritorio en dispositivos móviles puede usar 2-4 veces más datos de los necesarios”.

Problema: las imágenes no están optimizadas según el dispositivo. La solución:

Use un generador de página de WordPress para ayudarlo.
Ejemplo de elemental que le permite elegir y cambiar el tamaño de la imagen de acuerdo con el dispositivo – Fuente: Elementor Page Builder
Use una imagen CDN para entregar imágenes al tamaño correcto de acuerdo con el dispositivo.
Haz que sea manualmente usando CSS y usa Lighthouse para identificar imágenes de tamaño incorrecto. Ejecute la auditoría de rendimiento accediendo a Lighthouse> Opciones> Rendimiento.

4. ¿Cargar sus imágenes de sus imágenes de WordPress se carga lentamente? Es hora de mostrar fotos solo cuando los visitantes las ven. Esta técnica para guardar el ancho de banda y la priorización de la línea se llama “carga perezosa”. Debe implementar la carga perezosa en sus imágenes debajo del pliegue, aquellas que aún no son vistas por su visitante: el navegador comienza a cargar imágenes a la vez. Solución: Implementación de carga perezosa utilizando un complemento de WordPress.
La carga perezosa de WP Rocket es un complemento gratuito que implementa el guión de carga perezoso.
Consulte esta guía interesante si desea comparar los mejores complementos de carga perezosa disponibles en el mercado.
Implementación manual de la carga perezosa: siga esta guía desde CodeInwp que explica las dos formas de implementar la carga manual perezosa (no es tan fácil de seguir para los principiantes).

5. Convierta sus imágenes en WebP WebP no ofrece pérdida y pérdida de imágenes en la web, lo que les permitirá cargar más rápido. Según Google, las imágenes de WebP sin pérdida son un 26% más bajas en comparación con los PNG. Y las imágenes web de pérdidas son 25-34% más bajas que las imágenes JPEG en una calidad equivalente. Problema: use formatos pesados. Solución: Convierta sus imágenes en JPG, PNG o WebP utilizando un complemento de WordPress.
Imagify: convierte automáticamente las imágenes en formato WebP en WordPress Dashboard.
WebP Converter para medios: convierte sus imágenes en WebP.
6. Use un complemento de caché Los complementos de caché les indiquen al servidor que almacene sus archivos en el disco o la RAM. Como resultado, sus páginas web (e imágenes) se cobran más rápido porque se “guardan” directamente del caché. Esto incluye el almacenamiento de caché de las páginas y el navegador, donde la idea es almacenar las imágenes a las que se accede con frecuencia en la memoria local del dispositivo de navegación. El problema: la memoria de caché no almacena imágenes. Solución: Use un complemento de WordPress para almacenar sus imágenes en el cohete caché.wp aplica automáticamente el 80% de las mejores prácticas de rendimiento web, incluidas las imágenes de almacenamiento y perezosas, limpiando el código, permitiendo la compresión de GZIP.
Ahora que hemos visto las técnicas que puede aplicar para transmitir mejores imágenes, para ver cómo puede ayudar un complemento como Imagify. Cómo hacer que sus imágenes se carguen más rápido con Imagify en mi opinión, un buen complemento de optimización de imágenes debería reducir el tamaño de la imagen, mientras se mantiene la calidad visual. Debe ser fácil de usar y comprimir las imágenes en mi sitio y el futuro (sobre la marcha). Imagify coincide con mi descripción y te mostraré cómo Imagify me ayudó a acelerar mi sitio. ¿Listo? Es hora de decir adiós a las imágenes del sitio web que tarda demasiado en cargarse. Para este estudio de caso, usamos GTMetrix y mediremos los siguientes KPI:
Nota de rendimiento general
Apariencia acumulada de apariencia (cambio repentino en el contenido)
A tiempo completo cargado
Tamaño de página y % de las imágenes dimensiones ocupadas
Número de solicitudes HTTP y % del tamaño ocupado por las imágenes
El tamaño del archivo de imagen antes y después de la optimización con ImagifySA, iniciamos la auditoría utilizando un sitio de prueba creado con DIV que contiene 10 imágenes.
Extracto de mi sitio web creado con div (total: 10 imágenes)
Escenario 1: Mi sitio creado con la imagen Div-Without simplemente ponemos la URL de nuestra página en GTMetrix y echamos un vistazo a las diferentes secciones. Los resultados no son tan malos, pero uno de los centrales vitales de la web está en naranja y recibí una puntuación B.
Auditoría de rendimiento sin Imagify – Fuente: GTMetrix

<

2.6 S tamaño de página – % de la dimensión ocupada total: 2.44 MB – Imágenes: 1.31 MB (54 %) Número de solicitudes HTTP -% de la dimensión ocupada Total: 75 – Imágenes: 41 (55%) <
JPG Tamaño: 160 kb 117 kb 27 kb 103 kb 91 kb 195 kb 74 kb 75 kb 164 kb 13 kb

Además, las imágenes ocupan 1.31 MB en 2.44 MB de El tamaño total de mi página, 54% del tamaño total de la página. De 75 solicitudes, 41 están hechas por imágenes, que constituyen el 55% de las solicitudes.
Los detalles de mi página sin imagen

Ahora es el momento de ver cómo se cargan mis imágenes, gracias a Imagify. Escenario 2: auditar el mismo sitio web e imágenes con Imagify para optimizar mis imágenes usando Imagify. Para hacer esto, simplemente active el complemento y inicie la “optimización del bloque” desde la imagen Configuración →.
Allí, puede decidir optimizar sus imágenes en tres niveles, a saber, normal, agresivo y ultra. He elegido Ultra Way de mostrarle el mejor nivel de optimización. Nota interesante: si no desea optimizar todas las imágenes simultáneamente, puede seleccionarlas de la biblioteca, como lo hice para mi florería: Optimización de mis 10 imágenes con imágenes de imagen: WordPress Biblioteca

En promedio, Imagify guardó el 50% de mi tamaño de archivo y los convirtió todos en el formato WebP:
Finalmente, es hora de comparar mi rendimiento de los KPI antes y después de la activación de Imagify. ¡Los resultados son muy alentadores!

Gtmetrix puntuación después de usar Imagify

Podemos ver que Imagify facilitara mi página comprimiendo las imágenes, cambiando el tamaño y convirtiéndolas en formato webp. ¡Incluso recibí uno A en Gtmetrix! También noté que el espacio ocupado por las imágenes era más pequeño en el uso de Imagify. Y por último, pero no menos importante, mi sitio todavía se ve muy bien y no tengo imágenes poco claras. La conclusión no siempre es fácil identificar qué causa que la velocidad de carga de la página del sitio web es lenta. Hay muchos factores responsables, como las imágenes neo -solo, una gran cantidad de solicitudes HTTP, códigos voluminosos y problemas con JavaScript, por ejemplo. Puede valer la pena darse cuenta de lo que está sucediendo, porque si no remedia este problema pronto, podría conducir a la pérdida de ingresos. En nuestra auditoría, guardamos hasta un 50% del tamaño del archivo con un solo clic, usando Imagify: ¡La optimización de imágenes debe estar en la parte superior de su lista y mirar cuánto IMGIFY es conveniente para usted! Intente optimizar las imágenes en su sitio de WordPress utilizando la versión de prueba gratuita de Imagify y díganos cuántos datos guardó.