Cómo mejorar el rendimiento de tu web

Uno de los primeros obstáculos que enfrenta un usuario cuando accede a tu web es el tiempo de carga. La velocidad de carga de tu página, puede afectar directamente a tu posicionamiento en los buscadores, ya que este afecta de forma directa a la experiencia de usuario. 

De hecho según google, la probabilidad de rebote puede triplicarse si nuestra web tarda más de 3 segundos en cargar. Por eso, no sorprende que la optimización del rendimiento web o WPO, por sus siglas en inglés, se haya vuelto en algo prácticamente inseparable del desarrollo web en los últimos años. Pero entonces, ¿por dónde empezamos?

Core Web Vitals ¿Que son? y ¿Cómo las medimos?

Los Core Web Vitals son una forma sencilla de medir la optimización de nuestra página web. Estas métricas nos proporcionan una referencia sobre los aspectos de la web que debemos mejorar. Se dividen en varias secciones como la velocidad de carga, el tamaño de las imágenes, el tiempo que tarda el navegador en renderizar todo el código… Todas las métricas afectan nuestra puntuación global, pero para este contenido nos enfocaremos en las tres que, por el momento, Google considera más importantes: 

Largest Contentful Paint (LCP)

El LCP mide el tiempo que tarda nuestra web en cargar el bloque de información más grande de nuestra web. Este generalmente suele ser una imagen o un bloque de texto. Según google, una buena velocidad de carga debería estar por debajo de 2,5 segundos. 

¿Qué elementos se tienen en cuenta a la hora de medir este valor? Según la guía oficial de google, estos son los elementos considerados para hacer el cálculo:

• Etiquetas <img>
• Los elementos de <image> dentro de los <svg>
• Videos insertados a través de la etiqueta <video>
• Una imagen aplicada con la función url() mediante CSS
• Los elementos que contengan texto

Interaction to Next Paint (INP)

Esta métrica mide el tiempo de reacción de nuestra web cuando el usuario interactúa con ella. Por ejemplo, imaginemos que tenemos un CTA con un botón y, cuando el usuario hace clic, la web tarda más de medio segundo en reaccionar. En este caso, tendríamos un INP deficiente. ¿Entonces cómo sabemos cuál es un buen INP?

• Un INP de menos de 200 milisegundos: Significa que nuestra web tiene una buena capacidad de respuesta.
• Un INP de entre 200 y 500 milisegundos: Deberíamos mejorar nuestra respuesta.
• Un INP mayor de 500 milisegundos: Significa que la respuesta de nuestra web es deficiente.

Para calcular este valor, Google analiza y calcula el INP en base a la interacción más larga observada.

Cumulative Layout Shift (CLS)

Esta métrica mide cuánto varía la estructura de la web durante la carga. Estos desplazamientos de contenido pueden ser en cualquier dirección y afectan directamente la experiencia del usuario. Pongamos un ejemplo: imaginemos que un usuario entra en nuestra web y ve un CTA con el botón de contacto, pero justo cuando va a hacer clic, carga la cabecera de la web y, en vez de clicar sobre el botón del CTA, hace clic en el primer slide, llevándolo a una página totalmente distinta. 

Este cambio de layout probablemente haría que nuestra puntuación disminuyera mucho, ya que el bloque se habría desplazado considerablemente de su posición inicial.

¿Cómo se mide el Core Web Vital?

Existen muchas herramientas para medir esta puntuación, pero yo te recomendaría usar una de estas dos, ya que además de ser gratuitas, solo necesitas escribir la URL de tu web y ellas se encargan del resto. Además, ambas te darán información adicional sobre cómo solucionar los diferentes errores que identifiquen:

1. Google PageSpeed Insights: Esta herramienta es tremendamente sencilla de utilizar. Simplemente tienes que ir al sitio web, pegar la URL de la dirección web que quieres analizar y hacer clic en “Analizar”.
2. Google Lighthouse: Esta herramienta de código abierto te ofrece métricas muy precisas y se puede añadir directamente como extensión en tu navegador Chrome.

Ambas herramientas nos mostrarán la información de manera similar. Este es un ejemplo de una página que necesitaría una revisión:

¿Cómo podemos mejorar nuestras Core Web Vitals?

Como muchos sabréis, no hay una fórmula secreta que haga que nuestras métricas lleguen al 100 con un solo clic, pero aquí van un par de consejos para mejorar el rendimiento de nuestra web:

Optimiza tus imágenes y exportalas a una resolución óptima.

Hay una infinidad de herramientas de compresión de imágenes gratuitas online. Es recomendable generar el hábito de pasar nuestras imágenes por estas herramientas antes de subirlas a nuestro servidor, ya que no solo ocuparemos menos espacio en este, sino que acelerará la carga de medios de forma significativa. 

En este caso por ejemplo podemos ver la diferencia entre una imagen comprimida y la misma sin comprimir. El resultado variará dependiendo de la imagen pero en este caso nos hemos ahorrado un 71% simplemente pasándolo por una herramienta 

También es muy importante que, cuando exportemos una imagen, seamos conscientes de dónde la vamos a insertar y a qué resolución se va a renderizar. No nos sirve de nada exportar una imagen a 2000 x 2000 píxeles para luego renderizarla en un thumbnail de 200 x 200 píxeles.

Implementa el Lazy Load a tus imágenes. 

Para agilizar la carga inicial de nuestra página web, es útil aplicar una carga diferida o Lazy Load a nuestras imágenes. De esta manera, el servidor no tendrá que lidiar con las imágenes del fondo de nuestra web hasta que el usuario se desplace hasta ellas. ¡Ojo! Cuando pongáis las imágenes con carga diferida, no olvidéis especificar la altura y la anchura de estas, ya que si no, esto generará una penalización de CLS.

Reduce y optimiza el código JavaScript de tu página web. 

Cuando escribimos código JavaScript, está claro que tenemos que hacerlo de forma legible y clara, pero tampoco podemos pasar por alto la optimización. Además, también es útil minificar este fichero para que ocupe menos espacio, pero cuidado porque esto puede generar errores o comportamientos inesperados en nuestro código.

Evita el código de terceros.

Todos hemos utilizado código de terceros en nuestras webs cuando hemos querido insertar un gráfico dinámico, un carrusel o un slider, pero es importante minimizar este tipo de código. Generalmente, estos ficheros se cargan desde servidores externos al nuestro, lo que provoca un retraso en la carga y afecta tanto al CLS como a la carga inicial del LCP.

Haz tus páginas más estáticas.

Está claro que hoy en día las páginas son más interactivas que nunca y esto ha hecho que el peso de las webs aumente significativamente. Por eso, debemos ser conscientes de que una alta carga de JS y CSS hará que nuestra web cargue más lento. Las animaciones, los bloques móviles y los popups son realmente atractivos, pero debemos encontrar un equilibrio entre funcionalidad, diseño y usabilidad. Cada vez tenemos más ejemplos de webs “simples” que dan resultados muy buenos porque anteponen la usabilidad por encima de la estética. Frameworks como Astro evidencian que se puede tener una web muy estética con una carga baja de JavaScript.

Utiliza una CDN. 

Por lo general, las CDN generan copias caché de nuestra web en varios servidores para que, cuando un usuario quiera acceder a una página, lo haga desde el servidor más próximo y se cargue más rápido. Esta es una solución muy efectiva y ayuda considerablemente a la velocidad. Eso sí, por lo general estos servicios no son gratuitos.

Utiliza una caché. 

Esta es una de las soluciones más populares, ya que, si usamos algún tipo de CMS como WordPress, podemos encontrar plugins gratuitos que cumplen esta función de forma correcta. Estos plugins suelen generar una copia comprimida de las páginas en el servidor y hacen que la carga sea más fluida y rápida. Es importante que, cada vez que hagamos un cambio en nuestra web, volvamos a precargar esta caché; de lo contrario, corremos el riesgo de que nuestros cambios no se reflejen en la web real, ya que el servidor seguirá mostrando la caché antigua.