Las últimas noticias sobre SEO y Marketing Digital en nuestro Blog de Marketing Digital

Las últimas noticias 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?

Índice

Eduardo Garolera

Eduardo Garolera

¿CÓMO CALCULAR EL IMPACTO DE UNA TAREA TÉCNICA EN LA VELOCIDAD DE CARGA DE LA WEB ANTES DE HACERLA?

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.

Comparte este artículo

7 comentarios

  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,

  4. 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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Descarga la guía básica de SEO gratis!

Comprueba la optimización SEO de tu página!

En sólo 10 minutos conocerás el estado de tu página!

Preguntas Frecuentes sobre una Agencia de Marketing Digital

Una agencia de marketing digital es una empresa especializada en proporcionar servicios de marketing en línea para ayudar a las empresas a promocionar sus productos o servicios en el entorno digital. Puede ayudar a tu negocio de diversas maneras, como mejorando la visibilidad en línea, aumentando el tráfico a tu sitio web, generando leads de calidad, mejorando la conversión y fortaleciendo la presencia en las redes sociales. Las agencias de marketing digital utilizan estrategias como el SEO, el marketing de contenidos, las redes sociales, el PPC y el análisis de datos para lograr estos objetivos.

Una agencia de marketing digital ofrece una amplia gama de servicios que incluyen SEO (Optimización de Motores de Búsqueda), PPC (Publicidad por Pago por Clic), marketing de contenidos, gestión de redes sociales, email marketing, analítica web, diseño web, desarrollo web, optimización de la tasa de conversión (CRO), publicidad en redes sociales y más. Estos servicios se adaptan a las necesidades específicas de tu negocio para lograr resultados en línea efectivos.

Contratar una agencia de marketing digital ofrece varias ventajas. Primero, las agencias cuentan con experiencia y conocimientos especializados en diversas áreas del marketing digital. Además, a menudo es más rentable que mantener un equipo interno a tiempo completo. Las agencias también pueden mantenerse actualizadas con las últimas tendencias y tecnologías, lo que es esencial en un campo en constante cambio como el marketing digital.

Una agencia de marketing digital puede aumentar la visibilidad de tu sitio web en los motores de búsqueda mediante la optimización de motores de búsqueda (SEO). Esto implica la optimización técnica, la creación de contenido de alta calidad y la construcción de enlaces de retroceso. Al mejorar la estructura y el contenido de tu sitio web, aumentarás tus posibilidades de aparecer en las primeras páginas de resultados de búsqueda para palabras clave relevantes.

El SEO es fundamental en una estrategia de marketing digital porque ayuda a tu sitio web a posicionarse mejor en los motores de búsqueda como Google. Esto significa que más personas pueden encontrar tu sitio web cuando buscan productos o servicios relacionados con tu negocio. El SEO también aumenta la credibilidad y la confianza de los usuarios, lo que puede llevar a una mayor tasa de conversión y un mayor tráfico orgánico.

¡Suscríbete al blog!

Las últimas noticias sobre SEO y Marketing Digital