La velocidad de tu web: por qué importa y cómo medirla

Nadie felicita a un sitio por cargar rápido, pero casi todos se van de uno que carga lento. La velocidad es parte de cómo se siente tu negocio: una página rápida parece cuidada, y una lenta parece descuidada. En esta lección vemos por qué importa la velocidad, qué miden los tres números llamados Core Web Vitals, qué umbrales publica Google para cada uno, qué herramientas gratuitas puedes usar para revisar tu sitio y qué suele volver lenta la web de un negocio pequeño.

Por qué la velocidad importa en un negocio pequeño

La mayoría de los visitantes no espera. Toca un resultado y, si no aparece nada, vuelve atrás y toca el siguiente. Pasa todavía más en un celular, con una señal débil o con un plan de datos limitado. Cada segundo de espera te cuesta una parte de la gente que estaba lista para llamar o reservar.

La velocidad también le importa a Google. Google mide cómo viven tus páginas los visitantes reales y usa esas mediciones como una de las muchas señales con las que ordena los resultados. Además ha dicho que un gran contenido importa más que la velocidad sola. Así que un sitio rápido no hará que una página débil se posicione bien, pero uno muy lento puede frenar a una buena. Piensa en la velocidad como un mínimo: conviene superarlo, y no hace falta perseguir la perfección.

Core Web Vitals en palabras simples

Los Core Web Vitals (en español, métricas web esenciales) son tres mediciones que creó Google para describir cómo se siente una página para quien la visita. Cada una tiene un umbral, una línea entre un resultado bueno y uno deficiente. Estos son los números tal como los publica Google.

Carga: Largest Contentful Paint, o LCP

El LCP es el tiempo que tarda en aparecer el elemento de contenido más grande de la primera pantalla. Por lo general es la foto principal o el bloque de texto principal. En la primera pantalla de Ridgeborn que ves abajo, el elemento más grande es probablemente la gran foto de montañas que está detrás del nombre.

• Bueno: 2.5 segundos o menos
• Necesita mejorar: entre 2.5 y 4 segundos
• Deficiente: más de 4 segundos

Respuesta: Interaction to Next Paint, o INP

El INP mide qué tan rápido responde la página cuando alguien toca, hace clic o escribe. Observa las interacciones de toda la visita y reporta una de las más lentas. En 2024 reemplazó a una medida anterior llamada First Input Delay. En el estimador de ahorro de Heliora que ves abajo, al mover un control deslizante deberían actualizarse los números y el gráfico al instante. Si una página se queda congelada un momento después de un toque, el visitante lo nota, y el INP lo registra.

• Bueno: 200 milisegundos o menos
• Necesita mejorar: entre 200 y 500 milisegundos
• Deficiente: más de 500 milisegundos

Estabilidad visual: Cumulative Layout Shift, o CLS

El CLS mide cuánto salta el contenido visible mientras carga la página. Conoces la sensación: estás por tocar un botón, carga una imagen más arriba, la página se corre y tocas otra cosa. El CLS es una puntuación sin unidad. Un número bajo significa una página estable.

• Bueno: 0.1 o menos
• Necesita mejorar: entre 0.1 y 0.25
• Deficiente: más de 0.25

Una cuadrícula de productos como la de abajo se mantiene firme cuando cada imagen tiene su tamaño definido de antemano, porque el navegador puede reservarle un espacio antes de que llegue el archivo.

Cómo juzga Google los números

Google mira visitas reales, no una prueba aislada. Una página aprueba cuando al menos tres de cada cuatro visitas, el percentil 75, llegan al nivel bueno, y los celulares y las computadoras de escritorio se juzgan por separado. Un sitio nuevo suele tener al principio muy pocas visitas para mostrar estos números. Google puede ajustar las métricas y los umbrales con el tiempo, así que consulta de vez en cuando su documentación sobre rendimiento web.

Herramientas gratuitas para revisar tu velocidad

No hace falta pagar nada para ver cómo anda tu sitio. Estas herramientas son gratuitas, y puedes encontrar cada una por su nombre en un buscador.

• PageSpeed Insights. La herramienta gratuita de Google. Escribes la dirección de una página y muestra resultados para celular y para computadora. Cuando tu sitio ya tiene suficientes visitas, también muestra cómo lo vivió la gente real, y suma una prueba de laboratorio con sugerencias.
• Lighthouse. Una herramienta que viene dentro del navegador Chrome. Abre las herramientas para desarrolladores, busca la pestaña Lighthouse y ejecuta un informe sobre cualquier página. Es el mismo motor que usa PageSpeed Insights para su prueba de laboratorio.
• El informe de Core Web Vitals en Google Search Console. Cuando confirmas que eres el dueño de tu sitio, agrupa tus páginas según cómo las vivieron los visitantes reales y señala las que necesitan atención. Una lección posterior explica Search Console paso a paso.
• WebPageTest y GTmetrix. Otros servicios que ofrecen pruebas gratuitas, con límites. Muestran en detalle qué se carga, en qué orden y cuánto tarda.

Cómo leer un informe de PageSpeed

1. Empieza por la pestaña del celular. La mayoría de los problemas aparece ahí primero.
2. Busca los datos de visitantes reales. Si el informe muestra cómo vivió la página la gente real, mira si el LCP, el INP y el CLS están en el rango bueno. Si dice que no hay suficientes datos, usa los resultados de laboratorio como guía.
3. Lee la puntuación. La puntuación de rendimiento va de 0 a 100. Lighthouse considera bueno de 90 a 100, a mejorar de 50 a 89 y deficiente de 0 a 49.
4. Baja hasta las sugerencias. El informe enumera las mayores oportunidades, como imágenes grandes o código que no se usa. Empieza por las que ahorran más tiempo.
5. Prueba más de una página. Revisa tu página de inicio y dos páginas internas, porque pueden comportarse distinto.
6. Ejecútalo tres veces. Las puntuaciones de laboratorio cambian un poco de una prueba a otra. Mira el patrón, no un solo número.

Qué suele volver lento a un sitio

Imágenes demasiado grandes

Es la causa más común. Una foto recién salida de una cámara puede pesar varios megabytes. Cambia cada imagen al tamaño en que se muestra, guárdala en un formato moderno como WebP o AVIF, comprímela y deja que las imágenes que están lejos carguen solo cuando hagan falta.

Videos pesados

Un video grande que arranca de inmediato puede pesar más que el resto de la página junta. Mantén los clips cortos y comprimidos, agrega una imagen fija de portada y carga los videos que están más abajo solo cuando el visitante los pida.

Demasiadas tipografías

Cada familia de letras y cada grosor son un archivo que hay que descargar. Usa una o dos familias y solo los grosores que necesites, y sirve los archivos desde tu propio sitio.

Demasiados programas extra

Los chats, los rastreadores, los muros de redes sociales, las herramientas de ventanas emergentes y los píxeles de anuncios suman cada uno código de otra empresa. Quita lo que no uses y pregúntate si cada uno de los que quedan compensa lo que cuesta.

Código pesado y demasiados complementos

Los constructores de páginas, los carruseles y las pilas de complementos agregan código que cada visitante debe cargar. Un sitio armado solo con lo que necesita es más liviano y más fácil de mantener seguro.

Hosting lento y sin memoria caché

Si el servidor tarda en responder, todos los demás pasos empiezan tarde. Ayudan un buen hosting, la memoria caché y una red que entregue los archivos desde un lugar cercano al visitante. El hosting también se trata en la segunda serie de este curso.

Elementos que saltan

Las imágenes sin tamaño definido, los anuncios, los videos incrustados y las tipografías que cambian tarde hacen que la página se mueva mientras carga. Define los tamaños de antemano y reserva espacio para todo lo que llegue después.

Efectos pesados

Las animaciones grandes y los efectos que funcionan todo el tiempo pueden hacer que una página se sienta lenta en un celular, aunque cargue rápido. Usa el movimiento con un propósito, y mantenlo pequeño.

La velocidad en cinco pasos

1. Mide. Ejecuta PageSpeed Insights en tu página de inicio y en una página interna, en la versión de celular.
2. Arregla primero las imágenes. Cambia el tamaño, comprime y usa formatos modernos.
3. Quita lo que no necesitas. Complementos, widgets y programas que no se usan.
4. Reserva espacio. Define el tamaño de las imágenes, los videos y los elementos incrustados.
5. Vuelve a probar, y hazlo también en un celular real, con datos del plan. Repite cada pocos meses y después de cualquier cambio grande.

Pruébalo como un visitante, no como un programador

Los números ayudan, pero tus propios ojos y tus pulgares te dicen cosas que un informe no puede. Haz esto una vez, y repítelo después de los cambios grandes.

• Abre tu sitio en tu propio celular con el Wi-Fi apagado, para que use los datos del plan.
• Cuenta los segundos hasta que puedas leer el título y tocar el botón principal.
• Baja rápido y observa si hay imágenes que aparecen tarde o contenido que salta.
• Toca el menú, un botón y un campo de formulario, y fíjate si hay alguna pausa.
• Pídele a alguien con un teléfono más viejo que haga lo mismo, porque su experiencia se parece más a la de muchos visitantes.

Si algo te parece lento a ti, le parece más lento a un cliente que tiene prisa.

Qué no conviene perseguir

• Un 100 perfecto. Una puntuación de 92 y una de 98 se sienten igual para un cliente.
• Solo las puntuaciones de laboratorio. Lo que vive la gente real importa más que una prueba aislada.
• Velocidad a costa del mensaje. Una página rápida que no dice nada útil no consigue clientes.
• Arreglos de una sola vez. La velocidad vuelve a bajar a medida que agregas fotos, herramientas y complementos. Necesita un hábito, no un esfuerzo único.

Preguntas para quien construye tu sitio

Si otra persona hace o administra tu web, unas pocas preguntas simples te dicen mucho sobre cuánto le importa la velocidad.

1. ¿Dónde está alojado el sitio y qué pasa cuando entran muchas personas a la vez?
2. ¿Se cambia el tamaño y se comprimen las imágenes antes de ponerlas en la página?
3. ¿Qué programas de otras empresas carga el sitio, y por qué?
4. ¿Puedo ver un informe de PageSpeed Insights de mis páginas, en la versión de celular, antes y después del trabajo?
5. ¿Quién mantiene el sitio actualizado, y cada cuánto?
6. ¿Qué harás si una página resulta lenta?

Un buen proveedor responde esto sin vueltas y con palabras que puedas seguir.

Cómo se ocupa Good Sites Only del hosting y del mantenimiento

El hosting está incluido en todos los sitios que hacemos, junto con la versión para celular, la configuración de SEO y los formularios de contacto. El sitio se arma y se revisa los días 5 y 6, y sale en línea el día 7. Si quieres que alguien mantenga tu sitio al día después del lanzamiento, para eso está nuestro servicio mensual de mantenimiento Care. Cuando estés listo, empieza tu sitio.

Preguntas frecuentes