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

Sigue a FullPress en Google

Añádenos a tus fuentes preferidas.

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

Comprender los Core Web Vitals de Google

Durante mucho tiempo, la propia 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? ¿Medir toda la página o solo la parte superior? Hay docenas de métricas que intervienen en la velocidad de la página y ha sido un largo camino para entender cuáles son realmente importantes para el usuario.

Finalmente, 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 diseñadas para medir la velocidad percibida más que la velocidad efectiva.

Pintura con el contenido más grande (LCP)

El Largest Contentful Paint es el tiempo que tarda en cargarse completamente el mayor elemento dentro del viewport. Los puntos de referencia para esta métrica son los siguientes:

• Bueno: menos de 2,5 segundos
• Necesita mejora: de 2,5 a 4 segundos
• Malo: más de 4 segundos

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

Retraso de la primera entrada (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, un botón se pinta en la página, se hace clic en él, pero aún no es reactivo. Los puntos de referencia para esta métrica son los siguientes:

• Bueno: menos de 100 milisegundos
• Necesita mejora: de 100 a 300 milisegundos
• Pobre: más de 300 milisegundos

FID puede optimizarse dividiendo el código y utilizando menos JavaScript.

Desplazamiento acumulativo del diseño (CLS)

El Cumulative Layout Shift mide si los elementos de la página se mueven durante la carga. Por ejemplo, una página parece lista para usarse, 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 parámetros de referencia para esta métrica son los siguientes:

• Bueno: menos de 0,1
• Necesita mejora: de 0,1 a 0,25
• Pobre: más de 0,25

El CLS depende de que los tamaños de los elementos estén configurados correctamente y de que los recursos se carguen en una secuencia específica, de arriba hacia 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 comprobación de página:

• Información sobre la velocidad de la página de Google
• Consola de búsqueda de Google
• Lighthouse de Chrome
• GTmetrix

Sin embargo, algunas de estas herramientas usan datos de laboratorio en lugar de datos de campo, mientras que Google clasifica tus páginas exclusivamente según 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 probablemente sea Google Search Console. Allí, puedes ir a Experiencia > Core Web Vitals y ver el informe para todas tus páginas simultáneamente. Aunque el informe de alto nivel se proporciona en bloque, localizar qué páginas están afectadas por qué problemas puede ser un proceso tedioso.

Una mejor manera de medir la velocidad de la página podría ser usar WebSite Auditor. Allí puedes ir a Estructura del sitio > Auditoría del sitio y obtener un informe sobre la velocidad de la página para todo el sitio web, así como ver todas las páginas afectadas, todo desde un panel único. O también puede ir a Auditoría del sitio > Páginas > Velocidad de la página y ver un listado de páginas con problemas de velocidad que las afectan. Al hacer clic en cualquier página, también obtendrás un listado de los elementos de la página que pueden optimizarse para mejorar el rendimiento.

Optimizar la velocidad de la página

Ahora que tienes un listado de las páginas afectadas, es momento de trabajar en mejorar la velocidad de tu página. A continuación se muestran algunas de las oportunidades de optimización más comunes y algunos consejos sobre cómo aprovecharlas.

Establecer las dimensiones de las imágenes

Cuando omites las dimensiones de las imágenes en tu código, puede tomar tiempo para que el navegador las redimensione correctamente. Esto significa que el contenido de tu página se moverá y afectará negativamente tu puntaje CLS.

Para evitar este problema, siempre establece las propiedades width y height para tus imágenes, así:

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

Usar formatos modernos de imagen

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

Entre los formatos listados, WebP es probablemente el primero a considerar. Soporta tanto compresión sin pérdida como con pérdida, además de permitir transparencia y animación. Además, los archivos WebP suelen ser entre un 25% y 35% más ligeros que PNG y JPEG de calidad similar. Y aunque antes era común la preocupación de que el formato WebP no era soportado por algunos navegadores, recientemente Safari añadió soporte para WebP en la versión 14, por lo que ahora el soporte total para el formato entre navegadores supera el 90%.

Comprimir las imágenes

Independientemente de usar formatos de imagen de nueva generación o no, comprimir tus imágenes todavía es un método válido para reducir el tamaño total de la página. Nuevamente, si tu sitio web está construido sobre WordPress, puedes comprimir tus imágenes en lote con plugins de optimización de imágenes como WP Smush. También puedes usar compresores en línea si no quieres instalar demasiados plugins y arriesgarte a ralentizar tu sitio web. Como último recurso, usa editores gráficos para comprimir las imágenes antes de subirlas a tu sitio.

Implementar lazy loading para las imágenes

Las imágenes fuera de pantalla son aquellas que aparecen debajo del fold, lo que significa que el usuario no las vería hasta que desplace 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 fold debería posponerse hasta que los elementos por encima del fold estén completamente cargados. El área por encima del fold es la que Google usa para medir la velocidad de tu página, por lo que ahí debería 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 fold se cargan primero, y las imágenes fuera de pantalla sólo se cargan a medida que el usuario se desplaza hacia abajo en la página.

Convertir los GIF a video

Puede parecer contradictorio, pero a menudo los GIF tienen un tamaño de archivo mayor que los videos. No sé cómo llegó a ser así, pero convertir un GIF grande a video reducirá el tamaño hasta un 500% o más. Así que, si tu informe de velocidad de página te dice que uses formatos de video para contenido animado, deberías tomarlo en serio.

Para convertir los GIF a video, puedes 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 soportado por todos los navegadores. Por eso, cuando agregues tu video a la página, deberías 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>

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

Eliminar el CSS no utilizado

El CSS no utilizado puede ralentizar la construcción del árbol de renderizado por parte del navegador. El hecho es que un navegador debe recorrer 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 partes de CSS que son no utilizadas o no críticas y eliminarlas completamente o modificar el orden en que se cargan. Consulta esta guía sobre cómo diferir el CSS no utilizado.

Minimizar código CSS, JS y HTML

Los archivos JS y CSS pueden frecuentemente 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 el promedio de minificación sea 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 minimizar el código utilizando minificadores online, como CSS Minifier, JavaScript Minifier y HTML Compressor. O bien, si tu sitio web está construido sobre una plataforma CMS como WordPress, seguro que existen algunos plugins que pueden hacer el trabajo por ti. Para un sitio web personalizado, consulta esta guía sobre cómo minimizar CSS y esta sobre cómo minimizar JS.

Extraer el CSS crítico

Por defecto, el CSS es un recurso que bloquea el renderizado. Tu página no se mostrará hasta que el navegador haya recuperado y analizado los archivos CSS, lo que puede tomar mucho tiempo.

Para solucionar este problema, puedes extraer solo los estilos necesarios para el área visible por encima del pliegue de tu página y agregarlos al elemento de tu documento HTML. El resto de tus archivos CSS puede cargarse 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 sobre las demoras en la respuesta del servidor es que existen muchas razones que pueden causarlas. Por ejemplo, puede ser enrutamiento lento, lógica de aplicación lenta, agotamiento de recursos CPU, consultas lentas a la base de datos, agotamiento de memoria, framework lentos, etc.

Una solución no técnica fácil a estos problemas es cambiar a un hosting mejor, lo que en muchos casos significa pasar de un hosting compartido a uno gestionado. El hosting gestionado usualmente incluye redes CDN y otras tecnologías para la distribución de contenido que impactarán positivamente en la velocidad de la página. Pero si quieres ensuciarte las manos, aquí tienes una guía más detallada sobre cómo resolver un servidor sobrecargado.

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

Gestionar eficientemente los recursos de terceros

Los recursos de terceros, como los botones de compartir en redes sociales e incrustaciones de reproductores de video, tienden a consumir muchos recursos. Además, cada vez que el navegador encuentra un fragmento de JS, detiene la ejecución del HTML hasta que lo maneje. Todo esto suele contribuir a una caída notable en la velocidad de la página.

Si uno de tus recursos de terceros no es esencial, es decir, no afecta la apariencia o función de la parte visible por encima del pliegue, deberías eliminarlo del camino crítico de renderizado. Para cargar los recursos de terceros de manera más eficiente, puedes usar los atributos async o defer. El atributo async es más suave: permite descargar HTML y JS simultáneamente, pero aún interrumpirá el HTML para ejecutar JS. El atributo defer es más estricto: no interrumpirá el HTML para ejecutar JS, que se ejecutará solo al final.

Utilizar preconexión para las conexiones

Establecer conexiones, especialmente las seguras, toma mucho tiempo. El hecho es que requiere consultas DNS, handshake SSL, intercambio de claves secretas y algunos además, utilizar preconexión para las conexiones puede ayudar a ahorrar tiempo valioso. Establecer conexiones, especialmente las seguras, toma mucho tiempo. El hecho es que requiere consultas DNS, handshake SSL, intercambio de claves secretas y varios viajes de ida y vuelta al servidor final responsable de la solicitud del usuario. Por lo tanto, para ahorrar este valioso tiempo, puedes preconectar tu sitio web a los orígenes requeridos con anticipación.

Para preconectar tu sitio web a una fuente de terceros, simplemente debes añadir una etiqueta link a tu página.

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

Identificar y optimizar tareas JavaScript de larga duración

Cada vez que hay un bloque de JavaScript que tarda más de 50 ms en ejecutarse, tu página puede parecer no reactiva para el usuario. Para solucionar esto, es recomendable identificar estas tareas largas, dividirlas en segmentos más pequeños y cargarlas de forma asíncrona. Así se crearán ventanas breves de reactividad dentro del proceso de carga de tu página. Puedes utilizar Chrome DevTools para identificar tareas excesivamente largas—son aquellas 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 fuera del hilo principal mediante un web worker.

Precarga de recursos críticos

Es decisión de los navegadores qué recursos cargar primero. Por lo tanto, suelen intentar cargar los recursos más importantes como CSS antes que los scripts e imágenes, por ejemplo. Desafortunadamente, esto no siempre es lo mejor. Al precargar recursos, puedes cambiar la prioridad de carga del contenido en navegadores modernos, informándoles qué recursos serán necesarios como parte del código responsable de renderizar el contenido visible por encima del pliegue.

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 por encima del pliegue, y hacer que lo recupere tan pronto como sea posible. Aquí un ejemplo de cómo puede usarse 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 />

Ten en cuenta que el recurso se cargará con la misma prioridad. La diferencia es que la descarga comenzará antes porque el navegador sabe del precargado anticipado. Para instrucciones más detalladas, consulta esta guía sobre la precarga de recursos críticos.

Implementar la caché del navegador

Sin caché del navegador, cada vez que visitas la misma página, toda la página se carga 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 cachear la mayor cantidad posible de recursos de la página por el mayor tiempo posible y asegurarse de que los recursos actualizados se revaliden para el almacenamiento en caché. En realidad, puedes controlar todos estos parámetros con cabeceras 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 hijos.

Una práctica muy recomendable es eliminar los nodos DOM que ya no necesites. Para ello, considera eliminar los nodos que actualmente no se muestran en el documento cargado y trata de crearlos solo después de que un usuario haya desplazado hacia abajo una página o haya presionado 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 el renderizado de la página y añade una o más idas y vueltas de solicitud-respuesta HTTP.

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

Estos problemas listados no son todos los que pueden afectar la velocidad de la página, sino 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 página. Ten en cuenta que los problemas presentes en muchas páginas de tu sitio web a menudo se pueden resolver de forma masiva implementando cambios a nivel de sitio.