Saltar al contenido principal

¿Qué es la velocidad de página?

image

Definición​

La velocidad de página (Page Speed) se refiere al tiempo que tarda una página web en cargarse completamente. Más precisamente, es el tiempo desde que un usuario hace clic en un enlace o ingresa una URL hasta que todo el contenido de la página se muestra completamente en el navegador. La velocidad de página es una de las métricas más importantes del rendimiento del sitio web y tiene un impacto significativo tanto en la experiencia del usuario como en la optimización de motores de búsqueda (SEO).

La velocidad de página se divide en varias métricas detalladas. Estas incluyen First Contentful Paint (FCP), cuando aparece el primer contenido en la pantalla; Time to Interactive (TTI), cuando la página se vuelve interactiva; y Largest Contentful Paint (LCP), cuando se carga el contenido más grande. Google utiliza Core Web Vitals, que combina estas métricas, como factor de clasificación, lo que hace que la velocidad de página sea esencial no solo para la experiencia del usuario sino también para la estrategia de SEO.

Muchos factores afectan la velocidad de página. El tiempo de respuesta del servidor, el tamaño y la optimización de archivos multimedia como imágenes y videos, el tamaño y los métodos de ejecución de archivos JavaScript y CSS, la configuración del almacenamiento en caché del navegador y el uso de redes de entrega de contenido (CDN) influyen en la velocidad de página. Por lo tanto, la optimización de la velocidad de página requiere un enfoque integral desde múltiples ángulos.

Características​

  • Impacto directo en la experiencia del usuario: La carga rápida de páginas aumenta la satisfacción del usuario y reduce significativamente las tasas de rebote. Los estudios muestran que las tasas de conversión disminuyen en un 7% por cada segundo de retraso en la carga de la página.
  • Factor de clasificación de búsqueda: Los principales motores de búsqueda, incluido Google, utilizan la velocidad de página como factor de clasificación. Es especialmente importante para la búsqueda móvil.
  • Directamente vinculado a los ingresos: Para los sitios de comercio electrónico, las investigaciones muestran que las tasas de conversión pueden aumentar hasta 2 veces cuando la velocidad de página mejora en 1 segundo.
  • Más importante en dispositivos móviles: Las redes móviles suelen ser más lentas que las de escritorio, lo que hace que la optimización de la velocidad de página sea particularmente crucial en dispositivos móviles.
  • Medible y mejorable: Puede medir con precisión con herramientas como Google PageSpeed Insights y Lighthouse, y verificar medidas de mejora específicas.

Cómo usar​

Así es como medir y optimizar la velocidad de página.

Paso 1: Medir la velocidad actual Primero, mida con precisión la velocidad de página actual de su sitio web. Use herramientas como Google PageSpeed Insights, GTmetrix o WebPageTest para medir la velocidad tanto en escritorio como en móvil. Estas herramientas proporcionan no solo puntuaciones sino también problemas específicos y sugerencias de mejora.

Paso 2: Optimización de imágenes Las imágenes ocupan la mayor parte del espacio en la mayoría de las páginas web. Cambie su tamaño a dimensiones apropiadas, convierta a formatos modernos como WebP o AVIF e implemente carga diferida para cargar imágenes solo cuando sea necesario. Las herramientas de compresión de imágenes pueden reducir el tamaño del archivo en un 50-80% sin pérdida de calidad.

Paso 3: Optimización de JavaScript y CSS Elimine JavaScript y CSS innecesarios, minifique archivos, incluya CSS crítico en línea y cargue el resto de forma asíncrona. Coloque JavaScript al final de la página cuando sea posible o use atributos defer/async para evitar bloquear la representación de la página.

Paso 4: Mejorar el tiempo de respuesta del servidor Mejore el rendimiento del servidor, migre a servicios de hosting más rápidos o use una CDN (Red de Entrega de Contenido) para entregar contenido más rápido a usuarios de todo el mundo. Optimizar consultas de bases de datos e implementar almacenamiento en caché del lado del servidor también es efectivo.

Paso 5: Utilizar el almacenamiento en caché del navegador Establezca encabezados de caché apropiados para que los usuarios que regresan puedan cargar páginas más rápido. Establezca períodos de caché largos para recursos estáticos (imágenes, CSS, JavaScript) e incluya versión o hash en los nombres de archivo para invalidar el caché cuando se actualice.

Paso 6: Usar HTTP/2 o HTTP/3 El uso de protocolos HTTP modernos permite que se transmitan múltiples archivos simultáneamente, mejorando significativamente la velocidad de carga de la página. La mayoría de los servidores y CDN modernos admiten HTTP/2.

Paso 7: Monitoreo continuo La optimización de la velocidad de página no es una tarea única. Verifique el impacto en la velocidad al agregar nuevo contenido o funciones, y monitoree el rendimiento regularmente para responder de inmediato cuando surjan problemas.

Ejemplos​

Ejemplo 1: Implementación de carga diferida de imágenes

<!-- Etiqueta de imagen básica -->
<img src="large-image.jpg" alt="Imagen grande">

<!-- Con carga diferida -->
<img src="large-image.jpg" alt="Imagen grande" loading="lazy">

<!-- Carga diferida avanzada con Intersection Observer API -->
<img data-src="large-image.jpg" alt="Imagen grande" class="lazy">

<script>
document.addEventListener("DOMContentLoaded", function() {
  const lazyImages = document.querySelectorAll("img.lazy");

  const imageObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        img.classList.remove("lazy");
        observer.unobserve(img);
      }
    });
  });

  lazyImages.forEach(img => imageObserver.observe(img));
});
</script>

Ejemplo 2: Optimización de CSS y JavaScript

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ejemplo de optimización de velocidad de página</title>

  <!-- CSS crítico en línea -->
  <style>
    /* Solo CSS necesario para la primera pantalla */
    body { margin: 0; font-family: sans-serif; }
    .hero { height: 100vh; background: #f0f0f0; }
  </style>

  <!-- Cargar CSS restante de forma asíncrona -->
  <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="styles.css"></noscript>
</head>
<body>
  <!-- Contenido de la página -->

  <!-- Cargar JavaScript al final de la página con atributo defer -->
  <script src="main.js" defer></script>

  <!-- O usar atributo async (cuando el orden de ejecución no importa) -->
  <script src="analytics.js" async></script>
</body>
</html>

Ejemplo 3: Optimización de imágenes en Next.js

import Image from 'next/image'

function BlogPost() {
  return (
    <article>
      <h1>Título de la publicación del blog</h1>

      {/* El componente Image de Next.js optimiza automáticamente */}
      <Image
        src="/images/hero.jpg"
        alt="Imagen hero"
        width={1200}
        height={630}
        priority // Carga prioritaria para imágenes de primera pantalla
        placeholder="blur" // Efecto de desenfoque para mejor carga
        blurDataURL="data:image/jpeg;base64,..."
      />

      <p>Contenido...</p>

      {/* Carga diferida para imágenes que requieren desplazamiento */}
      <Image
        src="/images/content.jpg"
        alt="Imagen de contenido"
        width={800}
        height={600}
        loading="lazy"
      />
    </article>
  )
}

export default BlogPost

Ejemplo 4: Configuración de almacenamiento en caché de respuesta del servidor (API de Next.js)

// pages/api/data.js
export default async function handler(req, res) {
  // Establecer encabezados de caché (caché durante 5 minutos, usar sin revalidación)
  res.setHeader(
    'Cache-Control',
    'public, s-maxage=300, stale-while-revalidate=59'
  )

  const data = await fetchDataFromDatabase()

  res.status(200).json(data)
}

Ejemplo 5: Optimización de paquetes con Webpack

// webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  mode: 'production',
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin({
      terserOptions: {
        compress: {
          drop_console: true, // Eliminar console.log
        },
      },
    })],
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          priority: 10,
        },
        common: {
          minChunks: 2,
          priority: 5,
          reuseExistingChunk: true,
        },
      },
    },
  },
  plugins: [
    // Compresión Gzip
    new CompressionPlugin({
      algorithm: 'gzip',
      test: /\.(js|css|html|svg)$/,
      threshold: 10240,
      minRatio: 0.8,
    }),
  ],
}

Ventajas y desventajas​

Ventajas​

  • Tasas de conversión más altas: La velocidad de página rápida aumenta la satisfacción del usuario y reduce las tasas de rebote, mejorando en última instancia las tasas de conversión. Según la investigación de Amazon, los ingresos aumentan en un 1% por cada 100ms de mejora en la carga de la página.

  • Clasificaciones de búsqueda mejoradas: Dado que Google utiliza oficialmente la velocidad de página como factor de clasificación, es más probable que las páginas más rápidas se clasifiquen más alto en los resultados de búsqueda. Esto es especialmente importante para la búsqueda móvil.

  • Mejor experiencia de usuario: Los usuarios confían y visitan sitios web rápidos con más frecuencia. Las investigaciones muestran que el 53% de los usuarios móviles abandonan un sitio si no se carga en 3 segundos.

Desventajas​

  • Costo y tiempo de optimización: Mejorar significativamente la velocidad de página requiere recursos de desarrollo considerables y tiempo. Los sistemas heredados o las aplicaciones web complejas pueden requerir una refactorización completa.

  • Compensaciones con funciones: A veces, agregar funciones como animaciones elegantes, imágenes de alta resolución o interacciones complejas puede ralentizar la velocidad de la página. Necesita encontrar un equilibrio entre funciones y rendimiento.

  • Consideración de diversos entornos: Dado que las velocidades de red, el rendimiento del dispositivo y los tipos de navegador de los usuarios difieren, es difícil garantizar un rendimiento perfecto en todos los entornos. La optimización se vuelve aún más compleja al considerar entornos de red lentos en países en desarrollo.

Preguntas frecuentes​

P: ¿Qué es una buena velocidad de página? R: Según los estándares Core Web Vitals de Google, el LCP (Largest Contentful Paint) debe estar dentro de 2.5 segundos, FID (First Input Delay) dentro de 100ms y CLS (Cumulative Layout Shift) dentro de 0.1 para recibir una calificación "buena". Idealmente, toda la página debe cargarse completamente en 3 segundos. Los sitios de comercio electrónico o los sitios móviles se benefician especialmente de velocidades más rápidas.

P: ¿Debo priorizar móvil o escritorio? R: Dado que Google utiliza la indexación móvil primero (Mobile-First Indexing), debe priorizar la optimización del rendimiento móvil. Además, más del 60% del tráfico web global proviene de dispositivos móviles, por lo que móvil también es más importante desde la perspectiva de la experiencia del usuario. Idealmente, debe proporcionar un buen rendimiento en ambos entornos.

P: ¿Cuánto más rápido puede hacer una CDN mi sitio? R: El uso de una CDN (Red de Entrega de Contenido) entrega contenido desde servidores cercanos a los usuarios, reduciendo significativamente la latencia. En promedio, puede reducir el tiempo de carga de la página en un 50% o más, especialmente efectivo para sitios web dirigidos a usuarios globales. Considere servicios CDN como Cloudflare, AWS CloudFront o Fastly.

P: Mi puntuación de velocidad de página es baja pero los usuarios dicen que se siente rápido. ¿Debo mejorar la puntuación? R: Las puntuaciones de herramientas como PageSpeed Insights son solo referencias; la experiencia real del usuario es más importante. Sin embargo, una puntuación baja significa que hay margen de mejora, por lo que es bueno optimizar dentro de límites razonables. Además, consulte los informes de Core Web Vitals en Google Search Console para monitorear métricas de rendimiento basadas en datos de usuarios reales. Las clasificaciones de búsqueda están influenciadas por los datos de usuarios reales.