{"id":4074,"date":"2017-07-23T19:25:28","date_gmt":"2017-07-23T19:25:28","guid":{"rendered":"https:\/\/www.mjcachon.com\/?p=4074"},"modified":"2021-05-31T15:58:03","modified_gmt":"2021-05-31T13:58:03","slug":"que-es-un-waterfall-webpagetest","status":"publish","type":"post","link":"https:\/\/laikateam.com\/blog\/que-es-un-waterfall-webpagetest\/","title":{"rendered":"Qu\u00e9 es un waterfall y c\u00f3mo leerlo correctamente en Webpagetest"},"content":{"rendered":"<div>Continuamos la serie de post sobre Webpagetest, ya hemos visto la parte introductoria sobre <a href=\"https:\/\/www.mjcachon.com\/blog\/webpagetest-que-es\/\">qu\u00e9 es y para qu\u00e9 sirve Webpagetest<\/a> y seguimos adentr\u00e1ndonos en la tool, explicando m\u00e1s a fondo la parte de cascada o waterfall.<\/div>\n<div><\/div>\n<h2>\u00bfQu\u00e9 es un Waterfall?<\/h2>\n<div>\nEl gr\u00e1fico de cascada es cualquier diagrama que representa los datos que se generan de forma acumulativa y secuencial en todo el proceso de carga de una web, el cual, nos ofrece el rendimiento espec\u00edfico de los recursos necesarios&nbsp;entre navegador y&nbsp;servidor para que el usuario pueda ver una p\u00e1gina espec\u00edfica.<br \/>\nCada recurso de p\u00e1gina, desde HTML a im\u00e1genes, CSS, JavaScript y otros scripts, est\u00e1 representado en su propia l\u00ednea en el gr\u00e1fico, por tanto la cascada muestra el momento en que cada recurso se llama desde el servidor, hasta el momento en que se ha descargado y procesado en el navegador.<\/div>\n<div>Podemos hacer una analog\u00eda con el t\u00edpico gr\u00e1fico de Gantt, con un efecto que encadena unos recursos a otros, con esa forma secuencial, por lo que, por ejemplo, una p\u00e1gina no puede comenzar a descargar recursos hasta que haya completado su conexi\u00f3n DNS &nbsp;y haya establecido una conexi\u00f3n TCP.<\/div>\n<div><\/div>\n<div>Si nos dedicamos a SEO o al menos, nos interesa el SEO T\u00e9cnico o lo relativo a&nbsp;Web Performance, es necesario tener un conocimiento&nbsp;b\u00e1sico de las cascadas, ya que podremos usarlas como&nbsp;herramienta de diagn\u00f3stico para detectar errores y aplicar mejoras.<\/div>\n<div><\/div>\n<div>Lo r\u00e1pido o lento que carga una web es un aspecto clave en un proyecto, m\u00e1s a\u00fan de cara a garantizar la mejor experiencia de usuario posible y fomentar que el contenido de la web se sirva r\u00e1pido para ser consumido, tanto por usuarios, como por rastreadores web como Googlebot.<\/div>\n<div><\/div>\n<div>Por otro lado, los aspectos relativos a rendimiento y velocidad de carga, inciden de forma directa en otros canales, como puede ser el de Pago y m\u00e9tricas relevantes como el&nbsp;quality score de Adwords.<\/div>\n<div><\/div>\n<h2>Partes de&nbsp;una petici\u00f3n<\/h2>\n<div>Innegablemente el diagrama waterfall o cascada, es un informe muy valioso en web performance, ya que obtenemos visualizaciones de la actividad de la red y estas&nbsp;peticiones individuales, las vamos a explicar en 5&nbsp;fases, que son las que tienen lugar desde que un usuario hace una petici\u00f3n y visualiza el contenido a trav\u00e9s del navegador:<\/div>\n<div><\/div>\n<div><strong>1. DNS lookup<\/strong><\/div>\n<div>El tiempo en traducir el hostname a su ip. Esto suele ser corto, ser\u00eda algo similar a buscar un tel\u00e9fono en la gu\u00eda<\/div>\n<div><\/div>\n<div><strong>2. Inicial connection<\/strong><\/div>\n<div>El tiempo del navegador en establecer una conexi\u00f3n con el servidor. Esto ser\u00eda como llamar a un n\u00famero de tel\u00e9fono y esperar a que respondan.<\/div>\n<div><\/div>\n<div><strong>3. Negociaci\u00f3n SSL<\/strong><\/div>\n<div>El tiempo en ponerse de acuerdo, navegador y server, de la forma segura de comunicarse. En casos http se salta este paso, en casos https y <a href=\"https:\/\/es.wikipedia.org\/wiki\/SPDY\" target=\"_blank\" rel=\"noopener noreferrer\">spdy<\/a>, es obligatorio.<\/div>\n<div><\/div>\n<div><strong>4. TTFB<\/strong><\/div>\n<div>El tiempo para que el servidor prepare la respuesta a la petici\u00f3n. Si seguimos con la met\u00e1fora, el tiempo que tarda en dar la primera se\u00f1al. Sin duda es una de las m\u00e9tricas clave en performance. En palabras de Google deber\u00eda estar entre 100 y 500ms, siendo 200ms una muy buena m\u00e9trica.<\/div>\n<div><\/div>\n<div><strong>5. Content download<\/strong><\/div>\n<div>Tiempo para que el servidor env\u00ede el contenido de la respuesta. Es directamente proporcional al tama\u00f1o de la respuesta y a la velocidad de conexi\u00f3n.<\/div>\n<div><\/div>\n<div>Como ejemplo, en Webpagetest tenemos una visualizaci\u00f3n en la primera parte del Waterfall:<\/div>\n<div><img class=\"alignnone wp-image-4082 size-large\" src=\"https:\/\/laikateam.com\/blog\/wp-content\/uploads\/2020\/10\/Connection-View-Webpagetest-1024x393.png\" alt=\"Connection View Webpagetest\" width=\"1024\" height=\"393\"><\/div>\n<div>Las barras finitas al inicio de cada fila, son las que marcan qu\u00e9 tiempo tarda en buscar la conexi\u00f3n dns, conectar con el server y negociar el protocolo.<\/div>\n<div>Las barras m\u00e1s anchas, como se ve en la imagen, hacen referencia a la tipolog\u00eda de contenidos de los recursos que se solicitan de cada host.<\/div>\n<h2>Partes de&nbsp;un Waterfall<\/h2>\n<div>Respecto a los eventos que tienen lugar al cargar una p\u00e1gina, consideramos 4 a nivel de p\u00e1gina, relevantes, que ser\u00e1n en los que nos fijemos para hacer nuestros an\u00e1lisis del gr\u00e1fico:<\/div>\n<div>\n<div><\/div>\n<div><strong>1. Star render (first paint)<\/strong><\/div>\n<div>El tiempo que tarda el navegador en mostrar el primer Pixel de contenido en pantalla.<\/div>\n<div><\/div>\n<div>B\u00e1sicamente cuando el contenido empieza a mostrarse en el navegador del usuario, pero no implica que el primer contenido que aparece en primer lugar en pantalla&nbsp;es \u00fatil o importante, o simplemente anuncios u otros recursos.<\/div>\n<div><\/div>\n<div><strong>2. Dom Content Loaded<\/strong><\/div>\n<div>Despu\u00e9s de que el navegador haya recibido el html se parsea al DOM, que es una representaci\u00f3n virtual de la estructura de la p\u00e1gina.<\/div>\n<div><\/div>\n<div><strong>3. On load<\/strong><\/div>\n<div>El tiempo entre el inicio y el final de la carga. El navegador finaliza el evento cuando el DOM este listo y todas las im\u00e1genes cargadas. Esta info puede ser \u00fatil para ver c\u00f3mo se carga contenido below the fold.<\/div>\n<div><\/div>\n<div><strong>4. Document Complete<\/strong><\/div>\n<div>El tiempo que tardan la mayor\u00eda de los recursos de la p\u00e1gina en renderizar en el navegador, se tiene en cuenta el \u00abonLoad\u00bb que activa el navegador despu\u00e9s de que la mayor\u00eda de los recursos de la p\u00e1gina se han cargado completamente.&nbsp;En otras palabras, el tiempo de la carga completa, aunque es una m\u00e9trica inexacta y por eso se usa Fully Loaded, que es el momento en que se han cargado todos los recursos de la p\u00e1gina, incluidas las etiquetas de terceros que no son visibles y la p\u00e1gina est\u00e1 completa.<\/div>\n<\/div>\n<div><\/div>\n<div>Como ejemplo, en Webpagetest tenemos esta&nbsp;visualizaci\u00f3n en la segunda parte del Waterfall:<\/div>\n<div><\/div>\n<div><img class=\"alignnone wp-image-4083 size-large\" src=\"https:\/\/laikateam.com\/blog\/wp-content\/uploads\/2020\/10\/Waterfall-View-Webpagetest-1024x590.png\" alt=\"Waterfall View Webpagetest\" width=\"1024\" height=\"590\"><\/div>\n<div>\n<div>\nLo que vemos aqu\u00ed es que el DOM se ha cargado tras los 0,8 segundos y el documento completo, transcurrido los 2,0.<br \/>\nSolo se observa un recurso js que se demora m\u00e1s en cargar.<\/p>\n<h2>Colores&nbsp;del Waterfall<\/h2>\n<\/div>\n<div>Sobre los colores del diagrama, tenemos que diferenciar varios aspectos.<\/div>\n<div><\/div>\n<div>Por una parte, los <strong>recursos resultantes del an\u00e1lisis<\/strong>, en las filas, pueden arrastrar errores o tener status codes diferentes.<\/div>\n<div>\n<ul>\n<li><span style=\"color: #000000;\">Errores en rojo<\/span><\/li>\n<\/ul>\n<div>Por ejemplo cuando la url o recurso responde 404 o 500, la fila entera se marcar\u00e1 en rojo, para su r\u00e1pida identificaci\u00f3n.<\/div>\n<ul>\n<li><span style=\"color: #000000;\">Redirecciones en amarillo<\/span><\/li>\n<\/ul>\n<div>La url alternativa se muestra y el navegador ha de intentar de nuevo la petici\u00f3n , retrasando el tiempo de carga del recurso. Como todos sabemos, cada redirecci\u00f3n a\u00f1ade un tiempo de procesamiento que influye de forma directa en el rendimiento, por lo que tanto recursos internos como externos, que sufran redirecciones, nos impactar\u00e1n.<\/div>\n<ul>\n<li><span style=\"color: #000000;\">Cach\u00e9 en amarillo<\/span><\/li>\n<\/ul>\n<div>En segundos test con repeat view, algunos elementos pueden no incluir info sobre su validez, esos recursos sin cambios a veces ofrecen un 304, aunque no sea necesario, ya que la primera vez la info de cache debe es&nbsp;pertinente.<\/div>\n<\/div>\n<\/div>\n<div><\/div>\n<div><\/div>\n<div>\n<div>Por otro lado, las barras usa la herramienta, pinta distintos colores en base a los dos puntos anteriormente explicados: la conexi\u00f3n en franjas horizontales (adem\u00e1s de las tipolog\u00edas de contenido como html, css, js&#8230;.) y las fases de la carga mediante barras verticales.<\/div>\n<\/div>\n<div><\/div>\n<div>Franjas horizontales<\/div>\n<ul>\n<li>Azul verdoso es la b\u00fasqueda DNS<\/li>\n<li>Naranja es Connection<\/li>\n<li>Morado es la negocaci\u00f3n SSL<\/li>\n<\/ul>\n<p>Franjas verticales<\/p>\n<ul>\n<li>L\u00ednea verde, el Start render<\/li>\n<li>L\u00ednea morada, el DOM Content Loaded<\/li>\n<li>L\u00ednea azul fuerte, el Document complete<\/li>\n<\/ul>\n<div>\n<div>En resumen:<\/div>\n<ol>\n<li>Los <strong>status code, errores o ineficiencias<\/strong>, se visualizar\u00e1n con un color constante en la fila implicada.<\/li>\n<li>Las <strong>fases de la conexi\u00f3n<\/strong>, se visualizar\u00e1n con barras horizontales en distintas tonalidades, secuenciales como un flujo,&nbsp;junto a una simbolog\u00eda del tiempo transcurrido.<\/li>\n<li>Las <strong>fases de la carga de la web<\/strong> analizada, se visualizar\u00e1n con columnas o barras verticales de colores, que se iniciar\u00e1n en distintas fases, junto a una simbolog\u00eda del tiempo transcurrido.<\/li>\n<\/ol>\n<p>Un ejemplo de los colores, donde las l\u00edneas amarillas son las redirecciones y las franjas anchas moradas, son im\u00e1genes susceptibles de ser optimizadas. Tambi\u00e9n el alto volumen de ficheros js, va retrasando la carga y sumando muchas peticiones que deben realizarse cada vez.<br \/>\nLa franja vertical morada, marca el momento en el cual se ha cargado el contenido del DOM, en este caso tiene lugar a los 8 segundos, para acabar cargado el documento completo casi a los 12 segundos.<br \/>\n<img class=\"alignnone wp-image-4085 \" src=\"https:\/\/laikateam.com\/blog\/wp-content\/uploads\/2020\/10\/ejemplo-recursos-waterfall-webpagetest-743x1024.png\" alt=\"ejemplo recursos waterfall webpagetest\" width=\"544\" height=\"750\"><\/p>\n<\/div>\n<div>\n<h2>An\u00e1lisis b\u00e1sico de un Waterfall<\/h2>\n<\/div>\n<div>Como regla general, una buena cascada tiene pocas barras y estas&nbsp;son relativamente cortas, lo cual nos indica que la p\u00e1gina es \u00abdelgada\u00bb y que cada recurso se descarga y procesa con bastante rapidez.<\/div>\n<div><\/div>\n<div>Nos fijaremos pues en:<\/div>\n<ul>\n<li>n\u00famero de peticiones<\/li>\n<li>el tiempo que trascurre hasta el primer byte (TTFB)<\/li>\n<li>el tiempo que transcurre hasta iniciar el render<\/li>\n<li>el tiempo que transcurre hasta completa el documento<\/li>\n<\/ul>\n<p>Para analizar de forma completa estos diagramas tenemos que tener&nbsp;en nuestra mente 3 puntos interesantes, que nos har\u00e1n hacer una correcta lectura de estas cascadas de informaci\u00f3n, yendo m\u00e1s all\u00e1 de los datos cuantitativos:<\/p>\n<div>\n<ul>\n<li>la latencia que experimentan los recursos<\/li>\n<li>el orden en el que se cargan los recursos<\/li>\n<li>si un recurso bloque la carga de otros recursos<\/li>\n<\/ul>\n<p>Una mala cascada por tanto, puede ser la que origina muchas peticiones de recursos, adem\u00e1s de cargar los recursos de forma m\u00e1s lenta.<br \/>\nAlgunos ejemplos:<br \/>\n<img class=\"alignnone wp-image-4084 \" src=\"https:\/\/laikateam.com\/blog\/wp-content\/uploads\/2020\/10\/lectura-waterfall-webpagetest-918x1024.png\" alt=\"lectura waterfall webpagetest\" width=\"720\" height=\"803\"><\/p>\n<\/div>\n<p><img class=\"alignnone wp-image-4086 \" src=\"https:\/\/laikateam.com\/blog\/wp-content\/uploads\/2020\/10\/mejoras-webpagetest-1024x819.png\" alt=\"mejoras webpagetest\" width=\"709\" height=\"567\"><\/p>\n<div>\n&nbsp;<br \/>\nConcluyendo:<\/p>\n<ul>\n<li>las l\u00edneas \u00abstart render\u00bb y \u00abdocument complete\u00bb verticales deben producirse lo antes&nbsp;posible y deben estar tan cerca una de la otra como sea posible.<\/li>\n<li>que existan cuantas menos filas posibles.<\/li>\n<li>que existan cuantas menos&nbsp;barras naranjas posibles.<\/li>\n<li>el ttfb va m\u00e1s all\u00e1 de las configuraciones del server, tambi\u00e9n tienen que ver con servir de forma eficiente contenido din\u00e1mico y tener las bbdd bien optimizadas.<\/li>\n<\/ul>\n<h2>Trucos finales con Webpagetest<\/h2>\n<p>Para acabar el post, hay algunas caracter\u00edsticas que nos ayudar\u00e1n a continuar con nuestros an\u00e1lisis:<\/p>\n<ul>\n<li>Exportar<\/li>\n<\/ul>\n<p><img class=\"alignnone size-medium wp-image-4087\" src=\"https:\/\/laikateam.com\/blog\/wp-content\/uploads\/2020\/10\/exportar-waterfalla-webpagetest-300x199.png\" alt=\"exportar waterfalla webpagetest\" width=\"300\" height=\"199\"><\/p>\n<ul>\n<li>Customizar<\/li>\n<\/ul>\n<p><img class=\"alignnone size-medium wp-image-4089\" src=\"https:\/\/laikateam.com\/blog\/wp-content\/uploads\/2020\/10\/customizar-webpagetest-300x143.png\" alt=\"customizar webpagetest\" width=\"300\" height=\"143\"><\/p>\n<ul>\n<li>Tabla de detalles: es la versi\u00f3n&nbsp;num\u00e9rica de lo que hemos visto en el &nbsp;waterfall<\/li>\n<\/ul>\n<p><img class=\"alignnone size-medium wp-image-4088\" src=\"https:\/\/laikateam.com\/blog\/wp-content\/uploads\/2020\/10\/tabla-detalles-webpagetest-300x103.png\" alt=\"tabla detalles webpagetest\" width=\"300\" height=\"103\"><\/p>\n<ul>\n<li>Pinchar en una fila para obtener detalles concretos<\/li>\n<\/ul>\n<p><img class=\"alignnone size-medium wp-image-4090\" src=\"https:\/\/laikateam.com\/blog\/wp-content\/uploads\/2020\/10\/detalles-webpagetest-300x166.png\" alt=\"detalles webpagetest\" width=\"300\" height=\"166\"><\/p>\n<ul>\n<li>Puntuaci\u00f3n o Grados de Webpagetest: donde se asocian las carencias del an\u00e1lisis con recomendaciones a llevar a cabo respecto a compresi\u00f3n, caches, cdns y otros aspectos.<\/li>\n<\/ul>\n<p><img class=\"alignnone size-medium wp-image-4091\" src=\"https:\/\/laikateam.com\/blog\/wp-content\/uploads\/2020\/10\/grados-webpagetest-300x77.png\" alt=\"grados webpagetest\" width=\"300\" height=\"77\"><br \/>\n\u00a1Esto es todo por hoy!<br \/>\nEn el pr\u00f3ximo post ya hablaremos sobre comparar test con Webpagetest<\/p>\n<\/div>\n<div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Continuamos la serie de post sobre Webpagetest, ya hemos visto la parte introductoria sobre qu\u00e9 es y para qu\u00e9 sirve Webpagetest y seguimos adentr\u00e1ndonos en la tool, explicando m\u00e1s a fondo la parte de cascada o waterfall. \u00bfQu\u00e9 es un Waterfall? El gr\u00e1fico de cascada es cualquier diagrama que representa los datos que se generan<\/p>\n","protected":false},"author":2,"featured_media":6531,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v16.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Qu\u00e9 es un waterfall y como leerlo en Webpagetest<\/title>\n<meta name=\"description\" content=\"\u00bfQui\u00e9res saber c\u00f3mo leer un waterfall o diagrama de cascada de Webpagetest? En el post de hoy te contamos todos los aspectos necesarios, WPO al poder!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/laikateam.com\/blog\/que-es-un-waterfall-webpagetest\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Qu\u00e9 es un waterfall y como leerlo en Webpagetest\" \/>\n<meta property=\"og:description\" content=\"\u00bfQui\u00e9res saber c\u00f3mo leer un waterfall o diagrama de cascada de Webpagetest? En el post de hoy te contamos todos los aspectos necesarios, WPO al poder!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/laikateam.com\/blog\/que-es-un-waterfall-webpagetest\/\" \/>\n<meta property=\"og:site_name\" content=\"LaikaTeam\" \/>\n<meta property=\"article:published_time\" content=\"2017-07-23T19:25:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-05-31T13:58:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/laikateam.com\/blog\/wp-content\/uploads\/2017\/07\/waterfall-webpagetest.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@laikateam_es\" \/>\n<meta name=\"twitter:site\" content=\"@laikateam_es\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"9 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/laikateam.com\/blog\/#organization\",\"name\":\"Laika\",\"url\":\"https:\/\/laikateam.com\/blog\/\",\"sameAs\":[\"https:\/\/www.instagram.com\/laika_team\",\"https:\/\/www.linkedin.com\/company\/laika-team\/\",\"https:\/\/twitter.com\/laikateam_es\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/laikateam.com\/blog\/#logo\",\"inLanguage\":\"es\",\"url\":\"https:\/\/laikateam.com\/blog\/wp-content\/uploads\/2021\/06\/logo-laika.png\",\"contentUrl\":\"https:\/\/laikateam.com\/blog\/wp-content\/uploads\/2021\/06\/logo-laika.png\",\"width\":318,\"height\":350,\"caption\":\"Laika\"},\"image\":{\"@id\":\"https:\/\/laikateam.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/laikateam.com\/blog\/#website\",\"url\":\"https:\/\/laikateam.com\/blog\/\",\"name\":\"LaikaTeam\",\"description\":\"Strategic &amp; SEO Consulting\",\"publisher\":{\"@id\":\"https:\/\/laikateam.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/laikateam.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"es\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/laikateam.com\/blog\/que-es-un-waterfall-webpagetest\/#primaryimage\",\"inLanguage\":\"es\",\"url\":\"https:\/\/laikateam.com\/blog\/wp-content\/uploads\/2017\/07\/waterfall-webpagetest.jpg\",\"contentUrl\":\"https:\/\/laikateam.com\/blog\/wp-content\/uploads\/2017\/07\/waterfall-webpagetest.jpg\",\"width\":1920,\"height\":1080},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/laikateam.com\/blog\/que-es-un-waterfall-webpagetest\/#webpage\",\"url\":\"https:\/\/laikateam.com\/blog\/que-es-un-waterfall-webpagetest\/\",\"name\":\"Qu\\u00e9 es un waterfall y como leerlo en Webpagetest\",\"isPartOf\":{\"@id\":\"https:\/\/laikateam.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/laikateam.com\/blog\/que-es-un-waterfall-webpagetest\/#primaryimage\"},\"datePublished\":\"2017-07-23T19:25:28+00:00\",\"dateModified\":\"2021-05-31T13:58:03+00:00\",\"description\":\"\\u00bfQui\\u00e9res saber c\\u00f3mo leer un waterfall o diagrama de cascada de Webpagetest? En el post de hoy te contamos todos los aspectos necesarios, WPO al poder!\",\"breadcrumb\":{\"@id\":\"https:\/\/laikateam.com\/blog\/que-es-un-waterfall-webpagetest\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/laikateam.com\/blog\/que-es-un-waterfall-webpagetest\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/laikateam.com\/blog\/que-es-un-waterfall-webpagetest\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/laikateam.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Qu\\u00e9 es un waterfall y c\\u00f3mo leerlo correctamente en Webpagetest\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/laikateam.com\/blog\/que-es-un-waterfall-webpagetest\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/laikateam.com\/blog\/que-es-un-waterfall-webpagetest\/#webpage\"},\"author\":{\"@id\":\"https:\/\/laikateam.com\/blog\/#\/schema\/person\/57bc6c6ac096e3437e2261bf39255923\"},\"headline\":\"Qu\\u00e9 es un waterfall y c\\u00f3mo leerlo correctamente en Webpagetest\",\"datePublished\":\"2017-07-23T19:25:28+00:00\",\"dateModified\":\"2021-05-31T13:58:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/laikateam.com\/blog\/que-es-un-waterfall-webpagetest\/#webpage\"},\"wordCount\":1743,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/laikateam.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/laikateam.com\/blog\/que-es-un-waterfall-webpagetest\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/laikateam.com\/blog\/wp-content\/uploads\/2017\/07\/waterfall-webpagetest.jpg\",\"articleSection\":[\"Herramientas\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/laikateam.com\/blog\/que-es-un-waterfall-webpagetest\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/laikateam.com\/blog\/#\/schema\/person\/57bc6c6ac096e3437e2261bf39255923\",\"name\":\"MJ Cachon\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/laikateam.com\/blog\/#personlogo\",\"inLanguage\":\"es\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4f93a22677b533182414d91829674844?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4f93a22677b533182414d91829674844?s=96&d=mm&r=g\",\"caption\":\"MJ Cachon\"},\"sameAs\":[\"https:\/\/www.laikateam.com\/\"],\"url\":\"https:\/\/laikateam.com\/blog\/author\/mj-cachon\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/laikateam.com\/blog\/wp-json\/wp\/v2\/posts\/4074"}],"collection":[{"href":"https:\/\/laikateam.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/laikateam.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/laikateam.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/laikateam.com\/blog\/wp-json\/wp\/v2\/comments?post=4074"}],"version-history":[{"count":2,"href":"https:\/\/laikateam.com\/blog\/wp-json\/wp\/v2\/posts\/4074\/revisions"}],"predecessor-version":[{"id":6533,"href":"https:\/\/laikateam.com\/blog\/wp-json\/wp\/v2\/posts\/4074\/revisions\/6533"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/laikateam.com\/blog\/wp-json\/wp\/v2\/media\/6531"}],"wp:attachment":[{"href":"https:\/\/laikateam.com\/blog\/wp-json\/wp\/v2\/media?parent=4074"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/laikateam.com\/blog\/wp-json\/wp\/v2\/categories?post=4074"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/laikateam.com\/blog\/wp-json\/wp\/v2\/tags?post=4074"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}