Recientemente he estado trabajando en mejorar el rendimiento de mi sitio web en cuanto a velocidad de carga inicial. Normalmente uso la herramienta de google Page Speed Insights para verificar mi puntaje y previamente ya había alcanzado casi al máximo puntaje posible pero desde enero del 2018 la herramienta se actualizo y ahora usa Lighthouse. No le puse mucha atención al comienzo, pero hace poco descubrí que mi puntaje era más bajo y la herramienta ahora me da sugerencias que antes no existían. Esto fue bueno ya que después de implementarlas aprendí nuevos trucos y mi sitio web se volvió mucho más rápido.

La herramienta se puede usar de diferentes manera una de ellas esta integrada en las herramientas para los desarrolladores de google chrome y la otra es navegando al enlace que compartí al principio y simplemente poner la URL de la página que te gustaría medir. Yo voy a usar la página para ver como esta mi sitio web.

google-page-speed-insights

Page speed insights divide en dos diferentes pestañas los resultados uno para escritorio y otro para móvil A continuación mi resultado para escritorio.

google-page-speed-insights-results

Mi resultado en escritorio es bastante bueno pero para móvil es mas estricto y mi resultado no es tan bueno.

google-page-speed-insights-mobile-results

Lo bueno de la herramienta es que no solamente te da una puntuación sino que también te sugiere recomendaciones y un estimado de cuanto tiempo de carga podrías ahorrar si las implementas. En mi caso me da tres sugerencias y la primera que llamo mi atención fue "Serve images in next-gen formats" que significa "Servir imágenes en formatos de siguiente generación".

google-page-speed-insights-recommendationst

Puedes ver que me está diciendo que podría ahorrar hasta medio segundo de tiempo de carga y está listando muchas de mis imágenes, esto llamo mi atención porque de acuerdo a mi conocimiento ya estaba usando la mejor compresión posible y logrando los mejores tamaños de imágenes posibles sin comprometer la calidad de la imagen, pero claro, esto es la web y las cosas se mueven muy rápido. La promesa de estos formatos de nueva generación es:

Proveer mejor compresión que PNG o JPEG, lo que significa tiempos de descarga más rápidos y menos consumo de datos.
Puedes encontrar más información acerca de cada recomendación en el enlace que dice learn more que pone en cada recomendación. El de los nuevos formatos te lleva aqui: Serve Images in Next-Gen Formats

Soporte en los navegadores

Puedes ver que estos nuevos formatos son JPEG 2000, JPEG XR, y WebP, todo iba bien hasta que llegue a la parte del soporte actual en los navegadores, la cual al tiempo que escribo esto se traduce en que ninguno de los formatos es soportado por todos los principales navegadores (Chrome, Firefox, Edge, Safari, and Opera). Puedes revisar los detalles para cada formato individual a continuación:

  • WebP (Funciona en los principales navegadores excepto Safari)
  • JPEG 2000 (Funciona solo en Safari)
  • JPEG XR (Funciona solo en Edge and IE)

El que actualmente tiene mejor soporte es WebP sin embargo dejar fuera a Safari no es bueno aunque no sea el navegador más popular. Así que esto casi me hizo olvidarme de implementar esto pero afortunadamente continúe leyendo acerca de como podría usar técnicas para dar una alternativa cuando el navegador no soporte el formato webp y asi poder cargar una imagen de un formato que si sea soportado.

Etiqueta Picture

Picture es una etiqueta muy útil que nos da a los desarrolladores más flexibilidad para cargar imágenes y mientras que su uso más común es cargar condicionalmente imagenes para un diseño responsivo también nos puede ayudar en implementar técnicas alternativas para cargar imágenes en formatos soportados por el navegador. A continuación muestro como tuve que transformar mis etiquetas <img /> para poder usar webp pero también ser capaz de cargar formato png en caso que webp no sea soportado.

Así es como se ven normalmente mis etiquetas <img /> No tienen nada especial, ahora para transformar en una picture que cargue el formato webp en caso de ser soportado y si no que cargue la imagen en formato png debo transformar mi código HTML a:

Y asi de sencillo solo usando html ya puedo usar webp de una manera segura de tal forma que se dara precedencia a descargar mi imagen en formato webp y si el navegador no lo soporta descargara la imagen de formato jpg

Transformando a formato WebP

Ahora que se como manejar formatos webp con alternativas para cuando no es soportado el siguiente paso es transformar mi imagen png a web, hay muchos editores gratuitos en linea que te pueden ayudar con esto pero si necesitas transformar muchas imágenes también hay excelente herramientas de linea de comando en Nodejs que puedes usar e incluso agregarlas a tu proceso de compilado. Para mantener esto simple de momento voy a demostrar usando un editor en linea llamado squoosh por Google Chrome Labs, esta es una herramienta muy buena y fácil de usar solo ve al enlace y Arrastra tu imagen o da clic en Select an image

squoosh-homepage
squoosh-editor

Puedes ver que formateando mi ya optimizada imagen png está haciendo que el tamaño de la imagen vaya de 67.4kB a 7.12kB lo cual la hace 86% mas pequeña y sin perder calidad. Esto es impresionante. Puedes probar con las diferentes opciones, yo he notado que algunas veces usar Lossless me da una mucho mayor reducción en tamaño.

Resultados

En mi caso voy a comenzar con la imagen principal que se carga en mí página de inicio y después de convertir a webp y usar picture puedes ver que mi navegador está cargando correctamente la imagen webp.

main-page

Se ve que la calidad no se vio comprometida y comparando la imagen webp a la png puedes ver que hay una gran diferencia en tamaño.

cmder-results

Una desventaja de este enfoque es que tengo que mantener una duplicación de imágenes, pero para mí, vale la pena y una ves que se configura apropiadamente con una herramienta de linea de comando no necesitas crear manualmente las imágenes para cada formato.

Imágenes como fondo

Hay otra manera en la que puedo cargar imágenes la cual es por medio de css background-image y de hecho yo estoy usando esto en mi sitio web el código se ve así:

background: url('../images/home-bg.jpg') no-repeat scroll center center;

Si quiero usar imágenes webp también tendría problemas de soporte en Safari así que también tengo que implementar alguna alternativa en este caso. Necesito detectar si el navegador soporta webp y una librería muy popular que me puede ayudar con esto es modernizr, de hecho, te permite crear tu propia compilación de la librería que incluya solamente las características que te gustaría detectar y ya que estoy en la búsqueda de optimización voy a hacer mi propia compilación.

modernizr-custom-buildt

Después de seleccionar las características que quisieras detectar dale clic en Build y selecciona la manera en la que te gustaría obtener tu librería.

modernizr-custom-build-get

En mi caso use la opción build in codepen.io para poder copiar y pegar de ahí e incluso me muestra un ejemplo de como se usa ahí mismo en codepen.

modernizr-codepen-build

Lo que modernizr hará por mí es agregar la clase .no-webp a la etiqueta html de esa manera puedo crear una regla css especifica para cuando no hay soporte en el navegador para webp, Mi código se transforma en lo siguiente:


    my-selector {
        background: url('../images/home-bg.webp') no-repeat scroll center center
    }

    .no-webp my-selector {
        background: url('../images/home-bg.jpg') no-repeat scroll center center
    }

Con esto, ahora puedo usar imágenes webp de una manera segura como fondos.

background-url-loads

Pruebas de soporte en Safari

Ahora necesito probar mi sito en Safari para asegurarme que estén funcionando correctamente.

safari-test-1

Puedes ver que la etiqueta picture está funcionando correctamente y está cargando la imagen jpg ya que no tiene soporte para webp y para lograr cargar mis imagenes como fondo desde css modernizr está haciendo su trabajo y está agregando la clase no-webp.

safari-test-2

Así que la imagen correspondiente es descargada

safari-test-3

Puntaje final

Así que después de correr page speed insights de nuevo me da mi nuevo puntaje.

final-mobile-score

Avanzar de 69 a 78 es una buena mejora, además que mi página ahora carga medio segundo más rápido. Todavía me quedan algunas recomendaciones pendientes por implementar y a medida que las complete iré compartiendo mis hallazgos. Aqui puedes ver como implemente Carga diferida de imagenes

¿Crees que usar el formato webp vale la pena? ¿Hay alguna herramienta de comando que ya hayas implementado con éxito para convertir a webp?