Optimización de Velocidad: ¿Cómo Ayudar desde el Backend?

El backend juega un papel crucial en la optimización de la velocidad web, ya que una correcta optimización del código y el servidor puede eliminar retrasos que a menudo surgen en el procesamiento de solicitudes y la entrega de contenido.

Este artículo está dirigido principalmente a los desarrolladores backend o administradores de infraestructura de servidores.

Influencia del Backend en las Métricas de Velocidad#

Para empezar, debemos decir que las métricas de velocidad no se tratan solo del frontend. El backend influye en muchas métricas, específicamente en aquellas del conjunto de Core Web Vitals.

Medimos la velocidad del backend mediante la métrica Time To First Byte (TTFB). El valor ideal para TTFB es inferior a 0,8 segundos. TTFB tiene un impacto directo en la velocidad de carga del sitio, en particular en el Largest Contentful Paint (LCP), que es la velocidad de carga del elemento más grande de la página.

Esto se ilustra bien en el siguiente gráfico simplificado. Si el TTFB se demora 2,6 segundos, tenemos un problema en el sitio y ya no cumpliremos con el límite para la métrica LCP, que es de 2,5 segundos. En tal caso, incluso la mejor optimización del frontend no podrá salvarte y deberás recurrir a la optimización del backend.

El tiempo del backend y el tiempo del frontend juntos forman el valor de la métrica LCP.

Además del LCP, el backend también influye en una de las métricas auxiliares de Web Vitals, que es el First Contentful Paint (FCP), la velocidad de renderización de cualquier contenido.

La optimización del backend es la base sobre la que se puede construir, incluso si optimizas WordPress, Shoptet u otro sistema CMS.

Consejos Generales para Acelerar el Backend#

Las áreas potenciales donde optimizar el tiempo de la métrica TTFB son infinitas. Al listado anterior, podemos añadir algunos puntos "imperecederos", entre ellos:

• Aumenta el rendimiento del servidor (CPU, memoria)
  Recursos suficientes del servidor pueden procesar solicitudes más rápidamente.
• Optimiza la base de datos
  Ajusta la configuración de la base de datos, realiza consultas eficientes y utiliza índices.
• Utiliza caché
  Implementa caching a nivel de base de datos, memoria (por ejemplo, Redis) o caché HTTP en consultas o endpoints frecuentemente repetidos, para eliminar la necesidad de recargar datos de la base de datos.
• Cuidado con las múltiples redirecciones
  Los largos viajes de ida y vuelta prolongan el tiempo total de carga de las páginas.
• Optimiza DNS y latencias de red
  Configura un DNS optimizado y guárdalo en caché para que la carga sea lo más rápida posible. En algunos casos, mover servidores a regiones más cercanas a tu audiencia objetivo puede ayudar.

¿Cómo Puede un Desarrollador Backend Ayudar con la Velocidad del Sitio?#

Los siguientes consejos no están directamente enfocados en la optimización de la métrica TTFB, pero pueden ayudar a mejorar la velocidad del sitio en general.

Compresión de Datos, Brotli, GZIP#

Brotli y GZIP son métodos de compresión sin pérdida que ahorran volumen de datos al descargar archivos de texto como CSS o JS del servidor al navegador. Sin embargo, pocos saben que GZIP y Brotli tienen niveles de compresión. GZIP tiene 9 niveles, mientras que Brotli tiene 11.

En general, recomendamos establecer el nivel de compresión en 6. Niveles superiores a 6 no ofrecen diferencias significativas en el tamaño de los archivos y cuanto mayor sea el grado de compresión, mayor será la demanda de rendimiento del servidor y tiempo.

No utilices compresión para fuentes (WOFF y WOFF2), ya que ya están comprimidas por su formato. Si no tienes experiencia configurando la compresión, primero prueba el nivel de compresión. Servicios como Cloudflare pueden resolver automáticamente un buen nivel de compresión por ti.

Si en lugar de personas te están saturando los robots, eso puede ser un problema de velocidad y estabilidad. Echa un vistazo a nuestro servicio de Estrategia para Bots de IA.

Ignorar los Parámetros UTM#

A menudo, los sitios web usan caché que se invalida si hay un parámetro en la URL. Sin embargo, es importante darse cuenta de que un parámetro UTM no representa ningún cambio en el contenido, ya que solo se utilizan para herramientas analíticas.

Ignorar los parámetros UTM en la caché puede ser un buen paso de optimización, ya que puede eliminar la duplicación en la métrica TTFB, que es muy típica para la versión con caché y sin caché.

Ejemplo ilustrativo de dos grupos diferentes de usuarios en la métrica TTFB – uno con caché y el otro sin ella.

Hoy en día, verás ese tipo de forma incluso en el histograma de datos CrUX en el informe de Dominios.

Actualización del Stack Backend#

El mantenimiento y la actualización de las versiones tecnológicas en el entorno de desarrollo es muy importante. A menudo, las nuevas versiones mejoran el rendimiento, lo que puede ayudar a la velocidad de tu proyecto y también eliminar la acumulación de deuda tecnológica.

Por ejemplo, en PHP puedes comparar las versiones utilizando benchmarks. En el caso del framework Laravel, aumentar la versión puede resultar en un significativo incremento en las solicitudes gestionadas por segundo.

El rendimiento y el número de solicitudes gestionadas de PHP versión 8.3 es superior al de versiones anteriores.

Nuevos Formatos de Imágenes (WebP, AVIF)#

Los formatos de imágenes web han pasado por un desarrollo interesante en los últimos años y actualmente podemos utilizar dos nuevos formatos: WebP y AVIF. Su principal ventaja es la mayor eficiencia de datos. Ambos formatos ya se pueden usar sin preocupaciones, ya que son compatibles con todos los navegadores modernos.

Puedes trabajar con el formato WebP de manera nativa en PHP, de los parámetros importantes mencionamos $quality, que establece la calidad de salida de la imagen.

Con el nuevo formato WebP puedes ahorrar hasta decenas de porcentajes en el tamaño de los datos de las imágenes.

AVIF está disponible nativamente en PHP desde la versión 8.1 en adelante, y también podemos ajustar los parámetros $quality y $speed.

El formato AVIF se basa en el formato de video AV1 y, desafortunadamente, tiene un inconveniente. Generar una imagen AVIF lleva bastante tiempo. Si no trabajas con imágenes directamente, la implementación de nuevos formatos puede ser resuelta por servicios como Cloudflare.

Con el nuevo formato AVIF puedes ahorrar hasta decenas de porcentajes en el tamaño de los datos de las imágenes.

Encuentra una guía detallada para implementar AVIF, incluyendo nuestras experiencias prácticas, en el artículo sobre el formato AVIF. Allí encontrarás más consejos para la optimización de imágenes en la web.

HTTP3#

Un desarrollo interesante y aceleración también se observa en el nivel de comunicación entre el servidor y el cliente. HTTP3 trae mejoras donde no siempre ocurre el llamado handshake en la comunicación, y de esta forma, se acelera significativamente todo el proceso.

HTTP3 simplifica significativamente los procesos de comunicación entre el servidor y el cliente.

Otras ventajas incluyen una mejor gestión de prioridades de archivos descargados (por ejemplo, si además del dominio principal usamos otra CDN o subdominios), y también un mejor manejo de conexiones inestables. Sin duda, una mejora que merece consideración.

Early Hints#

Otra mejora en la comunicación entre el servidor y el cliente es 103 Early Hints. En pocas palabras, se trata de preloads y preconnects más rápidos, que permiten un inicio más temprano de la descarga de recursos para la web.

103 Early Hint
Link: </style.css>; rel=preload; as=style

No recomendamos usar Early Hints para una gran cantidad de archivos, pero pueden ser útiles al descargar recursos que bloquean el primer renderizado. Un buen ejemplo podría ser la descarga de CSS con la ayuda de Early Hints.

Para una comprensión más sencilla, infografía que muestra la comunicación servidor/cliente sin Early Hints y con ellos.

Speculation Rules API#

Este año, Chrome introdujo mejoras en el API de reglas especulativas, que permite precargar páginas por adelantado. Actualmente, al implementar el Speculation Rules API se puede seleccionar mejor, por ejemplo, usando selectores CSS, para que puedas dirigirte fácilmente a una parte específica de los enlaces. Muy interesante es la opción prerender, donde la página se carga en la memoria, y su clic es instantáneo.

<script type="speculationrules">
  {
    "prerender": [
      {
        "where": { "href_matches": "/next" },
        "eagerness": "eager"
      }
    ]
  }
</script>

Normalmente, las reglas de especulación se definen en HTML, pero si por alguna razón no es posible en tu proyecto, también puedes enviarlas en los encabezados HTTP:

Speculation-Rules: "/rules/prefetch.json","/rules/prerender.json"

Herramientas para Monitorear Métricas#

Puedes monitorear el tiempo de velocidad del backend usando monitoreos especializados. En nuestra práctica, los datos más importantes son los de los usuarios del Chrome UX report (CrUX), donde encontrarás los valores de la métrica TTFB.

Puedes seguir estos datos en el monitoreo PageSpeed.ONE PLUS, donde los encontrarás en forma clara en el informe de Dominios. La ventaja del Tester es que muestra el desarrollo de las métricas en el tiempo.

Sigue el desarrollo histórico de la métrica TTFB en el gráfico.

Nos dedicamos al tema de las optimizaciones a largo plazo y recomendamos leer también nuestros otros textos:

• Pruebas de Web Vitals en el navegador
• BFcache: acelera el movimiento de los usuarios en la historia de navegación