Rendimiento y Core Web Vitals

El rendimiento de un sitio web afecta a mucho más que la velocidad de carga. Un sitio lento o inestable puede dificultar el uso de las páginas, frustrar a los visitantes y reducir la eficacia de contenidos e interfaces que, por lo demás, están bien diseñados.

Esta sección aborda los factores técnicos que influyen en el rendimiento web, desde Core Web Vitals y la optimización de imágenes hasta el almacenamiento en caché, las redes de distribución de contenidos, las fuentes y JavaScript. El objetivo es diagnosticar cuellos de botella reales, comprender las métricas disponibles y aplicar mejoras que sigan siendo prácticas de mantener.

Core Web Vitals

Core Web Vitals proporciona un marco útil para medir aspectos importantes de la experiencia de las personas al cargar una página web e interactuar con ella. Comprender cada una de las métricas es solo una parte del trabajo; también es fundamental saber de dónde proceden los datos y cómo identificar la causa subyacente de un resultado deficiente.

Esta sección analiza LCP, INP y CLS, así como las diferencias entre las pruebas de laboratorio y los datos de campo obtenidos de usuarios reales. El enfoque se centra en el diagnóstico práctico, en lugar de limitarse a perseguir puntuaciones más altas en las herramientas de análisis.

Core Web Vitals en 2026: qué ha cambiado y qué importa

Optimización de LCP: cómo identificar y corregir el elemento de contenido más grande

INP: cómo diagnosticar retrasos en las interacciones

CLS: cómo identificar y corregir cambios inesperados de diseño

Datos de campo frente a datos de laboratorio: cómo entender CrUX y Lighthouse

Imágenes y contenido multimedia

Las imágenes y los vídeos suelen representar una parte considerable de los datos transferidos por una página web. Si se utilizan sin una optimización adecuada, pueden retrasar el renderizado, aumentar el consumo de ancho de banda y contribuir directamente a unas métricas de rendimiento deficientes.

Esta sección aborda los formatos de imagen modernos, la entrega de imágenes adaptables, la carga diferida, la inserción de vídeos y las CDN de imágenes. El objetivo es reducir las transferencias de datos innecesarias sin sacrificar la calidad de imagen y garantizar que el contenido multimedia se sirva de forma adecuada según el dispositivo y el tamaño de pantalla.

Formatos de imagen modernos: AVIF, WebP y alternativas

Imágenes adaptables: guía práctica de srcset

Cómo implementar correctamente la carga diferida

Cómo insertar vídeos sin penalizar el rendimiento

CDN de imágenes: comparación de opciones de optimización automatizada

Caché y CDN

El almacenamiento en caché puede reducir drásticamente el trabajo necesario para servir una página, pero los sitios web modernos suelen utilizar varias capas de caché al mismo tiempo. Entender qué capa es responsable de una respuesta resulta esencial cuando el contenido queda desactualizado o no se producen los aciertos de caché esperados.

Esta sección explica la caché del navegador, de página, de objetos y de CDN, además de la invalidación de caché, la depuración y el edge computing. También analiza cómo determinar si un sitio web pequeño necesita realmente una CDN y qué ventajas puede aportar de forma realista.

Capas de caché explicadas: navegador, página, objetos y CDN

Cómo elegir una CDN para un sitio web pequeño

Estrategias de invalidación de caché que evitan efectos secundarios no deseados

Funciones en el edge: ejecutar código más cerca del usuario

Cómo diagnosticar fallos de caché

Fuentes y código

Los problemas de rendimiento no siempre se deben a imágenes pesadas o servidores lentos. Las fuentes, las hojas de estilo, JavaScript y los scripts de terceros pueden retrasar el renderizado o añadir trabajo al navegador mucho después de que haya llegado el HTML inicial.

Esta sección analiza formas prácticas de reducir esos costes. Abarca la carga de fuentes web, el CSS crítico, la auditoría de scripts de terceros, la optimización de JavaScript y los presupuestos de rendimiento que ayudan a evitar que un sitio se vuelva progresivamente más lento a medida que se añaden nuevas funciones.

Carga de fuentes web: cómo mejorar la velocidad sin mostrar texto sin estilos

CSS crítico: cómo mejorar el renderizado del contenido visible sin desplazarse

Scripts de terceros: cómo auditar el exceso de etiquetas y scripts

Cómo reducir JavaScript: diferir, dividir y eliminar código

Presupuestos de rendimiento: cómo establecer y aplicar límites prácticos