{"id":3972,"date":"2017-05-04T19:57:35","date_gmt":"2017-05-04T19:57:35","guid":{"rendered":"https:\/\/www.mjcachon.com\/?p=3972"},"modified":"2021-05-31T16:03:25","modified_gmt":"2021-05-31T14:03:25","slug":"webpagetest-que-es","status":"publish","type":"post","link":"https:\/\/laikateam.com\/blog\/webpagetest-que-es\/","title":{"rendered":"WebpageTest: qu\u00e9 es y para qu\u00e9 sirve"},"content":{"rendered":"<div>Hoy vamos a hablar de <a href=\"https:\/\/www.webpagetest.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">WebPageTest<\/a>, una herramienta imprescindible para analizar tiempos de carga, de forma gratuita, m\u00e1s all\u00e1 de otras tools como Pingdomtools, Gtmetrix, YSlow o Page Speed.<\/div>\n<div><\/div>\n<div>Por tanto hoy&nbsp;abrimos una serie de post sobre Webpagetest, la herramienta en la que merece la pena profundizar y que nos dar\u00e1 insights muy valiosos a trav\u00e9s del an\u00e1lisis y seguimiento de <a href=\"https:\/\/www.mjcachon.com\/wiki\/que-es-un-kpi\/\">unos KPIs<\/a> de rendimiento muy \u00fatiles.<\/div>\n<div><\/div>\n<h2>Qu\u00e9 es y qu\u00e9 mide Webpagetest<\/h2>\n<div>Webpagetest mide el tiempo que tarda una web en cargar, desde la primera petici\u00f3n, hasta que el navegador muestra el contenido al completo. O dicho de otra manera: mide cu\u00e1nto tiene que esperar un usuario hasta poder usar la p\u00e1gina.<\/div>\n<div><\/div>\n<div>No obstante alguna de las m\u00e9tricas que muestra por defecto, como \u00abLoad time\u00bb,&nbsp;puede no representar de manera fiable o precisa el tiempo que espera el usuario.<\/div>\n<div><\/div>\n<div>Quiz\u00e1s es m\u00e1s sensato fijarse en la m\u00e9trica \u00abDOMContentLoaded\u00bb pues ser\u00eda lo mismo que la anterior, pero exceptuando la carga de im\u00e1genes , por lo que&nbsp;puede ser m\u00e1s acertado o relevante como m\u00e9trica.<\/div>\n<div><\/div>\n<div>Con esto hacemos una reflexi\u00f3n que se extiende a casi cualquier software:&nbsp;<strong>La m\u00e9trica por defecto no es siempre la m\u00e1s fina para la p\u00e1gina analizada<\/strong>.<\/div>\n<div><\/div>\n<div>Webpagetest y otras herramientas de performance buscan responder dos preguntas principales:<\/div>\n<ol>\n<li><strong>C\u00f3mo de r\u00e1pida es la web<\/strong><\/li>\n<li><strong>C\u00f3mo podr\u00eda ser la web m\u00e1s r\u00e1pida<\/strong><\/li>\n<\/ol>\n<div>En este sentido nos encontramos dos tipos de tools:<\/div>\n<ul>\n<li><strong>Herramientas Synthetic<\/strong><\/li>\n<li><strong>Herramientas Real User Monitoring (RUM)<\/strong><\/li>\n<\/ul>\n<div>Las RUM son las m\u00e1s fiables, ya que se centran en la experiencia real del usuario, las sint\u00e9ticas aunque pretendan acercarse a mediciones reales del usuario, est\u00e1n dise\u00f1adas en centrarse en el performance de una web bajo estrictas condiciones que son altamente vol\u00e1tiles en RUM.<\/div>\n<h2>Fases de An\u00e1lisis con WebPageTest<\/h2>\n<div>La herramienta analiza sitios de forma gratuita y dicho an\u00e1lisis atraviesa&nbsp;tres fases principales:<\/div>\n<div>\n<ol>\n<li><strong>Waiting<\/strong><\/li>\n<li><strong>Testing<\/strong><\/li>\n<li><strong>Done<\/strong><\/li>\n<\/ol>\n<div>Al ser una herramienta p\u00fablica puede estar siendo usada por mucha gente a la vez, por lo que la petici\u00f3n de an\u00e1lisis puede prolongarse en ocasiones, haciendo m\u00e1s larga la fase de waiting.<\/div>\n<div><\/div>\n<div>El test puede entrar \u00aben cola\u00bb y en funci\u00f3n de la complejidad de los test que se ejecuten delante, puede demorarse m\u00e1s, por lo cual su tiempo es indeterminado seg\u00fan el caso.<\/div>\n<div><\/div>\n<div><img class=\"alignnone  wp-image-3973\" src=\"https:\/\/laikateam.com\/blog\/wp-content\/uploads\/2020\/10\/webpagetest-fases.png\" alt=\"webpagetest-fases\" width=\"776\" height=\"261\"><\/div>\n<div><\/div>\n<div>No obstante, se pueden comprobar los listados de test en cola, en&nbsp;<a href=\"https:\/\/www.webpagetest.org\/getLocations.php\" target=\"_blank\" rel=\"noopener noreferrer\">webpagetest.org\/getLocations.php<\/a><\/div>\n<div><\/div>\n<div>Con configuraciones simples, la fase de test puede durar un par de minutos y despu\u00e9s mostrarnos el report resumido, como punto de partida de profundizar en el an\u00e1lisis<\/div>\n<div><\/div>\n<h2>Tabla resumen de resultados en WebPageTest<\/h2>\n<div>Una vez finalizado el test, se mostrar\u00e1n todas las m\u00e9tricas resumidas en una tabla, con los principales hitos<\/div>\n<div><\/div>\n<h3>Load time<\/h3>\n<div>Tiempo desde la solicitud inicial hasta que el navegador carga. Es el document complete time<\/div>\n<div>Es la m\u00e9trica por defecto de la herramienta<\/div>\n<div><\/div>\n<h3>First byte<\/h3>\n<div>Tiempo hasta que el servidor responde con el primer byte de la respuesta<\/div>\n<h3>Start render<\/h3>\n<div>Tiempo hasta que el navegador pinta contenido en la pantalla<\/div>\n<div><\/div>\n<h3>DOM elements<\/h3>\n<div>N\u00famero de elementos en el documento<\/div>\n<h3>Document Complete<\/h3>\n<div><strong>Time<\/strong>: es lo mismo que load time<\/div>\n<div><strong>Request<\/strong>:&nbsp;N\u00famero de solicitudes http antes de la carga, sin incluir la solicitud inicial.<\/div>\n<div><strong>Bytes In<\/strong>: tama\u00f1o total del cuerpo de las respuestas a las solicitudes de Document Complete, expresado en bytes.<\/div>\n<div><\/div>\n<h3>Fully loaded<\/h3>\n<div><strong>Time<\/strong>: tiempo desde la solicitud inicial hasta que WPT determina que la p\u00e1gina ha terminado de cargar. La p\u00e1gina ha podido esperar a cargar para aplazar la carga de contenido secundario. Ese tiempo se suma a la m\u00e9trica.<\/div>\n<div><strong>Request<\/strong>: n\u00famero total de peticiones http grabadas en el test, sin incluir la petici\u00f3n inicial<\/div>\n<div><strong>BytesIn<\/strong>: n\u00famero de bytes recibidos en el test.<\/div>\n<div><\/div>\n<div>Despu\u00e9s de cada an\u00e1lisis, WebPageTest vac\u00eda el cache de navegador para asegurarse que descarga todos los recursos, esto se considera la primera vista o <strong>\u00abfirst view\u00bb.<\/strong><\/div>\n<div><\/div>\n<div>Otra configuraci\u00f3n por defecto de WebPageTest es cargar la p\u00e1gina una segunda vez sin vaciar el cache, esto es el <strong>\u00abrepeat view\u00bb<\/strong>.<\/div>\n<div><\/div>\n<div>La diferencia entre el n\u00famero de peticiones en first o repeat view, puede ser un magn\u00edfico indicador del n\u00famero de elementos cacheables en la web.<\/div>\n<div><\/div>\n<div>Este resumen de m\u00e9tricas solo refleja el rendimiento de ese test aislado, a menos test, las m\u00e9tricas pueden verse f\u00e1cilmente afectadas por fluctuaciones de la red o del server, por tanto, con test aislados, se pueden tomar por anomal\u00edas aspectos que pueden ser irreales.<\/div>\n<div><\/div>\n<div>Una buena pr\u00e1ctica con WebPageTest es lanzar m\u00faltiples test y elegir el m\u00e1s representativo para observar las m\u00e9tricas, como m\u00e1ximo se pueden lanzar 9 veces, y para elegir en cual fijarnos podemos ordenar todos los test por una misma m\u00e9trica y elegir la mediana (<strong>\u00abmedian run\u00bb<\/strong>). La m\u00e9trica por defecto es <strong>\u00abdocument complete time\u00bb<\/strong>.<\/div>\n<div>En esta imagen se observa un an\u00e1lisis basado en 3 test, tal y como se comenta:<\/div>\n<\/div>\n<div><\/div>\n<div><img class=\"alignnone size-full wp-image-3974\" src=\"https:\/\/laikateam.com\/blog\/wp-content\/uploads\/2020\/10\/webpagetest-performance-summary.png\" alt=\"webpagetest-performance-summary\" width=\"1940\" height=\"432\"><\/div>\n<div>\n<div><\/div>\n<div><strong>Truco<\/strong>: se puede cambiar el par\u00e1metro en la url para ordenar por la m\u00e9trica deseada medianMetric=bytesIn. (Ver Details Of Request In Test Results)<\/div>\n<\/div>\n<div><\/div>\n<div>\n<h2>Despu\u00e9s del test con WebPageTest<\/h2>\n<div>Despu\u00e9s del an\u00e1lisis&nbsp;hay que tener presente que el valor real de las m\u00e9tricas viene de comparar con otros test configurados de forma similar.&nbsp;Comparar es la clave para determinar si las diferencias entre test tienen impacto positivo o negativo.<\/div>\n<div><\/div>\n<div>Por tanto el primer test no nos dir\u00e1 demasiado, sino hacemos cambios en la web y volvemos a repetir el test.<\/div>\n<\/div>\n<div><\/div>\n<div>En siguientes post seguiremos avanzando en otros conceptos como:<\/div>\n<div><\/div>\n<ul>\n<li>Qu\u00e9 es un waterfall y c\u00f3mo leerlo correctamente<\/li>\n<li>C\u00f3mo elegir m\u00e9tricas de valor<\/li>\n<li>C\u00f3mo comparar entre varios test<\/li>\n<li>C\u00f3mo simular usuarios reales<\/li>\n<li>&#8230;<\/li>\n<\/ul>\n<p>Para peticiones y otras sugerencias, \u00a1esperamos vuestros comentarios!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hoy vamos a hablar de WebPageTest, una herramienta imprescindible para analizar tiempos de carga, de forma gratuita, m\u00e1s all\u00e1 de otras tools como Pingdomtools, Gtmetrix, YSlow o Page Speed. Por tanto hoy&nbsp;abrimos una serie de post sobre Webpagetest, la herramienta en la que merece la pena profundizar y que nos dar\u00e1 insights muy valiosos a<\/p>\n","protected":false},"author":2,"featured_media":6537,"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>WebpageTest: qu\u00e9 es y para qu\u00e9 sirve - LaikaTeam<\/title>\n<meta name=\"description\" content=\"Iniciamos una serie de post sobre WebPageTest, el primero para hablar sobre qu\u00e9 es WebPageTest y para qu\u00e9 puedes usarla :)\" \/>\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\/webpagetest-que-es\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WebpageTest: qu\u00e9 es y para qu\u00e9 sirve - LaikaTeam\" \/>\n<meta property=\"og:description\" content=\"Iniciamos una serie de post sobre WebPageTest, el primero para hablar sobre qu\u00e9 es WebPageTest y para qu\u00e9 puedes usarla :)\" \/>\n<meta property=\"og:url\" content=\"https:\/\/laikateam.com\/blog\/webpagetest-que-es\/\" \/>\n<meta property=\"og:site_name\" content=\"LaikaTeam\" \/>\n<meta property=\"article:published_time\" content=\"2017-05-04T19:57:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-05-31T14:03:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/laikateam.com\/blog\/wp-content\/uploads\/2017\/05\/webpagetest-que-es.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=\"5 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\/webpagetest-que-es\/#primaryimage\",\"inLanguage\":\"es\",\"url\":\"https:\/\/laikateam.com\/blog\/wp-content\/uploads\/2017\/05\/webpagetest-que-es.jpg\",\"contentUrl\":\"https:\/\/laikateam.com\/blog\/wp-content\/uploads\/2017\/05\/webpagetest-que-es.jpg\",\"width\":1920,\"height\":1080},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/laikateam.com\/blog\/webpagetest-que-es\/#webpage\",\"url\":\"https:\/\/laikateam.com\/blog\/webpagetest-que-es\/\",\"name\":\"WebpageTest: qu\\u00e9 es y para qu\\u00e9 sirve - LaikaTeam\",\"isPartOf\":{\"@id\":\"https:\/\/laikateam.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/laikateam.com\/blog\/webpagetest-que-es\/#primaryimage\"},\"datePublished\":\"2017-05-04T19:57:35+00:00\",\"dateModified\":\"2021-05-31T14:03:25+00:00\",\"description\":\"Iniciamos una serie de post sobre WebPageTest, el primero para hablar sobre qu\\u00e9 es WebPageTest y para qu\\u00e9 puedes usarla :)\",\"breadcrumb\":{\"@id\":\"https:\/\/laikateam.com\/blog\/webpagetest-que-es\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/laikateam.com\/blog\/webpagetest-que-es\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/laikateam.com\/blog\/webpagetest-que-es\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/laikateam.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WebpageTest: qu\\u00e9 es y para qu\\u00e9 sirve\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/laikateam.com\/blog\/webpagetest-que-es\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/laikateam.com\/blog\/webpagetest-que-es\/#webpage\"},\"author\":{\"@id\":\"https:\/\/laikateam.com\/blog\/#\/schema\/person\/57bc6c6ac096e3437e2261bf39255923\"},\"headline\":\"WebpageTest: qu\\u00e9 es y para qu\\u00e9 sirve\",\"datePublished\":\"2017-05-04T19:57:35+00:00\",\"dateModified\":\"2021-05-31T14:03:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/laikateam.com\/blog\/webpagetest-que-es\/#webpage\"},\"wordCount\":1017,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/laikateam.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/laikateam.com\/blog\/webpagetest-que-es\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/laikateam.com\/blog\/wp-content\/uploads\/2017\/05\/webpagetest-que-es.jpg\",\"articleSection\":[\"Herramientas\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/laikateam.com\/blog\/webpagetest-que-es\/#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\/3972"}],"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=3972"}],"version-history":[{"count":2,"href":"https:\/\/laikateam.com\/blog\/wp-json\/wp\/v2\/posts\/3972\/revisions"}],"predecessor-version":[{"id":6538,"href":"https:\/\/laikateam.com\/blog\/wp-json\/wp\/v2\/posts\/3972\/revisions\/6538"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/laikateam.com\/blog\/wp-json\/wp\/v2\/media\/6537"}],"wp:attachment":[{"href":"https:\/\/laikateam.com\/blog\/wp-json\/wp\/v2\/media?parent=3972"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/laikateam.com\/blog\/wp-json\/wp\/v2\/categories?post=3972"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/laikateam.com\/blog\/wp-json\/wp\/v2\/tags?post=3972"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}