La velocidad web es un parámetro de importancia capital para cualquier proyecto online, pues condiciona la satisfacción de las personas que la visitan e influye en la visibilidad que los buscadores le otorgan. Una página que carga de forma rápida reduce abandonos, mejora la percepción de calidad y facilita que los usuarios completen las tareas que desean sin desesperarse. Por si no lo sabías, una de las cosas que Google hace a la hora de dar mayor o menor visibilidad a una página es medir la velocidad de la web, usando para ello métricas como LCP, INP y CLS, basadas en datos reales de uso.
La buena noticia es que optimizar la velocidad web no es un misterio, tan solo necesitas definir prioridades, medir con herramientas y test de velocidad web fiables y aplicar las estrategias apropiadas. Por eso hemos elaborado una breve guía que te permitirá hacerlo sin ningún tipo de problema, ¡empezar a obtener mejores resultados puede ser así de sencillo!
Herramientas a nuestro alcance
Hoy en día existen muchas herramientas que podemos usar para verificar los motivos de la lentitud de nuestra página. Desde el uso de pingdom a la propia herramienta de PageSpeed Insights de Google, ofrecen información adecuada para saber si el problema lo tenemos con la configuración del servidor, con la red, con nuestra web, con algún “virus”... pueden ser muchas las causas, y es necesario conocer las soluciones más inmediatas:
1 - Instalar algún sistema de caché en nuestras páginas
independientemente del CMS que usemos es importante usar algún sistema de caché para que las páginas se carguen en los visitantes de forma rápida. La caché muestra el mismo contenido para todos, lee la página una vez, crea un contenido estático en HTML y lo ofrece de forma ágil sin tener que acceder a base de datos constantemente cada vez que un visitante lo solicite.
En el caso de Wordpress se han hecho muy famosos algunos plugins, incluso la empresa Automattic, responsable por Wordpress, compró uno de ellos, el WP-SuperCache, aunque dependiendo de la aplicación que tengáis, y del tipo de contenido, suele ser recomendable usar uno u otro.
Es importante también hablar con el servicio de hosting para que aplique la caché correspondiente a nivel de servidor. Cuanto más conozca el servicio de hosting la aplicación que tenéis entre manos, mejor será el resultado.
2 - Usar una CDN
Existen plataformas que se encargan de obtener nuestro contenido, el de nuestro servidor, y lo replican en varias máquinas distribuidas por todo el planeta. Cloudfare es una de las más famosas, encargada precisamente de aumentar la velocidad y seguridad de nuestros sitios.
El funcionamiento es muy sencillo: indicamos la url que queremos pasar por sus servidores y cambiamos los DNS para que apunten a la CDN contratada. Una vez hecho esto, Cloudfare, o el CDN que sea, se encargará de ir obteniendo el contenido de nuestro servidor para replicarlo por diferentes países.
La ventaja que tiene es que un visitante del otro lado del mundo accederá de esta forma al servidor más cercano del CDN, sin necesidad de tener que llegar al servidor original donde tenemos nosotros el hosting.
Usar una CDN también puede ser útil para bloquear ataques DDos, cancelar peticiones por países, comprimir contenido JS o CSS, y mucho más.
3 - Optimizar la aplicación
La mayoría de las veces el problema de lentitud se encuentra en nuestra aplicación. Es importante, en el caso de ser un Wordpress, usar un tema rápido, que no utilice muchos archivos JS o muchos CSS, que esté pensado para el acceso móvil y que no tenga millones de condicionales en su interior. Un tema rápido y personalizado suele ser la mejor opción, siempre monitorizando con el Pagespeed de Google para verificar si el código cumple con todos los requisitios.
4 – Optimizar el código y las bases de datos
Optimizar el código y las bases de datos acelera la velocidad de carga de una web en cada petición, reduciendo el trabajo que deben realizar tanto el navegador como el servidor. Menos bytes, menos operaciones y consultas más eficientes se traducen en tiempos de respuesta mucho más bajos. Además, estas mejoras son acumulativas: un back-end que entrega rápido y un front-end ligero elevan métricas clave y mejoran la percepción del usuario.
¿Lo mejor? Que hacerlo es tan sencillo como seguir estos pasos:
- Eliminar código no utilizado y cargar scripts con defer/async, sacando lo no crítico del renderizado para reducir descargas y ejecución.
- Evitar recursos de bloqueo de render extrayendo CSS en el ‘<head>’, aplazando el resto y reduciendo el tamaño de los bundles y estilos.
- Activar compresión usando Brotli o Gzip, y usar protocolos como HTTP/2 o HTTP/3 para multiplexación y conseguir menor latencia.
- Reducir el trabajo de JavaScript evitando tareas pesadas en el hilo principal, dividiendo el código por rutas y aplicando hidratación parcial cuando convenga.
- Optimizar consultas con índices adecuados indexando para ello columnas de filtros y joins, evitando SELECT * y devolviendo solo lo necesario con LIMIT y paginación.
- Usar EXPLAIN y el registro de consultas lentas para detectar cuellos de botella. Para ello, reescribe N+1, precomputa agregados y plantéate particionar cuando crezca el volumen.
- Implementar caché de lectura/escritura (por ejemplo, Redis) con estrategias cache-aside o write-through y vencimientos adecuados con el fin de aliviar la base de datos.
- Mantener la base de datos en buen estado usando connection pooling, actualizando estadísticas, planificando migraciones para evitar bloqueos prolongados y revisando la fragmentación de índices periódicamente.
Eso sí, que hacer tu páginas más rápida a la hora de mostrar su contenido no te aleje de algo que siempre debe ser una prioridad para ti: contar con los elementos de seguridad para tu página web que necesitas para disfrutar de la máxima tranquilidad.
5 – Usar AMP
AMP puede mejorar la velocidad móvil porque impone reglas de rendimiento, limita el uso de CSS y JS pesados y permite servir páginas desde cachés optimizadas que pre-renderizan contenido de forma segura. Al reducir bloqueos y descargar solo lo necesario por encima del pliegue, reduce el tiempo hasta el primer render y mejora notablemente los Core Web Vitals en entornos reales.
Activar Signed Exchanges (SXG), que habilita la precarga privada manteniendo tu dominio y mejora LCP con prefetch de recursos básicos, asegurándote de medir aspectos como LCP, INP y CLS tras cada cambio.
Preparar plantillas AMP, evitando JavaScript personalizado para reducir bloqueos y trabajo del navegador. Da prioridad a componentes oficiales y patrones recomendados.
Configurar el enlazado correcto agregando ‘rel="amphtml"’ en la versión canónica y ‘rel="canonical"’ en la versión AMP. Así, los descubrirán e indexarán correctamente, evitando una duplicidad innecesaria.
Adaptar medios con componentes, reemplazando ‘<img>’ por ‘<amp-img>’ y ‘<video>’ por ‘<amp-video>’. Además, define dimensiones y usa ‘layout=responsive’ y ‘srcset’ para servir el recurso óptimo en cada pantalla.
Validar y monitorizar, pasando el AMP Test y AMP Validator, tras lo que podrás corregir errores y revisar Search Console para detectar páginas afectadas y tendencias.
Aprovechar la AMP Cache y utilizar AMP Optimizer para reducir CLS.
Integra ‘<amp-analytics>’ y, si lo necesitas, también ‘<amp-ad>’. Añadir datos estructurados válidos te permitirá habilitar funciones de resultados enriquecidos compatibles con AMP.
6 - Reducir el tamaño de las imágenes
Usar compresores, el formato webp, las páginas como tinypng, plugins que optimicen el tamaño… cualquier herramienta que ayude a evitar poner imágenes de 400kb en la web si puede ponerse de 30kn sin perder prácticamente calidad.
Una imagen pesada puede ocupar más espacio que toda la página, y acabará afectando a la experiencia del usuario, que puede estar más interesado en leer el texto que en ver la imagen que lo ilustra.
Si usáis algún editor de fotos, verificad la opción de “guardar en formato web” y ajustad el porcentaje de compresión para que el resultado sea el menor posible.
No es fácil conseguir que la web sea rápida, hay muchos factores más que pueden afectar, como el certificado de seguridad, la latencia, el tipo de servidor contratado… lo que sí es importante es conocer los factores y buscar ayuda cuando alguno de ellos se salga de la media, y actuar rápido cuando veamos que el problema está haciendo que perdamos clientes.
Recordad que el mundo web cada vez es más mundo móvil, y que la estética de los sitios tiene cada vez menos importancia, lo realmente relevante es que sea sencillo de leer, informativo, cómodo y práctico.
Si quieres saber más sobre como reducir el tamaño de las imágenes echa un vistazo a este artículo de nuestro blog.
¿Y en el futuro próximo?
Y mientras los webdesigners se tiran de los pelos al ver como la creatividad se ve limitada por esta tendencia de la velocidad, las operadoras prometen conexiones 5G dentro de muy poco tiempo, conexiones que podrán cargar páginas pequeñísimas cargadas en CDN, con formato AMP para que el visitante no tenga que esperar ni medio segundo en leer lo que tanto desea.
Velocidad web en entornos móviles y apps progresivas (PWA)
A la hora de comprobar la velocidad web de carga de una página, es importante tener en cuenta que en dispositivos móviles depende más de la latencia, la variabilidad de la red y el trabajo de JavaScript que del ancho de banda. Es por esto que optimizar para móviles exige reducir bytes, bloquear menos el renderizado y responder rápido a las interacciones. Y, en este sentido, las PWAs añaden ventajas como la caché inteligente, la instalación y experiencias más fluidas offline.
- Medir con datos de campo: los Core Web Vitals evalúan LCP (carga), INP (interacción) y CLS (estabilidad).
- En PWAs, el patrón app shell con service workers permite precargar la interfaz, atender primero desde caché y rellenar el contenido después, reduciendo la latencia percibida en navegaciones repetidas. Implementa estrategias de Workbox por ruta o tipo de recurso: cache-first para estáticos, stale-while-revalidate para fuentes y APIs tolerantes, y network-first para HTML.
- Optimiza entregas en redes móviles, pues activa HTTP/2 o HTTP/3 para multiplexación y mejor priorización, usando preload para fuentes y CSS esenciales. Además, divide por rutas, aplaza lo que no es imprescindible y evita tareas largas que eleven el INP.
- Adapta la caché al comportamiento, definiendo TTL realistas, invalidando cuando cambie el contenido y registrando métricas (LCP, INP, CLS) por versión para saber si una release empeora. Además, valida de forma continua con Lighthouse y Search Console, y analiza la distribución por dispositivos para distinguir problemas de modelos, sistemas o redes concretas.
Como ves, mejorar la velocidad de una web es un proceso constante, pero el esfuerzo merece muchísimo la pena. Por eso nuestro Creador de Páginas Web, además de intuitivo, te permite crear proyectos ya optimizados para cargar a toda prisa. ¡De ahí que sea una gran herramienta para dar forma a tus proyectos online!
