Por qué tu web no vende: la velocidad y cómo medirla en dos minutos

Tabla de contenidos

Le preguntaste a alguien «¿se ve lento, no?» y te dijo que sí. Tú ya lo sabías. Lo que quizás no sabías es cuántos clientes se fueron antes de ver lo bonita que era tu web.

Un sitio hermoso que tarda cuatro segundos en cargar no lo ve nadie. En este artículo te contamos cómo medir la velocidad de tu web en dos minutos, qué significan esos números que te da Google y qué suele estar frenándola.

La respuesta corta

Para medir la velocidad de tu web, entra en PageSpeed Insights de Google, pega la dirección de tu web y mira la pestaña de móvil. Fíjate en las tres métricas principales, las Core Web Vitals: LCP (cuánto tarda en verse el contenido principal; bien si es menos de 2,5 segundos), INP (cuánto tarda en responder cuando tocas algo; bien si es menos de 200 milisegundos) y CLS (cuánto se mueven las cosas mientras carga; bien si es menos de 0,1). Si alguna sale en rojo, tu web está perdiendo gente.

Por qué la velocidad afecta a las ventas

Porque la paciencia en internet se mide en segundos. Cada segundo de más es gente que se va antes de ver lo que hiciste. Y no se van a esperar a que cargue tu web: se van a la de tu competencia, que está a un toque de distancia.

Además, Google tiene en cuenta la experiencia de la página, incluida la velocidad, a la hora de posicionar. Una web lenta pierde visitas por los dos lados: la gente que se va y la gente que nunca llega.

Cómo medirla en dos minutos

  • Entra en pagespeed.web.dev.
  • Pega la dirección de tu web y pulsa «Analizar».
  • Mira primero la pestaña de móvil. Es la más exigente y la que más importa, porque la mayoría de tus visitas probablemente llegan desde el teléfono.
  • Arriba verás si tu web supera la evaluación de las Core Web Vitals con datos de usuarios reales. Debajo, una nota de 0 a 100 y una lista de problemas detectados.

Un truco extra: abre tu web en el móvil, con datos y no con wifi, como haría un cliente en la calle. Si a ti se te hace larga la espera, a él también.

Qué significan los números

LCP: lo que tarda en aparecer lo importante

Mide cuánto tarda en verse el elemento principal de la página, normalmente una imagen grande o un titular. Es la sensación de «ya cargó». Por debajo de 2,5 segundos, bien. Por encima de 4, mal.

INP: lo que tarda en responder

Mide cuánto tarda la web en reaccionar cuando tocas un botón o un menú. Por debajo de 200 milisegundos, bien. Si tocas algo y no pasa nada durante un momento, la gente vuelve a tocar, se frustra y se va.

CLS: lo que se mueve mientras carga

Mide cuánto saltan los elementos mientras la página termina de cargar. Es ese momento en el que vas a tocar un enlace, aparece una imagen de golpe y acabas tocando otra cosa. Por debajo de 0,1, bien.

Lo que suele frenar una web

  • Imágenes enormes. Es el culpable número uno. Fotos de 5 MB subidas tal cual salen de la cámara. Se solucionan redimensionándolas y usando formatos modernos como WebP o AVIF.
  • Demasiados plugins. Cada plugin que instalas en WordPress suma código. Algunos, mucho.
  • Un hosting demasiado barato. Si tu servidor tarda en responder, da igual lo optimizado que esté el resto.
  • Scripts de terceros. Chats, píxeles de publicidad, mapas, widgets. Cada uno es una petición más, y muchos no los usa nadie.
  • Vídeos que se reproducen solos y tipografías cargadas de más.

Diseño bonito y web rápida no están peleados

Existe la idea de que una web con animaciones y buen diseño tiene que ser lenta. No es así. Es más trabajo, eso sí: hay que optimizar cada imagen, cargar solo lo necesario y probarlo todo en el móvil. En Flamingo Agency lo tenemos claro: nos llamamos Flamingo, no Avestruz. Si nuestro trabajo no vuela rápido en el móvil, no sale con nuestro nombre puesto. Lo contamos en nuestra página de diseño web.

En resumen

La velocidad no es un detalle técnico: es la primera impresión de tu web. Medirla es gratis y lleva dos minutos, así que no hay excusa para no saber cómo está la tuya.

Si hiciste la prueba y los números salieron en rojo, cuéntanos qué te dio. Te decimos qué la está frenando y cómo arreglarlo.

") O en un plugin tipo "Insert Headers and Footers" ============================================ */document.addEventListener('DOMContentLoaded', function () {/* 1. Crear los elementos del cursor una sola vez */ var glow = document.createElement('div'); glow.id = 'custom-cursor-glow'; document.body.appendChild(glow);var cursor = document.createElement('div'); cursor.id = 'custom-cursor'; cursor.innerHTML = ''; document.body.appendChild(cursor);var cursorIcon = cursor.querySelector('i'); var cursorText = cursor.querySelector('span');/* 2. Config por variante: tamaño del circulo y tamaño de fuente al activarse */ var VARIANT_SIZE = { 'cursor-solid': 72, 'cursor-gradient': 72, 'cursor-glass': 66, 'cursor-outline': 66, 'cursor-square': 80, 'cursor-blur': 74, 'cursor-glow': 60, 'cursor-icon': 76 }; var VARIANT_FONT = { 'cursor-solid': 11, 'cursor-gradient': 11, 'cursor-glass': 11, 'cursor-outline': 10, 'cursor-square': 11, 'cursor-blur': 10, 'cursor-glow': 11, 'cursor-icon': 9 }; var ALL_VARIANTS = Object.keys(VARIANT_SIZE);/* 3. Movimiento con retardo (lerp) */ var mouseX = 0, mouseY = 0; var curX = 0, curY = 0; var ease = 0.16; var currentSize = 0; var targetSize = 0; var glowExtra = 30;document.addEventListener('mousemove', function (e) { mouseX = e.clientX; mouseY = e.clientY; });function loop() { curX += (mouseX - curX) * ease; curY += (mouseY - curY) * ease; currentSize += (targetSize - currentSize) * ease;cursor.style.opacity = currentSize > 0.5 ? '1' : '0'; cursor.style.width = currentSize + 'px'; cursor.style.height = currentSize + 'px'; cursor.style.transform = 'translate(' + (curX - currentSize / 2) + 'px,' + (curY - currentSize / 2) + 'px)'; var glowSize = currentSize > 0 ? currentSize + glowExtra : 0; glow.style.width = glowSize + 'px'; glow.style.height = glowSize + 'px'; glow.style.transform = 'translate(' + (curX - glowSize / 2) + 'px,' + (curY - glowSize / 2) + 'px)';requestAnimationFrame(loop); } loop();/* 4. Detectar hover sobre cualquier elemento con alguna clase cursor-* */ var selector = ALL_VARIANTS.map(function (v) { return '.' + v; }).join(', ');document.addEventListener('mouseover', function (e) { var target = e.target.closest(selector); if (!target) return;var variant = ALL_VARIANTS.find(function (v) { return target.classList.contains(v); }); if (!variant) return;/* limpia variantes anteriores y aplica la actual */ ALL_VARIANTS.forEach(function (v) { cursor.classList.remove(v); }); ALL_VARIANTS.forEach(function (v) { document.body.classList.remove(v); }); cursor.classList.add(variant); document.body.classList.add(variant, '__active'); target.classList.add('__active');targetSize = VARIANT_SIZE[variant] || 70;var text = target.getAttribute('data-cursor-text') || ''; var iconClass = target.getAttribute('data-cursor-icon') || ''; cursorText.textContent = text; cursorText.style.fontSize = text ? (VARIANT_FONT[variant] || 11) + 'px' : '0px'; cursorIcon.className = iconClass; cursorIcon.style.fontSize = iconClass ? (variant === 'cursor-icon' ? 16 : 14) + 'px' : '0px'; });document.addEventListener('mouseout', function (e) { var target = e.target.closest(selector); if (!target) return; var related = e.relatedTarget; if (related && target.contains(related)) return;target.classList.remove('__active'); document.body.classList.remove('__active'); ALL_VARIANTS.forEach(function (v) { document.body.classList.remove(v); }); targetSize = 0; cursorText.style.fontSize = '0px'; cursorIcon.style.fontSize = '0px'; });});