Las últimas notícias sobre SEO y Marketing Digital en nuestro Blog de Marketing Digital 

¿Cómo calcular el impacto de una tarea técnica en la velocidad de carga de la web antes de hacerla?

Por Edu Garolera

Calcula el impacto de una tarea en la velocidad de carga de la web antes de hacerla

Seamos claros :), a nadie le gusta tener una puntuación baja de velocidad de carga en una herramienta como PageSpeed

puntuación baja en pagespeed

Y es por eso que a nivel SEO todos nos esforzamos en crear tareas para el backlog que puedan ser implementadas lo antes posible y que tengan el mayor impacto en el tráfico orgánico o en la conversión.

A veces, algunas de estas tareas quedan encalladas en el backlog ya que:

  • Creemos que hay otras más importantes que tendrán mayor impacto
  • No tenemos claro el impacto que tendrán
  • Las despriorizamos ya que hay otras más urgentes

Ay, ese backlog en JIRA como me gusta 🙂

backlog en jira

Ahora desde las Chrome Developer Tools podemos hacer los deberes al crear una tarea y saber de forma clara cual será su impacto en PageSpeed.

Sigamos con el ejemplo de BancSabdell y veamos que oportunidades nos muestra PageSpeed:

Elimina archivos CSS sin usar

En este caso nos dice que podemos eliminar archivos CSS que no se usan pero que se cargan igualmente en la página. Veamos cual sería el impacto de eliminarlos.

Cuando miremos temas de performance en Chorme Dev Tools hay que hacerlo desde una ventana de incógnito para que las extensiones no afecten al rendimiento de la página.

Para ello tenemos que ir a la página en cuestión y abrir las Chorme Dev Tools utilzando la combinación de teclas Ctrl+Mayús+I . Después seleccionaremos la opción de Request Blocking del menu More tools >

request blocking en chrome dev tools
Request Blocking en Chrome Dev tools

y una vez hecho esto ya podemos:

  1. Permitir que se bloqueen peticiones (Enable request blocking)
  2. Añadir los cripts que nos proponga PageSpeed al darle al +
bloqueando scripts css en chrome dev tools
Bloqueando scripts css en chrome dev tools

Cuando ya tengamos los scripts que nos interesan bloqueados entonces procedemos a realizar la auditoria de performance desde Chrome

performance audit chorme dev tools

ya lo tenemos! Si vemos ahora lo que tardan en cargar los Archivos CSS sin usar tenemos lo siguiente:

eliminar archivos css sin usar

Acabamos de ganar 1,5 segundos, es decir que ya sabemos el impacto que tendría eliminar estos CSS sin usar y podemos ya compararlo con otras tareas para decidir cual es la más priotaria en nuestroi backlog.

Práctico verdad?

¿Utilizas algún otro sistema para calcular el impacto de una tarea en la velocidad de carga? Comparte en los comentarios y seguimos la conversación.

7 comments on “¿Cómo calcular el impacto de una tarea técnica en la velocidad de carga de la web antes de hacerla?”

  1. Un 10 y un guau! muy interesante, no lo hacía de esa forma.. la verdad está genial.. te diría algo más.. pero me voy a poner a probar pero ya. 😀

    Gracias!

  2. Gracias por el tip Eduardo, no conocía la funcionalidad!

    Otra cosa que yo hago es descargarme la URL concreta tal cual (html+recursos) y hacer algunas de las mejoras en local, directamente, para comparar cómo mejora la puntuación y/o velocidad de carga (por ejemplo, modificando CSS y JS para que no bloqueen renderizado).

  3. Hola Eduardo! Soy novato en esto así que no sé si lo estoy haciendo bien.

    He seguido estos pasos pero los CSS sin usar siguen apareciendo en el test de Pagespeed.

    Entiendo que al añadir esos CSS en "Request blocking" ya se bloquean, no?

    Por qué no veo cambios?

    Y otra cosa, con Chrome Developer Tools cualquiera puede tocar este tipo de cosas de cualquier web...?

    Muchas gracias

    1. Hola Luis,

      una vez los has añadido a Request Blocking has realizado la auditoria de nuevo?

      El código que tocamos al hacer ejercicios de este tipo sólo afecta a la sesión que tienes activa, no es que cambies el código de la web para todos. Menudo peligro si fuera así 🙂

      Saludos,