Cómo aumentar la velocidad de una web: 12 métodos prácticos

01¿Por qué es importante la velocidad del sitio?

Una página que tarda en abrirse significa perder al visitante antes de que vea el contenido. En una conexión móvil, sobre todo, unos pocos segundos de espera bastan para que el usuario pulse el botón de volver. En una página en la que ha invertido en publicidad, esto supone que los clics pagados se desperdicien.

La velocidad también influye en la visibilidad en buscadores. Google utiliza las métricas de Core Web Vitals para medir la experiencia de página: se consideran umbrales «buenos» 2,5 segundos para LCP (carga del contenido más grande), 200 milisegundos para INP (respuesta a la interacción) y 0,1 para CLS (desplazamiento visual). Explicamos estas métricas en detalle en nuestro artículo qué son los Core Web Vitals.

Los 12 métodos siguientes son los pasos que más diferencia marcan en la mayoría de los sitios. No tiene que aplicarlos todos a la vez; mida primero y empiece por el problema mayor.

02Mida primero: ¿qué herramientas usar?

Optimizar sin medir es como disparar a oscuras. Las siguientes herramientas gratuitas muestran dónde está el problema.

• PageSpeed Insights: muestra tanto los datos de usuarios reales (si los hay) como la prueba de laboratorio.
• La pestaña Lighthouse de las herramientas para desarrolladores de Chrome: pruebas locales y recomendaciones detalladas.
• El informe de Core Web Vitals de Search Console: la experiencia real de los usuarios en todas las páginas del sitio.
• La pestaña Red (Network): muestra qué archivo se carga, en cuánto tiempo y con qué tamaño.

03Optimización de imágenes

En la mayoría de los sitios, las imágenes son la mayor parte del peso de la página. Por eso la ganancia más rápida suele conseguirse aquí.

1. Pase a los formatos modernos

Servir las fotografías en WebP o AVIF da archivos mucho más pequeños que JPEG y PNG con una calidad visual similar. Para los navegadores antiguos puede ofrecer un formato de respaldo con la etiqueta picture.

<picture>
  <source srcset="urun.avif" type="image/avif">
  <source srcset="urun.webp" type="image/webp">
  <img src="urun.jpg" alt="Nombre del producto" width="800" height="600">
</picture>

2. Sirva el tamaño correcto

Descargar un archivo de 3000 píxeles para una imagen que se mostrará con 400 píxeles de ancho en el teléfono es innecesario. Con los atributos srcset y sizes, haga que el navegador elija el archivo adecuado según el tamaño de pantalla.

3. Carga diferida e indicación de tamaño

Añada loading=lazy a las imágenes que quedan por debajo de la pantalla; así solo se cargan cuando el usuario se acerca. No cargue de forma diferida la imagen principal de la parte superior de la página, porque suele ser el elemento LCP. Indicar ancho y alto en todas las imágenes evita que el contenido salte (CLS).

04Simplifique el código y los recursos

El navegador tiene que descargar y procesar los archivos CSS y JavaScript antes de mostrar la página. Cuanto más grandes y numerosos sean, más tarde aparece la página y más tarde responde a la interacción.

4. Elimine el código que no se usa

El panel Coverage (Cobertura) de las herramientas para desarrolladores de Chrome muestra cuánto de cada archivo se utiliza realmente. Depure los componentes y las librerías que no se usan y minifique (minify) los archivos restantes.

5. Aplace los scripts que bloquean

Cargue con defer los archivos JavaScript que no son necesarios para la primera visualización de la página. Así el navegador sigue procesando el HTML y los scripts se descargan en segundo plano.

<script src="/js/main.js" defer></script>

6. Reduzca los scripts de terceros

Las herramientas de chat, los códigos de seguimiento, los complementos de redes sociales y los vídeos incrustados de terceros pueden cargar mucho la página. Cuestione si cada uno es realmente necesario; muestre los vídeos con una pequeña imagen de vista previa hasta que el usuario haga clic.

05Aligere las fuentes

Las fuentes web definen el carácter del sitio, pero si se cargan mal hacen que el texto aparezca tarde o que la página se desplace.

7. Use WOFF2 y subconjuntos

Sirva las fuentes en formato WOFF2 y solo con el juego de caracteres que necesite (por ejemplo, caracteres latinos). No cargue los grosores que no use; la mayoría de los sitios se conforman con dos o tres.

8. Ajuste la visibilidad y la prioridad

Con font-display: swap, haga que el texto se muestre con la fuente del sistema hasta que se cargue la tipografía. La fuente principal que se usa en la parte superior de la página puede precargarse con preload.

<link rel="preload" href="/fonts/ana-font.woff2" as="font" type="font/woff2" crossorigin>

@font-face {
  font-family: "AnaFont";
  src: url("/fonts/ana-font.woff2") format("woff2");
  font-display: swap;
}

06Ajustes de servidor y caché

Por ligeros que sean el código y las imágenes, si el servidor responde despacio la página seguirá tardando en abrirse. Las mejoras en esta capa afectan a todas las páginas a la vez.

9. Active la caché del navegador

Defina cabeceras de caché de larga duración para los archivos que cambian poco, como el logotipo, el CSS, el JavaScript y las fuentes. Así el visitante que vuelve no descarga de nuevo esos archivos. Cuando se actualice un archivo, puede romper la caché añadiendo una versión a su nombre.

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/avif "access plus 1 year"
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"
  ExpiresByType font/woff2 "access plus 1 year"
</IfModule>

10. Compresión y protocolo moderno

Envíe los archivos basados en texto (HTML, CSS, JavaScript, SVG) comprimidos con Brotli o gzip. Asegúrese de que su servidor es compatible con HTTP/2 o HTTP/3; estos protocolos facilitan la descarga en paralelo de muchos archivos pequeños.

11. Reduzca el tiempo de respuesta del servidor

Si el tiempo hasta el primer byte (TTFB) es largo, el problema suele ser consultas lentas a la base de datos, páginas dinámicas sin caché o recursos de servidor insuficientes. Usar una caché de páginas, mejorar las consultas o pasar a un plan de alojamiento más adecuado reduce este tiempo.

12. Utilice una CDN

Una red de distribución de contenidos (CDN) distribuye sus archivos estáticos desde servidores geográficamente cercanos al visitante. En los sitios que reciben visitas de distintas ciudades y países, reduce de forma notable la latencia y alivia la carga del servidor principal.

07¿Qué método mejora qué?

Cada método afecta a una métrica distinta. Céntrese primero en los métodos de la fila de la métrica que salga peor en su informe de medición.

08La velocidad no se hace una sola vez

Una nueva banda de campaña, una fotografía grande que se sube o un código de seguimiento que se añade pueden deshacer en pocos días meses de optimización. Por eso convierta la medición de la velocidad en parte del mantenimiento periódico y repita la prueba de PageSpeed Insights después de cada actualización importante. Encontrará el resto de pasos de la rutina de mantenimiento en nuestro artículo sobre el mantenimiento de sitios web.

La velocidad sale más barata cuando se planifica desde el principio, en la fase de diseño. Componentes ligeros, una maquetación de imágenes correcta y una estructura de código sencilla hacen innecesarias la mayoría de las correcciones posteriores a la publicación. Aplicamos este enfoque conjuntamente en nuestros procesos de diseño web SEO y diseño responsive; la lista de control del SEO técnico la hemos reunido en nuestra guía de diseño web optimizado para SEO.

Para las empresas que quieren seguir de forma periódica la medición y los informes, nuestro servicio de SEO y analítica evalúa los datos de velocidad junto con el rendimiento en buscadores.