12 febrero 2014

Optimizar las Imágenes con PageSpeed desde el Navegador y algo más

Extencion Pagespeed en Chrome

Tal y como te lo había dicho en la entrada anterior, donde hablábamos de cómo identificar fallos en las imágenes usando una herramienta, hoy veremos la forma de optimizar las imágenes del blog, incluyendo las de las entradas según la recomendación de PageSpeed.

Si tu blog ha sido creado con fines profesionales y estás orientado tus esfuerzos a conseguir el mayor tráfico posible ya que lo monetizas, seguramente estarás interesado en optimizarlo, mejorando cada aspecto implicado en la experiencia de tus usuarios, como lo es el tiempo de carga.

Todas las imágenes que usas en el blog, le agregan peso al mismo, y esto se acrecenta, si no están optimizadas.

Por ello es importante conocer algunas técnicas o recomendaciones que nos permitan usar las imágenes, sin comprometer demasiado la carga del blogUna de ellas consiste en reducir el tamaño del archivo para que sea más ligero.

Lo ideal por supuesto es optimizar las imágenes antes de publicar la entrada, o antes de agregarlas al blog. Sin embargo, posiblemente se te haya pasado, o simplemente no existía un interés que te motivara a hacerlo.

Para tal caso, ésto será de ayuda, ya que usando la herramienta que muestro y que quizás ya conozcas (o tal vez no), podrás identificar imágenes que puedan ser mejoradas y acceder a la versión optimizada que nos ofrece.

Aunque la velocidad del sitio no es un factor decisivo para posicionar la página, según lo explicó el Sr. Matt Cutts (quien es empleado de Google) en su blog, ya que existen factores más importantes y de mayor peso como el valor añadido, la reputación del autor, entre otros que menciona, sí es un hecho que que Google considera la velocidad de un sitio como uno de los más de 200 factores que toman en cuenta para posicionar una página.

Así que, vale la pena tener ésto en mente, y además no descuidarlo. Pasa que, al momento buscar una mejor posición todo importa. No prestar atención a todos esos detalles por descuido, a la larga, se van sumando y terminan por convertirse en una condena que nos impide seguir escalando posiciones en el buscador.

Tampoco es para ponerse nervios@ :) Lo más importante, y que quiero transmitirte, es que vale la pena esforzarse por "mejorar la experiencia de tus usuarios", si tu blog aspira a ser leído por una audiencia mayor. Y como lo mencionaba anteriormente, el tiempo de carga ayudará y mucho, en ese sentido. ¿List@ para empezar?


Lo que haremos y los beneficios

  • Vamos a usar la herramienta: PageSpeed Insights para identificar las imágenes que necesitan ser optimizadas, según su recomendación. 
  • Vas a poder usar a tu favor las bondades de la herramienta ya que, para el caso de los archivos de imagen nos ofrece una versión mejorada, misma que podemos descargar, para luego remplazarla por la imagen original de la entrada, o de la plantilla.
  • También veremos otras recomendaciones para aquellos que estén interesados en comprimir aun más sus imágenes, con el fin de disminuir su impacto en el tiempo de carga.

Lo que necesitas

Vas a necesitar dos cosas:

1. Google Chrome, (o bien Firefox) aunque en el tutorial usaré Chrome.
Lejos de convencerte que uses Chrome, quiero decirte que, tener Chrome instalado en tu computadora, es muy útil, ya que te permitirá visualizar cambios que hagas en tu blog al momento que lo personalizas.

 Por ejemplo, tal vez siguiendo algún tutorial para agregar un menú desplegable (que a veces no son compatibles con todos los navegadores, así que mucho ojo) en Firefox se ve muy chulo y funcional, pero en Chrome no funciona correctamente. Por eso, si te gusta meterle mano a la plantilla, es bueno estar seguro que los cambios que haces, se visualicen correctamente en los principales navegadores.

2. Descargar la extensión PageSpeed Insights.
PageSpeed Insights es una herramienta desarrollada por Google, que hace un análisis de cualquier página web o del blog, examinando el código que tiene como: CSS, HTML, JavaScript, incluyendo las imágenes de la página, y nos devuelve "sugerencias" orientadas a mejorar el tiempo de carga del mismo.

Actualmente también existe una versión online, permitiendo así analizar el sitio desde su página. Sin embargo, una de las grandes posibilidades que ofrece la extensión, es poder acceder al contenido optimizado (si es que aplica), por ejemplo, en el caso de las imágenes.

Instalarla es muy sencillo, simplemente haces click en +Gratis que aparece en el extremo superior derecho (hasta ahora) del recuadro que se muestra en la página de la extensión, y la habrás instalado.

PageSpeed será integrada a las herramientas de desarrollo de Chrome, y podrás empezar a usarla una vez que accedas las herramientas.

Una vez que tengas la extensión Page Speed instalada en el navegador, entonces sigue estos pasos:

Pasos

Tip: Antes de empezar te recomiendo crear una carpeta en tu computadora para guardar ahí todas las imágenes optimizadas. De ese modo podrás acceder a ellas fácilmente, una vez que vayas a remplazarlas.

  1. Dirígete a la página Principal de tu blog. (Pensando en que empezarás por optimizar la página de inicio)
  2. Pulsa la tecla F12, o bien, pulsa: Ctrl + Shift + I, (Cmd + Opt + I para Mac),  para acceder al panel de las herramientas para desarrolladores.
  3. Selecciona PageSpeed, para acceder a la consola de la herramienta.

    Opciones de la consola de herramientas para desarrolladores de Chrome

  4. Luego, haz click en Analizar.

    Analizando la pagina con PageSpeed


  5. Una vez que termine de analizar la página, dirígete a la parte que dice: "Resumen de sugerencias", y haz click en optimizar imágenes.

    Resumen de sugerencias de Pagespeed

  6. Hecho lo anterior, aparecerá una lista con las URLs de las imágenes que se recomienda optimizar, y esto lo verás en "Sugerencias para esta página". Haz click en: Ver contenido optimizado para acceder el la imagen optimizada que nos ofrece la herramienta. Esto lo harás con todas y cada unos de las imágenes que te recomienden optimizar.


    Sugerencias a la página según Pagespeed

    Nota: Como puedes observar en la imagen, solo nos recomienda optimizar una sola imagen, y la reducción del archivo supondría un 3%. No es mucho, posiblemente en tu caso habrá imágenes tanto de las entradas como de la misma plantilla, en las que el tamaño del archivo se puede reducir en un porcentaje mayor, y evidentemente, ésto supondría mayor prioridad para que se optimice, ya que refleja que el estado actual del archivo (de la imagen) no es el óptimo, tomando en cuenta su tamaño.
  7. Una vez que accedas a la imagen optimizada, pon el puntero del ratón sobre la imagen, y haz click en el botón derecho del mouse, luego selecciona la opción: Guardar imagen como... para descargarla.

    Recuerda guardarla en la carpeta que creaste inicialmente para este proposito.

    Descargando imagen optimizada usando menú contextual del navegador

  8. Una vez que hayas descargado todas y cada una de las imágenes optimizadas, tendrás que reemplazarlas respectivamente por la imagen original que no está optimizada.

¡Y listo! Al haber hecho el análisis de la página principal de tu blog, vas a poder descargar la versión optimizada de las imágenes tanto de la plantilla, como de las entradas que muestre en la página principal.

Ahora si quieres y si te lo propones, puedes seguir optimizando las imágenes del resto de las páginas (de las entradas) de tu blog, si es que no lo has hecho, o no lo hiciste al publicar una entrada ;)


Para los más exigentes, aún hay más...

Si bien PageSpeed nos ofrece una versión optimizada de aquellas imágenes que lo requieren, al hacernos las recomendaciones, es posible comprimir aún más el archivo de una imagen.

Para ello, habrá que usar una herramienta que lo permita. Existen varias que podemos probar, entre ellas:


  • TinyPNG que conocí gracias a +Oloman Oloman cuando hablaba de ella en una entrada de su blog, misma que también nos recomiendan en la Guía para optimizar páginas Web. La he estado probando y hasta el momento no ha sido superada por ninguna otra herramienta. Aunque tiene una limitación, solo sirve para imágenes con formato PNG.
  • Otra herramienta que descubrí recientemente buscando en la red, fue esta:  http://www.vichaunter.com/tools/optimize/images/. Soporta varios formatos de imágenes, incluyendo JPEG.
  • PNGOUTWin, misma que recomiendan desde PageSpeed. Esta herramienta no es gratis, sin embargo es muy barata. El precio vale la pena, sobre todo si utilizas este tipo de archivos de imagen en tu blog (PNG), ya que, puedes optimizar todas las imágenes contenidas en una carpeta, y éstas serán remplazadas automáticamente (y si lo configuras así) por la versión optimizada, lo cual mejorará también tu productividad

Conclusiones
PageSpeed Insights es un buen aliado al momento de querer optimizar nuestros sitios para que sean más rápidos.
Optimizar las imágenes de tu blog, representa un paso más en la creación de contenidos. Sin embargo, bien merece la pena comprometerse a dedicarle ese tiempo antes de agregarlas al blog, ya que ayudará a mejorar la velocidad de tu sitio ;)

¿Qué te parece PageSpeed?, ¿Ya lo has usado antes? No dudes en dejar tus comentarios u opiniones sobre tu experiencia al usarla ;)

Yo sigo mejorando mi blog a beneficio tuyo y del resto de mis usuarios, ¿te animas a dar el paso?


Referencias:
https://developers.google.com/speed/docs/insights/OptimizeImages

Artículos recomendados:

Gracias por compartir tu comentario y hacernos saber tu opinión.