Qué es la Velocidad de Página Web y Cómo Mejorarla

¿Qué es la Velocidad de Página Web?

La velocidad página web (también llamada "tiempo de carga web" o “velocidad de carga web”) mide la rapidez con la que se carga el contenido de una página. Desde el punto de vista del SEO, aumentar la velocidad de tu página web es esencial.

Mejorar la velocidad de tu página web depende de muchos factores, como tu hosting o el tamaño de tu página.

También es importante analizar el tiempo de carga web en escritorio y en mobile, porque suele diferir. 

En este artículo, descubrirás cómo afecta la velocidad de página web al SEO, encontrarás herramientas para medirla y aprenderás formas de mejorarla. 

¿Por Qué es Importante la Velocidad de la Página para el SEO?

Calcular tiempo de carga de una web es importante, porque es un factor de posicionamiento confirmado en ordenadores de escritorio y móviles. 

En otras palabras: 

Un tiempo de carga rápido (junto con otras señales importantes) puede suponer un mejor posicionamiento.

La velocidad de una página web afecta a tu posicionamiento en buscadores, ya que las webs lentas afectan negativamente a la experiencia del usuario. 

De hecho, la probabilidad de rebote (que el usuario abandone la web) casi se triplica si tu página tarda más de tres segundos en cargarse, según Google. 

Pero es importante aclararlo: 

La velocidad de una página no es una métrica única, si no que ctúa como un término “paraguas”. 

¿Por qué? 

Porque hay muchas formas de medir el tiempo de carga. (Echa un vistazo a algunas herramientas).

Digamos que un usuario teclea un dominio en su navegador web y pulsa "intro".

Al cabo de poco tiempo, se carga la web.

A veces, lo primero que ve el usuario es una página en blanco. 

Unos milisegundos (o segundos) después, aparecen algunos elementos. Quizá un bloque de texto o una imagen.

En un momento determinado, el usuario puede interactuar con la página. Por ejemplo, puede pulsar un botón. 

Mientras los usuarios esperan y se cargan nuevos elementos, el contenido de la página puede moverse. 

Y, finalmente, el contenido de la página se carga completamente.

A veces, cuando la página se carga completamente, los usuarios ya han encontrado lo que buscaban.

Otras veces, se han dado por vencidos y han abandonado la página.

Como puedes ver, mientras se carga tu web, ocurren muchas cosas y cada una de ellas, a un ritmo diferente.

Puedes medir cada uno de estos eventos por separado. Por eso decimos que la velocidad de página web no es una única métrica, sino muchas. 

Las métricas de velocidad de página más comunes son las siguientes: 

• Time To First Byt (TTFB): tiempo que tarda la página en empezar a cargarse.
• First Contentful Paint (FCP): cuánto tarda el usuario en ver el primer elemento de una página (como una imagen).
• Tiempo de carga: el tiempo que tarda en cargarse completamente el contenido de una página.

A continuación, te orientaremos sobre cómo analizar la velocidad de página web basándonos en las métricas Core Web Vitals de Google.

Cómo Afectan las Métricas Core Web Vitals a la Velocidad de la Página

Las métricas Core Web Vitals de Google son un conjunto de métricas que puntúan la experiencia de usuario. Google utiliza estas tres métricas para hacerse una idea de la velocidad de carga basándose en la velocidad real, la interactividad y la estabilidad visual de la página: 

• Largest Contentful Paint (LCP) mide el tiempo que tarda en cargarse tu contenido principal. Debe ser de 2,5 segundos o menos. 
• First Input Delay (FID) mide el tiempo que tarda un usuario en interactuar con una página. Debe ser de 100 milisegundos o menos. 
• Cumulative Layout Shift (CLS) mide la frecuencia con la que los usuarios experimentan desplazamientos de diseño. Tu puntuación CLS debe ser de 0,1 o menos.

Necesitas entender las métricas Core Web Vitals para optimizar la velocidad de la página.

Puedes utilizar estas métricas para medir la velocidad de página web. Google clasifica las métricas "Core Web Vitals" de tu web como "Buenas", "Necesitan mejorar" o "Deficientes". 

Puedes comprobar tus puntuaciones en el informe Core Web Vitals de Google Search Console. 

Nota: Google dice que sus actualizaciones de velocidad de página solo afectan negativamente a las páginas que ofrecen "la experiencia más lenta". Pero recomiendan apuntar al umbral "Bueno" para obtener mejores resultados. 

Una vez que alcances ese umbral, no verás necesariamente grandes ganancias microoptimizando la velocidad de tu página en unos pocos milisegundos.

Resumiendo: 

Optimizar las páginas con bajo rendimiento debe ser tu prioridad, porque Google puede penalizar tu web. 

Y sobre todo: 

No antepongas la velocidad de la página a un buen contenido. Porque la relevancia siempre será lo primero. 

Una página que se cargue un "poquito más rápido" no tiene por qué superar a otras páginas más lentas. La relevancia y la intención de búsqueda son más importantes.

Primero debes priorizar la creación de contenidos que satisfagan las necesidades de los usuarios.

Dicho esto, estos son los umbrales de Google para evaluar las métricas Core Web Vitals de una página: 

Estas métricas forman parte de un conjunto mayor de señales de calidad llamado Web Vitals. Esta lista de métricas evoluciona constantemente e incluye otras relevantes como TTFB y FCP.

Para saber más, consulta nuestra guía sobre Core Web Vitals: definiciones y consejos. 

Herramientas para Comprobar la Velocidad de tu Página Web 

Hay muchas herramientas disponibles ahí fuera para realizar un test de velocidad de página web.

Ten en cuenta que cada herramienta utiliza datos ligeramente diferentes, por lo que tus resultados pueden variar. Confiar en una sola herramienta, por lo tanto, puede darte resultados limitados. 

Por eso es una buena práctica utilizar varias herramientas para comprobar el rendimiento de tu web. 

Te recomendamos que utilices PageSpeed Insights de Google y una herramienta que no dependa de los datos de Google (como GTmetrix o Pingdom). 

Te proporcionará una visión más amplia de la salud de tu web. 

Dependiendo de la herramienta, conseguirás resultados que utilicen datos de laboratorio, datos de campo o ambos. 

Veamos las diferencias:

• Los datos de campo representan a usuarios reales que visitan tu web. También se conoce como Medición de Usuarios Reales (RUM). Proporciona una imagen clara del rendimiento de tu web basada en las condiciones reales de los usuarios.
• Los datos de laboratorio (o medición sintética) proceden de un entorno controlado que simula condiciones específicas del dispositivo y la red. Son útiles para depurar problemas y probar funciones.

Ahora que hemos repasado los aspectos básicos, analicemos algunos de los mejores test de velocidad de página web.

Google PageSpeed Insights

Google PageSpeed Insights (PSI) es un medidor de velocidad de página web.

Utilízala para comprobar las métricas de Core Web Vitals de cualquier URL, ver los datos de rendimiento y conseguir recomendaciones de mejora. 

PageSpeed Insights utiliza tanto datos de laboratorio como datos de campo. 

Recoge datos de laboratorio de Google Lighthouse (más adelante hablaremos de esta herramienta) y datos de campo del conjunto de datos del Informe sobre la Experiencia de Usuario de Chrome (CrUX). 

Para empezar, ve a PageSpeed Insights y pega la URL que quieres medir en la barra de búsqueda. 

Nota: solo puedes analizar una URL, no una web completa.

PageSpeed Insights te muestra estadísticas y recomendaciones tanto para ordenadores de escritorio como para móviles. 

Comparte información valiosa sobre rendimiento, accesibilidad, mejores prácticas y SEO de tu página.

Consulta nuestra guía de PageSpeed Insights para saber cómo mejorar tus resultados. 

Google Lighthouse

Google Lighthouse es una herramienta gratuita que analiza el rendimiento de una web y la experiencia del usuario. Detecta problemas y comparte sugerencias para solucionarlos. 

Google Lighthouse utiliza datos de laboratorio y te permite analizar el rendimiento de una web completa, no solo de una URL.

Te ofrece información sobre lo siguiente:

• Rendimiento (a través de Core Web Vitals).
• Accesibilidad.
• Buenas prácticas.
• SEO.
• Aplicaciones Web Progresivas.

Puedes utilizar Google Lighthouse de distintas formas: 

• Chrome DevTools (a través de la opción "Inspeccionar" de Google Chrome)
• Extensión de Chrome
• Interfaz de usuario web (IU)
• Módulo nodo

Para saber más, lee nuestra guía sobre Google Lighthouse y cómo utilizarlo.

WebPage Test

WebPage Test te permite realizar pruebas personalizadas de tiempo de carga web de la página en función de las diferentes condiciones del usuario, como ubicación, navegador, conexión, etc.

Así podrás ver cómo experimentan tu página los distintos usuarios.

WebPage Test genera los siguientes resultados:

• Un gráfico en cascada para comprender cómo se cargan los distintos elementos de tu sitio web.
• Métricas relevantes como TTFB, FCP y tiempo total de carga.
• Tus métricas Core Web Vitals (ten en cuenta que pueden no coincidir con tus resultados de PageSpeed Insights, ya que los datos son diferentes). Utilizar ambos es una buena forma de ver el panorama general.
• Y más.

Para empezar, visita WebPage Test, desplázate hacia abajo y escribe tu URL en la barra de búsqueda.

Si seleccionas la opción "Configuración simple", tendrás que elegir entre una lista de condiciones preestablecidas. La herramienta recomienda ubicaciones y navegadores preestablecidos: 

Tras seleccionar tus condiciones, haz clic en "Iniciar prueba".

Consejo: ¿No sabes qué opción seleccionar? Elige el país más cercano a tu público objetivo. 

Si ninguna de estas condiciones preestablecidas satisface tus necesidades, selecciona "Configuración avanzada" para personalizar tu prueba.

Los resultados son los siguientes: 

Prueba de Velocidad Web de Pingdom

La prueba de velocidad de web de Pingdom es una herramienta gratuita que analiza el tiempo de carga de una página y comparte recomendaciones de mejora.

Esta herramienta analiza una URL concreta en lugar de toda tu web. 

Ve a la Prueba de velocidad web de Pingdom e introduce una URL. 

A continuación, elige la ubicación del servidor. Elige el más cercano a tus usuarios. (Si tienes una web global, realiza diferentes pruebas y compara los resultados).

La herramienta mostrará el tamaño de tu página, el tiempo de carga, el número de peticiones HTTP y recomendaciones. 

GTmetrix

GTmetrix es una herramienta gratuita que mide el rendimiento de una página. Puedes elegir la ubicación de cada prueba.

Esta herramienta genera un informe que incluye lo siguiente:

• Tu puntuación de estructura.
• Tu puntuación de rendimiento.
• Tu puntuación de Core Web Vitals.
• Un gráfico de visualización de la velocidad.
• Recomendaciones para mejorar el rendimiento.
• Y más.

Ve a GTmetrix, introduce tu URL y haz clic en "Probar tu web". 

Solo puedes comprobar una URL cada vez. 

Nota: para elegir la ubicación del servidor para la prueba, tendrás que registrarte (gratuitamente). De lo contrario, la prueba utilizará un servidor predeterminado situado en Vancouver (Canadá).

Este es el aspecto que tendrá tu informe GTmetrix:

Incluye un resumen rápido en la parte superior para que puedas evaluar el rendimiento de un vistazo. Además de un gráfico de "Visualización de la velocidad". 

Auditoría del Sitio de Semrush

Si quieres ir un paso más allá (y conseguir información sobre la velocidad de página web), realiza una auditoría técnica completa con la herramienta Auditoría del sitio de Semrush.

Auditoría del sitio incluye más de 140 comprobaciones de SEO on page y SEO técnico. 

Para probar la velocidad de una página web, ve a la herramienta Auditoría del sitio, configura un proyecto y accede a la configuración de la herramienta.

Haz clic en "Iniciar auditoría del sitio".

Verás un panel similar a éste:

Visita el informe "Rendimiento" para comprobar tu velocidad de carga, problemas de rendimiento y mucho más. 

Al solucionar estos problemas, da prioridad a los "Errores". Después, pasa a las "Advertencias".

Otra sección útil es el informe "Core Web Vitals".

Muestra tu puntuación Core Web Vitals por página (y las mejoras recomendadas):

5 Formas de Mejorar la Velocidad de tu Página

Cuando quieras calcular la velocidad de página web (o el dominio entero) con una herramienta, conseguirás recomendaciones de mejora del rendimiento. 

Algunas correcciones son sencillas. Pero si necesitas orientación sobre tareas más técnicas, te recomendamos que consultes a un desarrollador.

Analicemos las cinco formas más comunes de mejorar el tiempo de carga web.

1. Comprime tus Imágenes

Las imágenes suelen contribuir a que la página sea lenta. Comprimir tus imágenes es una de las soluciones más rápidas para mejorar la velocidad y tu posicionamiento SEO.

Si puedes permitirte sacrificar un poco la calidad de la imagen, probablemente puedas mejorar la velocidad.

Tu objetivo debe ser que las imágenes sean lo más pequeñas posible sin comprometer la calidad ni la experiencia del usuario. 

Supongamos que quieres subir una imagen de 1 MB y 3.000 x 2.500 píxeles. 

Puedes redimensionar tu imagen utilizando un redimensionador de imágenes gratuito como PicResize.

Sube tu imagen a la herramienta y selecciona el tamaño deseado (por ejemplo, un 50% más pequeña).

Después de hacer tu imagen lo más pequeña posible sin comprometer la calidad, utiliza un optimizador de imágenes como ImageOptim para reducirla aún más.

Simplemente, pasa tu imagen por la herramienta, y hará su magia.

No olvides este paso antes de subir imágenes a tu web. 

Consejo: si quieres mejorar la velocidad de página web en WordPress, optimiza las imágenes con un plugin como Smush. Te permite optimizar imágenes en bloque para ahorrar tiempo. 

Elige el Formato de Imagen Adecuado

Los distintos tipos de imágenes requieren distintos formatos de archivo de imagen.

Algunos formatos son más ligeros que otros porque ofrecen mayores niveles de compresión. Elige el formato adecuado para cada imagen para reducir el tiempo de carga de tu página.

Analicemos los formatos más habituales y cómo utilizarlos:

• JPEG: bueno para imágenes del mundo real, como fotografías.
• PNG: bueno para capturas de pantalla, diseños, logotipos o imágenes con un mayor nivel de detalle.
• GIF: si es posible, evita este formato, ya que ralentizará tu página. Si necesitas una imagen animada, considera la posibilidad de convertir tu GIF en un vídeo.
• WebP: este tipo de archivo es cada vez más popular porque es mucho más ligero que JPEG y PNG (de hecho, hasta tres veces más pequeño.) En el futuro, probablemente se convertirá en el estándar. Sin embargo, no todos los navegadores admiten imágenes WebP todavía. Así que te recomendamos que utilices JPEG y PNG por ahora. 

Consejo: si utilizas WordPress, plugins como EWWW Optimizer convierten tus imágenes en WebP. El plugin mostrará una versión JPEG o PNG de la imagen si el usuario abre tu web con un navegador que no admite archivos WebP. 

2. Reducir las Peticiones HTTP

Las peticiones HTTP se producen cuando los navegadores envían "peticiones" al servidor de una web para obtener más información. 

Supongamos que un usuario visita una página. El servidor recibe una petición del navegador y responde con un archivo que contiene información que el usuario necesita para ver la página. (Puede contener texto, imágenes, multimedia, etc.) El usuario no puede ver lo que contiene el archivo hasta que se complete la solicitud.

Si ese archivo no contiene toda la información que el usuario necesita para ver la página, el navegador enviará otra petición. 

Cuantas más peticiones, más se ralentiza la velocidad de tu página. El usuario tendrá que esperar más tiempo para ver la página completa.

Intenta reducir las peticiones HTTP (o hacer que se carguen más rápido) para mejorar la velocidad.

Para ver el número de peticiones HTTP de una página, utiliza Google Chrome.

Abre tu página en Chrome. Haz clic con el botón derecho en cualquier parte de la página y elige "Inspeccionar". 

Verás las herramientas para desarrolladores de Google (también llamadas Chrome DevTools). Ve a la pestaña "Red". 

Al principio, el panel tendrá pocas o ninguna entrada. Recarga la página para recopilar datos.

Verás todas las peticiones HTTP, sus tamaños y el tiempo que tardan en cargarse. Entre ellas se incluyen las peticiones de imágenes, plugins, archivos JavaScript o CSS (más adelante hablaremos de ellos), y muchas más. 

También puedes ver el número total de solicitudes en la esquina inferior izquierda de la ventana de inspección. 

Este número es una buena forma de seguir tu progreso. Cuantas menos solicitudes, mejor. 

Para que tengas una referencia, una página media envía unas 70 peticiones HTTP. Sin embargo, no hay un número específico al que aspirar. Utiliza el número medio de peticiones de tus páginas como orientación para seguir tu progreso.

Consejo: consulta más información sobre el panel Red de Chrome.

Herramientas como GTmetrix también cuentan las peticiones HTTP de una página y las agrupan por tipo:

Utiliza esta herramienta para conseguir una visión amplia de las peticiones HTTP de tu web. 

Una vez que identifiques las peticiones, puedes empezar a añadirlas. A menos que tengas grandes conocimientos en este campo, lo más seguro es que consultes con un desarrollador experimentado para reducir tus peticiones HTTP.

3. Minificar JavaScript, CSS y HTML

Minimizar JavaScript, CSS y HTML puede mejorar la velocidad de tu página.

De hecho, John Mueller, de Google, dice que "merece la pena estudiar" la minificación porque puede reducir el tamaño de los archivos.

Empieza por eliminar los saltos de línea, los espacios en blanco u otros elementos innecesarios del código que no afecten a la experiencia del usuario. 

Este es el aspecto del código CSS estándar: 

Y así es como queda después de la minificación:

La versión original es más fácil de leer para los humanos. Pero la versión minificada es más sencilla y fácil de procesar para un ordenador. 

Puedes utilizar una herramienta de minificación onlline para minificar tus archivos. Y si tienes una web en WordPress, un plugin como WP Rocket puede ayudarte a minificar tu código. 

Nota: algunas herramientas combinan archivos CSS y JavaScript para mejorar el rendimiento (aunque es innecesario si tu sitio utiliza HTTP/2 o HTTP/3).

Así que combinar archivos CSS y JavaScript solo es útil para la velocidad de la página si tu sitio utiliza HTTP/1.

Para comprobar qué protocolo HTTP utiliza tu web, ve a Google Chrome, haz clic con el botón derecho en cualquier parte de la página y pulsa "Inspeccionar". A continuación, ve a la pestaña "Red". 

Comprueba la columna "Protocolo". Verás el protocolo que utiliza cada uno de tus recursos internos. 

Si utilizan los protocolos "h2" o "h3" (HTTP/2 y HTTP/3), no necesitas combinar tus archivos CSS y JavaScript.

Nota: ¿no ves la columna "Protocolo"? Haz clic con el botón derecho del ratón en el panel de etiquetas del gráfico y marca "Protocolo".

4. Activar el Caché del Navegador

El almacenamiento en caché del navegador es cuando el navegador de un usuario almacena temporalmente los datos de una página. Así, cuando el usuario vuelve a la página, ésta se carga más rápidamente. 

¿Por qué?

Porque la primera vez que un usuario entra en tu página, su navegador almacena muchos elementos (como imágenes o archivos CSS).

De esta forma, el navegador no necesita enviar tantas peticiones cuando el usuario vuelve.

(Mejora la experiencia de los usuarios recurrentes. Pero no supondrá ninguna diferencia para los usuarios que entren en tu web por primera vez).

Para activar la caché del navegador en una web WordPress, puedes utilizar plugins como W3 Total Cache o WP Rocket.

Consejo: si no utilizas WordPress, puedes añadir reglas de almacenamiento en la caché del navegador a tu archivo .htaccess. (Pero ten cuidado o puedes romper tu web si cometes un error, por lo que te recomendamos que consultes a un desarrollador).

5. Utiliza una Red de Entrega de Contenido (CDN)

Una Red de Entrega de Contenidos (o “CDN”, por sus siglas en inglés) es un grupo de servidores interconectados distribuidos en diferentes ubicaciones. Hacen que tu web esté "más cerca" de cada usuario.

Así, las páginas se cargan más rápido para los usuarios que están geográficamente cerca del servidor donde se encuentra la web. 

Una CDN funciona así:

1. Cacheas tu sitio en una CDN.
2. Un usuario envía una solicitud para abrir tu web.
3. El servidor más cercano al usuario entrega la web.

Supongamos que tu servidor de origen está en Los Ángeles.

Si un usuario en Italia intenta acceder a tu web, tu CDN encontrará el servidor más cercano en la red del usuario. (Digamos que está en Francia.) La CDN entregará entonces una versión en caché de tu web al servidor de Francia.

Como Italia está mucho más cerca de Francia que de Los Ángeles, la velocidad de carga de tu web mejorará.

Cloudflare y Jetpack son buenos ejemplos de CDN.

Para saber más, consulta nuestra guía sobre CDN y su funcionamiento.

Velocidad de Página y SEO técnico

Controlar el tiempo de carga de tu página es solo uno de los muchos pasos que pueden mejorar tu posicionamiento SEO. 

Para saber más sobre SEO técnico, consulta estos recursos: 

• ¿Qué es el SEO técnico? Conceptos básicos y 10 buenas prácticas
• Curso de SEO On Page y Técnico [Videocurso gratuito en Semrush Academy].
• Cómo realizar una auditoría SEO completa (en 14 pasos)