Wpo

[Josemi2608]

Hola me dedico al diseño web en las palmas de gran canaria;) estoy rediseñando mi página web e intentando mejorar el WPO ya que Google le da muchísima importancia, conocéis alguna herramienta para comprimir imágenes Webp?

[Misbicistaticas]

Buenas Josemi!

Pues en https://www.webpagetest.org te hacen la valoración online gratis de la velocidad de tu sitio, pero es que además, en el apartado Image Analysis y allí mismo te ofrece las imagenes de tu web en webp, para guardartelas y usarlas. Está genial!

[Themis]

A parte de la recomendación de Misbicistaticas y la optimización de la imagen. Cuidado con las "hero images", las imágenes grandes tipo banner bajo la barra de navegación. Con la última actualización de Google las Core Web Vitals van a cobrar más importancia.

Cargar una imagen grande en el primer contenido visible va a hacer que el LCP (Largest Contentful Paint) y el Time to Interactive (TTI). Intenta recortar los margenes de esa imagen y hacerla más pequeña. Además, cargarla como background con CSS hace que la secuencia de peticiones7tareas sea: pedir el HTML -> este pide el la hoja de estilos CSS -> el navegador la interpreta -> pide la imagen del background al servidor -> Se renderiza la imagen. Diría que es mejor colocar la imagen directamente en una etiqueta <img /> para que empiece a cargar en cuanto el navegador reciba el archivo HTML.

Y por otro lado tienes bastante CLS (Content Layout Shift), lo cual no es una medida de velocidad, pero si de performance a nivel de usuario. Reserva espacio para la imagen y otros elementos (fija el width y height), para que se produzcan menos cambios de interfaz en la zona que es visible al cargar la página.

Yo utilizo PageSpeedInsights y GTMetrix para los análisis de rendimiento.

[Headcounter]

Hey, gracias por esos detalles Themis!!! Especialmente lo del LCP, que creo que me afecta en algunas webs. Me lo miraré mejor!

Gracias!

[TecnicSolution]

Puedes mejorar eso usando la propia herramienta de Google Pagespeed Insights. Allí te hará una especie de informe de las cosas que tendrías que mejorar.

Yo la verdad es que no me obsesiono mucho con eso del formato webp. Lo más importante es que la imagen pese poco (sin perder calidad) y bien comprimida. Para eso normalmente uso tinypng es online y práctico. Aún que el nombre de la web se llame tinypng, comprime tanto imágenes png, como jpg.

Si aún y así, quieres pasarlas a formato webp, yo uso otra herramienta online que se llama photopea. Es como una especie de PhotoShop online que te permite guardar la imagen en formato webp.

[mriusa]

Se ve muy bonito tu sitio web, tiene color y mucha información útil.