Cómo aumentar la velocidad de tu web - Guía de PageSpeed

La velocidad de la web no es solo una cuestión de experiencia de usuario: es un factor de posicionamiento directo en Google. Desde 2021, las métricas de velocidad de Google forman parte del algoritmo de posicionamiento, y Google PageSpeed Insights es la herramienta que muestra cómo de bien rinde tu web. En esta guía repasaremos pasos concretos para mejorar tu puntuación.

Entender las métricas de PageSpeed

Google PageSpeed Insights mide seis métricas clave que en conjunto componen la puntuación global. El Largest Contentful Paint (LCP) mide la rapidez con la que carga el elemento visible más grande de la página; lo ideal es por debajo de 2,5 segundos. El Interaction to Next Paint (INP) mide la rapidez con la que la página responde a las interacciones del usuario; lo ideal es por debajo de 200 milisegundos.

El Cumulative Layout Shift (CLS) mide la estabilidad visual de la página, es decir, cuánto se mueven los elementos durante la carga. El valor ideal es inferior a 0,1. El First Contentful Paint (FCP) mide cuándo aparece el primer contenido en pantalla. El Time to First Byte (TTFB) mide la rapidez con la que el servidor responde a la petición. El Total Blocking Time (TBT) mide cuánto tiempo está bloqueado el hilo principal.

Optimización de imágenes - el mayor impacto

Las imágenes son la causa más habitual de una web lenta. Una foto de 5 MB sin optimizar puede ralentizar la carga de la página varios segundos. Esto es lo que debes hacer.

Primero, utiliza formatos de imagen modernos. El formato WebP ofrece un tamaño entre un 25 y un 35 % menor que JPEG con la misma calidad. AVIF va todavía más allá, con un tamaño un 50 % menor, pero no tiene soporte completo en todos los navegadores. Para WordPress, los plugins ShortPixel o Imagify convierten las imágenes a WebP de forma automática.

Las dimensiones de la imagen deben coincidir con el tamaño en el que se muestran. Si una imagen se muestra a 800x600 píxeles, no tiene sentido cargar un original de 4000x3000. Usa el atributo srcset para imágenes responsive que se adapten al tamaño de la pantalla.

La compresión es clave: para la mayoría de las imágenes web, una calidad del 80-85 % es más que suficiente. La diferencia entre una calidad del 85 % y del 100 % es imperceptible a simple vista, pero la diferencia de tamaño de archivo puede ser enorme.

Lazy Loading - carga solo lo que se ve

El lazy loading retrasa la carga de imágenes y otros recursos hasta que el usuario hace scroll hasta ellos. Esto reduce drásticamente el tiempo de carga inicial de la página, porque el navegador no tiene que descargar todas las imágenes de golpe.

En el HTML moderno, el lazy loading es de una sencillez trivial: basta con añadir el atributo loading="lazy" a las etiquetas img. La plataforma WordPress añade lazy loading a todas las imágenes de forma automática desde la versión 5.5. Eso sí, ten cuidado de no aplicar lazy loading a las imágenes de la parte «above the fold» de la página (imágenes hero, logo), porque eso puede afectar negativamente a la métrica LCP.

Para los iframes (vídeos de YouTube, mapas de Google), el lazy loading es especialmente importante, porque esos recursos pueden ser enormes. En lugar de un embed directo, plantéate mostrar una imagen en miniatura con un botón de reproducción que cargue el iframe solo al hacer clic.

Caché - no cargues lo mismo dos veces

La caché del navegador permite que los recursos estáticos (imágenes, CSS, JavaScript) se almacenen en el navegador del visitante. Cuando un usuario vuelve a tu web, esos recursos cargan desde su ordenador en lugar de desde el servidor, al instante.

En BeoHosting, con un servidor LiteSpeed avanzado, la caché es excepcionalmente eficiente. LiteSpeed Cache para WordPress crea de forma automática versiones HTML estáticas de tus páginas, eliminando la necesidad de procesar PHP y de hacer consultas a la base de datos en cada petición.

Configura las cabeceras Cache-Control para los distintos tipos de archivo. Para las imágenes, los archivos CSS y JS, establece una duración de caché larga (por ejemplo, 1 año). Para las páginas HTML, usa una duración más corta o revalidación, de modo que los cambios de contenido aparezcan rápidamente.

Minificación de CSS y JavaScript

La minificación elimina los espacios en blanco innecesarios, los comentarios y el formato de los archivos CSS y JavaScript, reduciendo su tamaño. Para una web típica, la minificación puede reducir el tamaño del CSS entre un 10 y un 30 % y el del JavaScript entre un 20 y un 40 %.

Para WordPress, el plugin LiteSpeed Cache incorpora minificación y combinación de archivos CSS/JS. Autoptimize es una excelente alternativa. Ten cuidado al combinar archivos JavaScript, porque puede provocar conflictos entre plugins; prueba a fondo después de activarla.

La técnica de CSS crítico extrae el CSS necesario para renderizar el contenido «above the fold» y lo inyecta directamente en el HTML, mientras que el resto del CSS carga de forma asíncrona. Esto mejora drásticamente las métricas FCP y LCP.

Optimizaciones del lado del servidor

La elección del proveedor de hosting y la configuración del servidor tienen un enorme impacto en la velocidad de la web. BeoHosting utiliza el servidor LiteSpeed Enterprise, discos NVMe SSD y CloudLinux para un rendimiento óptimo. Consulta nuestros planes de hosting.

La compresión GZIP o Brotli reduce el tamaño de los datos transferidos entre un 60 y un 80 %. En BeoHosting, la compresión Brotli está activada automáticamente para todos los sitios. Los protocolos HTTP/2 y HTTP/3 permiten cargar en paralelo varios recursos a través de una única conexión, acelerando notablemente la carga de páginas con muchas imágenes, estilos y scripts.

OPcache de PHP cachea el código PHP compilado en memoria, eliminando la necesidad de volver a parsearlo y recompilarlo en cada petición. En BeoHosting, OPcache está activado y configurado de forma óptima automáticamente.

Optimización de fuentes

Las fuentes web pueden ralentizar notablemente la carga de la página. Google Fonts, por muy populares que sean, requieren búsquedas DNS adicionales y descargas desde un servidor externo. Plantéate alojar las fuentes localmente: descarga los archivos de fuente y sírvelos desde tu propio servidor.

Usa font-display: swap en el CSS para que el texto sea visible de inmediato con la fuente del sistema mientras se carga la fuente web. Limita el número de variantes de fuente: en lugar de cargar 6 grosores distintos, usa los 2 o 3 que realmente necesites. Precarga las fuentes clave con link rel="preload" para una carga más rápida.

Optimización de la base de datos

En las webs de WordPress, la base de datos puede convertirse en un cuello de botella de rendimiento si no se mantiene con regularidad. Elimina las revisiones de entradas con más de 30 días, los comentarios de spam, los transients y los metadatos en desuso. El plugin WP-Optimize puede mantener la base de datos de forma automática.

Usa caché de objetos (Redis o Memcached) para cachear los resultados de las consultas frecuentes a la base de datos. En BeoHosting, Redis está disponible en los planes Business y Premium y puede reducir drásticamente el tiempo de generación de páginas en sitios dinámicos.

CDN - Content Delivery Network

Una CDN distribuye los recursos estáticos de tu web por servidores de todo el mundo, de modo que los visitantes cargan el contenido desde el servidor más cercano. Para sitios con una audiencia predominantemente española, una CDN no es críticamente importante porque el servidor de BeoHosting ya está cerca, en Europa. Pero para sitios con una audiencia global, una CDN puede mejorar la velocidad de forma significativa.

Cloudflare ofrece un plan de CDN gratuito que incluye protección DDoS y optimización básica. La integración con WordPress es sencilla y no requiere conocimientos técnicos.

Checklist práctico de optimización de PageSpeed

Comprime y convierte las imágenes a WebP. Implementa lazy loading para las imágenes por debajo del fold. Activa la caché del navegador con duraciones largas para los recursos estáticos. Minifica los archivos CSS y JavaScript. Usa PHP 8.4 para un rendimiento máximo. Activa la compresión GZIP o Brotli. Optimiza las fuentes y limita el número de variantes. Limpia la base de datos con regularidad. Usa caché de página (LiteSpeed Cache para WordPress). Minimiza el número de scripts y recursos externos.

Conclusión

Mejorar la puntuación de PageSpeed es un proceso iterativo: no esperes alcanzar un 100/100 de golpe. Céntrate primero en los problemas más grandes que identifica PageSpeed Insights, normalmente imágenes y JavaScript. Con BeoHosting ya tienes optimizado el lado del servidor, así que puedes centrarte en las optimizaciones de front-end. Apunta a una puntuación en verde (90+) tanto en la versión móvil como en la de escritorio de tu web.