Mide antes de cambiar cualquier cosa
Hay dos tipos de datos de velocidad y responden preguntas distintas. Los datos de laboratorio son una prueba que se corre a demanda desde un centro de datos: repetible, útil para comparar un cambio que acabas de hacer. Los datos de campo son lo que de verdad vivieron los visitantes reales en sus propios teléfonos y conexiones, y son los que usa Google cuando la velocidad afecta tu posicionamiento.
Un sitio puede puntuar bien en una prueba de laboratorio y mal en campo, y ese es el caso común y no una rareza: la prueba corrió con una conexión rápida desde un centro de datos cercano, y tus clientes están en un teléfono con dos barras de señal.
Así que empieza por los datos de campo si tienes tráfico suficiente, y trata la puntuación de laboratorio como una herramienta para medir tus propias correcciones y no como el veredicto. Anota los números de partida antes de tocar nada. Sin ellos no vas a poder saber si un cambio ayudó.
Core Web Vitals, en lenguaje claro
Tres medidas describen casi todo lo que un visitante percibe como lentitud. Vale la pena entenderlas por separado, porque tienen causas y correcciones completamente distintas.
Largest Contentful Paint es cuánto tarda en aparecer lo más grande de la pantalla, normalmente una imagen principal o un titular. Es la que la gente llama lentitud, y suele ser un problema de imágenes o de respuesta lenta del servidor.
Interaction to Next Paint es cuánto tarda la página en responder cuando alguien toca algo. Cuando una página parece lista pero un toque no hace nada durante un segundo, esta es la que está mal, y la causa casi siempre es demasiado JavaScript ejecutándose.
Cumulative Layout Shift es cuánto salta la página mientras carga. Es la razón por la que alguien toca el botón equivocado porque un anuncio o un banner empujó la página justo debajo de su dedo. Las causas son imágenes sin dimensiones reservadas, fuentes que cargan tarde y cualquier cosa insertada encima del contenido existente.
Las imágenes: la culpable de siempre
En la gran mayoría de los sitios lentos que reviso, las imágenes son la primera y mayor causa, y corregirlas no cambia nada de cómo se ve el sitio. El patrón siempre es el mismo: fotografías subidas directo de la cámara o del teléfono, guardadas en resolución completa y enviadas a tamaño completo a un dispositivo que las muestra a una fracción de eso.
Lo que de verdad ayuda, más o menos en orden de rendimiento:
- Servir formatos modernos, que son bastante más pequeños que JPEG con la misma calidad visible.
- Ajustar el tamaño de las imágenes a cómo se muestran de verdad, y enviar un archivo más pequeño al teléfono que al escritorio.
- Cargar las imágenes que están más abajo solo cuando el visitante se acerca a ellas, en lugar de todas de golpe.
- Darle dimensiones explícitas a cada imagen, lo que además corrige los saltos de diseño.
- Mirar con dureza las imágenes de fondo decorativas y los carruseles, que son lo que más cuesta y no convencen a nadie.
Un sitio cargado de fotografía es donde esto rinde más. La velocidad web en Fort Lauderdale es casi enteramente este problema, porque las publicaciones náuticas y hoteleras llevan cientos de fotografías en resolución completa cada una.
Scripts, etiquetas y el seguimiento que nadie auditó
La segunda gran causa es JavaScript, y en los sitios de negocio normalmente no es el código propio del sitio. Es el seguimiento acumulado: analítica, un píxel de anuncios de una campaña que terminó, un widget de chat, una herramienta de mapas de calor que alguien probó, un generador de ventanas emergentes, un carrusel de reseñas. Cada uno era pequeño por su cuenta y nadie quitó ninguno.
Dos preguntas útiles. Cuáles de estos sigue usando alguien, y cuáles necesitan ejecutarse antes de que la página sea usable en lugar de después. Casi todo el seguimiento puede cargar después del contenido sin perder una sola medición, y los widgets de chat en particular son muchas veces lo más pesado de la página.
Las fuentes también entran aquí. Cada grosor de fuente a medida es una descarga aparte, y el texto que espera una fuente es texto que el visitante todavía no puede leer. Cargar menos grosores y mostrar el texto de inmediato con una fuente de respaldo normalmente gana más de lo que cuesta en apariencia.
Hosting, caché y el primer byte
Si el navegador espera mucho antes de recibir cualquier cosa, ninguna optimización de imágenes va a servir, porque nada ha empezado todavía. Esa espera es el servidor, y tiene tres causas habituales: hosting compartido barato, una base de datos haciendo demasiado trabajo en cada petición, o un plugin haciendo una llamada externa mientras el visitante espera.
La caché de páginas corrige el síntoma para los visitantes anónimos sirviendo una copia ya preparada, y vale la pena tenerla. No ayuda a los visitantes con sesión, ni al carrito, ni al checkout, y por eso las tiendas en línea necesitan que se atienda la causa de fondo en lugar de taparla.
Aquí también es donde las mejoras de hosting rinden de verdad, y es la única parte de la lista donde gastar dinero es la solución y no un sustituto de una.
Plugins y temas
En WordPress, un sitio lento sin causa evidente normalmente carga demasiada maquinaria. Treinta plugins significan treinta conjuntos de estilos y scripts cargados en cada página, incluidos los que solo hacían falta en un formulario de contacto. Los constructores de páginas añaden su propia capa encima, y un tema que se cambió dos veces muchas veces sigue cargando archivos de los dos anteriores.
La auditoría de plugins de la lista de mantenimiento es también la corrección de velocidad, no solo la de seguridad. No tiene glamour y rutinariamente quita más peso del que va a quitar cualquier plugin de optimización.
Prueba como llegan de verdad tus clientes
Casi toda la búsqueda local ocurre en un teléfono, muchas veces al aire libre y con una conexión peor que la de tu oficina. Una prueba de escritorio con fibra nunca te va a mostrar cómo es eso, y por eso muchos dueños creen que su sitio es rápido mientras sus datos de campo dicen otra cosa.
Prueba en un teléfono de gama media, no en el último modelo, con la conexión limitada a algo realista. En Cape Coral el momento decisivo es un propietario parado en su entrada comparando tres contratistas, y quien cargue primero recibe la llamada. Esa es la condición que vale la pena optimizar, y no es la que se mide en casi ningún sitio.
Lo que de verdad mueve el número
Si solo vas a hacer unas pocas cosas, haz estas, en este orden:
- Corrige las imágenes. Formatos modernos, tamaños correctos, cargadas a medida que se necesitan.
- Quita el seguimiento y los widgets que nadie usa, y aplaza lo que quede.
- Reduce los grosores de fuente y deja que el texto se muestre de inmediato.
- Atiende el tiempo de respuesta del servidor: caché primero, y hosting si la caché no alcanza.
- Audita los plugins y quita lo que no sea estructural.
- Reserva el espacio de las imágenes, los embebidos y todo lo que aparezca tarde, para que la página deje de saltar.
Después vuelve a medir y compara contra los números que anotaste al principio. El trabajo de velocidad sin un antes y un después es adivinar con una factura adjunta.
Cuándo el trabajo de velocidad no es la respuesta
A veces la respuesta honesta es que el sitio es lento por lo que es, no por cómo está configurado. Un sitio hecho con un constructor de páginas sobre tres temas acumulados, cargando años de plugins abandonados, se puede optimizar hasta quedar tolerable, pero no va a volverse rápido, y el trabajo cuesta más de lo que devuelve.
Hay dos señales de eso. La auditoría encuentra una docena de causas en lugar de tres, y cada corrección exige rodear algo estructural en lugar de cambiar un ajuste. En ese punto un rediseño es la opción más económica, y la guía de rediseño cubre cómo hacerlo sin perder el posicionamiento que ya tienes.
Una auditoría de velocidad debería decirte en cuál de esas dos situaciones estás. Si el problema es la estructura, vale la pena saberlo antes de pagar dos veces por optimizar.
Que alguien lo haga
Si quieres la auditoría y no la explicación, mi servicio de velocidad web mide en hardware móvil real, nombra cada causa con lo que te cuesta en segundos y después las corrige en orden de rendimiento.
Como ejemplos construidos: el caso de Athlean-X cubre la optimización de un sitio con más de 100,000 visitantes diarios, donde el trabajo sobre el tema, el CSS y el JavaScript ganó más de 20 puntos de Lighthouse, y Learn Athlean-X cubre el mismo tipo de trabajo en un blog WordPress de tráfico alto.