Guía SEO para mejorar la velocidad de la página y los tiempos de carga

La velocidad de la página ha sido durante mucho tiempo un factor de clasificación para Google. Desde el primer anuncio en 2010, seguido de una actualización posterior en 2018 y finalmente con la introducción de Core Web Vitals en 2020, está claro que el tiempo de carga del sitio web es una prioridad principal para los motores de búsqueda. En este artículo, exploraremos qué significa hoy la velocidad de la página, cómo medirla y, lo que es más importante, cómo mejorar las puntuaciones de velocidad de la página de tu sitio web.

Comprender los Core Web Vitals de Google

Durante mucho tiempo, el propio Google tuvo dificultades para medir la velocidad de la página. ¿Cuáles son las métricas correctas? ¿Datos de campo o datos de laboratorio? ¿Se mide la página completa o solo la parte superior? Hay docenas de métricas que entran en juego en la velocidad de la página y ha sido un largo camino para descubrir cuáles de ellas son realmente importantes para el usuario.

Al final, Google se centró en un conjunto de tres métricas consideradas las más importantes para la velocidad de la página: Largest Contentful Paint (LCP), First Input Delay (FID) y Cumulative Layout Shift (CLS). Conocidas conjuntamente como Core Web Vitals, estas métricas están pensadas para medir la velocidad percibida en lugar de la velocidad real.

Largest Contentful Paint (LCP)

El Largest Contentful Paint es el tiempo que tarda en cargarse por completo el elemento más grande dentro de la ventana de visualización. Los puntos de referencia para esta métrica son los siguientes:

• Bueno: menos de 2,5 segundos
• Necesita mejoras: de 2,5 a 4 segundos
• Pobre: más de 4 segundos

Al ser común que el elemento más grande sea una imagen, la optimización de imágenes es la principal contribución a esta métrica. Además, el LCP depende de los tiempos de respuesta del servidor, el código que bloquea la renderización y la renderización del lado del cliente.

First Input Delay (FID)

El First Input Delay es el retraso entre el momento en que se pinta un elemento interactivo y el momento en que se vuelve funcional. Por ejemplo, se pinta un botón en la página, se hace clic en él, pero aún no responde. Los puntos de referencia para esta métrica son los siguientes:

• Bueno: menos de 100 milisegundos
• Necesita mejoras: de 100 a 300 milisegundos
• Malo: más de 300 milisegundos

FID se puede optimizar con la división del código y el uso de menos JavaScript.

Cambio de diseño acumulativo (CLS)

El Cambio de diseño acumulativo mide si los elementos de la página se mueven durante la carga. Por ejemplo, una página parece lista para usar, pero luego aparece una nueva imagen en la parte superior y el resto del contenido se desplaza hacia abajo: esto es un cambio de diseño. Los puntos de referencia para esta métrica son los siguientes:

• Bueno: menos de 0,1
• Necesita mejoras: de 0,1 a 0,25
• Malo: más de 0,25

CLS depende de que las dimensiones de los elementos se configuren correctamente y de que los recursos se carguen en una secuencia específica, de arriba a abajo.

Herramientas para medir la velocidad de la página

Hay muchas herramientas proporcionadas por Google que ofrecen los Core Web Vitals como parte de su verificación de página:

• Google PageSpeed Insights
• Google Search Console
• Chrome Lighthouse
• GTmetrix

Sin embargo, algunas de estas herramientas utilizan datos de laboratorio en lugar de datos de campo, mientras que Google clasifica sus páginas exclusivamente en función de los datos de campo. Además, la mayoría de las herramientas solo pueden evaluar una página a la vez, lo que no es un enfoque práctico para optimizar todo el sitio web.

Entre las herramientas de Google, la mejor para usar es probablemente Google Search Console. Allí, puede ir a Experiencia > Core Web Vitals y ver el informe de todas sus páginas a la vez. Aunque el informe de alto nivel se proporciona en bloque, identificar qué páginas se ven afectadas por qué problemas podría ser un proceso tedioso.

Una mejor manera de medir la velocidad de la página podría ser el uso de WebSite Auditor. Allí puede ir a Estructura del sitio > Auditoría del sitio y obtener un informe de velocidad de página para todo el sitio web, así como ver todas las páginas afectadas, todo desde un solo panel. O puede ir a Auditoría del sitio > Páginas > Velocidad de la página y ver una lista de páginas con los problemas de velocidad que las afectan. Hacer clic en cualquier página también le dará una lista de los elementos de la página que se pueden optimizar para mejorar su rendimiento.

Optimizar la velocidad de la página

Ahora que tiene una lista de las páginas afectadas, es hora de trabajar en la mejora de la velocidad de su página. A continuación se presentan algunas de las oportunidades de optimización más comunes y algunos consejos sobre cómo aprovecharlas.

Establecer dimensiones de imagen

Cuando omite las dimensiones de la imagen de su código, el navegador puede tardar un tiempo en cambiar el tamaño correctamente. Esto significa que el contenido de su página saltará y afectará negativamente su puntuación CLS.

Para evitar este problema, siempre configure las propiedades de ancho y alto para sus imágenes, de la siguiente manera:

<img src="cuscino.jpg" width="640" Height="360" alt="cuscino viola con motivo a fiori" />

Utilizar formatos de imagen modernos

No todos los formatos de imagen son iguales. Nuestros confiables formatos JPEG y PNG ahora tienen peores características de compresión y calidad que AVIF, JPEG 2000, JPEG XR y WebP.

Entre los formatos enumerados, WebP es probablemente el primero a considerar. Admite compresión con y sin pérdidas, además de permitir la transparencia y la animación. Además, los archivos WebP suelen ser entre un 25% y un 35% más ligeros que los PNG y JPEG de calidad similar. Y, aunque en el pasado era una preocupación común que el formato WebP no fuera compatible con algunos navegadores, recientemente Safari agregó soporte para WebP en la versión 14, por lo que el soporte total para el formato entre navegadores ahora supera el 90%.

Comprimir imágenes

Independientemente de si utiliza formatos de imagen de próxima generación o no, comprimir sus imágenes sigue siendo una forma válida de reducir el tamaño total de la página. Una vez más, si su sitio web está construido sobre WordPress, puede comprimir sus imágenes de forma masiva con plugins de optimización de imágenes como WP Smush. También puede usar compresores en línea si no desea instalar demasiados plugins y correr el riesgo de ralentizar su sitio web. Como último recurso, use editores de gráficos para comprimir imágenes antes de subirlas a su sitio web.

Implementar carga diferida para imágenes

Las imágenes fuera de pantalla son aquellas que aparecen debajo del pliegue, lo que significa que el usuario no las vería hasta que se desplazara más allá de la pantalla inicial. Y este será un tema recurrente para el resto del artículo: cargar todo lo que está debajo del pliegue debe posponerse hasta que los elementos que están encima del pliegue estén completamente cargados. El área por encima del pliegue es la que Google utiliza para medir la velocidad de su página, por lo que aquí es donde debe concentrarse el mayor esfuerzo de optimización.

La técnica para manejar las imágenes fuera de pantalla se llama lazy loading. Básicamente, las imágenes por encima del pliegue se cargan primero, y las imágenes fuera de pantalla se cargan solo a medida que el usuario se desplaza hacia abajo por la página.

Convertir GIF a videos

Puede parecer contraintuitivo, pero a menudo los GIF tendrán un tamaño de archivo mayor que los videos. No sé cómo llegamos a esto, pero convertir un GIF grande a un video resultará en una reducción de tamaño de hasta el 500% o incluso más. Entonces, si su informe de velocidad de página le dice que use formatos de video para contenido animado, debe tomarlo en serio.

Para convertir GIF a videos, puede usar cualquier convertidor en línea o descargar una herramienta como FFmpeg. Google en realidad recomienda crear dos formatos de video: WebM y mp4. WebM es similar a WebP en que es más ligero, pero aún no es compatible con todos los navegadores. Entonces, cuando agregue su video a la página, debe listar primero la versión WebM, y luego la versión mp4 como respaldo.

<riproduzione automatica video in loop disattivato riproduce in linea>
<source src="animazione.webm" type="video/webm">
<source src="animazione.mp4" type="video/mp4">
</video>

Tenga en cuenta que el elemento de video también tiene cuatro atributos adicionales: autoplay, loop, muted, y playsinline. Estos atributos hacen que tu video se comporte como un GIF: comienza a reproducirse automáticamente, se repite en un bucle, sin audio y se reproduce en línea.

Eliminar CSS sin usar

El CSS no utilizado puede ralentizar la construcción del árbol de renderizado por parte del navegador. El hecho es que un navegador debe atravesar todo el árbol DOM y comprobar qué reglas CSS se aplican a cada nodo. Por lo tanto, cuanto más CSS no utilizado haya, más tiempo tardará un navegador en calcular los estilos para cada nodo.

El objetivo aquí es identificar las piezas de CSS que no se utilizan o no son críticas y eliminarlas por completo o modificar el orden en que se cargan. Consulta esta guía sobre cómo aplazar el CSS no utilizado.

Minimizar código CSS, JS y HTML

Los archivos JS y CSS a menudo pueden contener comentarios, espacios, saltos de línea y fragmentos de código innecesarios. Eliminarlos podría hacer que tus archivos sean hasta un 50% más ligeros, aunque la media de minificación es mucho menor. Sin embargo, es una contribución marginal a la velocidad de tu página y vale la pena intentarlo.

Si tienes un sitio web pequeño, puedes minificar el código utilizando minificadores en línea, como CSS Minifier, JavaScript Minifier y HTML Compressor. O, si tu sitio web está construido sobre una plataforma CMS como WordPress, seguramente hay algunos plugins que pueden hacer el trabajo por ti. Para un sitio web personalizado, consulta esta guía sobre la minificación de CSS y esta sobre la minificación de JS.

Extraer CSS crítico

Por defecto, CSS es un recurso que bloquea la renderización. Tu página no se renderizará hasta que el navegador haya recuperado y analizado los archivos CSS, lo que puede llevar mucho tiempo.

Para resolver este problema, puedes extraer solo los estilos necesarios para el área visible de tu página y agregarlos al elemento de tu documento HTML. El resto de tus archivos CSS se pueden cargar de forma asíncrona. Esto mejorará significativamente tus puntuaciones LCP y hará que tus páginas sean más rápidas para los usuarios.

Optimizar la respuesta del servidor

Lo más desagradable de los retrasos en la respuesta del servidor es que existe una amplia selección de razones que pueden causarlos. Por ejemplo, pueden ser rutas lentas, lógica de aplicación lenta, agotamiento de recursos de CPU, consultas de base de datos lentas, agotamiento de memoria, frameworks lentos, etc.

Una solución no técnica fácil a estos problemas es cambiar a un mejor alojamiento, lo que en muchos casos significa de un alojamiento compartido a uno administrado. El alojamiento administrado generalmente incluye redes CDN y otros trucos para la distribución de contenido que tendrán un impacto positivo en la velocidad de la página. Pero si quieres ensuciarte las manos, aquí tienes una guía más detallada sobre cómo solucionar un servidor sobrecargado.

Para aquellos que buscan una mejora rápida sin adentrarse en los detalles técnicos, cambiar a un proveedor de alojamiento de alta calidad puede marcar una diferencia significativa. SiteGround, por ejemplo, ofrece un alojamiento rápido y seguro diseñado para sitios web y empresas pequeñas y medianas. Sus servicios incluyen una CDN gratuita, una caché avanzada y una implementación optimizada de PHP, todos elementos que contribuyen a tiempos de carga más rápidos y a un sitio más receptivo en general.

Manejar eficientemente los recursos de terceros

Los recursos de terceros, como los botones para compartir en redes sociales y los incrustados de reproductores de video, tienden a consumir muchos recursos. Además, cada vez que el navegador encuentra un fragmento de JS, detendrá la ejecución del HTML hasta que lo haya manejado. Todo esto tiende a contribuir a una caída medible en la velocidad de la página.

Si uno de tus recursos de terceros no es esencial, es decir, no cuenta para la apariencia o función de la parte visible, debes eliminarlo de la ruta de renderizado crítica. Para cargar los recursos de terceros de manera más eficiente, puedes utilizar el atributo async o defer. El atributo async es más suave: permite descargar HTML y JS simultáneamente, pero aún así detendrá el HTML para ejecutar JS. El atributo defer es más rígido: no detendrá el HTML para ejecutar JS, que solo se ejecutará al final.

Utilizar la pre-conexión para las conexiones

Establecer conexiones, especialmente las seguras, lleva mucho tiempo. El hecho es que requiere búsquedas DNS, handshakes SSL, intercambio de claves secretas y algunos. Además, utilizar la precarga para las conexiones puede ayudar a ahorrar un tiempo valioso. Establecer conexiones, especialmente las seguras, lleva mucho tiempo. El hecho es que requiere búsquedas DNS, handshakes SSL, intercambio de claves secretas y algunos viajes de ida y vuelta al servidor final responsable de la solicitud del usuario. Por lo tanto, para ahorrar este tiempo valioso, es posible preconectar tu sitio web a los orígenes solicitados con antelación.

<link rel="preconnect" href="https://esempio.com">

Identificar y optimizar las tareas JavaScript a largo plazo

Cada vez que hay un bloque de JavaScript que tarda más de 50 ms en ejecutarse, tu página puede parecer no reactiva al usuario. Para resolver este problema, es aconsejable localizar estas tareas largas, dividirlas en segmentos más pequeños y cargarlas de forma asíncrona. De esta manera, habrá pequeñas ventanas de reactividad incorporadas en el proceso de carga de tu página. Puedes usar Chrome DevTools para identificar las tareas excesivamente largas: son las marcadas con banderas rojas:

Una vez identificadas las tareas largas en tus páginas, puedes dividirlas en tareas más pequeñas, retrasar su ejecución o incluso moverlas del hilo principal a través de un web worker.

Precarga de recursos críticos

Corresponde a los navegadores decidir qué recursos cargar primero. Por lo tanto, a menudo intentan cargar los recursos más importantes como CSS antes que los scripts e imágenes, por ejemplo. Desafortunadamente, esta no siempre es la mejor manera de proceder. Al precargar los recursos, puedes cambiar la prioridad de carga del contenido en los navegadores modernos, informándoles de qué recursos serán necesarios como parte del código responsable de renderizar el contenido visible.

Con la ayuda de la etiqueta, puedes informar al navegador que un recurso es necesario como parte del código responsable de renderizar el contenido visible, y hacer que lo recupere lo antes posible. Aquí hay un ejemplo de cómo se puede usar la etiqueta.

<link rel="preload" as="script" href="script.js" />
<link rel="preload" as="style" href="style.css" />
<link rel="preload" as="image" href="img.png" />
<link rel="preload" as="video" href="vid.webm" type="video/webm" />
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />

Tenga en cuenta que el recurso se cargará con la misma prioridad. La diferencia es que la descarga comenzará antes, ya que el navegador sabe de la precarga con antelación. Para obtener instrucciones más detalladas, consulte esta guía sobre la precarga de recursos críticos.

Implementar la caché del navegador

Sin la caché del navegador, cada vez que visitas la misma página, esta se carga por completo desde cero. Con la caché del navegador, algunos elementos de la página se almacenan en la memoria del navegador, por lo que solo una parte de la página necesita cargarse desde el servidor. Naturalmente, la página se carga mucho más rápido en visitas posteriores y tus puntuaciones de velocidad de página aumentan.

Normalmente, el objetivo es almacenar en la caché el mayor número posible de recursos de la página durante el mayor tiempo posible y asegurarse de que los recursos actualizados se vuelvan a validar para el almacenamiento en caché. En realidad, puedes controlar todos estos parámetros con encabezados HTTP especiales que contienen instrucciones para la caché. Un buen punto de partida para aprender sobre la caché HTTP es esta guía de Google.

Optimizar la estructura del DOM

Un árbol DOM demasiado grande con reglas de estilo complicadas puede afectar negativamente la velocidad, el tiempo de ejecución y el rendimiento de la memoria. La mejor práctica es tener un árbol DOM con menos de 1500 nodos en total, una profundidad máxima de 32 nodos y ningún nodo padre con más de 60 nodos hijo.

Una muy buena práctica es eliminar los nodos DOM que ya no necesitas. Para ello, considera eliminar los nodos que actualmente no se muestran del documento cargado e intenta crearlos solo después de que un usuario se desplace hacia abajo en una página o pulse un botón.

Eliminar redireccionamientos innecesarios

Deshacerse de todos los redireccionamientos innecesarios es una de las mejores cosas que puedes hacer por la velocidad de tu sitio. Cada redireccionamiento adicional ralentiza la renderización de la página y agrega uno o más viajes de ida y vuelta de solicitud-respuesta HTTP.

La mejor práctica es no utilizar redireccionamientos en absoluto. Sin embargo, si los necesitas desesperadamente, es crucial elegir el tipo de redireccionamiento correcto. Es mejor utilizar un redireccionamiento 301 para el redireccionamiento permanente. Pero si, por ejemplo, quieres redirigir a los usuarios a páginas promocionales a corto plazo o URL específicas para dispositivos, los redireccionamientos temporales 302 son la mejor opción.

Estos problemas enumerados no son todos los problemas que pueden afectar la velocidad de la página, sino más bien los más comunes y los que tienen mayor potencial de mejora. Asegúrate de adaptar tus estrategias de optimización a los problemas reflejados en tu informe de velocidad de la página. Ten en cuenta que los problemas presentes en muchas de las páginas de tu sitio web a menudo se pueden resolver en bloque implementando cambios a nivel de todo el sitio.