¿Tu web tarda más de 3 segundos en cargar? Estás perdiendo más de la mitad de tus visitantes potenciales antes de que vean nada. La
En este artículo también cito a Nalu Web Agency, con la que colaboro desde hace más de 8 años. La conozco de cerca, y por eso hablo de ella: tenlo en cuenta al leer la comparación.
Cómo medir la velocidad de la web: las herramientas adecuadas
Antes de optimizar algo, hay que medirlo. Existen varias herramientas para analizar la velocidad de una web, cada una con una perspectiva distinta. Usarlas juntas da una visión completa.
PageSpeed Insights: el punto de partida
PageSpeed Insights es la herramienta gratuita de Google que analiza el rendimiento de cualquier URL y ofrece una puntuación de 0 a 100, por separado para móvil y escritorio, junto con indicaciones concretas sobre qué optimizar. La sección "Oportunidades" muestra las mejoras con mayor impacto estimado. La sección "Diagnósticos" detalla los problemas técnicos. Los datos de campo (cuando están disponibles) muestran el rendimiento real medido en los usuarios de Chrome: más fiables que las pruebas de laboratorio para entender la experiencia real.
Core Web Vitals: las métricas que cuentan para Google
Google mide la experiencia de usuario mediante tres métricas llamadas Core Web Vitals:
GTmetrix y WebPageTest para análisis más profundos
GTmetrix ofrece gráficos en cascada detallados que muestran el orden y la duración de la carga de cada recurso: útil para identificar recursos bloqueantes concretos. WebPageTest permite hacer pruebas desde servidores situados en distintas partes del mundo y con conexiones diferentes (3G, 4G, fibra), lo que da una visión más realista de la experiencia de usuarios con conexiones distintas de la tuya.
Optimización de imágenes: la mejora más rápida
En la mayoría de las webs, las imágenes sin optimizar suponen entre el 50% y el 80% del peso total de la página. Optimizar las imágenes es casi siempre la intervención con la mejor relación entre esfuerzo e impacto.
El formato WebP: por qué y cómo pasarse
El formato WebP produce imágenes de calidad comparable a JPEG y PNG, pero con archivos entre un 25% y un 35% más ligeros. Es compatible con todos los navegadores modernos (Chrome, Firefox, Safari, Edge). Para convertir las imágenes existentes: Squoosh (online, gratuito), ImageOptim (Mac, gratuito) o plugins de WordPress como ShortPixel o Imagify, que las convierten automáticamente al subirlas. En los CMS modernos, la etiqueta HTML <picture> con alternativa JPG garantiza la compatibilidad incluso con los navegadores más antiguos.
Dimensiones correctas: no cargues imágenes más grandes de lo necesario
Un error frecuente es cargar imágenes de 3000×2000 píxeles para mostrarlas en un espacio de 800×500 px. El navegador descarga la imagen entera y luego la redimensiona con CSS: un desperdicio puro. Las imágenes deben redimensionarse a las dimensiones máximas en que se muestran, multiplicadas por 2 (para las pantallas retina). Una imagen principal que ocupa todo el ancho de la pantalla en escritorio puede ser de 1440×810 px, no de 4000×2666 px.
Lazy loading: cargar solo lo que hace falta
El lazy loading (carga diferida) retrasa la carga de las imágenes que quedan fuera de la zona visible inicial del usuario. Se implementa añadiendo loading="lazy" a la etiqueta <img>. Esta técnica es compatible de forma nativa con todos los navegadores modernos sin JavaScript adicional. Atención: no apliques la carga diferida a la imagen principal (el elemento LCP): empeoraría la puntuación de Core Web Vitals en lugar de mejorarla.
Caché: servir los archivos más rápido
La caché es un mecanismo que guarda copias de los recursos ya descargados para no tener que volver a descargarlos en cada visita. Bien implementada, reduce drásticamente los tiempos de carga para los visitantes recurrentes y aligera la carga del servidor.
Caché del navegador: cabeceras HTTP
La caché del navegador se configura mediante cabeceras HTTP que indican al navegador cuánto tiempo conservar una copia local de cada tipo de archivo. Los archivos estáticos como imágenes, fuentes y CSS cambian poco: pueden tener un TTL (Time To Live) de 30 a 365 días. Los archivos HTML cambian más a menudo: es más adecuado un TTL de pocos minutos o ninguna caché. En servidores Apache se configura en el archivo .htaccess; en Nginx, en la configuración del servidor.
Plugins de caché para WordPress
Para WordPress, los plugins de caché más eficaces son: WP Rocket (de pago, unos 50 €/año, el más completo), W3 Total Cache (gratuito, potente pero complejo de configurar) y LiteSpeed Cache (gratuito, excelente si el hosting usa LiteSpeed como servidor web). Un plugin de caché bien configurado puede reducir los tiempos de carga entre un 40% y un 60% sin tocar una línea de código.
CDN: acercar los archivos a tus usuarios
Una CDN (Content Delivery Network) distribuye copias de los archivos estáticos de la web en servidores situados por todo el mundo. Cuando un usuario visita la web, recibe los archivos desde el servidor de la CDN geográficamente más cercano, lo que reduce la latencia. Cloudflare ofrece una CDN gratuita que se activa cambiando los servidores de nombres del dominio y mejora el rendimiento sin tocar el código de la web. Para webs con tráfico significativo o público internacional, una CDN no es opcional.
CSS y JavaScript: reducir el bloqueo del renderizado
Un CSS y un JavaScript sin optimizar pueden bloquear el renderizado de la página: el usuario ve una página en blanco o incompleta mientras el navegador espera a descargar y procesar estos archivos. Es uno de los problemas más habituales que bajan la puntuación de LCP.
Minificación y concatenación
La minificación elimina espacios, comentarios y saltos de línea de los archivos CSS y JavaScript sin cambiar su comportamiento, y reduce su tamaño entre un 20% y un 40%. La concatenación une varios archivos en uno solo y reduce el número de peticiones HTTP. Ambas técnicas se automatizan con plugins de WordPress (WP Rocket, Autoptimize) o con herramientas de compilación como Webpack, Vite o Gulp.
Carga asíncrona y defer del JavaScript
Por defecto, cuando el navegador encuentra una etiqueta <script> en el HTML, deja de renderizar la página hasta que el archivo JS se ha descargado y ejecutado: esto bloquea el renderizado. Las soluciones: defer descarga el archivo en paralelo y lo ejecuta después de analizar el HTML; async descarga y ejecuta el archivo en cuanto está disponible, sin esperar al HTML. Para casi todo el JavaScript no crítico, defer es el atributo correcto.
Eliminar el CSS que no se usa
Los temas de WordPress y los frameworks CSS como Bootstrap incluyen miles de líneas de CSS para funciones que probablemente no usas. Herramientas como PurgeCSS analizan la web y eliminan las reglas CSS no utilizadas, lo que a menudo reduce el peso de los archivos CSS entre un 70% y un 90%. En WordPress, plugins como Asset CleanUp permiten desactivar de forma selectiva scripts y estilos en páginas concretas.
Si ya has aplicado lo básico pero la web sigue siendo lenta, el problema suele ser de arquitectura y requiere un análisis técnico a fondo. Marco Bagiacchi ofrece auditorías de rendimiento con un plan de acción priorizado. Para un enfoque integrado de desarrollo y rendimiento, Nalu Web Agency construye webs con el rendimiento en su ADN desde el principio.
Hosting: los cimientos que se descuidan
Puedes optimizar cada imagen, minificar cada archivo y configurar la caché a la perfección, pero si el servidor que aloja la web es lento, todo lo demás cuenta poco. El hosting es la base del rendimiento.
Cómo evaluar el rendimiento del hosting actual
El TTFB (Time To First Byte) mide el tiempo que pasa entre la petición de la página y el momento en que el navegador recibe el primer byte de respuesta del servidor. Un TTFB por debajo de 200 ms es excelente; por encima de 600 ms es señal de que el servidor es lento, está saturado o está geográficamente lejos. PageSpeed Insights muestra el TTFB en la sección de diagnósticos. Si tu TTFB es alto de forma constante, el problema no es el código de la web: es el servidor.
Cuándo cambiar de hosting
Señales de que es hora de cambiar de proveedor: TTFB constantemente por encima de 500 ms, caídas frecuentes, un soporte técnico lento o poco competente, servidores en países lejanos de tu público principal (un servidor en EE. UU. para una web dirigida a Italia añade 100-150 ms de latencia). Los proveedores con mejores resultados de rendimiento para el mercado italiano son SiteGround (servidores en la UE, excelente TTFB), Kinsta (hosting WordPress gestionado en Google Cloud) y Cloudways (VPS gestionado en el proveedor cloud que elijas).
Fuentes web: optimizar sin sacrificar el diseño
Las fuentes web personalizadas mejoran la identidad visual, pero tienen un coste en rendimiento si no se gestionan bien. Cargar fuentes desde Google Fonts o Adobe Fonts añade peticiones HTTP externas y puede provocar FOUT (Flash of Unstyled Text) o CLS.
Alojar las fuentes en tu servidor
Alojar las fuentes directamente en tu propio servidor elimina la dependencia de servidores externos, reduce las peticiones HTTP y permite aprovechar la caché local. Herramientas para convertir y optimizar fuentes: Google Webfonts Helper (descarga las fuentes de Google en formato WOFF2 optimizado) y Font Squirrel Webfont Generator. El formato WOFF2 ofrece la mejor compresión: úsalo como formato principal, con WOFF como alternativa para navegadores antiguos.
Precarga de las fuentes críticas
La etiqueta <link rel="preload"> en el <head> indica al navegador que descargue la fuente antes de que la pida el CSS, eliminando el retraso. Úsala solo con las fuentes críticas (las visibles en la primera pantalla sin hacer scroll): precargar demasiadas fuentes tiene el efecto contrario y crea competencia de ancho de banda con los recursos realmente críticos.
LCP: cómo optimizar el elemento más grande de la página
El Largest Contentful Paint (LCP) mide cuándo se hace visible el elemento principal de la página. En la mayoría de las webs, este elemento es una imagen principal, un vídeo destacado o un bloque de texto grande. Optimizar el LCP tiene el impacto más directo en la puntuación de Core Web Vitals.
Identificar el elemento LCP
Chrome DevTools (pestaña Performance y, después, analizar la carga) resalta el elemento LCP con un recuadro de color. A menudo es la imagen de cabecera de la página de inicio o la imagen destacada de un artículo. Una vez identificado, la estrategia de optimización es específica para ese tipo de elemento.
Optimizar una imagen LCP
Si el elemento LCP es una imagen: conviértela a WebP, redimensiónala a las dimensiones exactas de visualización, añádele fetchpriority="high" (indica al navegador que la descargue antes que todo lo demás), no le apliques carga diferida y plantéate precargarla con <link rel="preload">. Juntas, estas cuatro optimizaciones llevan casi siempre el LCP por debajo de 2,5 segundos en webs que partían de 4-6 segundos.
Una web optimizada hoy puede empeorar mañana: cada actualización de plugin, cada nueva imagen sin comprimir y cada script de terceros añadido bajan poco a poco el rendimiento. La supervisión periódica forma parte de la optimización.
Scripts de terceros: el enemigo oculto del rendimiento
Cada script de terceros que añades a la web —Google Analytics, Facebook Pixel, widgets de chat, ventanas emergentes de newsletter, herramientas de mapas de calor— tiene un coste en rendimiento. No son gratis: se pagan en milisegundos de retraso en la carga.
Auditoría de los scripts de terceros
Haz un inventario de todos los scripts instalados actualmente en la web. PageSpeed Insights muestra el impacto de cada script de terceros en la sección "Reduce el impacto del código de terceros". Elimina los scripts que no usas de forma activa (¿cuántas herramientas de mapas de calor has instalado y nunca has mirado?). Para los imprescindibles, cárgalos con defer o de forma asíncrona, y plantéate cargarlos solo tras una interacción del usuario (clic o scroll) en lugar de al cargar la página.
Google Tag Manager: centralizar para controlar
Si usas varios scripts de seguimiento, Google Tag Manager centraliza su gestión en un único sistema: añades o quitas scripts sin tocar el código de la web, puedes retrasar la carga de las etiquetas no críticas y tienes visibilidad completa de todos los scripts activos. La contrapartida: GTM es en sí un script con su propio peso (~28 KB comprimido con gzip); solo compensa si gestionas al menos 3-4 etiquetas distintas.
Lista completa de optimización de la velocidad
- Convierte todas las imágenes a WebP y comprímelas por debajo de 200 KB
- Añade loading="lazy" a todas las imágenes que no sean LCP
- Instala un plugin de caché (WP Rocket o LiteSpeed Cache)
- Activa la CDN de Cloudflare (gratuita)
- Comprueba el TTFB y valora cambiar de hosting si es >500 ms
- Minifica CSS y JavaScript
- Añade defer/async a los scripts no críticos
- Aloja las fuentes en tu servidor, con precarga para las críticas
- Elimina el CSS que no se usa con PurgeCSS
- Audita y reduce los scripts de terceros
Supervisión continua: no optimices una sola vez
El rendimiento de una web se degrada con el tiempo: cada nuevo plugin, cada imagen sin comprimir y cada script añadido bajan poco a poco las puntuaciones. La supervisión periódica es la única forma de mantener las optimizaciones a lo largo del tiempo.
Herramientas de supervisión automática
Google Search Console muestra los problemas de Core Web Vitals agregados a partir de datos reales de los usuarios: revisa el informe cada mes. Uptime Robot (gratuito) vigila la disponibilidad de la web y te avisa por email si se cae. SpeedVitals o DebugBear ofrecen supervisión automática del rendimiento a lo largo del tiempo, con alertas cuando las puntuaciones bajan de los umbrales definidos.
Base de datos y consultas: optimizar el back end de WordPress
En las webs WordPress, la base de datos suele ser el cuello de botella oculto que nadie revisa. Cada página cargada ejecuta decenas de consultas SQL: si la base de datos está fragmentada, llena de revisiones o las consultas no están optimizadas, el TTFB sube incluso con un hosting excelente.
Limpiar y optimizar la base de datos de WordPress
Una base de datos de WordPress sin mantenimiento acumula con el tiempo: revisiones de entradas (cada guardado crea una nueva revisión; en webs activas desde hace años pueden ser miles), comentarios de spam, transients caducados y borradores automáticos abandonados. El plugin WP-Optimize permite limpiar estas entradas con un clic y optimizar las tablas de la base de datos (el equivalente a un OPTIMIZE TABLE de SQL). Una limpieza periódica, mensual o trimestral, mantiene la base de datos ligera y las consultas rápidas.
Limitar las revisiones en WordPress
Por defecto, WordPress guarda un número ilimitado de revisiones de cada entrada. En webs con muchos contenidos, esto hincha la base de datos sin necesidad. Añade esta línea al archivo wp-config.php para limitar las revisiones a 3: define('WP_POST_REVISIONS', 3);. No afecta a la edición —puedes seguir volviendo a las 3 últimas versiones—, pero reduce mucho el peso de la base de datos con el tiempo.
Caché de objetos: reducir las consultas repetidas
La caché de objetos guarda en memoria los resultados de las consultas más frecuentes a la base de datos y evita volver a ejecutarlas en cada petición. En hostings compatibles con Redis o Memcached (SiteGround, Kinsta, Cloudways), un plugin como Redis Object Cache puede reducir el número de consultas por página entre un 40% y un 60%. En hostings compartidos sin Redis, los plugins de caché de página (WP Rocket) implementan una caché de objetos en el sistema de archivos que ofrece ventajas parecidas, aunque menos potentes.
Optimización de vídeo: el elemento más pesado
Los vídeos son los elementos más pesados que se pueden añadir a una página web. Un vídeo sin optimizar puede, por sí solo, anular todas las demás optimizaciones de rendimiento que hayas aplicado.
No alojes los vídeos directamente en el servidor
Alojar archivos de vídeo directamente en tu propio servidor y cargarlos con la etiqueta <video> es casi siempre un error: los archivos son enormes, consumen ancho de banda del servidor, no se adaptan automáticamente a la conexión del usuario y no tienen una CDN dedicada. La solución correcta es usar plataformas especializadas:
Carga diferida para vídeos incrustados
Incluso incrustar un vídeo de YouTube con un iframe tiene un coste: carga decenas de scripts y recursos de Google aunque el usuario nunca interactúe con el vídeo. La técnica de la fachada diferida (lazy facade) sustituye el iframe por una imagen de vista previa en la que se puede hacer clic: el iframe real solo se carga cuando el usuario hace clic para reproducir el vídeo. En WordPress, el plugin Lyte Embed o una solución propia con JavaScript reduce en 400-600 KB el peso de una página con vídeos incrustados.
Si quieres aplicarlo a tu proyecto, echa un vistazo a mi servicio de soporte técnico y mantenimiento: precios claros desde 60 €/hora, presupuesto gratuito y respuesta en 24 horas.
