Por qué tu web saca mala nota en velocidad (y cómo arreglarlo)

Pagaste por una web moderna. En tu portátil abre al instante. Entonces la pasas por Google PageSpeed Insights y la nota es un 38 en rojo. ¿Qué ha fallado?

Normalmente, nada. Esa cifra que estás mirando es una prueba de laboratorio en el peor de los casos, y lo que más la penaliza no es tu página, sino las herramientas externas de las que depende cualquier negocio pequeño: un módulo de reservas, un sistema de citas, un mapa incrustado, un botón de chat. Aquí te explicamos por qué la nota es baja y las soluciones que de verdad ayudan, tanto si tienes un servicio de taxi como un restaurante, una peluquería o un bar de barrio.

Primero: qué mide realmente esa nota

La nota de PageSpeed / Lighthouse de Google no es "lo rápida que se siente tu web". Es una simulación que se ejecuta en condiciones deliberadamente duras:

• Un móvil Android barato, de gama media, no tu iPhone.
• Una conexión 4G lenta con latencia añadida.
• El procesador del móvil ralentizado a propósito 4×.

Es el entorno más exigente a propósito: Google quiere saber cómo se comporta tu web para alguien con un móvil viejo y mala cobertura. Tus visitantes reales, con un móvil moderno o un ordenador con Wi-Fi, viven algo mucho más rápido.

Las tres cifras que importan (Core Web Vitals)

Olvida por un momento la nota única. Estas tres métricas son las que Google usa de verdad para posicionar:

Métrica	Qué significa	Objetivo
LCP (Largest Contentful Paint)	Cuándo aparece el elemento más grande de la pantalla: el titular o la imagen principal	Menos de 2,5 s
CLS (Cumulative Layout Shift)	Cuánto se mueve la página mientras carga	Menos de 0,1
INP (capacidad de respuesta)	Con qué rapidez reacciona la página a un toque	Menos de 200 ms

Si tu diseño no da saltos (CLS cercano a 0) y tu titular aparece rápido (buen LCP), ya estás ganando donde de verdad cuenta, aunque la nota global asuste.

El verdadero culpable: los widgets externos

Casi toda web de negocio pequeño incrusta la herramienta de otra empresa:

• Restaurantes: módulos de reserva como OpenTable o TheFork.
• Peluquerías y barberías: sistemas de cita como Fresha, Treatwell o Booksy.
• Taxis y traslados: widgets de tarifa y reserva.
• Bares y cafeterías: Google Maps, feeds de Instagram, calendarios de eventos.
• Todos: banners de cookies, chat en vivo, botones de WhatsApp.

Cada uno de ellos carga su propio JavaScript desde los servidores de otra empresa. No controlas ese código, y suele ser el mayor motivo de que tu nota sea baja. En Lighthouse aparece como "Reduce third-party impact" y "Reduce JavaScript execution time".

Aquí está el dilema: ese widget es también como consigues las reservas. Esconderlo para ganar puntos sería un pésimo intercambio. El objetivo no es quitarlo, sino que penalice menos.

Solución 1 — "Preconnect" al servidor del widget

Una sola línea en el <head> de tu web le dice al navegador que abra la conexión con el servidor de reservas o mapas de inmediato, en vez de descubrirla tarde. Así el widget aparece antes, algo bueno para tu cliente y para tu nota:

<link rel="preconnect" href="https://your-booking-provider.com" crossorigin>
<link rel="dns-prefetch" href="https://your-booking-provider.com">

Solución 2 — Que el widget no sea el "contenido principal"

Asegúrate de que tu titular y tu imagen principal aparezcan primero, generados por tu propia web, para que la página cobre vida antes de que termine de cargar la herramienta externa. El widget puede llegar un instante después sin bloquear toda la página.

Solución 3 — Aplaza lo que no es crítico

El banner de cookies, la burbuja de chat, el botón de WhatsApp: nada de esto necesita cargar en el primer segundo. Cárgalos cuando la página ya esté lista, con el navegador en reposo. Tu herramienta de reservas se queda en primer plano y los extras "que están bien tener" dejan de competir por los recursos.

Las tipografías: un asesino silencioso de la velocidad

Un número sorprendente de webs pequeñas carga las fuentes de la forma lenta: con un @import escondido dentro de un archivo CSS. Eso crea una cascada: el navegador descarga tu CSS, luego descubre que necesita una fuente, luego va a buscarla… mientras tu texto espera.

Dos mejoras fáciles:

1. Carga las fuentes con un <link> en la cabecera, no con @import de CSS, para que empiecen a descargarse de inmediato.
2. Añade &display=swap para que el texto se muestre al instante con una fuente de respaldo y cambie cuando llegue la personalizada: sin texto invisible.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=YourFont&display=swap" rel="stylesheet">

Aún más rápido: aloja las fuentes en tu propio servidor. Pero solo con el cambio de arriba ya resuelves el aviso más habitual sobre tipografías.

Caché: deja de obligar a los que vuelven a descargarlo todo otra vez

Lighthouse suele marcar "Serve static assets with an efficient cache policy", a veces con más de un megabyte de ahorro. Significa que a tus imágenes, fuentes y scripts no se les dice que se queden guardados en el navegador del visitante, así que cada visita los vuelve a descargar.

La solución está en el servidor, no en tu diseño, y no requiere rediseñar nada. En la mayoría de hostings (Apache) bastan unas líneas que le dicen al navegador que guarde los archivos estáticos durante mucho tiempo:

<IfModule mod_headers.c>
  SetEnvIf Request_URI "\.(js|css|woff2?|png|jpe?g|webp|svg|ico)$" LONG_CACHE
  Header set Cache-Control "public, max-age=31536000, immutable" env=LONG_CACHE
</IfModule>

Quien vuelve —esos clientes fieles que consultan otra vez tu carta o tu horario— obtiene una carga casi instantánea. Pídele a tu desarrollador o a tu hosting que aplique la versión adecuada para tu caso.

Imágenes: el 80% fácil

No hace falta ser técnico para arreglar la mayoría de los problemas de imágenes:

• Tamaño correcto: no subas una foto de 4000px para mostrarla a 400px. Redimensiónala antes de subirla.
• Formatos modernos: usa WebP o AVIF en lugar de JPEG y PNG pesados.
• Carga diferida bajo el pliegue: las imágenes de más abajo deben cargarse solo cuando el visitante baja (loading="lazy").
• Indica siempre ancho y alto: evita que la página dé saltos y protege tu CLS.

Para la galería de un restaurante o las fotos de antes y después de una peluquería, esto solo ya puede transformar el tiempo de carga.

Más allá de la velocidad: el SEO básico que, en silencio, importa más

Una web rápida que nadie encuentra no sirve de nada. Ya que estás, revisa esto:

• Sin páginas huérfanas. Toda página importante debe estar enlazada desde tu menú o tu pie de página. Una página a la que Google solo llega por el sitemap posiciona mal.
• Arregla los 404 antiguos. Si Google tiene indexada una URL vieja que ahora da "No encontrado", añade un redireccionamiento 301 a la página viva más parecida. No tires el posicionamiento que ya te ganaste.
• Un título y una descripción claros por página: únicos, descriptivos y escritos para personas.
• Un sitemap referenciado en robots.txt y enviado en Google Search Console.
• Datos estructurados locales: nombre del negocio, dirección, teléfono y horario. Es lo que alimenta los resultados enriquecidos y las fichas del mapa en las que la gente hace clic.
• No dupliques contenido. Si tienes cinco páginas de ubicación, dale a cada una un enfoque de verdad distinto.

La verdad honesta sobre las notas "perfectas"

Si tu página de inicio tiene un módulo de reservas en la parte de arriba, seguramente nunca llegarás a 100 en la prueba de móvil más dura, y no pasa nada. Ese widget es tu caja registradora. Una buena experiencia real, con una herramienta de reservas que convierte, gana siempre a una nota perfecta en una página vacía.

Apunta a:

• CLS cercano a 0 (sin saltos): muy factible.
• LCP por debajo de ~2,5 s en ordenador y en un móvil decente: factible con las soluciones de arriba.
• Datos de campo en verde en Search Console con el tiempo: la cifra que de verdad influye en el posicionamiento.

Tu lista rápida

• Mira la nota de ordenador y los datos de campo, no solo el número rojo del móvil.
• Haz preconnect a tu proveedor de reservas, citas o mapas.
• Asegúrate de que tu titular carga primero, no el widget externo.
• Aplaza el banner de cookies, el chat y los botones sociales.
• Carga las fuentes con <link> + display=swap, no con @import de CSS.
• Añade una política de caché larga para los archivos estáticos en el servidor.
• Redimensiona y convierte las imágenes a WebP/AVIF y usa carga diferida bajo el pliegue.
• Enlaza cada página importante desde tu menú o pie de página.
• Redirige con 301 las URLs antiguas indexadas que ahora dan 404.
• Envía un sitemap y añade datos estructurados de negocio local.