Cómo mejorar fácilmente la velocidad de carga de tu web mediante la optimización de imágenes

Cuando se trabaja para optimizar una web, se aprende que el tamaño de la imagen es importante para la velocidad. Muchos editores online no tienen tiempo para aprender Photoshop u otros programas de edición de imágenes. Los optimizadores automatizados son la siguiente mejor solución y pueden acelerar su producción. Pero, ¿cuáles hacen un buen trabajo y es suficientemente bueno? Son preguntas que nos debemos plantear.

Hemos probado diversas herramientas online para optimizar imágenes, pero nos han gustado sólo tres. Estas pueden ser tan potentes como la optimización realizada en programas independientes como Photoshop. No se debe ignorar los problemas de velocidad causados por las imagenes. Lamentablemente, reducir a la mitad el peso de la imagen en su página de inicio no hará que se cargue el doble de rápido. Hay muchas otras cosas a tener en cuenta. Sin embargo, el tamaño y el peso de la imagen son los mayores causantes de la velocidad lenta de la web. Vale la pena aprender algunos trucos de compresión.

Las imágenes son el factor más importante del peso lento de la web. Todo el mundo odia las páginas que cargan lentas, especialmente si nos encontramos en móviles. El flujo de trabajo de imágenes automatizado es una forma sencilla de mejorar la experiencia del usuario. Sin dificultad, puede lograr el equilibrio correcto entre el tamaño del archivo de imagen y la mejor calidad. Optimizar las imágenes ayuda a reducir la frustración de los visitantes de su sitio web.

Hicimos una simple prueba de optimizadores en línea con sólo dos imágenes. No nos interesaban los matices. Sólo queríamos saber si las herramientas de optimización cumplían un criterio de procesamiento mínimo. Aquí están las dos imágenes de prueba:

Imagen JPEG del banner de prueba

trees-rocks.jpg, weight: 122.2k, dimensions: 1024 x 300 pixels

Prueba de salida de la cámara Imagen JPEG

 

Por favor, pruebe las 3 herramientas de imagen y compruebe si tienen valor para los tamaños de archivo web que utiliza.

DynamicDrive Online Image Optimizer

Los resultados de imagen de DynamicDrive se muestran en incrementos de Calidad-10. Nos gustó mucho esta sencilla función visual de imágenes fijas. DynamicDrive tenía un límite de tamaño de carga de 2,86 MB. Esto es demasiado pequeño para las imágenes que salen directamente de una cámara digital. No pudimos subir el JPEG de prueba más grande porque es de 5.5MB. Todavía nos gusta más esta utilidad de carga del navegador para la mayoría de los trabajos web porque muestra los diez resultados para su comparación. Nada de jugar con los controles. La selección visual es fácil.

DynamicDrive:
trees-rocks
17k, -85% ahorro

Optimizilla

Resultado con Optimizilla:
trees-rocks
11K, -91% ahorro

wood
121K, -98% ahorro

Web Resizer

Resultado con Web Resizer:
trees-rocks
19.29k, -83% ahorro

wood
63.94k, -98% ahorro

El criterio que hemos seguido en este test:

  • Sólo estamos interesados en comprimir archivos fotográficos. El compresor en línea es mejor si funciona para dos muestras diferentes: un archivo de cámara digital grande y un banner web más pequeño. Ambas imágenes JPEG. Las especificaciones para las imágenes de prueba están abajo:
  • El software necesario para la optimización de imágenes debe ser sólo el navegador. No hay otros programas o plugins; como Adobe Air, Windows solamente, Flash, etc.
  • Queremos subir las imágenes de prueba navegando o arrastrando y soltando.
  • Consideramos que es una ventaja si la herramienta de imágenes del navegador tiene una opción de redimensionamiento de imágenes.
  • La herramienta debe funcionar. ¿En serio? Si falla, está fuera de la lista.
  • Sólo nos interesa para la mayor reducción del peso de la página.
  • Preferimos los optimizadores con control de reducción en pasos de 10 incrementos de calidad. 90Q hasta el rango de 10Q. Hemos bajado a 10Q para hacer pruebas cuando ha sido posible.

Los 7 perdedores al azar.

Los compartiremos para que no te preguntes si los probamos o no:

WP Smush

Hemos usado smush.it antes. Es parte de la herramienta de medición de rendimiento Yslow de Yahoo! nunca hace mucha diferencia. Hay mejores alternativas. Muchos creen en este método. No creemos que sea tan genial en comparación. En la prueba, no pudo subir las imágenes. Lo intentamos de nuevo y nos dimos por vencidos. No nos importaba tanto.

Kraken.io

Creemos que Kraken tiene potencial con la versión de plugin de WordPress. Pero la versión en línea del navegador no le permite hacer ajustes de calidad. Nuestra imagen de prueba de los árboles-rocas sólo se comprime en un 12,4%. No es impresionante. Y la imagen de “madera” más grande no estaba permitida. Dijeron que para ese tamaño tendríamos que actualizar a la versión Pro con un límite superior de 16MB. ¡Olvídalo!

RIOT (Herramienta de Optimización de Imagen Radical)

Sólo para Windows. Descalificado.

Poca PNG

FALLÓ la carga y dio un mensaje de error. “Lo sentimos, hubo un problema con la(s) imagen(es) que estás subiendo. Por favor, asegúrate de que tu imagen es un formato compatible y cumple con tu cuota”. Nuestras imágenes funcionaron bien en todas partes? Imagínate. Sí. Lo intentamos más de una vez.

Shrink’o Matic

Aplicación de escritorio para Adobe AIR. Descalificado porque requiere más que un navegador.

TinyPNG – Límite 5MB

Tiene un límite de 5MB y no hace ninguna diferencia. Cambio de “cero por ciento” en la imagen de los árboles y las rocas.

Compressor.io

Compressor.io tampoco pudo ser. Árboles – rocas sólo comprimidas en un 24%. Eso no es suficiente para nosotros. La imagen de “madera” fue mejor (-72%) pero sin opción de redimensionamiento. No era de mucho valor para esas grandes y pesadas imágenes de cámara digital.

 

 

 

 

Fuente del post

5 herramientas imprescindibles para medir el rendimiento de una web

5-herramientas-imprescindibles-para-medir-el-rendimiento de tu web

Uno de los factores de posicionamiento más importantes es la velocidad de carga de tu página. Según un estudio realizado por searchmetrics, dio como resultado que los 10 primeras páginas en las posiciones de google también eran las que cargaban más rápido.

Otro estudio realizado por Moz, llegaba a la conclusión que lo importante no solo es la velocidad de carga de la página, sino el tiempo del primer byte, lo que muchos test de velocidad denominan Time to First Byte.

A continuación te presentamos una lista de las que creemos qué son las 5 mejores herramientas para medir la velocidad de carga de tu página web. Es una buena práctica realizar test para poder comprobar que aspectos hay que mejorar en nuestra web.

PINGDOM

Disponen de varias herramientas, pero la más conocida es la herramienta de medición de rendimiento. Se trata de una herramienta muy visual qué hace especial énfasis en los tiempos de carga. Clasifica los elementos y los lista de mejores a peores.

pingom-tools

Cada elemento de la lista se puede expandir y además incluyen más acciones específicas y recomendaciones.

pingdom_2

GTMETRIX

GTmetrix no utiliza un sistema de clasificación si no que muestra el resultado del test en Google Speed Test y en Yahoo YSlow.

gtmetrix-resultados

Los resultados los ordena por el impacto que tienen en el resultado de la prueba. Además los usuarios registrados pueden grabar un vídeo de cómo carga la página y para verlo después. Una utilidad que me resulta muy interesante es la de poder comparar entre varios resultados, lo que te permite saber, con repsecto a otra página en que puntos eres mejor y peor.

GOOGLE PAGESPEED INSIGHTS

Ofrece información relativa a su propia escala, sin dar detalles del tiempo de carga en segundos. La herramienta ha ido cambiando paulatinamente y ahora también ofrece en el mismo test cual será la velocidad de carga de la página si se accede desde un dispositivo móvil o desde un ordenador, mostrando además como se visualizará el diseño de la web en el móvil.

google-pagespeed-insights

También en el resultado nos da la información de lo realmente importante a solucionar y sugerencias que podrían mejorar la velocidad de carga si se mejoran. A veces algunas de las recomendaciones entran en conflicto con otras.

NIBLER

Esta aplicación ofrece una especie de auditoría SEO completa de la web, entre todos los puntos que analiza, por supuesto se encuentra la velocidad de carga.

No sólo analiza la URL que queramos, si no que hace un análisis de 5 páginas aleatorias pertenecientes al dominio solicitado y con la información obtenida nos ofrece el resultado general de la web con información de más de 10 factores.

nibler

WEBPAGETEST

Mi herramienta favorita, probablemente es la herramienta más técnica de todas. Hace especial énfasis en el tiempo de carga del primer Byte. Da una información muy detallada, permite cambiar la localización del test y el navegador con el que se hace el test. También ofrece un historial de los tests realizados con anterioridad, esto es muy interesante, ya que así, cuando trabajamos la optimización de carga, podemos ir comprobando las mejoras y la evolución que se ha conseguido realizar.

webpagespeed-test

La aplicación se pude configurar para realizar el test en 2 pasadas, cuando ya el contenido está en caché, tanto en el servidor, como en el navegador. Utiliza su propio sistema de clasificación y ofrece unas gráficas muy interesantes. Como pega, a veces, cuando está muy saturada, puede resultar un poco lenta.

Cómo crear páginas web gratis: los 5 mejores servicios

agencia de diseño web

¿No tienes presupuesto y necesitas crear página web gratis? Analizamos los 5 mejores sitios para realizar una página web gratis en cuestión de minutos, de manera sencilla y sin costes.

WIX

DISEÑO WEB WIX GRATIS
La plataforma Wix ofrece la posibilidad de crear páginas web gratis y de forma sencilla con un resultado impactante. Wix aloja a más de 26 millones de webs en su plataforma y se registran más de 30.000 usuarios diarios.

Características

  • Cientos de plantillas clasificadas en función del sector.
  • Soporte e idioma en Inglés.
  • Hosting gratuito.
  • Diseño optimizado para móvil.
  • Opciones para eCommerce gratis básicas.
  • Blogs y conexión a redes sociales.
  • Planes de suscripción muy completos desde 5€/mes.

Weebly

PAGINAS-WEB-GRATIS-WEEBLY
Weebly ofrece un poderoso sistema de «drag and drop» en el editor y cien plantillas profesionales para crear una página web. Más de 12 millones de personas usan actualmente Weebly.

Características

  • Multitud de plantillas prediseñadas
  • Hosting gratuito con 500Mb de almacenamiento
  • Diseño optimizado para móvil.
  • Sistema para diseñar muy intuitivo y ágil.
  • App para diseñar páginas desde el móvil.
  • Creación de Blogs.
  • Ampliable con planes de suscripción desde 7€/mes.

Jimdo

jimdo
Un servicio básico y rápido, regístrate, escoge un tema y ya está la web funcionando. Tiene, tiene ahora mismo unos 7 millones de portales alojados.

Características

  • Infinidad de plantillas bien diseñadas.
  • Hosting gratuito 500Mb de almacenamiento.
  • Dominio .jimdo.
  • Compatibilidad HTML5
  • Planes de suscripción asequibles desde 6,5€/mes. (facturación anual)

 

Yola

yola crear web profesional gratis
Permite crear página web gratis con aspecto profesional en cuestión de minutos sin ningún tipo de experiencia técnica. Ahora mismo tiene 7 millones de clientes.

Características

  • Máximo 3 páginas
  • Sites gratis sin publicidad.
  • Diseños personalizables.
  • 1Gb de almacenamiento.
  • Planes ampliables desde 4,17$/mes.

 

EdUBlogs

Blogs educación gratuitos
Plataforma de blogging pensada para estudiantes y profesores, está reconocido como el servicio más usado para las webs .edu. Ahora mismo tienen 1,6 millones de blogs y 32 GB de espacio gratuito para estudiantes y profesores. Lo usan universidades como Stanford.

Características

  • Funciona con WordPress
  • 100Mb de espacio.
  • Permite personalizar el look.
  • Idioma Ingles.
  • Herramientas para gestión de estudiantes.
  • Diseño para móvil.
  • Planes ampliables desde 4,17$/mes.

 

Los 10 peores diseños web de la historia

paginas web wordpress madrid