Cómo tener un sitio web con más de 99 puntos de velocidad

Un sitio con más de 99 puntos de velocidad se consigue con cuatro decisiones: servir HTML ya construido en lugar de armarlo en el navegador, entregar las imágenes en formato moderno y al tamaño exacto en que se muestran, alojar las fuentes en tu propio dominio y cargar solo el JavaScript que la página realmente usa. No es un ajuste que se hace al final: es la forma en que el sitio se construye desde el primer día.

Qué mide realmente el puntaje de PageSpeed

El puntaje de PageSpeed Insights resume las Core Web Vitals, las métricas con las que Google evalúa la experiencia de carga. Tres mandan:

• LCP (Largest Contentful Paint): cuánto tarda en pintarse el elemento más grande de la pantalla. Verde por debajo de 2,5 segundos.
• INP (Interaction to Next Paint): cuánto tarda la página en responder cuando el usuario toca algo. Verde por debajo de 200 milisegundos.
• CLS (Cumulative Layout Shift): cuánto salta el contenido mientras carga. Verde por debajo de 0,1.

Un sitio puede «verse rápido» y estar rojo en las tres. Y el costo no es solo de posicionamiento: cada segundo extra de carga es una parte de las visitas que abandona antes de ver la oferta, con especial castigo en móvil, donde llega la mayoría del tráfico pagado.

Renderizado estático: la decisión que más pesa

La mayoría de los sitios lentos son lentos por diseño: un constructor visual o un tema recargado arma la página en el navegador del visitante, con decenas de scripts que se descargan y ejecutan antes de mostrar nada.

El enfoque contrario es el renderizado estático: cada página se construye una sola vez, en el servidor, y el visitante recibe HTML terminado. No hay que esperar a ningún script para leer el contenido. Frameworks como Astro o Next.js en modo estático trabajan así, y es la base sobre la que construimos las webs de nuestros clientes — y este mismo sitio.

Imágenes: el kilo que más engorda

En un sitio típico, las imágenes pesan más que todo lo demás junto. Tres reglas las ponen a dieta:

1. Formato moderno. WebP o AVIF pesan una fracción de un JPG o PNG equivalente sin pérdida visible.
2. Tamaño real. Una foto de 4000 píxeles mostrada en una tarjeta de 400 es ancho desperdiciado; hay que servir cada imagen al tamaño en que se ve, con variantes por pantalla (srcset).
3. Carga diferida. Lo que está bajo el pliegue se carga cuando el usuario se acerca (loading="lazy"), no antes. La imagen del hero es la excepción: esa se precarga, porque suele ser el LCP.

Fuentes y JavaScript: los dos frenos silenciosos

Fuentes. Cargarlas desde un servicio externo agrega una conexión más antes de poder pintar texto. Alojarlas en el propio dominio, en formato WOFF2 variable y con font-display: swap, elimina esa espera y el parpadeo de texto invisible.

JavaScript. Cada script de más compite por el procesador del teléfono del visitante. La regla es cargar solo lo que la página usa, diferir lo que no bloquea y ser implacable con los scripts de terceros: cada píxel de medición, chat y widget se paga en INP. Los que sobreviven a esa revisión pueden cargarse fuera del hilo principal con herramientas como Partytown o el modo de carga diferida del propio gestor de etiquetas.

Cómo comprobarlo (y no engañarse)

Mide con PageSpeed Insights en la pestaña móvil, que es la exigente, y mira las dos secciones: el diagnóstico de laboratorio y, cuando existe, los datos reales de usuarios de los últimos 28 días. Un truco que vemos seguido: medir solo la home. Las páginas que reciben el tráfico de campañas y las fichas de producto o servicio importan más que la portada.

Cierre

La velocidad no es una medalla técnica: es la primera condición para que el resto del marketing rinda, porque todo clic que pagas o posicionas aterriza ahí. Si tu web actual no pasa la prueba, en desarrollo web explicamos cómo construimos sitios que sí lo hacen, y cómo eso se conecta con SEO y campañas que convierten.