Guía de Google PageSpeed Insights - 21 formas de mejorar tu puntuación

En el mundo dinámico, acelerado y en constante cambio de Internet, millones de sitios web compiten por la atención de los visitantes. Esta feroz competencia ha puesto un fuerte énfasis en la optimización de la velocidad y la experiencia del usuario, que son factores críticos que pueden hacer o deshacer tu sitio web.
Aquí es donde puedes hacer un buen uso de Google PageSpeed Insights (PSI). En esta guía, exploraremos qué es PageSpeed Insights y cómo puede ayudarte a que tu sitio web destaque en las páginas de resultados de los motores de búsqueda.

Al ingresar la URL de tu sitio web, PSI evaluará el rendimiento de tu sitio web y dividirá los resultados en varias métricas clave.

Estos resultados pueden ayudarte a entender qué está ralentizando tu sitio y qué puedes hacer para mejorarlo.

¿Cuál es la importancia de la puntuación de Google PageSpeed Insights?

En el competitivo panorama digital, tener un sitio web más rápido puede darte una ventaja sobre los competidores más lentos. Tener un sitio web rápido, estable, bien diseñado y fácil de navegar conduce a mayores conversiones y ventas.

Google PageSpeed Insights compara tu sitio web con varias métricas clave y asigna puntuaciones a cada una para comprender fácilmente cómo le va a tu sitio. Una puntuación más alta en PageSpeed Insights puede ayudarte a atraer más visitantes y posicionar tu sitio web en las primeras posiciones de las SERP (Search Engine Results Page). Usando la herramienta regularmente, puedes monitorizar el rendimiento de tu sitio y centrarte en áreas específicas que necesitan refinamiento para mantenerse al día con tus competidores.

Sin embargo, no debes obsesionarte con obtener lecturas 100/100 en todas las métricas. Incluso los sitios web más populares no pueden lograr una puntuación perfecta. Aumentar tu puntuación no debería ser a expensas de la experiencia del usuario.

Deberías esforzarte por obtener la puntuación más alta posible, pero mientras tu sitio web alcance las marcas “en verde” en todas las métricas, puedes estar tranquilo. Esto es especialmente cierto si ya has superado el umbral del 90%. Intentar aumentar la puntuación por encima de 90 a menudo no tiene beneficios prácticos, e invertir tiempo y recursos puede no valer la pena.

Google PageSpeed Insights vs Google Lighthouse

Tanto PageSpeed Insights como Lighthouse son herramientas desarrolladas por Google que miden el rendimiento de tu sitio web. Sin embargo, emplean diferentes métodos de evaluación:

• Google PageSpeed Insights adopta un enfoque más general – obtiene datos de la experiencia de los visitantes de tu sitio web en tiempo real. Además, PSI evalúa tu sitio web en un entorno controlado, lo que proporciona resultados que los desarrolladores encontrarán útiles. Por lo tanto, PageSpeed Insights pinta una imagen más amplia del rendimiento de tu sitio web.
• Lighthouse se enfoca en evaluar tu sitio web en una conexión simulada con las mismas condiciones preestablecidas – la misma red y dispositivos predefinidos. Proporciona más datos técnicos, lo que es particularmente útil para los desarrolladores que necesitan depurar sitios web.

¿Cómo afecta la puntuación de Google PageSpeed Insights al SEO?

Al calcular tu puntuación de SEO, Google no ejecuta tu sitio web a través de PageSpeed Insights. Por lo tanto, la puntuación PSI no afecta directamente tu clasificación.

Dicho esto, PageSpeed Insights mide las métricas, que son factores clave de clasificación para tu puntuación de SEO. Por lo tanto, al usar PSI, puedes mejorar la velocidad de tu sitio, la accesibilidad y la experiencia del usuario, lo que inevitablemente aumentará tu puntuación de SEO.

¿Cómo usar la herramienta Google PageSpeed Insights?

Usar Google PageSpeed Insights es bastante sencillo. Solo tienes que introducir la URL de tu página en la barra de direcciones en la pantalla. La herramienta evaluará tu sitio web y visualizará los resultados. A continuación tienes las instrucciones paso a paso.

1. Abre la página de PageSpeed Insights.
2. Escribe la URL de tu sitio web en la barra de direcciones y haz clic en Analizar.
   

   

3. PageSpeed Insights rastreará tu sitio web durante unos minutos y visualizará sus métricas de rendimiento. Examina los resultados de la prueba de velocidad para dispositivos Móviles y de Ordenador. Puedes cambiar entre Esta URL (muestra los resultados de la página específica que has enviado) y Origen (muestra los resultados de todo el dominio/sitio web).
   

   

4. Haz clic en Ampliar vista para obtener una vista detallada de las Métricas web principales (Core Web Vitals).
   

   

5. Ve a los resultados de Lighthouse y haz clic en uno de ellos para ver las incidencias pendientes.
   

   

   PageSpeed Insights mostrará una lista de problemas relacionados con la métrica seleccionada.

   

6. Desplázate hacia abajo hasta la sección Oportunidades para ver sugerencias de mejoras generales y estimaciones de cuánto tiempo de carga ahorraría cada una si se aplicara. Inspecciona la sección de Diagnósticos también, que sugiere mejoras avanzadas.
   

   

7. Haz clic en la flecha al lado de cada problema para ver su informe detallado.
   

   

Entendiendo las puntuaciones e informes de PageSpeed Insights

Las puntuaciones e informes de Google PageSpeed Insights proporcionan un análisis exhaustivo del rendimiento de tu página web, teniendo en cuenta varias métricas y puntos de referencia. Después de auditar tu página web, PSI asigna una puntuación entre 0 y 100 basada en su rendimiento. Esta puntuación se clasifica de la siguiente manera:

• 0 a 49 (pobre) – Indica que la velocidad de la página necesita una mejora seria.
• 50 a 89 (promedio) – El rendimiento de la página es decente, pero podría mejorarse.
• 90 a 100 (bien) – La página web está bien optimizada.

Cuanto más alto sea el puntaje, mejor será el rendimiento de tu página web y mejor será la experiencia del usuario.

Evaluación de las Métricas web principales (Datos de campo)

Los datos de campo proporcionan una instantánea del rendimiento de tu página web utilizando datos del mundo real recopilados de usuarios reales a través del Informe de experiencia de usuario de Chrome (CrUX). Estos incluyen First Contentful Paint (FCP), Largest Contentful Paint (LCP), Interaction to Next Paint (INP) y Cumulative Layout Shift (CLS).

• First Contentful Paint (FCP) – Mide el tiempo desde el momento en que la página comienza a cargar hasta que cualquier parte del contenido de la página se representa en la pantalla.
• Largest Contentful Paint (LCP) – Mide el tiempo que el elemento visual principal de la página carga en la pantalla. Es un buen indicador de rendimiento de velocidad.
• Interaction to Next Paint (INP) – Indica cuán receptivo es tu sitio. Específicamente, mide el tiempo que tarda tu página web en responder a las interacciones del usuario, como hacer clic en un botón o enlace, después de que la página ha terminado de cargar.
• Cumulative Layout Shift (CLS) – Representa la estabilidad visual de tus páginas web. Mide la frecuencia con la que un visitante experimenta cambios inesperados en el diseño cuando se carga la página.
• Time to First Byte (TTFB) – Esta métrica mide el tiempo que tarda en llegar el primer byte de un sitio web en respuesta a las solicitudes de los usuarios. TTFB es un indicador de la capacidad de respuesta y velocidad de un servidor web.

Estos resultados ilustran la experiencia de los visitantes de la vida real con tu sitio web. PageSpeed Insights considera que tu sitio web pasa la prueba Core Web Vitals para dispositivos móviles o de escritorio si superas el umbral de puntuación del 75%.

Datos de laboratorio

Los datos de laboratorio ofrecen información sobre el rendimiento de tu página web basada en pruebas en un entorno controlado. Los resultados son generados por Google Lighthouse, que simula una conexión en una red predefinida y dispositivos de escritorio y móviles seleccionados. Es útil para depurar problemas de rendimiento y ofrece métricas como Speed Index, Time to Interactive y Total Blocking Time.

Oportunidades, Diagnósticos y Auditorías Pasadas

Las oportunidades son recomendaciones de Google PageSpeed Insights de mejoras generales de la velocidad de carga de la página. Por otro lado, la sección Diagnóstico proporciona información adicional sobre cómo una página se adhiere a las mejores prácticas de desarrollo web.

Las auditorías aprobadas son los factores en los que tu página web ya sobresale, indicando los aspectos de tu sitio web que están bien optimizados.

21 pasos para mejorar la puntuación de Google PageSpeed Insights

Paso 1. Reducir los Tiempos de Respuesta del Servidor (TTFB)

Al reducir el tiempo de respuesta del servidor o Time to First Byte (TTFB), puedes mejorar el rendimiento de tu sitio web y aumentar tu puntuación en Google PageSpeed Insights.

TTFB es la cantidad de tiempo que tarda el navegador de un usuario en recibir el primer byte de datos de tu servidor web después de que se realiza una solicitud. Un TTFB alto puede llevar a un retraso en la visualización de la página web, causando un retraso notable para el usuario. Google recomienda un TTFB de menos de 200 milisegundos.

A continuación se muestran las estrategias más críticas para reducir el tiempo de respuesta del servidor.

• Elige un hosting de confianza – El factor más crucial para reducir el tiempo de respuesta del servidor es elegir un host de confianza con soluciones de hardware y software de alto rendimiento. SiteGround tiene servidores de primera línea y varias soluciones de mejora de velocidad que aseguran el rendimiento óptimo de tu sitio web y una velocidad de carga rápida.
• Habilitar el almacenamiento en caché del servidor – El almacenamiento en caché del servidor almacena una versión de tu sitio web en el servidor, reduciendo el tiempo que lleva generar una página.
• Optimiza tu base de datos – Una base de datos mal optimizada puede resultar en tiempos de respuesta lentos. Limpia regularmente los datos antiguos o innecesarios, y considera usar una solución de indexación para acelerar las consultas a la base de datos.
  Los usuarios de WordPress pueden considerar usar plugins que hacen un mantenimiento programado de la base de datos, como Speed Optimizer. Para activar esta función, inicia sesión en tu panel de control y ve a Speed Optimizer > Entorno > Mantenimiento programado de la base de datos. Haz clic en el botón Editar correspondiente para seleccionar las opciones de mantenimiento que realizará el plugin.

  

• Usa una red de distribución de contenido (CDN) – Las CDN pueden cachear el contenido de tu sitio en servidores de todo el mundo. Esto significa que la solicitud de un usuario no necesita viajar tan lejos, reduciendo el TTFB.
• Optimiza el código de tu aplicación – Asegúrate de que el código administrativo de tu sitio web esté limpio, sea eficiente y no contenga tareas innecesarias que puedan ralentizar el tiempo de respuesta.

¿Qué acciones específicas puedes tomar para implementar estos pasos? Descúbrelo en los siguientes pasos.

Paso 2. Reducir CSS y JavaScript

Los archivos CSS y JavaScript grandes y voluminosos pueden ralentizar significativamente tu sitio web y reducir tu puntuación de Google PageSpeed Insights. Reducir el tamaño de estos archivos puede acelerar tu sitio web al disminuir la cantidad de datos que necesitan ser descargados, analizados y ejecutados. A continuación, encontrarás algunas de las formas más efectivas de lograrlo.

• Minificación – Este es el proceso de eliminar todos los caracteres innecesarios del código fuente sin cambiar su funcionalidad. Para sitios web de WordPress, considera las funcionalidades Minimizar archivos CSS y Minimizar los archivos JavaScript del plugin Speed Optimizer.
• Eliminar código no utilizado – A medida que tu sitio web evoluciona, puede haber fragmentos de código CSS y JavaScript que ya no son necesarios.
• Usa estructuras de código compactas – Usando propiedades abreviadas de CSS y optimizando la estructura de tu código JavaScript puedes reducir drásticamente el tamaño de tus archivos. Evita escribir código largo y repetitivo donde una alternativa más compacta está disponible.

Aprende métodos prácticos para reducir los archivos JavaScript y CSS en las siguientes secciones.

Paso 3. Elimina los recursos bloqueadores de renderizado

Los recursos de bloqueo de renderizado son archivos que evitan que una página web se muestre hasta que se hayan cargado. Estos suelen incluir archivos CSS y JavaScript. Eliminar o minimizar estos recursos puede mejorar significativamente los tiempos de carga de tu sitio y el rendimiento general.

Puedes identificar los recursos que bloquean el renderizado en los informes de PageSpeed Insights. Luego, determina cuáles no son esenciales y elimínalos de la página. Sin embargo, ten en cuenta que hacerlo manualmente requiere que seas experto en codificación.

Si tu sitio web está construido en WordPress, puedes usar un plugin de WordPress para diferir dichos recursos. Recomendamos el plugin Speed Optimizer, que puede hacerlo con un solo clic. Abre tu panel de WordPress, navega a Speed Optimizer > Portada > JavaScript, y activa la opción Aplazar JavaScript que bloquee la visualización.

Una vez que hayas terminado de eliminar los recursos que bloquean el renderizado, pasa al siguiente paso, que es minificar JavaScript.

Paso 4. Minificar JavaScript

Minificar JavaScript es el proceso de eliminar caracteres innecesarios de tus archivos JavaScript, como espacios en blanco, caracteres de nueva línea y comentarios. Como resultado, reducirás el tiempo que lleva descargar y ejecutar estos scripts, mejorando el rendimiento general de tu sitio.

Hacerlo por tu cuenta tomará una parte significativa de tu tiempo. Sin embargo, Speed Optimizer será extremadamente útil si eres un usuario de WordPress. Si ya lo has instalado, ve a tu panel de control y selecciona Speed Optimizer > Portada > JavaScript. Activa la opción Minimizar los archivos JavaScript, y el plugin minimizará los archivos JavaScript automáticamente.

Una vez que hayas minificado los archivos JavaScript, procede a minificar el código CSS.

Paso 5. Minificar CSS

CSS (Hojas de Estilo en Cascada) se utiliza para el estilo y el diseño de tus páginas web. Al igual que JavaScript, los archivos CSS también pueden contener espacios en blanco y caracteres innecesarios, haciéndolos más grandes de lo necesario. Como resultado, los navegadores tardan más en leerlos, lo que afecta a la velocidad de carga de la página web.

Al minimizar las hojas de estilo CSS, comprimirás el código, mejorando el rendimiento de tu página web. Los usuarios de WordPress pueden usar el plugin Speed Optimizer para minificar CSS con un solo clic.

Accede a tu panel de control y navega a Speed Optimizer > Portada > CSS. Activa la opción Minimizar archivos CSS para minificar todos los archivos CSS de tu sitio web.

Además de minificar el código CSS, es posible que también desees eliminar el código CSS no utilizado. Aprende cómo en el siguiente paso.

Paso 6. Eliminar CSS no utilizados

CSS no utilizado se refiere a las reglas de estilo incluidas en tus archivos CSS que no se usan para diseñar o mostrar tus páginas web. Podrían ser remanentes de diseños anteriores, estilos o temas de WordPress aplicados a componentes que ya no existen en tu sitio.

Estas reglas de estilo redundantes crean una sobrecarga innecesaria, causando que tus archivos CSS sean más grandes de lo necesario. Esto significa más datos para que el usuario descargue y más para que el navegador los analice, lo que resulta en tiempos de carga más lentos y una puntuación más baja en Google PageSpeed Insights.

Eliminar este CSS no utilizado es crucial para optimizar el rendimiento de tu sitio web. Puedes usar Chrome DevTools de Google u otra herramienta online para encontrar qué reglas CSS no son usadas por tu sitio.

Una vez que hayas identificado el CSS no utilizado, el siguiente paso es eliminar estas reglas innecesarias. Si no estás seguro de si una regla se puede usar en el futuro, aíslala en un archivo CSS separado en lugar de eliminarla.

Después de hacer los cambios, prueba a fondo tu sitio web para asegurarte de que eliminar el CSS no utilizado no ha afectado la funcionalidad o la apariencia de tu sitio.

Ahora que has optimizado el código de tu sitio web, también deberías considerar implementar técnicas de optimización de velocidad. Continúa con los siguientes pasos.

Paso 7. Habilitar la compresión GZip

La compresión GZip es una técnica de optimización de rendimiento vital que puede mejorar en gran medida tu puntuación de Google PageSpeed Insights.

Cuando un usuario visita tu sitio web, se realiza una solicitud a tu servidor para que entregue los archivos necesarios. Cuanto más grandes son estos archivos, más tiempo tardan en viajar desde el servidor al navegador. GZip comprime estos archivos en un archivo ZIP, haciéndolos más pequeños y por lo tanto más rápidos de entregar. El navegador del visitante descarga y descomprime los archivos y los usa para renderizar el sitio web.

Hay varias formas de habilitar la compresión GZip para tu sitio web.

• Activa GZip en tu servidor – Este proceso variará dependiendo de tu servidor. Para servidores Apache, puedes usar el archivo .htaccess para habilitar la compresión GZip. Para los servidores Nginx, necesitarás añadir las directivas apropiadas en tu archivo de configuración Nginx.
  Si tu web está alojada en SiteGround, ya usa compresión GZip. SiteGround ha habilitado la compresión GZip y Brotli en todos los servidores por defecto.
• Usar un plugin – Varios plugins pueden habilitar la compresión GZip si tu sitio web está construido con WordPress.

Otra forma de mejorar el rendimiento de tu sitio web es habilitar el almacenamiento en caché del navegador. El siguiente paso cubre los métodos más comunes, así que sigue leyendo.

Paso 8. Habilitar el almacenamiento en caché del navegador

El almacenamiento en caché del navegador es una técnica que puede reducir drásticamente los tiempos de carga de tu sitio web para los visitantes que regresan, lo que lleva a una mejora en la puntuación de Google PageSpeed Insights.

Cuando un usuario visita una página web por primera vez, el navegador almacena en caché muchos elementos de la página, incluidas hojas de estilo, archivos JavaScript, imágenes y el documento HTML. El almacenamiento en caché implica almacenar estos archivos localmente en el dispositivo del usuario. Cuando el usuario vuelve a visitar la página, el navegador no necesita recargar la página completa, sino que puede recuperar la mayoría de los archivos de la caché, reduciendo así el tiempo de carga significativamente.

Así es como puedes habilitar el almacenamiento en caché del navegador:

• Aprovechar la caché del navegador con .htaccess – Si tu sitio está en un servidor Apache, puedes habilitar la caché del navegador añadiendo directivas a tu archivo .htaccess. Necesitarás especificar las instrucciones de cacheado para los diferentes tipos de archivo de acuerdo a la frecuencia con la que se actualizan. Para obtener instrucciones detalladas, lee esta guía sobre cómo aprovechar la caché del navegador para imágenes, CSS y JS.
• Utilizar encabezados Cache-Control – El encabezado HTTP Cache-Control contiene directivas para el almacenamiento en caché tanto de solicitudes como de respuestas. Las directivas especifican quién puede cachear la respuesta, bajo qué condiciones y por cuánto tiempo.
• Usa un plugin de cache – Para WordPress, varios plugins pueden habilitar el cache del navegador con unos pocos clics. Recomendamos Speed Optimizer, que presenta varias opciones de caché y mejora de velocidad. Para habilitar el almacenamiento en caché del navegador, ve a tu panel de control, abre Speed Optimizer > Caché, y activa la opción Caché basada en archivos.
  

  

Además de la caché del navegador, también deberías aprovechar las capacidades de caché de tu servidor. Continúa con el siguiente paso para obtener más información.

Paso 9. Habilita la caché del servidor

El almacenamiento en caché del servidor es una de las técnicas más efectivas para aumentar tu puntuación en Google PageSpeed Insights. Almacena una copia en caché de tu sitio web en el servidor y la entrega al usuario final. Esto elimina la necesidad de que el servidor cree dinámicamente la misma página cada vez que un visitante llega a ella, reduciendo significativamente la carga del servidor.

Siendo usuario de SiteGround, puedes aumentar la velocidad de tu sitio web con SuperCacher, una solución interna con tres capas de caché: estática, dinámica y Memcached. Descubre cómo funciona en este tutorial de SuperCacher.

Usar una red de distribución de contenido (CDN) es otra forma de aumentar la velocidad de tu sitio. Lee el siguiente paso para saber cómo implementarla.

Paso 10. Usa una Content Delivery Network (CDN)

Una forma de hacer que la experiencia sea consistente para todos los usuarios en todo el mundo es utilizando una red de entrega de contenido (CDN). Una CDN creará copias de tu sitio web en su red de servidores, y los visitantes cargarán el sitio web desde el más cercano. Esto asegurará un rendimiento estable y un tiempo de carga independientemente de la ubicación de tus visitantes.

Los usuarios de SiteGround pueden beneficiarse de SiteGround CDN como parte de su plan de hosting. Para obtener más información sobre el servicio, lee esta guía sobre SiteGround CDN.

Luego, optimiza las imágenes de tu sitio web para mejorar la velocidad de carga. Sigue las instrucciones en el siguiente paso.

Paso 11. Optimiza tus imágenes

Las imágenes a menudo representan un porcentaje significativo del tamaño total de una página web. Codificar y optimizar tus imágenes de manera eficiente puede llevar a mejoras sustanciales en los tiempos de carga y el rendimiento general del sitio web. Esto, a su vez, puede tener un impacto positivo en tu puntuación de Google PageSpeed Insights.

La optimización de imágenes implica elegir el formato, el nivel de compresión y la resolución correctos, manteniendo un nivel aceptable de calidad. Aquí hay algunas estrategias para optimizar tus imágenes de manera eficiente:

• Elige el formato de imagen correcto – Los diferentes formatos de archivo de imagen tienen diferentes potencias. JPEG es una buena opción para fotografías o imágenes complejas con muchos colores, mientras que PNG es mejor para imágenes que requieren transparencia.
• Usa formatos de imagen de próxima generación – Los formatos más nuevos, como WebP, ofrecen una compresión superior y más funciones en comparación con los formatos más antiguos. Las imágenes guardadas en estos formatos son pequeñas mientras que su calidad se mantiene.
  Si tu servidor soporta WebP, usa imágenes en este formato para mejorar la velocidad y el rendimiento de tu sitio. SiteGround ha implementado WebP desde hace mucho tiempo en todos sus servidores.
  Si tu sitio web está construido en WordPress, considera usar un plugin para convertir todas las imágenes existentes en tu Media Library a WebP. Speed Optimizer es uno de estos plugins. Además, tiene un mecanismo de respaldo que permite que tu sitio web muestre los archivos de imagen antiguos en lugar de WebP en caso de que los navegadores de los visitantes sean incompatibles con WebP. Para convertir las imágenes, abre tu panel de control, navega a Speed Optimizer > Medios, y activa Usar imágenes WebP.

  

  
  

• Aplicar compresión – Cuanto más pequeños son los archivos de imagen, más rápido carga tu sitio web. Muchas herramientas de edición de imágenes, plugins y servicios online ofrecen opciones para comprimir imágenes, reduciendo su tamaño. Sin embargo, ten cuidado de equilibrar la compresión con la calidad de la imagen.
  Speed Optimizer también puede ser útil para los usuarios de WordPress en este sentido. Puede optimizar todas las imágenes existentes y proporciona varios ajustes de compresión. Desde tu panel de control, navega a Speed Optimizer > Medios, y presiona el botón Editar junto a Compresión de imágenes. En la siguiente ventana emergente, puedes elegir la configuración de las nuevas imágenes comprimidas.

  

• Optimizar la resolución – Asegúrate de que tus imágenes no sean más grandes de lo necesario. Servir una imagen a una resolución más alta de la necesaria da como resultado archivos de mayor tamaño y tiempos de carga más lentos.
• Usa imágenes flexibles – Implementa imágenes flexibles usando los atributos srcset y sizes de HTML. Esto te permite servir el tamaño de imagen correcto basado en el dispositivo del usuario y el tamaño de la ventana gráfica, disminuyendo la transferencia de datos innecesaria.
• Aprovechar la caché del navegador y una CDN – La caché del navegador y las redes de distribución de contenido (CDN) también pueden ayudar a mejorar los tiempos de carga de las imágenes. El almacenamiento en caché permite a los visitantes frecuentes cargar imágenes localmente en lugar de descargarlas de nuevo, mientras que una CDN puede servir imágenes desde el servidor más cercano al usuario.

La optimización de la imagen es crucial, pero puedes mejorar aún más el rendimiento de tu sitio al diferir las imágenes fuera de pantalla. Lee el siguiente paso para aprender cómo hacerlo.

Paso 12. Diferir imágenes fuera de pantalla

A menudo, cuando abres un sitio web, la página completa no cabe en la pantalla, y necesitas desplazarte hacia abajo para ver todo el contenido y las imágenes. Estas imágenes no visibles se llaman imágenes fuera de pantalla. Los navegadores los descargan incluso antes de que te desplaces hacia abajo, lo que ralentiza la visualización de la página.

Para mejorar la velocidad de carga, puedes diferir las imágenes fuera de pantalla. Una solución muy útil es la carga diferida. Al usarla, los navegadores priorizarán la carga del contenido “above the fold” y visualizarán las imágenes fuera de pantalla una vez que estén a la vista.

Speed Optimizer puede ayudarte una vez más si eres un usuario de WordPress. Ve a Speed Optimizer > Medios > Optimización de medios, y activa Carga diferida de medios.

Indudablemente, las imágenes tardan más en cargar, y cuidarlas mejora drásticamente el rendimiento de tu sitio web. Pero hay otros activos a los que debes prestar atención. La carga de la fuente web también puede afectar la experiencia del usuario. La siguiente sección aborda acciones para mejorar este aspecto.

Paso 13. Asegúrate de que el texto permanece visible durante la carga de la fuente web

Las fuentes web personalizadas se han vuelto cada vez más populares en el diseño web moderno. Sin embargo, las fuentes web pueden afectar el rendimiento de la página, particularmente la velocidad de carga percibida de tu contenido de texto. Por defecto, los navegadores ocultarán el texto que usa una fuente web hasta que la fuente esté completamente cargada, un comportamiento conocido como “Flash of Invisible Text” (FOIT). Esto puede llevar a una mala experiencia de usuario, afectando tu puntuación de Google PageSpeed Insights.

Para proporcionar una experiencia de usuario fluida, asegúrate de que el texto permanece visible durante la carga de la fuente web. De esta manera, el navegador mostrará el texto inmediatamente en una fuente alternativa y luego lo cambiará con la fuente web una vez que cargue. Este comportamiento, conocido como “Flash of Unstyled Text” (FOUT), es generalmente un enfoque más fácil de usar.

Aquí tienes cómo asegurarte de que el texto permanece visible durante la carga de la webfont:

• Usar la propiedad CSS font-display – Esta propiedad controla cómo se muestra una fuente en función de si se descarga y está lista para usar y cuándo. El valor font-display: swap; asegura que el texto permanezca visible durante la carga de la fuente web usando una fuente del sistema hasta que la fuente personalizada esté lista.
  A continuación, puedes ver un ejemplo de un código CSS que incorpora font-display: swap; descriptor.

   @font-face {
    font-family: ExampleFont;
    src: url(/path/to/fonts/examplefont.woff) format('woff'),
         url(/path/to/fonts/examplefont.eot) format('eot');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

• Alojar fuentes localmente – Alojar fuentes en tu servidor en lugar de un servidor de terceros puede reducir los tiempos de carga.
• Limita el número de familias tipográficas – Si bien la variedad en las fuentes puede mejorar tu diseño, también añaden peso extra a tu página. Intenta limitar el número de familias de fuentes, grosores y estilos que estás utilizando a solo los necesarios.
• Precargar fuentes web clave – La precarga hace que el navegador descargue las fuentes web al cargar la página antes de que se analice todo el CSS. Los sitios web de WordPress pueden usar el plugin Speed Optimizer para la precarga de fuentes web.
  Para habilitar esta función, abre tu panel de control, ve a Speed Optimizer > Portada > General, y activa Optimización de fuentes web. También puedes seleccionar qué fuentes web deben precargarse desde la opción Precarga de fuentes si administras varias.

  

Hasta ahora, hemos cubierto las medidas más generales y críticas. Sin embargo, puedes implementar estrategias más específicas para mejorar aún más tu sitio web. Comencemos con las instrucciones para prevenir redirecciones excesivas.

Paso 14. Evita redirecciones excesivas

A menudo, tienes que usar redirecciones cuando mueves o eliminas páginas. Su propósito es enviar a los usuarios y motores de búsqueda a una URL diferente a la que originalmente solicitaron. Sin embargo, redirecciones excesivas o innecesarias pueden resultar en tiempos de carga de la página más lentos, impactando negativamente en la experiencia del usuario y tu puntuación de Google PageSpeed Insights.

Cada redirección desencadena un ciclo adicional de solicitud-respuesta HTTP, lo que aumenta el tiempo total que tarda una página en cargar. Esto es especialmente problemático para los usuarios móviles, que a menudo dependen de conexiones de red menos confiables.

Aquí tienes cómo evitar redirecciones excesivas y optimizar el rendimiento de tu sitio web:

• Minimizar cadenas de redirecciones – Una cadena de redirecciones ocurre cuando hay más de una redirección entre la URL original y la página final. Es importante actualizar todos los enlaces para que apunten a la URL de destino final para minimizar estas cadenas.
• Usa enlaces directos – Siempre que sea posible, asegúrate de usar enlaces directos en tu navegación, sitemap y estructura del documento.
• Revisa regularmente tus redirecciones – Es una buena práctica auditar tu sitio de forma regular en busca de redirecciones innecesarias.
• Usa las redirecciones sabiamente para sitios móviles – Si tienes sitios separados para ordenadores y móviles, asegúrate de que estás redirigiendo a los usuarios móviles correctamente. Evita redirecciones defectuosas, como enviar a un usuario a una página irrelevante o usar una redirección cuando un enlace directo sería más apropiado.

Después de arreglar los problemas de redirección pendientes, puedes examinar el encadenamiento de las solicitudes críticas. Encuentra más información en la siguiente sección.

Paso 15. Evita encadenar peticiones críticas

El encadenamiento ocurre cuando los recursos dependen unos de otros. Por ejemplo, un archivo JavaScript o CSS solicitado dentro de otro recurso (como un documento HTML) crea una cadena. El navegador tiene que esperar hasta que recibe la respuesta HTML para descubrir la solicitud de JavaScript o CSS, luego esperar de nuevo para obtener la respuesta JS o CSS.

Cuanto más larga sea la cadena, más tiempo tardará la página en renderizarse, lo que afectará negativamente a tu puntuación de Google PageSpeed Insights. Emplear los siguientes métodos puede ayudarte a minimizar el encadenamiento de recursos.

• Minimiza el número de recursos críticos – Solo incluye recursos que sean absolutamente necesarios para el renderizado inicial de la página. Los archivos JavaScript no críticos o CSS se pueden cargar de forma asíncrona o diferir hasta después del primer render. Para WordPress, puedes usar plugins de optimización como Speed Optimizer que contienen las características Minimizar archivos CSS, Minimizar los archivos JavaScript y Aplazar JavaScript que bloquee la visualización.
• Optimiza el orden de tus solicitudes – Prioriza la carga de contenido visible o contenido en la mitad superior de la página. Esto puede asegurar que tus usuarios vean algo en la pantalla lo más rápido posible. Usa Speed Optimizer y su opción Carga diferida de medios si tu sitio web está basado en WordPress.
• Precargar recursos clave – Puedes usar la precarga para cargar recursos clave antes y reducir la longitud de la cadena de solicitud. Por ejemplo, puedes usar Optimización de fuentes web y Precarga de fuentes en Speed Optimizer para tu sitio WordPress.

Llevando las cosas a un nivel superior, puedes mejorar la velocidad de carga precargando solicitudes clave. Lee la siguiente sección para aprender cómo hacerlo.

Paso 16. Precargar solicitudes de claves

Las solicitudes clave son solicitudes críticas que la página ejecuta con prioridad en una etapa temprana de carga. Pueden ser cualquier cosa – archivos JavaScript, estilos CSS o fuentes web. Aplicar precarga a las solicitudes clave puede mejorar significativamente el tiempo de carga de tu página. Puedes implementar la precarga de solicitudes de claves con algunas técnicas:

• Identificar recursos clave – Estos pueden ser archivos JavaScript o CSS críticos, imágenes importantes o fuentes web que se necesitan al principio del proceso de carga de la página.
• Usa la directiva Preload – Añade una etiqueta de enlace en la encabezado de tu documento HTML con `rel=”preload”` y href apuntando al recurso que quieres precargar. Por ejemplo:

  <link rel="preload" href="/styles/important.css" as="style">

  El atributo as es necesario para especificar el tipo de contenido a precargar.

• Precarga Web Fonts – Las fuentes web a menudo se descubren tarde en el proceso de carga. Precargar las fuentes web clave puede hacer que estén disponibles antes, reduciendo la posibilidad de un “destello de texto sin estilo”. Por ejemplo:

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

  Si administras un sitio WordPress, puedes usar un plugin como Speed Optimizer para precargar las fuentes web.

• Sé selectivo – Precargar demasiados recursos puede dañar el rendimiento, ya que puede resultar en la descarga de recursos no críticos que compiten con recursos más importantes. Sé selectivo con lo que precargas.
• Use Preconnect o Prefetch cuando sea apropiado – Preconnect puede establecer conexiones tempranas con orígenes de terceros importantes. Prefetch, por otro lado, puede ayudar a cargar recursos que se utilizarán en la próxima carga de navegación/página.

Ahora podemos centrarnos en optimizar el contenido animado de tu sitio web. El siguiente paso describe los métodos más beneficiosos.

Paso 17. Usa formatos de vídeo para contenido animado

El contenido animado es una excelente manera de atraer visitantes y enriquecer su experiencia de usuario. Sin embargo, el formato que elijas para tus animaciones puede afectar significativamente la velocidad de carga de tu sitio y el rendimiento general.

Tradicionalmente, las animaciones a menudo se creaban como GIF, pero los GIF pueden ser bastante grandes, lo que resulta en tiempos de carga lentos. Una mejor alternativa es usar formatos de video para contenido animado. Los formatos de vídeo, como MP4 o WebM, son más eficientes en la compresión y pueden ofrecer una mayor calidad con un tamaño de archivo más pequeño.

A continuación, encontrarás algunos consejos para administrar contenido animado.

• Convierte GIFs a formatos de video – Herramientas como FFmpeg o convertidores online pueden ayudarte a convertir GIFs existentes a formatos MP4 o WebM. Luego puedes usar el elemento de video HTML5 para incrustarlos en tu sitio.
• Usa la configuración de compresión correcta – Al crear un video, experimenta con diferentes ajustes de calidad y compresión para crear un equilibrio entre el tamaño del archivo y la calidad visual.
• Reproducción automática y bucle – Puedes hacer que tus videos se comporten como GIFs usando los atributos de reproducción automática y bucle en la etiqueta del video. Recuerda añadir `muted` a la reproducción automática de videos en línea, especialmente en dispositivos móviles.
• Usa una plataforma de alojamiento de vídeos – Considera usar una plataforma de alojamiento de vídeos como YouTube o Vimeo. Esto puede reducir la carga en tu servidor, proporcionar una buena experiencia al espectador en varios dispositivos y conexiones a Internet, y ofrecer funciones adicionales como análisis de video.

A continuación, vamos a examinar algunas prácticas de mantenimiento para aplicaciones CMS populares como sitios WordPress.

Paso 18. Reducir el uso de código de terceros

El código de terceros son scripts alojados en otros sitios web pero cargados y ejecutados en tu sitio. Estos pueden ser scripts para análisis, publicidad, atención al cliente, botones para compartir en redes sociales y otras características. Por lo general, proporcionan una funcionalidad útil, pero pueden afectar significativamente el tiempo de carga de tu sitio y el rendimiento general.

Cada script de terceros requiere una solicitud HTTP adicional, que se suma al tiempo de carga. Además, dado que estos scripts están alojados en servidores externos, tienes menos control sobre su rendimiento.

Las siguientes pautas pueden ayudar a reducir su impacto:

• Auditar scripts de terceros – Comienza identificando todos los scripts de terceros que se ejecutan en tu sitio web. Puedes usar la pestaña DevTools de Google Chrome para hacer esto. Evalúa el valor que proporciona cada script en comparación con su impacto en el rendimiento.
• Limitar el número de scripts de terceros – Usa solo los scripts de terceros necesarios. Cada script que elimines mejorará el tiempo de carga de tu sitio y el rendimiento general.
• Cargar scripts asíncronamente – La carga asíncrona permite que el resto de la página web continúe cargando mientras se descarga el script. Aplicar esto a scripts de terceros puede evitar que bloqueen la visualización de la página.
• Usar Lazy Loading (carga diferida de medios) – Considera usar Lazy Loading para contenido de terceros que no es inmediatamente visible (como widgets o incrustaciones). Esta técnica retrasa la carga de los recursos hasta que se necesitan, como cuando un usuario se desplaza hacia abajo en la página.
• Alojar scripts localmente – Si el proveedor externo lo permite, considera alojar los scripts localmente en tu propio servidor. Esto te da más control sobre su rendimiento y elimina una búsqueda de DNS adicional.

Otro problema que se encuentra a menudo en los sitios web de WordPress es un tamaño grande del Document Object Model (DOM). Aprende cómo lidiar con esto en el siguiente paso.

Paso 19. Reducir el tamaño del Document Object Model (DOM)

El Document Object Model (DOM) es una representación de tu página web que los navegadores usan para construir la interfaz visual. Cuando una página web tiene un DOM complejo o grande, significa que hay numerosos elementos en la página que el navegador necesita procesar y administrar. Esto puede ralentizar el tiempo de carga de la página, afectar la interacción del usuario y reducir tu puntuación en Google PageSpeed Insights.

Un DOM grande puede ser el resultado de tener elementos profundamente anidados o simplemente demasiados elementos en general en la página. Un alto número de elementos requiere más memoria y recursos de CPU, y ralentiza el renderizado de la página.

Aquí tienes algunas estrategias para reducir el tamaño de tu DOM:

• Simplificar la estructura de la página – Intenta simplificar la estructura HTML tanto como sea posible. Reduce la profundidad y el número de elementos secundarios y evita relaciones padre-hijo innecesarias.
• Eliminar elementos innecesarios – Elimina elementos que no contribuyen a la interfaz visual o funcionalidad de la página. Esto puede incluir elementos vacíos o duplicados.
• Dividir páginas grandes en páginas más pequeñas – Una página grande con mucho contenido generará inevitablemente un DOM grande. Considera dividir las páginas grandes en varias más pequeñas.
• Limita los elementos de la página – Como regla general, intenta limitar tu página web a menos de 1500 elementos. Las páginas con más que esto a menudo pueden experimentar problemas de rendimiento.
• Contenido con carga diferida – Considera la opción de Lazy Load para el contenido en la parte inferior de la página. Esto puede retrasar el procesamiento de partes no críticas de tu página, reduciendo el tamaño inicial del DOM.
• Usa temas de buena reputación – Muy a menudo, el causante de un DOM de gran tamaño es un tema de WordPress que contiene mucho código basura. Usa temas probados con código limpio para evitar generar un DOM grande.

Finalmente, asegúrate de que tu sitio web utiliza las últimas tecnologías, que generalmente mejoran el rendimiento y la seguridad. Lee los dos últimos pasos para más información.

Paso 20. Implementa HTTP/2

HTTP/2, la última versión de HTTP, ofrece mejoras de rendimiento sobre su predecesor, como multiplexación y compresión de encabezados. Implementar HTTP/2 puede mejorar significativamente la puntuación de tu sitio web.

Asegúrate de que tu servidor web está configurado para usar este protocolo para asegurar un mejor tiempo de carga y rendimiento. Los servidores de SiteGround han incorporado esta característica desde hace mucho tiempo. Para obtener más información, lee esta guía sobre qué es HTTP/2.

Paso 21. Usa las últimas tecnologías PHP

La mayoría de los sitios web, incluyendo los sistemas de gestión de contenido (CMS) más populares como WordPress, están construidos en PHP. PHP es un lenguaje de programación que constantemente se somete a actualizaciones y revisiones que incluyen mejoras de rendimiento y seguridad.

Usa la última versión de PHP posible para aprovechar todas las actualizaciones de rendimiento y seguridad, que pueden aumentar tu puntuación PSI. SiteGround siempre es compatible con las últimas tecnologías, y PHP no es una excepción. Puedes habilitar un PHP gestionado, que establecerá automáticamente la última versión estable de PHP.

Además, hemos desarrollado nuestra propia configuración de servidor PHP, llamada PHP Ultrarrápido, que puede aumentar la velocidad de tu sitio web hasta en un 30%. Para obtener más información, lee esta guía sobre PHP Ultrarrápido.

Conclusión

Google PageSpeed Insights es una herramienta indispensable para cualquier propietario o desarrollador de sitios web que busque optimizar el rendimiento del sitio web. Al proporcionar métricas valiosas y recomendaciones prácticas, ayuda a identificar áreas de mejora que pueden mejorar significativamente el tiempo de carga de tu sitio web, la usabilidad y la experiencia general del usuario.

Este artículo muestra múltiples estrategias para mejorar tu puntuación en PageSpeed Insights. Esperamos que les des un buen uso y hagas la mejor versión de tu sitio web.

Preguntas frecuentes sobre Google PageSpeed Insights

¿Afecta Google PageSpeed Insights al ranking SEO de mi sitio web?

No, Google no tiene en cuenta la puntuación de PageSpeed Insights cuando formula el ranking SEO de tu sitio web. Sin embargo, el PSI mide métricas como la accesibilidad y el rendimiento que formulan el índice de optimización de motores de búsqueda.

¿Cuánto cuesta Google PageSpeed Insights?

Google PageSpeed Insights es una herramienta totalmente gratuita, y Google no planea convertirla en un servicio premium.

¿Google es propietario de Google PageSpeed Insights?

Sí. Tanto PageSpeed Insights como Lighthouse son herramientas desarrolladas y propiedad de Google.

¿Por qué hay una diferencia entre las puntuaciones de PageSpeed Insights y Lighthouse?

Las puntuaciones de PageSpeed Insights y Lighthouse difieren debido a los diferentes enfoques que ambas herramientas toman para probar tu sitio web. PageSpeed Insights se basa en datos en tiempo real recopilados de los usuarios que visitan tu sitio web en varias redes y dispositivos. Lighthouse prueba tu sitio web en un entorno controlado con condiciones prefijadas: la misma red y los mismos dispositivos simulados.