Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Better integration with WebPagetest HARs #126

Open
gitgrimbo opened this issue Aug 27, 2018 · 0 comments
Open

Better integration with WebPagetest HARs #126

gitgrimbo opened this issue Aug 27, 2018 · 0 comments

Comments

@gitgrimbo
Copy link
Collaborator

The HARs generated by WebPagetest have lots of extra data in the page object, which would be good to show as part of the HAR waterfall.

For example (but not limited to):

  • pageTimings._startRender
  • _visualComplete*
  • _chromeUserTiming.*

Sample page object from a WebPagetest HAR.

{
  "startedDateTime": "2018-08-23T07:26:55.878+00:00",
  "title": "Run 1, First View for https://example.com",
  "id": "page_1_0_1",
  "pageTimings": {
    "onLoad": 3705,
    "onContentLoad": -1,
    "_startRender": 1700
  },
  "_minify_total": -1,
  "_responses_200": 24,
  "_testStartOffset": 0,
  "_bytesOut": 11067,
  "_gzip_savings": 5380,
  "_requestsFull": 24,
  "_start_epoch": 0,
  "_connections": 5,
  "_base_page_cdn": "",
  "_bytesOutDoc": 10601,
  "_result": 0,
  "_final_base_page_request_id": "7448FED438F08E237C6BBFEFBC87FB2A",
  "_score_cookies": -1,
  "_basePageSSLTime": 194,
  "_docTime": 3705,
  "_domContentLoadedEventEnd": 1965,
  "_image_savings": 33641,
  "_requestsDoc": 23,
  "_firstMeaningfulPaint": 2592,
  "_firstTextPaint": 1627,
  "_firstPaint": 1626.3000000035,
  "_score_cdn": 21,
  "_optimization_checked": 1,
  "_image_total": 69606,
  "_score_minify": -1,
  "_gzip_total": 283643,
  "_responses_404": 0,
  "_loadTime": 3705,
  "_URL": "https://example.com",
  "_score_combine": -1,
  "_firstContentfulPaint": 1627,
  "_firstLayout": 1589,
  "_score_etags": -1,
  "_loadEventStart": 3705,
  "_minify_savings": -1,
  "_score_progressive_jpeg": 0,
  "_domInteractive": 1964,
  "_score_gzip": 99,
  "_score_compress": 52,
  "_domContentLoadedEventStart": 1964,
  "_final_url": "https://example.com",
  "_bytesInDoc": 351248,
  "_firstImagePaint": 1627,
  "_score_keep-alive": 100,
  "_loadEventEnd": 3705,
  "_cached": 0,
  "_score_cache": 19,
  "_responses_other": 0,
  "_main_frame": "EA85A24721F8114B3EA9AFE323C8E592",
  "_fullyLoaded": 3956,
  "_requests": 24,
  "_final_base_page_request": 0,
  "_TTFB": 726,
  "_bytesIn": 356682,
  "_test_run_time_ms": 10303,
  "_browser_version": "68.0.3440.106",
  "_base_page_dns_server": "ns4.google.com",
  "_fullyLoadedCPUms": 4460,
  "_PerformancePaintTiming.first-contentful-paint": 1626.3000000035,
  "_base_page_ip_ptr": "ams15s22-in-f180.1e100.net",
  "_eventName": "Step_1",
  "_detected": {
    "JavaScript Frameworks": "React 16.4.2,RequireJS 2.3.5",
    "JavaScript Libraries": "jQuery 3.3.1",
    "Web Servers": "Google App Engine"
  },
  "_base_page_cname": "",
  "_document_URL": "https://example.com",
  "_date": 1535009215.8781,
  "_PerformancePaintTiming.first-paint": 1626.3000000035,
  "_domElements": 398,
  "_browserVersion": "68.0.3440.106",
  "_document_origin": "https://example.com",
  "_browser_name": "Chrome",
  "_detected_apps": {
    "React": "16.4.2",
    "jQuery": "3.3.1",
    "Google App Engine": "",
    "RequireJS": "2.3.5"
  },
  "_fullyLoadedCPUpct": 21.766715471,
  "_domComplete": 3705,
  "_document_hostname": "example.com",
  "_Images": "[{\"url\":\"https://example.com/image.jpg\",\"width\":298,\"height\":531,\"naturalWidth\":298,\"naturalHeight\":531}]",
  "_Colordepth": 24,
  "_Resolution": "{\"absolute\":{\"height\":1200,\"width\":1920},\"available\":{\"height\":1200,\"width\":1920}}",
  "_Dpi": "{\"dppx\":1,\"dpcm\":37.79527559055118,\"dpi\":96}",
  "_lastVisualChange": 3500,
  "_visualComplete": 3500,
  "_render": 1700,
  "_SpeedIndex": 2803,
  "_visualComplete85": 3500,
  "_visualComplete90": 3500,
  "_visualComplete95": 3500,
  "_visualComplete99": 3500,
  "_chromeUserTiming.fetchStart": 3,
  "_chromeUserTiming.unloadEventStart": 738,
  "_chromeUserTiming.unloadEventEnd": 738,
  "_chromeUserTiming.domLoading": 748,
  "_chromeUserTiming.responseEnd": 772,
  "_chromeUserTiming.firstLayout": 1588,
  "_chromeUserTiming.firstPaint": 1626,
  "_chromeUserTiming.firstMeaningfulPaintCandidate": 2591,
  "_chromeUserTiming.firstContentfulPaint": 1626,
  "_chromeUserTiming.firstTextPaint": 1626,
  "_chromeUserTiming.firstImagePaint": 1626,
  "_chromeUserTiming.domInteractive": 1964,
  "_chromeUserTiming.domContentLoadedEventStart": 1964,
  "_chromeUserTiming.domContentLoadedEventEnd": 1965,
  "_chromeUserTiming.firstMeaningfulPaint": 2591,
  "_chromeUserTiming.domComplete": 3705,
  "_chromeUserTiming.loadEventStart": 3705,
  "_chromeUserTiming.loadEventEnd": 3705,
  "_blinkFeatureFirstUsed": {
    "AnimatedCSSFeatures": [],
    "CSSFeatures": {
      "CSSPropertyBackgroundRepeat": 767.157,
      "CSSPropertyTextAlign": 767.217,
      "CSSPropertyPosition": 766.443,
      "CSSPropertyAliasWebkitTransition": 766.675,
      "CSSPropertyWebkitMarginBefore": 766.879,
      "CSSPropertyListStyleType": 767.375,
      "CSSPropertyOverflow": 766.398,
      "CSSPropertyFontFamily": 769.229,
      "CSSPropertyBackgroundColor": 766.457,
      "CSSPropertyFontWeight": 1546.536,
      "CSSPropertyLeft": 766.616,
      "CSSPropertyPaddingTop": 766.911,
      "CSSPropertyOverflowY": 766.429,
      "CSSPropertyCursor": 767.245,
      "CSSPropertyBottom": 766.598,
      "CSSPropertyMaxWidth": 769.39,
      "CSSPropertyBorderCollapse": 1546.396,
      "CSSPropertyMargin": 766.316,
      "CSSPropertyTop": 766.561,
      "CSSPropertyMarginBottom": 767.292,
      "CSSPropertyTextDecoration": 767.332,
      "CSSPropertyBorderRight": 767.504,
      "CSSPropertyHeight": 766.386,
      "CSSPropertyBackground": 769.289,
      "CSSPropertyFloat": 767.201,
      "CSSPropertyAliasWebkitBackfaceVisibility": 766.7,
      "CSSPropertyBorderTop": 767.401,
      "CSSPropertyMinHeight": 769.416,
      "CSSPropertyDisplay": 766.519,
      "CSSPropertyEmptyCells": 1546.414,
      "CSSPropertyFill": 3697.378,
      "CSSPropertyPaddingLeft": 769.438,
      "CSSPropertyMarginTop": 767.261,
      "CSSPropertyPadding": 766.331,
      "CSSPropertyBorderLeft": 767.476,
      "CSSPropertyBoxSizing": 766.357,
      "CSSPropertyRight": 766.58,
      "CSSPropertyBoxShadow": 766.855,
      "CSSPropertyAliasWebkitBoxSizing": 766.345,
      "CSSPropertyFontSize": 769.26,
      "CSSPropertyVerticalAlign": 769.369,
      "CSSPropertyBackgroundSize": 767.143,
      "CSSPropertyClear": 766.495,
      "CSSPropertyPaddingBottom": 1546.484,
      "CSSPropertyZIndex": 766.279,
      "CSSPropertyAliasWebkitTransform": 766.641,
      "CSSPropertyPaddingRight": 769.456,
      "CSSPropertyBackgroundImage": 767.122,
      "CSSPropertyTransform": 766.655,
      "CSSPropertyContent": 766.508,
      "CSSPropertyBorderBottom": 767.417,
      "CSSPropertyColor": 766.54,
      "CSSPropertyWidth": 766.374,
      "CSSPropertyBorderRadius": 767.28,
      "CSSPropertyTransition": 766.688,
      "CSSPropertyWebkitMarginAfter": 766.89,
      "CSSPropertyBorder": 767.176
    },
    "Features": {
      "XMLHttpRequestAsynchronous": 1986.071,
      "LangAttribute": 1555.679,
      "XMLDocument": 3465.204,
      "SameOriginApplicationScript": 1874.496,
      "SecureContextCheckPassed": 766.205,
      "CookieGet": 3457.047,
      "HasIDClassTagAttribute": 766.247,
      "CrossOriginApplicationScript": 1535.018,
      "DeprecatedWebKitLinearGradient": 767.082,
      "ScrollToFragmentRequested": 3466.549,
      "BodyScrollsInAdditionToViewport": 1556.768,
      "ScrollToFragmentFailWithASCII": 3466.572,
      "SVGSVGElementInXMLDocument": 3465.562,
      "HTMLTableCellElementColspan": 2540.442,
      "SVGSVGElementInDocument": 3465.555,
      "CSSAtRuleMedia": 766.743,
      "UnprefixedRequestAnimationFrame": 0.937,
      "HasBeforeOrAfterPseudoElement": 766.475,
      "HTMLElementDeprecatedWidth": 2534.967,
      "Fetch": 1543.768,
      "HTMLSlotElement": 1949.831,
      "LinkRelPreload": 770.989,
      "V8StrictMode": 1552.353,
      "SecureContextCheckFailed": 3466.157,
      "SVGSVGElement": 3465.474,
      "CSSGradient": 767.112,
      "LangAttributeOnHTML": 1555.724,
      "PendingStylesheetAddedAfterBodyStarted": 1546.302,
      "StarInTimingAllowOrigin": 1927.2,
      "CleanScriptElementWithNonce": 764.744,
      "SecureContextCheckForSandboxedOriginFailed": 3466.145,
      "V8SloppyMode": 0,
      "CrossOriginTextScript": 1927.276
    }
  },
  "_run": 1,
  "_step": 1,
  "_effectiveBps": 110427,
  "_effectiveBpsDoc": 117908,
  "_domTime": 0,
  "_aft": 0,
  "_titleTime": 0,
  "_domLoading": 0,
  "_server_rtt": 0,
  "_smallImageCount": 4,
  "_bigImageCount": 0,
  "_maybeCaptcha": 0
}

Each entry object also contains extra data, but this data may not be relevant to show (not all entry data shown below):

{
  "_run": 1,
  "_cached": 0,
  "_ip_addr": "216.58.212.180",
  "_initiator_line": "",
  "_bytesOut": 467,
  "_load_ms": 239,
  "_http2_stream_id": 1,
  "_http2_stream_weight": 256,
  "_request_id": "7448FED438F08E237C6BBFEFBC87FB2A",
  "_image_save": null,
  "_minify_total": null,
  "_cacheControl": "public, max-age=600",
  "_score_cdn": -1,
  "_id": "7448FED438F08E237C6BBFEFBC87FB2A",
  "_dns_end": 175,
  "_priority": "HIGHEST",
  "_http2_stream_exclusive": "True",
  "_image_total": null,
  "_minify_save": null,
  "_score_cookies": -1,
  "_ttfb_ms": 192,
  "_score_cache": -1,
  "_connect_start": 175,
  "_score_compress": -1,
  "_cache_time": null,
  "_objectSizeUncompressed": 21222,
  "_load_start": 534,
  "_server_port": "443",
  "_protocol": "HTTP/2",
  "_score_gzip": 100,
  "_type": 3,
  "_full_url": "https://example.com",
  "_ssl_end": 533,
  "_objectSize": 7282,
  "_gzip_total": 7282,
  "_socket_group": "ssl/example.com:443",
  "_contentType": "text/html",
  "_initial_priority": "VeryHigh",
  "_initiator_column": "",
  "_expires": "Thu, 23 Aug 2018 07:36:56 GMT",
  "_score_combine": -1,
  "_score_etags": -1,
  "_initiator_type": "script",
  "_frame_id": "EA85A24721F8114B3EA9AFE323C8E592",
  "_host": "example.com",
  "_bytesIn": 7282,
  "_raw_id": "7448FED438F08E237C6BBFEFBC87FB2A",
  "_gzip_save": 0,
  "_score_keep-alive": 100,
  "_is_secure": 1,
  "_dns_start": 5,
  "_server_count": null,
  "_score_minify": -1,
  "_initiator": "",
  "_connect_ms": 163,
  "_socket": 105,
  "_final_base_page": true,
  "_url": "/",
  "_ssl_start": 339,
  "_client_port": "44776",
  "_method": "GET",
  "_dns_ms": 170,
  "_connect_end": 338,
  "_server_rtt": null,
  "_responseCode": 200,
  "_ssl_ms": 194,
  "_http2_stream_dependency": 0,
  "_contentEncoding": "gzip",
  "_is_base_page": true,
  "_cdn_provider": "",
  "_load_end": 773,
  "_ttfb_start": 534,
  "_ttfb_end": 726,
  "_download_start": 726,
  "_download_end": 773,
  "_download_ms": 47,
  "_all_start": 5,
  "_all_end": 773,
  "_all_ms": 766,
  "_index": 0,
  "_number": 1
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant