Los sitios web que parecen muy rápidos y claros al cargar son a menudo sitios tan grandes como lentos pero le han dado prioridad al contenido superior de la página (above the fold) para que parezca cargar muy rápido.

A Google le gusta las páginas que muestran el contenido a sus usuarios de forma rápida y este artículo te proporcionará una guía sobre cómo hacer que tus páginas muestren el contenido más rápido.

Si has realizado el test de velocidad de Google PageSpeed y te mostrado la advertencia “priorizar el contenido visible“, esta guía te ayudará a solucionarlo.

Da prioridad al contenido principal de la página.
Da prioridad al contenido principal de la página.
Reducir el tamaño del contenido superior de la página.
Google sugiere dos estrategias principales para lograr esto y nos proporciona un esquema para examinar nuestras páginas. Las cubriremos las dos en profundidad.
  • Restructura el código HTML para cargar primero el contenido crítico superior de la página.
  • Reduce la cantidad de datos utilizados por los recursos de tu página.
Priorizar el contenido principal.
Una de las formas más rápidas, simples y comunes de mejorar la forma en que un usuario percibe el tiempo de carga de tu página web es asegurando que tu HTML presente el contenido de tu página web antes que cualquier otra cosa. Para ilustrar esto, vamos a ver un escenario muy común.
1. Página con barra lateral (sidebar).
En la imagen de la derecha podemos ver una página web que tiene una barra lateral a la izquierda y el contenido de la derecha. También podemos ver que la barra lateral se encuentra antes que el contenido en el código HTML.

Este es un ejemplo de contenido crítico que se muestra antes que otras cosas. La razón de esto es que si la barra lateral se menciona primero en el código HTML entonces está se tendrá que cargar en primer lugar antes de que el área de contenido.

La barra lateral está por encima del contenido.
La barra lateral está por encima del contenido.
En una típica barra lateral hay anuncios y botones de redes sociales y otro tipo de contenido que depende de terceros. Así que, si la barra lateral se carga antes que el contenido principal, harás esperar al usuario por el contenido que quiere ver.

Digamos que tienes un anuncio de Google AdSense, un botón de Twitter, un botón de Facebook y un botón de Google+ en la barra lateral. En este escenario, no sólo estás agregando segundos en el tiempo de carga de la página sino que también estás agregando segundos en el tiempo que espera el usuario para ver tu contenido lo cual no está nada bien.

Si el contenido de la barra lateral se toma su tiempo para cargar, el navegador tendrá que esperar hasta que todo se cargue antes de poder mostrar al usuario el contenido principal. Esto para el usuario es frustrante ya que no ha llegado a tu página para ver una barra lateral, pie de página o botones de redes sociales sino para ver el contenido principal.

Esto se podría cambiar con una simple acción. Realiza el siguiente paso para presentar a tus usuarios el contenido principal primero.

2. Colocar la sección de contenido antes que la barra lateral.
Si simplemente copias la sección de la barra lateral y lo pegas después de la sección de contenido, la página va a presentar el contenido principal primero sin tener que esperar a que todo lo que hay en la barra lateral cargue.

Cuando la sección de contenido se encuentra primero en el código HTML el contenido se carga primero.

El contenido está por encima de la barra lateral.
El contenido está por encima de la barra lateral.
  • Tu página web se descarga y muestra tu contenido.
  • Los usuarios pueden ver el contenido casi de inmediato.
  • Mientras tus usuarios leen el contenido, los anuncios y botones de la barra lateral pueden seguir cargando.
  • Los usuarios son felices porque no tienen que esperar.
Este es un ejemplo de cambio de estructura de HTML para mostrar contenido crítico en primer lugar pero hay otras cosas que debemos hacer para asegurarnos de que nuestras páginas se cargan más rápido para los usuarios y para Google.
Cargar el contenido superior de la página primero.
El concepto de cargar el contenido superior de la página primero puede ser confuso. Para explicar lo que Google opina de esto, piensa en el pie de página de tu sitio.

¿Por qué un usuario tiene que esperar a ver la página mientras se descarga el código CSS, JavaScript, imágenes, etc, de tu pie de página sin siquiera estar seguro de que el usuario lo verá?

Me atrevería a decir que mucho de nuestros visitantes nunca llegan a ver el pie de página de nuestro sitio. Considera las siguientes situaciones:

  • Un usuario visita tu página de inicio, encuentra lo que está buscando en el menú principal hace clic y va a esa página.
  • Un usuario entra a una de tus páginas web, ve un anuncio y hace clic en él (sale de tu página).
  • Un usuario está buscando una lámpara para comprarla y termina en tu página la cual vende lámparas. Encuentra la lámpara que quiere y hace clic sobre la imagen para ver los detalles del artículo.
En todos los casos anteriores el usuario nunca vio el pie de página. Sin embargo, estás haciendo esperar a los usuarios mientras cargan los archivos de tu pie de página antes de que aparezca la información que en realidad están buscando.
El pie de página se encuentra en la parte inferior de la página para una razón.
En la imagen de la derecha podemos ver una página web que tiene un pie de página con mucha información. Muchas plantillas de WordPress cuentan con un pie de página.

Tiene una información biográfica con una imagen (la imagen es un recurso que tiene que descargar el navegador).

Se muestra en columnas lo cual requiere código CSS que es posible que el resto de la página no utilice y tal vez tiene un widget de twitter que utiliza JavaScript (realizar llamadas externas, obtener archivos externos) de un tercero, twitter en este caso, para presentar la información.

Estructura típica de un pie de página.
Estructura típica de un pie de página.
En resumen, este pie de página tiene un montón de aplicaciones fabulosas pero en la mayoría de situaciones, el navegador debe comprender y descargar todos esos recursos del pie de página antes de cargar el contenido principal. No tiene sentido cargar todas estas aplicaciones, que es posible que el usuario ni siquiera vea, y mantenerlo en espera hasta ver el contenido principal.
¿Cómo cargar primero el contenido superior de la página?
En una situación ideal, el usuario podría ver el contenido principal de tu página web sin esperar a que cargue el pie de página. Pero, ¿cómo se logra esto?

La forma en que se hace, no te voy a mentir, requiere un poco de sentido común y planificación. Sin embargo, una vez que comprendas cómo hacerlo para una página, serás capaz de hacer que funcione en toda tu web con bastante facilidad. Pero tienes que comenzar con una página.

Vamos a examinar cómo se carga una página web:

¿Cómo un navegador realiza la carga de una página web?
Cuando tu página web se carga, el navegador sigue ciertos pasos para determinar cómo cargar tu página (se trata de un resumen pero básicamente es como sucede):
  • El navegador descarga el código HTML.
  • Analiza el código HTML.
  • Encuentra algún recurso que tiene que cargar (imagen, archivo CSS externo, etc) y se detiene a analizar el código HTML.
  • Carga el recurso externo.
  • Si el recurso externo es CSS o JavaScript, el navegador analizará el archivo.
  • Luego continúa analizando el código HTML hasta que encuentre otro recurso que deba cargar.
A lo largo de este proceso, el navegador trata de mostrar el contenido tan pronto como le sea posible. Por consiguiente, existen formas de asegurar que el contenido de algunas de nuestras páginas web se cargue primero y completamente antes de que el navegador se encuentre con obstáculos como los recursos externos.

El contenido superior de la página puede ser priorizado, sin tener que depender de los recursos externos o la pronta carga de estos recursos, antes de que el navegador tenga que cargar todo lo que necesita analizar.

Vamos a ver algunos recursos que son familiares, y de la forma en que te los voy a mostrar, se pueden usar mejor.

1. HTML.
Ya hemos visto anteriormente que, la forma en que el HTML carga los recursos, puede afectar la forma en se carga una página. Los recursos que se mencionan en el código HTML se cargan de forma secuencial en la mayoría de veces (primera línea de código, primero; segunda línea de código, segundo; etc) por lo que, una de las maneras más importantes de priorizar los contenidos, es asegurarse de que el contenido más importante es llamado por el HTML antes que el contenido menos importante.
Modificar la estructura HTML para cargar el contenido principal primero.
Modificar la estructura HTML para cargar el contenido principal primero.
Para visualizar primero el contenido superior de la página puede que tengas que replantearse el diseño de tu estructura HTML.

En la imagen se muestra un diseño muy común y una solución para ilustrar cómo se puede cambiar la forma en que nuestra página se carga mediante la estructura HTML.

Problema.

Tenemos una página web que tiene un bloque de barra lateral (sidebar DIV) y un bloque de contenido principal (content DIV). Si tratamos de “cargar primero el contenido superior de la página” con esta estructura, no podríamos hacerlo o estaríamos muy limitados.

Solución.

Vamos hacer nuestra página web visualmente la misma pero con una estructura diferente. En nuestra nueva estructura tendremos la barra lateral divida en dos partes (una parte para el contenido superior y otra parte para el contenido inferior) e igualmente para el bloque de contenido.

Resultado.

Ahora que tenemos los elementos del contenido superior separados de otras partes de la página, podemos tener un archivo CSS para el contenido superior de la página y otro archivo CSS externo para el resto del contenido.

La diferencia es que ahora, cuando alguien visite tu página web, se cargará impresionantemente rápido porque todo el contenido superior de la página no tiene que esperar a que los archivos CSS externos carguen. Esto nos lleva a…
2. CSS.
El archivo CSS es donde gran parte de la magia, de una página que carga rápidamente, ocurre. Te lo voy a presentar en resumen pero lo puedes ver más a fondo en el artículo optimizar la entrega de CSS.

Una configuración ideal de un archivo CSS acelerará tu página y no reducirá la velocidad. La forma de hacerlo es tener:

  • Restructura el código HTML para cargar primero el contenido crítico superior de la página.
  • Reduce la cantidad de datos utilizados por los recursos de tu página.
Archivo CSS del contenido superior de la página.
Archivo CSS del contenido superior de la página.
3. JavaScript.
El JavaScript que se encuentra en tu página web puede sumarse al tiempo de carga de la página pero no tiene por qué hacerlo.

Puedes aplazar la carga de los JavaScripts hasta que cargue el contenido.

Esto es algo que nos puede llevar a hacer una reflexión seria pero lo más probable es que la mejora más importante que puedes hacer es reducir el tiempo de carga del contenido superior de la página especialmente si estas usando botones de redes sociales (Google, Facebook, Twitter) o bibliotecas JavaScript como jQuery.

Aplazar la carga del JavaScript para cargar más rápido el contenido principal.
Aplazar la carga del JavaScript para cargar más rápido el contenido principal.
Para entender mejor como hacer esto puedes leer el artículo aplazar la carga del JavaScript que lo explica en profundidad.
Conclusión:
Priorizar el contenido visible no es una tarea fácil y requiere que analices cada aspecto de tu página y pienses en lo que podría estar mejor.

Lo primero que deberías analizar (en resumen):

  • HTML. Asegúrate de que el contenido principal de tu página se carga antes que nada. Restructura tu página web teniendo en mente primero el “contenido superior de la página” (incluso si tienes que añadir algunos DIV’s a la estructura).
  • CSS. Analiza tus archivos CSS y ubícalos de manera que se cargue el contenido superior de tu página primero.
  • JavaScript. Aplaza el JavaScript hasta después de la cargue la página siempre que sea posible.

¿Quieres más?

No te pierdas las actualizaciones del blog y recibe mas información en tu email sobre el correcto “Posicionamiento en Google“.

¡Suscríbete y mantente al día!

Suscríbete…

¿Me Compartes?
Me gustaría conocer tu opinión sobre este artículo en la sección de comentarios que encontrarás a continuación y que lo compartas para que otras personas lo puedan disfrutar. Gracias.
Share on Facebook0Tweet about this on TwitterShare on Google+5

Deja un comentario

Los campos marcados con * son obligatorios.

Borrar formularioEnviar Comentario