Post Top Ad

Your Ad Spot

martes, 21 de abril de 2020

Image CDN - Acelere la entrega de su activo más importante

Las imágenes son una parte integral de la web hoy en día y se usan de muchas maneras diferentes. Dicen que una imagen vale más que mil palabras. Bueno, eso probablemente sea cierto, siempre que no ralenticen su sitio web hasta el punto de perder visitantes. Cuando se trata de optimizar su sitio web, las imágenes son generalmente el activo más importante al que debe dedicar tiempo para descubrir cómo reducir el tamaño y entregarlo de una manera más eficiente. El uso de una imagen CDN, como KeyCDN, puede reducir significativamente la latencia de la entrega de imágenes. Esto permite que sus imágenes se entreguen mucho más rápido en todo el mundo.

Importancia de optimización de imagen#

Hemos estado hablando mucho sobre la optimización del sitio web últimamente y hemos entrevistado a muchos expertos en rendimiento web para obtener sus recomendaciones y consejos. Recibimos excelentes respuestas de expertos que trabajan en la industria todos los días, como Jeff Atwood (cofundador de Stack Exchange and Discourse) y Patrick Meenan (creador de WebPageTest). Si aún no ha tenido la oportunidad de leerlo, le recomendamos que se tome un tiempo para leerlo, ya que se compartió una gran cantidad de información relevante.
¡Para nuestra sorpresa, el 46% de los expertos dijo que la prioridad o el enfoque número uno debería estar en la optimización de la imagen ! Además, más de la mitad de ellos mencionaron la importancia de disminuir el peso total de la página. ¿Conoces la forma más fácil de disminuir el peso de la página? Lo has adivinado, imágenes. Estas son solo algunas de sus respuestas:
Un gran enfoque para nuestro equipo de rendimiento es (y seguirá siendo) optimizar las imágenes. La página promedio es de alrededor de 2200 KB y alrededor de 1440 KB son imágenes, lo que significa que es un buen objetivo para las mayores ganancias de rendimiento. Existen varios tipos de archivos que pueden ayudar en la compresión de imágenes (* tos * WebP * tos *) y están subutilizados ... - Matt Shull
Imágenes! Los desarrolladores a menudo se centran en mejorar el rendimiento de las secuencias de comandos, pero deben darse cuenta de que la mayor parte de sus problemas de rendimiento provienen del contenido de los medios ... - Una Kravets
Optimización de imagen. Optimice y use imágenes receptivas (<image> y el atributo srcset). Casi siempre estoy en una conexión lenta y la cantidad de tiempo que tardan en cargar las imágenes en la mayoría de los sitios web es horrible ... - Sara Soueidan

Imágenes de escritorio y móviles#

¿Cuánto de un sitio web está compuesto de imágenes? Bueno, según HTTP Archive , a partir del 1 de junio de 2019, la página de escritorio promedio es de 1,896.8 KB y la página móvil promedio es de 1,683.5 KB.
average total bytes per page
Las imágenes en una página de escritorio ocupan un promedio de 971.5 KB y en una página móvil ocupan un promedio de 865.9 KB.
average image bytes per page
Eso significa que aproximadamente el 51% de los bytes promedio por página, ya sea en el escritorio o móviles, se realizan exclusivamente por imágenes (una imagen se identifica como un recurso si la extensión del archivo es pnggifjpgjpegwebpico, o svg, o si el tipo MIME contiene image)
Sin embargo, es importante optimizar las imágenes para computadoras de escritorio y dispositivos móviles, ya que los usuarios móviles de todo el mundo ahora han superado recientemente a los usuarios de computadoras de escritorio ( StatCounter ), existe una importancia aún mayor para garantizar que las imágenes se optimicen tanto como sea posible. Esto es crucial debido a que los dispositivos móviles requieren optimizaciones adicionales porque generalmente tienen un hardware menos potente y una conexión de red más lenta en comparación con los dispositivos de escritorio.
Como dijo Sara Souedan, no todos tienen acceso a Internet rápido. Por ejemplo, mientras que la velocidad promedio de descarga móvil en 4G en Suiza es rápida a 35.2 Mbps, los países con un creciente número de usuarios de Internet como India solo tienen una velocidad promedio de descarga móvil de 6.8 Mbps ( Opensignal ). Esto significa que siempre debemos estar probando diferentes dispositivos y conexiones.
No asuma que su sitio web es rápido en su dispositivo de escritorio, sino que será el mismo para aquellos en un dispositivo móvil. Aproveche las herramientas gratuitas de prueba de velocidad del sitio web , muchas de las cuales tienen opciones para probar en dispositivos móviles.

Formas de optimizar sus imágenes#

Hay muchas maneras que usted puede optimizar sus imágenes, tales como la utilización de los servicios de procesamiento de imágenes y el software de compresión de imágenes, la elección de mejores formatos de imagen, usando srcsetsizesmediaatributos. Encuentre el mejor enfoque que le dará el mejor resultado para su sitio web.

Servicio de procesamiento de imágenes#

Ofrecemos un servicio de procesamiento de imágenes que está completamente integrado en nuestra red existente. Permite una completa transformación y optimización de imágenes sobre la marcha. Las imágenes ahora pueden modificarse en tiempo real con parámetros de consulta simples y luego serán entregadas por nuestro CDN.
Por ejemplo, la cadena de consulta ?width=600&quality=70transformaría la imagen para que tenga 600 píxeles de ancho y establezca el nivel de calidad en 70:
https://ip.keycdn.com/example.jpg?width=600&quality=70
width and quality
Combine esto con nuestro almacenamiento en caché de WebP para entregar automáticamente el formato de imagen de mayor rendimiento. Optimizar sus imágenes para la entrega más rápida nunca ha sido tan fácil.

Compresión de imagen con Optimus#

Aproveche la compresión inteligente de imágenes con el optimizador de imagen Optimus. Este es un poderoso complemento de WordPress y API de compresión de imágenes que puede reducir el tamaño de las imágenes sin ninguna pérdida visible de calidad. La conversión de WebP es compatible con una licencia paga . Optimus permite que las imágenes se optimicen y luego se almacenen. Esto es útil si desea almacenar imágenes optimizadas en lugar de utilizar un servicio de procesamiento de imágenes en tiempo real.
Dependiendo de la imagen y el formato, es posible reducir el tamaño hasta en un 70%. Optimus se puede instalar en cualquier sitio web de WordPress o puede utilizar la API para usarla en cualquier plataforma. La biblioteca PHP para la API está disponible en GitHub .

Formatos de imagen#

Ya sabemos que las imágenes suelen ser la parte más pesada de una página web, por lo que se recomienda utilizar el formato de imagen de mayor rendimiento. Las imágenes con formato WebP son en promedio un 26% más pequeñas que las imágenes con formato PNG y un 25-34% más pequeñas que las imágenes con formato JPEG. Esto significa que solo convertir sus imágenes a WebP puede disminuir el tamaño de sus páginas en aproximadamente un 25%. Sin embargo, es importante tener en cuenta que no todos los navegadores admiten el formato WebP, por lo que querrá asegurarse de que solo entregue este formato a los navegadores aceptados. Esto se puede hacer automáticamente con nuestro servicio de procesamiento de imágenes. Si tiene un sitio web de WordPress, nuestro complemento Cache Enabler puede manejar esto automáticamente.
Otro formato de imagen a considerar es el formato SVG para una mejor escalabilidad . Una ventaja importante de este formato de imagen es que puede comprimirse con Brotli . Este es un algoritmo de compresión líder desarrollado por Google para ayudar a reducir aún más el tamaño de los archivos. Puede usar nuestra herramienta de prueba Brotli para ver si su servidor es compatible o no con Brotli.

Usando srcsetsizesmediaatributos#

Las técnicas de imagen receptiva, como el srcsetsizesy los mediaatributos, le permiten servir diferentes imágenes a escala en función del tamaño de la pantalla. Esto significa que los usuarios de dispositivos móviles ahora pueden recibir archivos de menor tamaño, lo que a su vez acelera la entrega del contenido porque el peso total de la página es menor. Consulte nuestra publicación detallada sobre cómo usar imágenes receptivas .

¿Cómo puede ayudar una imagen CDN?# #

Si bien la optimización de sus imágenes es excelente, en realidad solo lo lleva a una parte del camino. Si está apuntando a algo más que a una audiencia local, entonces un CDN es, con mucho, la forma más fácil de obtener mejoras instantáneas en las velocidades de descarga de sus imágenes. ¿Por qué? La razón principal es porque disminuye la latencia para el usuario donde se encuentran al servir sus imágenes desde un POP físicamente más cercano a ellas. Hace un tiempo hicimos un estudio de caso sobre la latencia del sitio web con y sin una red de entrega de contenido y probamos los tiempos generales. Ahora queremos reducir cómo el uso de un CDN afecta el tiempo total de descarga de sus imágenes. Dado que más de la mitad de una página web está compuesta por imágenes, el término "CDN de imagen" es muy aplicable, ya que para eso se utiliza la mayor parte del ancho de banda.
Realizamos algunas pruebas de velocidad en un sitio web de prueba con y sin un CDN. Utilizamos nuestra herramienta de prueba de velocidad del sitio web , que mide los resultados medianos de múltiples pruebas. Nuestro servidor de origen para nuestro sitio web de prueba se encuentra en Frankfurt, Alemania, mientras que las pruebas se realizan desde San Francisco, California. Esto nos permite mostrar la diferencia que puede hacer un CDN. Lo que nos importa en estas pruebas es cómo se ven afectados nuestros tiempos de descarga de imágenes.

Sin CDN#

Primero ejecutamos nuestras pruebas sin una imagen CDN habilitada en las imágenes originales sin comprimir y sin escala. Los resultados se pueden encontrar a continuación:

Prueba 1#

without image cdn waterfall
web.jpg = 1,557.902 ms (1.6 s)
performance.jpg = 1,715.65 ms (1.7 s)
matters.jpg = 2,432.008 ms (2.4 s)

Prueba 2#

without image cdn waterfall
web.jpg = 1,868.285 ms (1.9 s)
performance.jpg = 1,370.144 ms (1.4 s)
matters.jpg = 2,154.034 (2.2 s)

Prueba 3#

without image cdn waterfall
web.jpg = 1,647.242 ms (1.6 s)
performance.jpg = 1,790.945 ms (1.8 s)
matters.jpg = 1,927.415 (1.9 s)

Con CDN (KeyCDN)#

Luego, habilitamos nuestra imagen CDN y volvimos a ejecutar nuestras pruebas. Los resultados se pueden encontrar a continuación:

Prueba 1#

with image cdn waterfall
web.jpg = 615.862 ms (615.9 ms)
performance.jpg = 621.774 ms (621.8 ms)
matters.jpg = 754.177 ms (754.2 ms)

Prueba 2#

with image cdn waterfall
web.jpg = 579.744 ms (579.7 ms)
performance.jpg = 582.539 ms (582.5 ms)
matters.jpg = 721.453 ms (721.5 ms)

Prueba 3#

with image cdn waterfall
web.jpg = 542.771 ms (542.8 ms)
performance.jpg = 530.501 ms (530.5 ms)
matters.jpg = 733.959 ms (734 ms)

Con procesamiento de imágenes y CDN (KeyCDN)#

Por último, habilitamos nuestro servicio de procesamiento de imágenes. Como habrás notado, las imágenes que probamos son grandes porque están sin comprimir y sin escala. El uso de nuestro servicio de procesamiento de imágenes nos permite comprimir y escalar nuestras imágenes de acuerdo con nuestras especificaciones y luego tener las imágenes optimizadas entregadas a través de nuestro CDN. Los resultados se pueden encontrar a continuación:

Prueba 1#

with image processing and cdn waterfall
web.jpg = 615.862 ms (615.9 ms)
performance.jpg = 621.774 ms (621.8 ms)
matters.jpg = 754.177 ms (754.2 ms)

Prueba 2#

with image processing and cdn waterfall
web.jpg = 579.744 ms (579.7 ms)
performance.jpg = 582.539 ms (582.5 ms)
matters.jpg = 721.453 ms (721.5 ms)

Prueba 3#

with image processing and cdn waterfall
web.jpg = 542.771 ms (542.8 ms)
performance.jpg = 530.501 ms (530.5 ms)
matters.jpg = 733.959 ms (734 ms)

Resultados#

Como ya habrás notado en las cascadas de arriba, hay mejoras significativas en el rendimiento obtenidas al usar una imagen CDN. Los resultados promedio de cómo una imagen CDN afecta la entrega de imágenes se pueden encontrar a continuación:
ImagenSin CDNCon CDNDiferencia
web.jpg1,691.143 ms579,459 ms65,74%
performance.jpg1,625.580 ms578,271 ms64,43%
matters.jpg2.171,152 ms736.530 ms66,08%
ImagenSin CDNCon IP / CDNDiferencia
web.jpg1,691.143 ms37,023 ms97,81%
performance.jpg1,625.580 ms47,923 ms97,05%
matters.jpg2.171,152 ms45,322 ms97,91%
ImagenCon CDNCon IP / CDNDiferencia
web.jpg579,459 ms37,023 ms93,61%
performance.jpg578,271 ms47,923 ms91,71%
matters.jpg736.530 ms45,322 ms93,85%
Como puede ver, usar una imagen CDN y optimizar sus imágenes puede conducir a mejoras significativas en el rendimiento, incluso cuando las imágenes son de alta resolución. Optimizar sus imágenes y agregar un CDN son igualmente importantes.

Imagen CDN SEO#

Otro concepto erróneo común que vemos mencionado con bastante frecuencia es que un CDN perjudica su SEO. Esto no es cierto de ninguna manera. De hecho, ¡ayuda a tu SEO cuando se configura correctamente! Un problema común que enfrentan las personas es la indexación de sus imágenes. De manera predeterminada, si no habilita una URL de zona personalizada, sus imágenes probablemente se indexarán en la URL de zona predeterminada de sus proveedores de CDN. Si configura un alias de zona personalizado, Google verá las imágenes como si estuvieran en su sitio. Una vez que agreguemos rel="canonical"al encabezado HTTP, sus imágenes se indexarán normalmente ya que el rastreador sabrá que son solo una copia y no contenido duplicado. Estos encabezados los agrega automáticamente KeyCDN. También puede controlar aún más la indexación utilizando su archivo robots.txt.
Entonces, ¿cómo te ayuda esto? Google ama la velocidad. Al usar un CDN, sus imágenes se indexarán más rápido en la búsqueda de imágenes de Google . También serán más propensos a clasificarse más alto en SERPs. Vea nuestra publicación más detallada sobre CDN SEO: indexación de imágenes con un CDN .

Resumen#

Como puede ver, hay muchas maneras en que puede acelerar la entrega de sus imágenes. El primero es asegurarse de que sus imágenes estén optimizadas. El segundo es utilizar una imagen CDN, como KeyCDN, para disminuir el TTFB y los tiempos de descarga de contenido. ¡No permita que su activo número uno sea la razón de tener un sitio web lento!

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas