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
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 🙂
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 >
y una vez hecho esto ya podemos:
- Permitir que se bloqueen peticiones (Enable request blocking)
- Añadir los cripts que nos proponga PageSpeed al darle al +
Cuando ya tengamos los scripts que nos interesan bloqueados entonces procedemos a realizar la auditoria de performance desde Chrome
ya lo tenemos! Si vemos ahora lo que tardan en cargar los Archivos CSS sin usar tenemos lo siguiente:
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.
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!
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).
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
Hola Eduardo,
Sí, y en la auditoría sigue apareciendo la recomendación «Remove unused CSS» refiriéndose a ese que en teoría ya bloqueé (……com/wp-includes/css/dashicons.min.css) y otro que al parecer ha cambiado.
Y vale, me dejas más tranquilo jaja. No tenía mucho sentido que cualquiera pudiera modificar cualquier web.
Un saludo y gracias