Las últimas notícias sobre SEO y Marketing Digital en nuestro Blog de Marketing Digital
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:
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:
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!
Buenas David,
me alegro que te guste. A ver cuando lo pruebas y comentas los resultados 🙂
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).
Buenas Christian,
lo tuyo es todavía más avanzado :), pero esta funcionalidad en el fondo lo simplifica!
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 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,