Velocidad de carga web: que la frena y como mejorarla

Que significa exactamente que una web va lenta

Una web va lenta cuando el visitante ve pantalla en blanco, contenido que salta de sitio o botones que no responden al primer toque. No es una sensacion difusa: Google la mide con tres metricas publicas llamadas Core Web Vitals.

• LCP (Largest Contentful Paint): tiempo que tarda en aparecer el elemento visible mas grande, normalmente la imagen de cabecera o el titular. Se considera bueno por debajo de 2,5 segundos.
• INP (Interaction to Next Paint): tiempo que tarda la pagina en responder cuando alguien pulsa un boton, abre el menu o despliega un formulario. Bueno por debajo de 200 milisegundos.
• CLS (Cumulative Layout Shift): cuanto se desplaza el contenido mientras termina de cargar. Bueno por debajo de 0,1.

INP sustituyo a la antigua metrica FID en marzo de 2024, asi que los articulos anteriores a esa fecha hablan de una metrica que ya no se usa.

Los umbrales se evaluan sobre el percentil 75 de las visitas reales. Dicho de otro modo: no basta con que cargue rapido en tu ordenador de la oficina con fibra, tiene que cargar rapido para tres de cada cuatro visitantes, muchos de ellos con movil y cobertura mediocre.

Las imagenes son la causa mas frecuente de lentitud

En la mayoria de webs de pymes que revisamos, las imagenes representan la mayor parte del peso de la pagina. El patron es casi siempre el mismo: alguien sube la foto tal cual sale de la camara o del movil y el navegador la reduce al vuelo, pero antes ha tenido que descargarla entera.

Estas son las cuatro correcciones que mas efecto tienen, por orden:

1. Redimensiona antes de subir. Una imagen de cabecera a ancho completo rara vez necesita mas de 1.600 o 1.920 pixeles de ancho; una foto dentro de un articulo, unos 800. Subir 4.000 pixeles no aporta nada visible.
2. Usa WebP o AVIF en lugar de JPG y PNG. Son formatos modernos, compatibles con todos los navegadores actuales, y suelen pesar bastante menos con la misma calidad aparente.
3. Comprime. Plugins como ShortPixel, Imagify o Smush hacen la conversion y la compresion automaticamente cada vez que subes un archivo, y pueden procesar en lote lo que ya tienes publicado.
4. Carga diferida (lazy loading) para todo lo que este por debajo del primer pantallazo. WordPress la aplica por defecto, pero conviene comprobar que no se aplica a la imagen principal: retrasar esa perjudica el LCP en vez de mejorarlo.

Un detalle que cuesta cinco minutos y arregla muchos problemas de CLS: asegurate de que las imagenes llevan sus atributos de ancho y alto. Con ellos el navegador reserva el hueco y el texto deja de saltar mientras carga la foto.

El hosting fija el techo de velocidad de tu web

El hosting es el limite que no puedes superar optimizando la pagina. Si el servidor tarda un segundo y medio en empezar a responder, tu web nunca cargara en menos de un segundo y medio, por muy ligeras que sean las imagenes.

La medida que importa aqui es el TTFB (Time To First Byte), el tiempo hasta que el servidor devuelve el primer byte. Como referencia habitual, por debajo de 800 milisegundos se considera aceptable; por encima de 1,5 segundos hay un problema de servidor, no de diseño.

Que revisar con tu proveedor actual antes de plantearte cambiar:

• Version de PHP: PHP 8.x es sensiblemente mas rapido que las versiones 7.x. Se cambia desde el panel de control en un minuto, aunque conviene hacer copia de seguridad y comprobar que los plugins son compatibles.
• Cache de servidor: muchos alojamientos incluyen cache de pagina propia. Si la tienes, evitas instalar un plugin que haga lo mismo.
• Ubicacion del servidor: si tus clientes estan en España, un servidor en España o en Europa occidental responde antes que uno en otro continente.
• Recursos compartidos: en los planes compartidos mas baratos compartes CPU con cientos de webs, y eso se nota en horas punta.

Si no tienes claro que contrataste ni que incluye, en nuestra guia sobre dominio y hosting explicamos que es cada cosa y como comprobar lo que estas pagando.

Un CDN como Cloudflare, que tiene plan gratuito, sirve los archivos estaticos desde servidores cercanos al visitante y suele ayudar, sobre todo si recibes visitas de fuera de tu pais.

Plugins, temas y scripts externos que pesan de mas

Cada plugin activo añade codigo que el navegador tiene que descargar y ejecutar. El problema no es el numero exacto de plugins, sino cuantos cargan CSS y JavaScript en todas las paginas aunque solo se usen en una.

Los sospechosos habituales en webs de pymes:

• Sliders y carruseles de la portada: cargan librerias pesadas y, ademas, retrasan el LCP porque la primera imagen es justo la que tarda.
• Constructores visuales muy cargados de secciones, animaciones y efectos de aparicion.
• Formularios y chats insertados en toda la web cuando solo hacen falta en la pagina de contacto.
• Scripts de terceros: pixeles de publicidad, mapas incrustados, videos de YouTube en la portada y widgets sociales. Si vas a integrar contenido de redes, merece la pena hacerlo bien; lo explicamos en como añadir widgets de Facebook.

Un ejercicio practico: desactiva un plugin, mide, vuelve a activarlo y pasa al siguiente. Es lento, pero es la unica forma fiable de saber cual te esta costando medio segundo. Hazlo en una copia de pruebas si la web esta en produccion y recibe visitas.

Un tema ligero y bien hecho ahorra mas trabajo que cualquier plugin de optimizacion posterior. Cuando desarrollamos una web partimos de esa base en lugar de acelerar despues algo que nacio pesado.

Como medir con PageSpeed Insights paso a paso

PageSpeed Insights es la herramienta gratuita de Google para medir, y esta en pagespeed.web.dev. No necesitas cuenta ni instalar nada: pegas la direccion de una pagina y le das a analizar.

Como interpretar lo que sale:

1. Mira primero la pestaña Movil. Es la que refleja la experiencia de la mayoria de tus visitantes y la que Google usa para indexar.
2. Distingue los dos bloques. Arriba aparecen los datos de usuarios reales de los ultimos 28 dias, si tu web tiene trafico suficiente: eso es lo que cuenta. Debajo esta el diagnostico de laboratorio, una simulacion en un movil de gama media con conexion limitada.
3. Ignora la obsesion por el 100. La puntuacion de laboratorio varia entre ejecuciones. Lo relevante es que las tres metricas de usuarios reales esten en verde.
4. Baja hasta las oportunidades. Ahi Google te dice en cristiano que archivo concreto esta frenando la carga y cuantos kilobytes te ahorrarias.
5. Mide varias paginas: portada, una pagina de servicio, una ficha de producto y una entrada del blog. Suelen dar resultados muy distintos.

Para seguimiento continuo, el informe de Core Web Vitals de Google Search Console agrupa todas tus URLs y avisa cuando un grupo empeora, sin que tengas que ir pagina por pagina.

Que efecto real tiene la velocidad en las ventas

La velocidad afecta a las conversiones sobre todo en movil, y el mecanismo es sencillo: quien no ve nada en pantalla se vuelve atras antes de leer tu oferta. Ese abandono no aparece en tus formularios recibidos, aparece como trafico que entra y sale.

Antes de creerte cualquier cifra de un articulo, mide la tuya. En Google Analytics 4 puedes comparar la tasa de conversion de las visitas desde movil con las de escritorio: si hay una diferencia grande y tu web tarda en cargar en movil, ya sabes por donde empezar.

En posicionamiento, la experiencia de pagina es uno de los factores que Google tiene en cuenta, pero no el principal. Entre dos paginas parecidas puede desempatar; no va a colocar una pagina rapida y vacia por encima de una lenta que responde bien a la busqueda. Si estas empezando con esto, en nuestra introduccion al SEO explicamos que pesa de verdad.

La conclusion practica: optimiza la velocidad porque reduce el abandono y porque mejora la impresion que da tu negocio, no porque esperes un salto magico de posiciones.

Plan de mejora en siete pasos ordenados por impacto

Si tienes que priorizar con tiempo y presupuesto limitados, este es el orden que da mas resultado por esfuerzo invertido:

1. Mide antes de tocar nada y apunta las cifras de LCP, INP y CLS en movil de tres o cuatro paginas. Sin punto de partida no sabras si has mejorado.
2. Comprime y convierte todas las imagenes a WebP con un plugin de optimizacion en lote.
3. Comprueba el TTFB. Si pasa de 1,5 segundos, habla con tu proveedor de hosting o planteate cambiar antes de seguir.
4. Actualiza a PHP 8.x con copia de seguridad previa.
5. Activa una cache de pagina, la de tu hosting si la tiene o un plugin de cache si no.
6. Quita lo que no uses: plugins desactivados, sliders, fuentes tipograficas que no aparecen en el diseño, scripts de campañas terminadas.
7. Vuelve a medir a los siete dias, para que los datos de usuarios reales recojan ya el cambio.

Los pasos 1, 2, 6 y 7 los puede hacer cualquier persona con acceso al panel de WordPress y algo de paciencia. El 3, 4 y 5 conviene hacerlos con alguien que sepa recuperar la web si algo se rompe.

Si prefieres que lo revisemos nosotros, escribenos y te decimos que esta frenando tu web y cuanto trabajo supone arreglarlo, sin compromiso.

Preguntas frecuentes