Una leyenda urbana dice que algunos presentadores de televisión dan las noticias en calzoncillos. No creo que sea verdad, pero como solo se les enfoca de pecho para arriba podrían permitirse esa comodidad. La anécdota viene al caso porque hoy voy a hablar del above the fold y de cómo en SEO a veces importa más lo que se ve en el primer vistazo que el resto.

¿Qué es above the fold?

Above the fold significa literalmente “encima de la tapa”. Este concepto se usa en diseño web para referirse a la parte de la web que se ve si necesidad de hacer scroll. Es decir, la primera vista que tiene el usuario al entrar en la web. Al above the fold también se le llama primer pantallazo o above the scroll.

¿Por qué es importante el above the fold?

El above the fold es importante tanto a efectos de optimización SEO como  de experiencia del usuario.

Para la experiencia del usuario es importante que la información más relevante aparezca lo antes posible. Los internautas nos hemos vuelto cada vez más perezosos y los estudios señalan que cuánto más abajo esté un elemento en el diseño web menos gente llegará hasta él. Si alguien entra en una web y no ve enseguida lo que busca se irá al siguiente resultado de Google (después de todo tendrá miles para elegir).

A nivel de optimización, el above the fold es importante a nivel de rendimiento. Al ser lo primero que aparece en pantalla, determina de forma crítica la velocidad de carga de la web. De hecho, uno de los avisos que suele dar el PageSpeed test de Google es el siguiente:

No se ha podido visualizar el contenido de la mitad superior de la página sin tener que esperar a que se cargara alguno de los recursos. Intenta aplazar o cargar de forma asíncrona los recursos que bloquean la visualización, o bien inserta porciones críticas de dichos recursos directamente en el HTML.

Consejos para optimizar el above the folder

  • Evita los slider, quedan muy bonitos, pero ralentizan el tiempo de carga y distraen del contenido principal.
  • Pon la información más relevante al principio de la página.
  • Centra las llamadas a la acción en la mitad superior de la pantalla.
  • Asegúrate de que el above the fold se visualiza a la perfección también en móviles y tablets.
  • Haz que el menú esté siempre visible mientras el usuario hace scroll.

Y tú, ¿cuidas lo que el internauta ve en su primera carga?

Te deSEO un buen día,

William Penguin