En la actualidad es extremadamente raro encontrarse una página cuyo contenido esté albergado en su totalidad en el dominio original. Basta con que se use Google Analytics, un vídeo embebido de YouTube o cualquier otra utilidad de terceros (sin mencionar a las redes de anuncios), para que tengamos código HTML, CSS y JavaScript que puede salir de varios sitios de terceras empresas.

Hasta ahora las herramientas del desarrollador de Chrome permitían ordenar y filtrar por dominio, pero en Chrome 60 han incorporado una funcionalidad más interesante que consiste en mostrar de manera visual, con unos identificadores (badges en inglés) de dónde vienen ciertas peticiones y códigos, cuando provienen de servicios reconocidos por el navegador. Esto nos ayuda a identificar de manera más sencilla y visual el impacto real que puede tener incluir un servicio externo en la página, tanto en tiempos y "peso" de las descargas, como en rendimiento a la hora de renderizar la página y procesar JavaScript.

Por defecto la característica viene deactivada, por lo que debemos activarla ex-profeso. Para ello vete a las herramientas del desarrollador (F12 o CTRL+MAYS+I) y pulsa CTRL+SHFT+P para sacar el menú de comandos de Chrome. Una vez aparezca busca la funcionalidad escribiendo, por ejemplo "Badges", así:

Una vez activada, cuando hagas una traza de tráfico en la pestaña "Network", verás que muchas de las peticiones aparecen con una pequeña etiqueta de colores al lado, con iniciales:

Ahora podemos encontrar de un golpe de vista qué peticiones se realizan a terceros sitios webs, diferentes del que estamos analizando, identificando además a dónde nos conectamos (por cierto, en la captura anterior se puede ver la enorme cantidad de porquería que meten las páginas comerciales, como un periódico, que era el caso, y a dónde "se comunican").

Más interesante todavía es la posibilidad de ver en qué medida influye en la carga y renderizado de la página cada uno de estos terceros sitios identificados.

Para verlo en acción vamos a la pestaña "Performance" y comenzamos un análisis de carga pulsando CTRL+MAYS+E (para refrescar la página actual y analizar su rendimiento):

Al terminar de cargar la página, paramos el análisis y esperamos a que carguen los datos (dependiendo de la cantidad de tiempo y la complejidad del mismo puede llegar a tardar minutos en cargar, así que paciencia):

Para verlo por "producto" (es decir, por código de cada servidor involucrado) es necesario elegir agrupar por producto en el desplegable de cualquiera de las pestañas que analizan las llamadas. Deesta froam vemos en qué medida contribuye cada uno de estos sitios de terceros a la carga y renderizado de la página, ya que este análisis tiene en cuenta no solo la descarga del código sino el tiempo empelado en cada uno de los procesos que conducen a que se vea la página: renderizado del HTML, renderizado del CSS, ejecución de JavaScript... pudiendo ver exacgamente qué es lo que está ralentizando la página y así poder tomar decisiones:

Puedes encontrar una explicación más detallada de cómo usar el analizador de rendimiento en la documentación oficial de Google (en inglés).

En resumen

Esta es una de esas pequeñas contribuciones que en cada versión de Chrome convierten a sus herramientas del desarrollador en algo tan útil. En este caso es muy probable que pase inadvertida para la mayoría ya que viene desactivada y no hay un menú directo para ponerla en funcionamiento. En este breve post he repasado para qué sirve y cómo activarla. Espero que le puedas sacar partido.

Escrito por un humano, no por una IA