https://web.dev{url}'.format(**key) if 'url' in key\n",
" else 'origin {origin}'.format(**key))\n",
" form_factor = ' on {formFactor}'.format(**key) if 'formFactor' in key else ''\n",
" display_header(f'Displaying CrUX data for {identifier}{form_factor}')\n",
" display.display(display.HTML(url_normalization_details(response)))\n",
" thresholds = thresholds_by_metric(response)\n",
"\n",
" if EMIT_GRAPHS:\n",
" display.display(display.HTML(\"\"\"\n",
" For each metric with histograms and percentiles, we display two graphs:\n",
" {json_str}'))\n",
"\n",
" display_header('CrUX History API Response')\n",
" json_str = json.dumps(response, indent=2)\n",
" display.display(display.HTML(f'{json_str}'))"
]
}
],
"metadata": {
"colab": {
"provenance": []
},
"kernelspec": {
"display_name": "Python 3",
"name": "python3"
},
"language_info": {
"name": "python"
},
"gpuClass": "standard"
},
"nbformat": 4,
"nbformat_minor": 0
}
================================================
FILE: colab/navigation-types-and-lcp.ipynb
================================================
{
"nbformat": 4,
"nbformat_minor": 0,
"metadata": {
"colab": {
"provenance": []
},
"kernelspec": {
"name": "python3",
"display_name": "Python 3"
},
"language_info": {
"name": "python"
},
"widgets": {
"application/vnd.jupyter.widget-state+json": {
"13029d2bb5db4bc4b78d62ef18c7dc22": {
"model_module": "@jupyter-widgets/controls",
"model_name": "HBoxModel",
"model_module_version": "1.5.0",
"state": {
"_dom_classes": [],
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "HBoxModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/controls",
"_view_module_version": "1.5.0",
"_view_name": "HBoxView",
"box_style": "",
"children": [
"IPY_MODEL_96418bcde70446f8853857b4646bc8e5",
"IPY_MODEL_0d8728fa4a3843d6b3c9bd674d54d24c",
"IPY_MODEL_0e071ff0c7a242eca5ee7a3f0045fa4e"
],
"layout": "IPY_MODEL_f2587b4dcb3c457eb793f93ab2c5d0d6"
}
},
"96418bcde70446f8853857b4646bc8e5": {
"model_module": "@jupyter-widgets/controls",
"model_name": "HTMLModel",
"model_module_version": "1.5.0",
"state": {
"_dom_classes": [],
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "HTMLModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/controls",
"_view_module_version": "1.5.0",
"_view_name": "HTMLView",
"description": "",
"description_tooltip": null,
"layout": "IPY_MODEL_fe1bf45170084868b80f982f5e3bbee6",
"placeholder": "",
"style": "IPY_MODEL_d5b463c1ada245819369b44fe4aa22e1",
"value": "Job ID d4a144c9-5b79-46a0-a563-b6e5fc70cb55 successfully executed: 100%"
}
},
"0d8728fa4a3843d6b3c9bd674d54d24c": {
"model_module": "@jupyter-widgets/controls",
"model_name": "FloatProgressModel",
"model_module_version": "1.5.0",
"state": {
"_dom_classes": [],
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "FloatProgressModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/controls",
"_view_module_version": "1.5.0",
"_view_name": "ProgressView",
"bar_style": "success",
"description": "",
"description_tooltip": null,
"layout": "IPY_MODEL_ded72001a6ce467aad6725364b7aea4b",
"max": 1,
"min": 0,
"orientation": "horizontal",
"style": "IPY_MODEL_9b8829caea1742c39aa7ae60a98003bb",
"value": 1
}
},
"0e071ff0c7a242eca5ee7a3f0045fa4e": {
"model_module": "@jupyter-widgets/controls",
"model_name": "HTMLModel",
"model_module_version": "1.5.0",
"state": {
"_dom_classes": [],
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "HTMLModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/controls",
"_view_module_version": "1.5.0",
"_view_name": "HTMLView",
"description": "",
"description_tooltip": null,
"layout": "IPY_MODEL_77fc71e9c7514f85a9bbdfa6f31f099f",
"placeholder": "",
"style": "IPY_MODEL_fea6cf64ef2a45389559f4c4f8a774ba",
"value": ""
}
},
"f2587b4dcb3c457eb793f93ab2c5d0d6": {
"model_module": "@jupyter-widgets/base",
"model_name": "LayoutModel",
"model_module_version": "1.2.0",
"state": {
"_model_module": "@jupyter-widgets/base",
"_model_module_version": "1.2.0",
"_model_name": "LayoutModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "LayoutView",
"align_content": null,
"align_items": null,
"align_self": null,
"border": null,
"bottom": null,
"display": null,
"flex": null,
"flex_flow": null,
"grid_area": null,
"grid_auto_columns": null,
"grid_auto_flow": null,
"grid_auto_rows": null,
"grid_column": null,
"grid_gap": null,
"grid_row": null,
"grid_template_areas": null,
"grid_template_columns": null,
"grid_template_rows": null,
"height": null,
"justify_content": null,
"justify_items": null,
"left": null,
"margin": null,
"max_height": null,
"max_width": null,
"min_height": null,
"min_width": null,
"object_fit": null,
"object_position": null,
"order": null,
"overflow": null,
"overflow_x": null,
"overflow_y": null,
"padding": null,
"right": null,
"top": null,
"visibility": null,
"width": null
}
},
"fe1bf45170084868b80f982f5e3bbee6": {
"model_module": "@jupyter-widgets/base",
"model_name": "LayoutModel",
"model_module_version": "1.2.0",
"state": {
"_model_module": "@jupyter-widgets/base",
"_model_module_version": "1.2.0",
"_model_name": "LayoutModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "LayoutView",
"align_content": null,
"align_items": null,
"align_self": null,
"border": null,
"bottom": null,
"display": null,
"flex": null,
"flex_flow": null,
"grid_area": null,
"grid_auto_columns": null,
"grid_auto_flow": null,
"grid_auto_rows": null,
"grid_column": null,
"grid_gap": null,
"grid_row": null,
"grid_template_areas": null,
"grid_template_columns": null,
"grid_template_rows": null,
"height": null,
"justify_content": null,
"justify_items": null,
"left": null,
"margin": null,
"max_height": null,
"max_width": null,
"min_height": null,
"min_width": null,
"object_fit": null,
"object_position": null,
"order": null,
"overflow": null,
"overflow_x": null,
"overflow_y": null,
"padding": null,
"right": null,
"top": null,
"visibility": null,
"width": null
}
},
"d5b463c1ada245819369b44fe4aa22e1": {
"model_module": "@jupyter-widgets/controls",
"model_name": "DescriptionStyleModel",
"model_module_version": "1.5.0",
"state": {
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "DescriptionStyleModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "StyleView",
"description_width": ""
}
},
"ded72001a6ce467aad6725364b7aea4b": {
"model_module": "@jupyter-widgets/base",
"model_name": "LayoutModel",
"model_module_version": "1.2.0",
"state": {
"_model_module": "@jupyter-widgets/base",
"_model_module_version": "1.2.0",
"_model_name": "LayoutModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "LayoutView",
"align_content": null,
"align_items": null,
"align_self": null,
"border": null,
"bottom": null,
"display": null,
"flex": null,
"flex_flow": null,
"grid_area": null,
"grid_auto_columns": null,
"grid_auto_flow": null,
"grid_auto_rows": null,
"grid_column": null,
"grid_gap": null,
"grid_row": null,
"grid_template_areas": null,
"grid_template_columns": null,
"grid_template_rows": null,
"height": null,
"justify_content": null,
"justify_items": null,
"left": null,
"margin": null,
"max_height": null,
"max_width": null,
"min_height": null,
"min_width": null,
"object_fit": null,
"object_position": null,
"order": null,
"overflow": null,
"overflow_x": null,
"overflow_y": null,
"padding": null,
"right": null,
"top": null,
"visibility": null,
"width": null
}
},
"9b8829caea1742c39aa7ae60a98003bb": {
"model_module": "@jupyter-widgets/controls",
"model_name": "ProgressStyleModel",
"model_module_version": "1.5.0",
"state": {
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "ProgressStyleModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "StyleView",
"bar_color": null,
"description_width": ""
}
},
"77fc71e9c7514f85a9bbdfa6f31f099f": {
"model_module": "@jupyter-widgets/base",
"model_name": "LayoutModel",
"model_module_version": "1.2.0",
"state": {
"_model_module": "@jupyter-widgets/base",
"_model_module_version": "1.2.0",
"_model_name": "LayoutModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "LayoutView",
"align_content": null,
"align_items": null,
"align_self": null,
"border": null,
"bottom": null,
"display": null,
"flex": null,
"flex_flow": null,
"grid_area": null,
"grid_auto_columns": null,
"grid_auto_flow": null,
"grid_auto_rows": null,
"grid_column": null,
"grid_gap": null,
"grid_row": null,
"grid_template_areas": null,
"grid_template_columns": null,
"grid_template_rows": null,
"height": null,
"justify_content": null,
"justify_items": null,
"left": null,
"margin": null,
"max_height": null,
"max_width": null,
"min_height": null,
"min_width": null,
"object_fit": null,
"object_position": null,
"order": null,
"overflow": null,
"overflow_x": null,
"overflow_y": null,
"padding": null,
"right": null,
"top": null,
"visibility": null,
"width": null
}
},
"fea6cf64ef2a45389559f4c4f8a774ba": {
"model_module": "@jupyter-widgets/controls",
"model_name": "DescriptionStyleModel",
"model_module_version": "1.5.0",
"state": {
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "DescriptionStyleModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "StyleView",
"description_width": ""
}
},
"99f4a9aaf0bb488fa1f11cb7bd476439": {
"model_module": "@jupyter-widgets/controls",
"model_name": "HBoxModel",
"model_module_version": "1.5.0",
"state": {
"_dom_classes": [],
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "HBoxModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/controls",
"_view_module_version": "1.5.0",
"_view_name": "HBoxView",
"box_style": "",
"children": [
"IPY_MODEL_89a4b5c25fb9428582b5c50e8503922c",
"IPY_MODEL_9f7ade8a251740fbb09374a1904a6122",
"IPY_MODEL_25c527de440b4190b782e5cbf2ba4220"
],
"layout": "IPY_MODEL_6ea1c147f71544ed9e02ff628261fed6"
}
},
"89a4b5c25fb9428582b5c50e8503922c": {
"model_module": "@jupyter-widgets/controls",
"model_name": "HTMLModel",
"model_module_version": "1.5.0",
"state": {
"_dom_classes": [],
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "HTMLModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/controls",
"_view_module_version": "1.5.0",
"_view_name": "HTMLView",
"description": "",
"description_tooltip": null,
"layout": "IPY_MODEL_1129703897fa4fada5321767607d78fe",
"placeholder": "",
"style": "IPY_MODEL_c8901ac1c97645859e35f4b093c44ba7",
"value": "Downloading: 100%"
}
},
"9f7ade8a251740fbb09374a1904a6122": {
"model_module": "@jupyter-widgets/controls",
"model_name": "FloatProgressModel",
"model_module_version": "1.5.0",
"state": {
"_dom_classes": [],
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "FloatProgressModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/controls",
"_view_module_version": "1.5.0",
"_view_name": "ProgressView",
"bar_style": "success",
"description": "",
"description_tooltip": null,
"layout": "IPY_MODEL_5587965dba564434ae0a49c4771ffc72",
"max": 9831,
"min": 0,
"orientation": "horizontal",
"style": "IPY_MODEL_44f91b0223314ef1b7db93a5dfe88e67",
"value": 9831
}
},
"25c527de440b4190b782e5cbf2ba4220": {
"model_module": "@jupyter-widgets/controls",
"model_name": "HTMLModel",
"model_module_version": "1.5.0",
"state": {
"_dom_classes": [],
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "HTMLModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/controls",
"_view_module_version": "1.5.0",
"_view_name": "HTMLView",
"description": "",
"description_tooltip": null,
"layout": "IPY_MODEL_bc2e0968a05749d9ae9a364978af82c5",
"placeholder": "",
"style": "IPY_MODEL_36268dfb1d254b4a91bd0d395d4da925",
"value": ""
}
},
"6ea1c147f71544ed9e02ff628261fed6": {
"model_module": "@jupyter-widgets/base",
"model_name": "LayoutModel",
"model_module_version": "1.2.0",
"state": {
"_model_module": "@jupyter-widgets/base",
"_model_module_version": "1.2.0",
"_model_name": "LayoutModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "LayoutView",
"align_content": null,
"align_items": null,
"align_self": null,
"border": null,
"bottom": null,
"display": null,
"flex": null,
"flex_flow": null,
"grid_area": null,
"grid_auto_columns": null,
"grid_auto_flow": null,
"grid_auto_rows": null,
"grid_column": null,
"grid_gap": null,
"grid_row": null,
"grid_template_areas": null,
"grid_template_columns": null,
"grid_template_rows": null,
"height": null,
"justify_content": null,
"justify_items": null,
"left": null,
"margin": null,
"max_height": null,
"max_width": null,
"min_height": null,
"min_width": null,
"object_fit": null,
"object_position": null,
"order": null,
"overflow": null,
"overflow_x": null,
"overflow_y": null,
"padding": null,
"right": null,
"top": null,
"visibility": null,
"width": null
}
},
"1129703897fa4fada5321767607d78fe": {
"model_module": "@jupyter-widgets/base",
"model_name": "LayoutModel",
"model_module_version": "1.2.0",
"state": {
"_model_module": "@jupyter-widgets/base",
"_model_module_version": "1.2.0",
"_model_name": "LayoutModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "LayoutView",
"align_content": null,
"align_items": null,
"align_self": null,
"border": null,
"bottom": null,
"display": null,
"flex": null,
"flex_flow": null,
"grid_area": null,
"grid_auto_columns": null,
"grid_auto_flow": null,
"grid_auto_rows": null,
"grid_column": null,
"grid_gap": null,
"grid_row": null,
"grid_template_areas": null,
"grid_template_columns": null,
"grid_template_rows": null,
"height": null,
"justify_content": null,
"justify_items": null,
"left": null,
"margin": null,
"max_height": null,
"max_width": null,
"min_height": null,
"min_width": null,
"object_fit": null,
"object_position": null,
"order": null,
"overflow": null,
"overflow_x": null,
"overflow_y": null,
"padding": null,
"right": null,
"top": null,
"visibility": null,
"width": null
}
},
"c8901ac1c97645859e35f4b093c44ba7": {
"model_module": "@jupyter-widgets/controls",
"model_name": "DescriptionStyleModel",
"model_module_version": "1.5.0",
"state": {
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "DescriptionStyleModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "StyleView",
"description_width": ""
}
},
"5587965dba564434ae0a49c4771ffc72": {
"model_module": "@jupyter-widgets/base",
"model_name": "LayoutModel",
"model_module_version": "1.2.0",
"state": {
"_model_module": "@jupyter-widgets/base",
"_model_module_version": "1.2.0",
"_model_name": "LayoutModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "LayoutView",
"align_content": null,
"align_items": null,
"align_self": null,
"border": null,
"bottom": null,
"display": null,
"flex": null,
"flex_flow": null,
"grid_area": null,
"grid_auto_columns": null,
"grid_auto_flow": null,
"grid_auto_rows": null,
"grid_column": null,
"grid_gap": null,
"grid_row": null,
"grid_template_areas": null,
"grid_template_columns": null,
"grid_template_rows": null,
"height": null,
"justify_content": null,
"justify_items": null,
"left": null,
"margin": null,
"max_height": null,
"max_width": null,
"min_height": null,
"min_width": null,
"object_fit": null,
"object_position": null,
"order": null,
"overflow": null,
"overflow_x": null,
"overflow_y": null,
"padding": null,
"right": null,
"top": null,
"visibility": null,
"width": null
}
},
"44f91b0223314ef1b7db93a5dfe88e67": {
"model_module": "@jupyter-widgets/controls",
"model_name": "ProgressStyleModel",
"model_module_version": "1.5.0",
"state": {
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "ProgressStyleModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "StyleView",
"bar_color": null,
"description_width": ""
}
},
"bc2e0968a05749d9ae9a364978af82c5": {
"model_module": "@jupyter-widgets/base",
"model_name": "LayoutModel",
"model_module_version": "1.2.0",
"state": {
"_model_module": "@jupyter-widgets/base",
"_model_module_version": "1.2.0",
"_model_name": "LayoutModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "LayoutView",
"align_content": null,
"align_items": null,
"align_self": null,
"border": null,
"bottom": null,
"display": null,
"flex": null,
"flex_flow": null,
"grid_area": null,
"grid_auto_columns": null,
"grid_auto_flow": null,
"grid_auto_rows": null,
"grid_column": null,
"grid_gap": null,
"grid_row": null,
"grid_template_areas": null,
"grid_template_columns": null,
"grid_template_rows": null,
"height": null,
"justify_content": null,
"justify_items": null,
"left": null,
"margin": null,
"max_height": null,
"max_width": null,
"min_height": null,
"min_width": null,
"object_fit": null,
"object_position": null,
"order": null,
"overflow": null,
"overflow_x": null,
"overflow_y": null,
"padding": null,
"right": null,
"top": null,
"visibility": null,
"width": null
}
},
"36268dfb1d254b4a91bd0d395d4da925": {
"model_module": "@jupyter-widgets/controls",
"model_name": "DescriptionStyleModel",
"model_module_version": "1.5.0",
"state": {
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "DescriptionStyleModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "StyleView",
"description_width": ""
}
},
"6684744b41b54d12b0e5943d659cbe50": {
"model_module": "@jupyter-widgets/controls",
"model_name": "HBoxModel",
"model_module_version": "1.5.0",
"state": {
"_dom_classes": [],
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "HBoxModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/controls",
"_view_module_version": "1.5.0",
"_view_name": "HBoxView",
"box_style": "",
"children": [
"IPY_MODEL_3da1712bb69441e692c01d46188a21c1",
"IPY_MODEL_2666f64f0617456a944b53035d8f880b",
"IPY_MODEL_09cf2238c0554163a99d303160541504"
],
"layout": "IPY_MODEL_56aa7e70f8aa4005ab6f7868e8cc7e93"
}
},
"3da1712bb69441e692c01d46188a21c1": {
"model_module": "@jupyter-widgets/controls",
"model_name": "HTMLModel",
"model_module_version": "1.5.0",
"state": {
"_dom_classes": [],
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "HTMLModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/controls",
"_view_module_version": "1.5.0",
"_view_name": "HTMLView",
"description": "",
"description_tooltip": null,
"layout": "IPY_MODEL_f581ced1154e4f23ab56a32eb8b7471f",
"placeholder": "",
"style": "IPY_MODEL_fe7993973de94ca484fcf6e9084b4207",
"value": "Job ID e0661027-523a-4b4c-91ca-dcb630813f6c successfully executed: 100%"
}
},
"2666f64f0617456a944b53035d8f880b": {
"model_module": "@jupyter-widgets/controls",
"model_name": "FloatProgressModel",
"model_module_version": "1.5.0",
"state": {
"_dom_classes": [],
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "FloatProgressModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/controls",
"_view_module_version": "1.5.0",
"_view_name": "ProgressView",
"bar_style": "success",
"description": "",
"description_tooltip": null,
"layout": "IPY_MODEL_0a3932c9fc8b4c31ad4f20d6e65f4cde",
"max": 1,
"min": 0,
"orientation": "horizontal",
"style": "IPY_MODEL_14358de83cd24433a8843edd443ba3b2",
"value": 1
}
},
"09cf2238c0554163a99d303160541504": {
"model_module": "@jupyter-widgets/controls",
"model_name": "HTMLModel",
"model_module_version": "1.5.0",
"state": {
"_dom_classes": [],
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "HTMLModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/controls",
"_view_module_version": "1.5.0",
"_view_name": "HTMLView",
"description": "",
"description_tooltip": null,
"layout": "IPY_MODEL_a0f9a6912d424970ad09b0846fa5d066",
"placeholder": "",
"style": "IPY_MODEL_241c615225e44f03814a7429cdc989c7",
"value": ""
}
},
"56aa7e70f8aa4005ab6f7868e8cc7e93": {
"model_module": "@jupyter-widgets/base",
"model_name": "LayoutModel",
"model_module_version": "1.2.0",
"state": {
"_model_module": "@jupyter-widgets/base",
"_model_module_version": "1.2.0",
"_model_name": "LayoutModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "LayoutView",
"align_content": null,
"align_items": null,
"align_self": null,
"border": null,
"bottom": null,
"display": null,
"flex": null,
"flex_flow": null,
"grid_area": null,
"grid_auto_columns": null,
"grid_auto_flow": null,
"grid_auto_rows": null,
"grid_column": null,
"grid_gap": null,
"grid_row": null,
"grid_template_areas": null,
"grid_template_columns": null,
"grid_template_rows": null,
"height": null,
"justify_content": null,
"justify_items": null,
"left": null,
"margin": null,
"max_height": null,
"max_width": null,
"min_height": null,
"min_width": null,
"object_fit": null,
"object_position": null,
"order": null,
"overflow": null,
"overflow_x": null,
"overflow_y": null,
"padding": null,
"right": null,
"top": null,
"visibility": null,
"width": null
}
},
"f581ced1154e4f23ab56a32eb8b7471f": {
"model_module": "@jupyter-widgets/base",
"model_name": "LayoutModel",
"model_module_version": "1.2.0",
"state": {
"_model_module": "@jupyter-widgets/base",
"_model_module_version": "1.2.0",
"_model_name": "LayoutModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "LayoutView",
"align_content": null,
"align_items": null,
"align_self": null,
"border": null,
"bottom": null,
"display": null,
"flex": null,
"flex_flow": null,
"grid_area": null,
"grid_auto_columns": null,
"grid_auto_flow": null,
"grid_auto_rows": null,
"grid_column": null,
"grid_gap": null,
"grid_row": null,
"grid_template_areas": null,
"grid_template_columns": null,
"grid_template_rows": null,
"height": null,
"justify_content": null,
"justify_items": null,
"left": null,
"margin": null,
"max_height": null,
"max_width": null,
"min_height": null,
"min_width": null,
"object_fit": null,
"object_position": null,
"order": null,
"overflow": null,
"overflow_x": null,
"overflow_y": null,
"padding": null,
"right": null,
"top": null,
"visibility": null,
"width": null
}
},
"fe7993973de94ca484fcf6e9084b4207": {
"model_module": "@jupyter-widgets/controls",
"model_name": "DescriptionStyleModel",
"model_module_version": "1.5.0",
"state": {
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "DescriptionStyleModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "StyleView",
"description_width": ""
}
},
"0a3932c9fc8b4c31ad4f20d6e65f4cde": {
"model_module": "@jupyter-widgets/base",
"model_name": "LayoutModel",
"model_module_version": "1.2.0",
"state": {
"_model_module": "@jupyter-widgets/base",
"_model_module_version": "1.2.0",
"_model_name": "LayoutModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "LayoutView",
"align_content": null,
"align_items": null,
"align_self": null,
"border": null,
"bottom": null,
"display": null,
"flex": null,
"flex_flow": null,
"grid_area": null,
"grid_auto_columns": null,
"grid_auto_flow": null,
"grid_auto_rows": null,
"grid_column": null,
"grid_gap": null,
"grid_row": null,
"grid_template_areas": null,
"grid_template_columns": null,
"grid_template_rows": null,
"height": null,
"justify_content": null,
"justify_items": null,
"left": null,
"margin": null,
"max_height": null,
"max_width": null,
"min_height": null,
"min_width": null,
"object_fit": null,
"object_position": null,
"order": null,
"overflow": null,
"overflow_x": null,
"overflow_y": null,
"padding": null,
"right": null,
"top": null,
"visibility": null,
"width": null
}
},
"14358de83cd24433a8843edd443ba3b2": {
"model_module": "@jupyter-widgets/controls",
"model_name": "ProgressStyleModel",
"model_module_version": "1.5.0",
"state": {
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "ProgressStyleModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "StyleView",
"bar_color": null,
"description_width": ""
}
},
"a0f9a6912d424970ad09b0846fa5d066": {
"model_module": "@jupyter-widgets/base",
"model_name": "LayoutModel",
"model_module_version": "1.2.0",
"state": {
"_model_module": "@jupyter-widgets/base",
"_model_module_version": "1.2.0",
"_model_name": "LayoutModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "LayoutView",
"align_content": null,
"align_items": null,
"align_self": null,
"border": null,
"bottom": null,
"display": null,
"flex": null,
"flex_flow": null,
"grid_area": null,
"grid_auto_columns": null,
"grid_auto_flow": null,
"grid_auto_rows": null,
"grid_column": null,
"grid_gap": null,
"grid_row": null,
"grid_template_areas": null,
"grid_template_columns": null,
"grid_template_rows": null,
"height": null,
"justify_content": null,
"justify_items": null,
"left": null,
"margin": null,
"max_height": null,
"max_width": null,
"min_height": null,
"min_width": null,
"object_fit": null,
"object_position": null,
"order": null,
"overflow": null,
"overflow_x": null,
"overflow_y": null,
"padding": null,
"right": null,
"top": null,
"visibility": null,
"width": null
}
},
"241c615225e44f03814a7429cdc989c7": {
"model_module": "@jupyter-widgets/controls",
"model_name": "DescriptionStyleModel",
"model_module_version": "1.5.0",
"state": {
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "DescriptionStyleModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "StyleView",
"description_width": ""
}
},
"d22a764db6844719afe231a26484cbf6": {
"model_module": "@jupyter-widgets/controls",
"model_name": "HBoxModel",
"model_module_version": "1.5.0",
"state": {
"_dom_classes": [],
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "HBoxModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/controls",
"_view_module_version": "1.5.0",
"_view_name": "HBoxView",
"box_style": "",
"children": [
"IPY_MODEL_87e4354cd6e340a99b16e8655305a131",
"IPY_MODEL_bb8642c71a474e99890ec97d844d5a8a",
"IPY_MODEL_d31b02be3389402f80e6b83058196116"
],
"layout": "IPY_MODEL_54a5bc6deb2e470d9aed5f0603a0b2ae"
}
},
"87e4354cd6e340a99b16e8655305a131": {
"model_module": "@jupyter-widgets/controls",
"model_name": "HTMLModel",
"model_module_version": "1.5.0",
"state": {
"_dom_classes": [],
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "HTMLModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/controls",
"_view_module_version": "1.5.0",
"_view_name": "HTMLView",
"description": "",
"description_tooltip": null,
"layout": "IPY_MODEL_62c6b5f253294b70925748df60b8f478",
"placeholder": "",
"style": "IPY_MODEL_bf9b2c3beab8498a9aa00ce61ab34167",
"value": "Downloading: 100%"
}
},
"bb8642c71a474e99890ec97d844d5a8a": {
"model_module": "@jupyter-widgets/controls",
"model_name": "FloatProgressModel",
"model_module_version": "1.5.0",
"state": {
"_dom_classes": [],
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "FloatProgressModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/controls",
"_view_module_version": "1.5.0",
"_view_name": "ProgressView",
"bar_style": "success",
"description": "",
"description_tooltip": null,
"layout": "IPY_MODEL_7c32ce97992a49bdb0c0373998172f87",
"max": 9828,
"min": 0,
"orientation": "horizontal",
"style": "IPY_MODEL_f7da92ec218044e2b7b3e3dfec1a41fb",
"value": 9828
}
},
"d31b02be3389402f80e6b83058196116": {
"model_module": "@jupyter-widgets/controls",
"model_name": "HTMLModel",
"model_module_version": "1.5.0",
"state": {
"_dom_classes": [],
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "HTMLModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/controls",
"_view_module_version": "1.5.0",
"_view_name": "HTMLView",
"description": "",
"description_tooltip": null,
"layout": "IPY_MODEL_cfa27172055846f2a87b72e9998678df",
"placeholder": "",
"style": "IPY_MODEL_ea7f73dd3e944561a04d68da2fcc6a42",
"value": ""
}
},
"54a5bc6deb2e470d9aed5f0603a0b2ae": {
"model_module": "@jupyter-widgets/base",
"model_name": "LayoutModel",
"model_module_version": "1.2.0",
"state": {
"_model_module": "@jupyter-widgets/base",
"_model_module_version": "1.2.0",
"_model_name": "LayoutModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "LayoutView",
"align_content": null,
"align_items": null,
"align_self": null,
"border": null,
"bottom": null,
"display": null,
"flex": null,
"flex_flow": null,
"grid_area": null,
"grid_auto_columns": null,
"grid_auto_flow": null,
"grid_auto_rows": null,
"grid_column": null,
"grid_gap": null,
"grid_row": null,
"grid_template_areas": null,
"grid_template_columns": null,
"grid_template_rows": null,
"height": null,
"justify_content": null,
"justify_items": null,
"left": null,
"margin": null,
"max_height": null,
"max_width": null,
"min_height": null,
"min_width": null,
"object_fit": null,
"object_position": null,
"order": null,
"overflow": null,
"overflow_x": null,
"overflow_y": null,
"padding": null,
"right": null,
"top": null,
"visibility": null,
"width": null
}
},
"62c6b5f253294b70925748df60b8f478": {
"model_module": "@jupyter-widgets/base",
"model_name": "LayoutModel",
"model_module_version": "1.2.0",
"state": {
"_model_module": "@jupyter-widgets/base",
"_model_module_version": "1.2.0",
"_model_name": "LayoutModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "LayoutView",
"align_content": null,
"align_items": null,
"align_self": null,
"border": null,
"bottom": null,
"display": null,
"flex": null,
"flex_flow": null,
"grid_area": null,
"grid_auto_columns": null,
"grid_auto_flow": null,
"grid_auto_rows": null,
"grid_column": null,
"grid_gap": null,
"grid_row": null,
"grid_template_areas": null,
"grid_template_columns": null,
"grid_template_rows": null,
"height": null,
"justify_content": null,
"justify_items": null,
"left": null,
"margin": null,
"max_height": null,
"max_width": null,
"min_height": null,
"min_width": null,
"object_fit": null,
"object_position": null,
"order": null,
"overflow": null,
"overflow_x": null,
"overflow_y": null,
"padding": null,
"right": null,
"top": null,
"visibility": null,
"width": null
}
},
"bf9b2c3beab8498a9aa00ce61ab34167": {
"model_module": "@jupyter-widgets/controls",
"model_name": "DescriptionStyleModel",
"model_module_version": "1.5.0",
"state": {
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "DescriptionStyleModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "StyleView",
"description_width": ""
}
},
"7c32ce97992a49bdb0c0373998172f87": {
"model_module": "@jupyter-widgets/base",
"model_name": "LayoutModel",
"model_module_version": "1.2.0",
"state": {
"_model_module": "@jupyter-widgets/base",
"_model_module_version": "1.2.0",
"_model_name": "LayoutModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "LayoutView",
"align_content": null,
"align_items": null,
"align_self": null,
"border": null,
"bottom": null,
"display": null,
"flex": null,
"flex_flow": null,
"grid_area": null,
"grid_auto_columns": null,
"grid_auto_flow": null,
"grid_auto_rows": null,
"grid_column": null,
"grid_gap": null,
"grid_row": null,
"grid_template_areas": null,
"grid_template_columns": null,
"grid_template_rows": null,
"height": null,
"justify_content": null,
"justify_items": null,
"left": null,
"margin": null,
"max_height": null,
"max_width": null,
"min_height": null,
"min_width": null,
"object_fit": null,
"object_position": null,
"order": null,
"overflow": null,
"overflow_x": null,
"overflow_y": null,
"padding": null,
"right": null,
"top": null,
"visibility": null,
"width": null
}
},
"f7da92ec218044e2b7b3e3dfec1a41fb": {
"model_module": "@jupyter-widgets/controls",
"model_name": "ProgressStyleModel",
"model_module_version": "1.5.0",
"state": {
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "ProgressStyleModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "StyleView",
"bar_color": null,
"description_width": ""
}
},
"cfa27172055846f2a87b72e9998678df": {
"model_module": "@jupyter-widgets/base",
"model_name": "LayoutModel",
"model_module_version": "1.2.0",
"state": {
"_model_module": "@jupyter-widgets/base",
"_model_module_version": "1.2.0",
"_model_name": "LayoutModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "LayoutView",
"align_content": null,
"align_items": null,
"align_self": null,
"border": null,
"bottom": null,
"display": null,
"flex": null,
"flex_flow": null,
"grid_area": null,
"grid_auto_columns": null,
"grid_auto_flow": null,
"grid_auto_rows": null,
"grid_column": null,
"grid_gap": null,
"grid_row": null,
"grid_template_areas": null,
"grid_template_columns": null,
"grid_template_rows": null,
"height": null,
"justify_content": null,
"justify_items": null,
"left": null,
"margin": null,
"max_height": null,
"max_width": null,
"min_height": null,
"min_width": null,
"object_fit": null,
"object_position": null,
"order": null,
"overflow": null,
"overflow_x": null,
"overflow_y": null,
"padding": null,
"right": null,
"top": null,
"visibility": null,
"width": null
}
},
"ea7f73dd3e944561a04d68da2fcc6a42": {
"model_module": "@jupyter-widgets/controls",
"model_name": "DescriptionStyleModel",
"model_module_version": "1.5.0",
"state": {
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "DescriptionStyleModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "StyleView",
"description_width": ""
}
}
}
}
},
"cells": [
{
"cell_type": "markdown",
"source": [
"# CrUX navigation_types metric and Loading Performance\n",
"\n",
"This colab explores the relationship between the [navigation_types metric](https://developer.chrome.com/blog/crux-navigation-types) and the observed loading performance as measured by Largest Contentful Paint, for the top 10k origins in CrUX. As a word of caution up front: corellation does not imply causation; we will be observing corellations here."
],
"metadata": {
"id": "lH27hqmfVuli"
}
},
{
"cell_type": "code",
"execution_count": 1,
"metadata": {
"id": "UY7w6lQpkCbH",
"colab": {
"base_uri": "https://localhost:8080/"
},
"outputId": "35431d64-912a-44ae-fa63-f44f3e493386",
"cellView": "form"
},
"outputs": [
{
"output_type": "stream",
"name": "stdout",
"text": [
"Authenticated\n"
]
}
],
"source": [
"#@title Authentication with Google Account and BigQuery Project\n",
"\n",
"from google.colab import auth\n",
"from google.cloud import bigquery\n",
"\n",
"#@markdown To connect to BigQuery, it's necessary to authenticate with a Google Account.\n",
"#@markdown Running this cell will trigger the authentication flow.\n",
"auth.authenticate_user()\n",
"\n",
"#@markdown It's also required to provide a Google Cloud project that is used for BigQuery\n",
"#@markdown billing purposes. This is described\n",
"#@markdown [in our documentation](https://developer.chrome.com/docs/crux/bigquery#accessing_the_dataset_in_gcp).\n",
"#@markdown We do recommend that you use\n",
"#@markdown [cost controls](https://cloud.google.com/bigquery/docs/custom-quotas)\n",
"#@markdown to avoid unexpected bills.\n",
"BIGQUERY_PROJECT = \"\" # @param {type:\"string\"}\n",
"\n",
"print('Authenticated')"
]
},
{
"cell_type": "code",
"source": [
"#@title Fetch the navigation_types fractions for form_factor phone the top 10k origins in CrUX by popularity\n",
"#@markdown * We access the `202403` table here (see the `FROM`-clause), and filter\n",
"#@markdown `form_factor` for 'phone' and select origins with [popularity rank](https://developer.chrome.com/blog/crux-rank-magnitude)\n",
"#@markdown <= 10000 for the top 10k most popular origins (see the `WHERE`-clause).\n",
"#@markdown * When querying the `navigation_types` metric in BigQuery, it's generally necessary\n",
"#@markdown to divide by the total of the navigation_types fractions, as they will add up\n",
"#@markdown per origin, but not per (origin, form factor) combination\n",
"#@markdown or (origin, form_factor, effective_connection_type) combination.\n",
"#@markdown * Not all origins will have `navigation_types`, so it's good practice\n",
"#@markdown to use `SAVE_DIVIDE` (the top 1k origins have `navigation_types`, so\n",
"#@markdown it would not be needed here).\n",
"%%bigquery navigation_types_on_phone_for_top10k --project {BIGQUERY_PROJECT}\n",
"WITH\n",
" tmp AS (\n",
" SELECT\n",
" origin,\n",
" SUM(navigation_types.navigate.fraction) AS navigate,\n",
" SUM(navigation_types.navigate_cache.fraction) AS navigate_cache,\n",
" SUM(navigation_types.reload.fraction) AS reload,\n",
" SUM(navigation_types.restore.fraction) AS restore,\n",
" SUM(navigation_types.back_forward.fraction) AS back_forward,\n",
" SUM(navigation_types.back_forward_cache.fraction) AS back_forward_cache,\n",
" SUM(navigation_types.prerender.fraction) AS prerender,\n",
" SUM(navigation_types.navigate.fraction + navigation_types.navigate_cache.fraction + navigation_types.reload.fraction + navigation_types.restore.fraction + navigation_types.back_forward.fraction + navigation_types.back_forward_cache.fraction + navigation_types.prerender.fraction) AS total,\n",
" FROM\n",
" `google.com:chrome-ux-report-test.all.202403`\n",
" WHERE\n",
" experimental.popularity.rank <= 10000\n",
" and form_factor.name = 'phone'\n",
" GROUP BY\n",
" origin)\n",
"SELECT\n",
" origin,\n",
" ROUND(SAFE_DIVIDE(navigate, total), 4) AS navigate,\n",
" ROUND(SAFE_DIVIDE(navigate_cache, total), 4) AS navigate_cache,\n",
" ROUND(SAFE_DIVIDE(reload, total), 4) AS reload,\n",
" ROUND(SAFE_DIVIDE(restore, total), 4) AS restore,\n",
" ROUND(SAFE_DIVIDE(back_forward, total), 4) AS back_forward,\n",
" ROUND(SAFE_DIVIDE(back_forward_cache, total), 4) AS back_forward_cache,\n",
" ROUND(SAFE_DIVIDE(prerender, total), 4) AS prerender\n",
"FROM\n",
" tmp"
],
"metadata": {
"colab": {
"height": 81,
"referenced_widgets": [
"13029d2bb5db4bc4b78d62ef18c7dc22",
"96418bcde70446f8853857b4646bc8e5",
"0d8728fa4a3843d6b3c9bd674d54d24c",
"0e071ff0c7a242eca5ee7a3f0045fa4e",
"f2587b4dcb3c457eb793f93ab2c5d0d6",
"fe1bf45170084868b80f982f5e3bbee6",
"d5b463c1ada245819369b44fe4aa22e1",
"ded72001a6ce467aad6725364b7aea4b",
"9b8829caea1742c39aa7ae60a98003bb",
"77fc71e9c7514f85a9bbdfa6f31f099f",
"fea6cf64ef2a45389559f4c4f8a774ba",
"99f4a9aaf0bb488fa1f11cb7bd476439",
"89a4b5c25fb9428582b5c50e8503922c",
"9f7ade8a251740fbb09374a1904a6122",
"25c527de440b4190b782e5cbf2ba4220",
"6ea1c147f71544ed9e02ff628261fed6",
"1129703897fa4fada5321767607d78fe",
"c8901ac1c97645859e35f4b093c44ba7",
"5587965dba564434ae0a49c4771ffc72",
"44f91b0223314ef1b7db93a5dfe88e67",
"bc2e0968a05749d9ae9a364978af82c5",
"36268dfb1d254b4a91bd0d395d4da925"
],
"base_uri": "https://localhost:8080/"
},
"id": "clPWIzgoQL0-",
"outputId": "ce1b580a-6b4f-4763-8eb9-0a0db9e83b38"
},
"execution_count": 2,
"outputs": [
{
"output_type": "display_data",
"data": {
"text/plain": [
"Query is running: 0%| |"
],
"application/vnd.jupyter.widget-view+json": {
"version_major": 2,
"version_minor": 0,
"model_id": "13029d2bb5db4bc4b78d62ef18c7dc22"
}
},
"metadata": {}
},
{
"output_type": "display_data",
"data": {
"text/plain": [
"Downloading: 0%| |"
],
"application/vnd.jupyter.widget-view+json": {
"version_major": 2,
"version_minor": 0,
"model_id": "99f4a9aaf0bb488fa1f11cb7bd476439"
}
},
"metadata": {}
}
]
},
{
"cell_type": "code",
"source": [
"#@title Fetch the fraction of instant and good LCP measurements for form_factor 'phone for the top 10k origins in CrUX by popularity\n",
"#@markdown Below, we'll look at how some of the navigation_types fractions correlate with\n",
"#@markdown the LCP measurements; so we extract here:\n",
"#@markdown * instant_lcp_density - the fraction of page loads on a phone with LCP <= 200ms, for each\n",
"#@markdown origin in the CrUX 10k set. This is quite fast, especially for a phone!\n",
"#@markdown * good_lcp_density - the fraction of page loads on a phone with LCP <= 2500ms, for each\n",
"#@markdown origin in the CrUX 10k set. 2500ms is the [documented threshold](https://web.dev/articles/lcp/) for\n",
"#@markdown 'good' LCP. Origins and URLs that have at least 75% of their page loads\n",
"#@markdown with LCP below this threshold are said to be 'passing' the [Core Web Vitals](https://web.dev/articles/vitals).\n",
"%%bigquery lcp_densities_on_phone_for_top10k --project {BIGQUERY_PROJECT}\n",
"SELECT\n",
" origin,\n",
" SUM(IF(lcp_bin.`end` <= 200, lcp_bin.density, 0)) / SUM(lcp_bin.density) AS instant_lcp_density,\n",
" SUM(IF(lcp_bin.`end` <= 2500, lcp_bin.density, 0)) / SUM(lcp_bin.density) AS good_lcp_density\n",
"FROM\n",
" `google.com:chrome-ux-report-test.all.202403`,\n",
" UNNEST(largest_contentful_paint.histogram.bin) AS lcp_bin\n",
"WHERE\n",
" experimental.popularity.rank <= 10000\n",
" and form_factor.name = 'phone'\n",
"GROUP BY\n",
" origin"
],
"metadata": {
"colab": {
"height": 81,
"referenced_widgets": [
"6684744b41b54d12b0e5943d659cbe50",
"3da1712bb69441e692c01d46188a21c1",
"2666f64f0617456a944b53035d8f880b",
"09cf2238c0554163a99d303160541504",
"56aa7e70f8aa4005ab6f7868e8cc7e93",
"f581ced1154e4f23ab56a32eb8b7471f",
"fe7993973de94ca484fcf6e9084b4207",
"0a3932c9fc8b4c31ad4f20d6e65f4cde",
"14358de83cd24433a8843edd443ba3b2",
"a0f9a6912d424970ad09b0846fa5d066",
"241c615225e44f03814a7429cdc989c7",
"d22a764db6844719afe231a26484cbf6",
"87e4354cd6e340a99b16e8655305a131",
"bb8642c71a474e99890ec97d844d5a8a",
"d31b02be3389402f80e6b83058196116",
"54a5bc6deb2e470d9aed5f0603a0b2ae",
"62c6b5f253294b70925748df60b8f478",
"bf9b2c3beab8498a9aa00ce61ab34167",
"7c32ce97992a49bdb0c0373998172f87",
"f7da92ec218044e2b7b3e3dfec1a41fb",
"cfa27172055846f2a87b72e9998678df",
"ea7f73dd3e944561a04d68da2fcc6a42"
],
"base_uri": "https://localhost:8080/"
},
"id": "gOlG3VaXRS63",
"outputId": "24f3ff30-49eb-4391-e4e6-21fcecacd9c8"
},
"execution_count": 4,
"outputs": [
{
"output_type": "display_data",
"data": {
"text/plain": [
"Query is running: 0%| |"
],
"application/vnd.jupyter.widget-view+json": {
"version_major": 2,
"version_minor": 0,
"model_id": "6684744b41b54d12b0e5943d659cbe50"
}
},
"metadata": {}
},
{
"output_type": "display_data",
"data": {
"text/plain": [
"Downloading: 0%| |"
],
"application/vnd.jupyter.widget-view+json": {
"version_major": 2,
"version_minor": 0,
"model_id": "d22a764db6844719afe231a26484cbf6"
}
},
"metadata": {}
}
]
},
{
"cell_type": "code",
"source": [
"#@title Join the navigation_types stats and the lcp_densities stats\n",
"#@markdown We could have done this in BigQuery / SQL as well - it is a simple join\n",
"#@markdown on the origin; we drop rows with n/a values.\n",
"top10k_stats = navigation_types_on_phone_for_top10k.set_index('origin').join(\n",
" lcp_densities_on_phone_for_top10k.set_index('origin'), on='origin').dropna()"
],
"metadata": {
"id": "qj6GhBhRT9Bf"
},
"execution_count": 6,
"outputs": []
},
{
"cell_type": "code",
"source": [
"#@title The fraction of pageloads served from the Back/forward cache strongly correlates with instant LCP (<=200ms)\n",
"#@markdown * We're looking at the top10k origins in CrUX by popularity.\n",
"#@markdown * We're looking at page loads on form factor PHONE.\n",
"#@markdown * The x axis shows the fraction of pageloads served from the Back/forward cache (`back_forward_cache`).\n",
"#@markdown * The y axis shows the fraction of pageloads with instant LCP (`instant_lcp_density`).\n",
"#@markdown * We emit a scatterplot for these data, along with a regression line.\n",
"#@markdown * We also show the [Pearson correlation coefficients](https://en.wikipedia.org/wiki/Pearson_correlation_coefficient)\n",
"#@markdown between `back_forward_cache` ratio,\n",
"#@markdown `instant_lcp_density` (LCP <= 200ms), and `good_lcp_density` (LCP <= 2500ms).\n",
"#@markdown * We see a strong positive correlation ρ=0.867845\n",
"#@markdown between Back/forward cache ratio and instant LCP density. There is also a positive\n",
"#@markdown correlation ρ=0.28877 between Back/forward cache ratio and good LCP density.\n",
"\n",
"import matplotlib.pyplot as plt\n",
"import numpy as np\n",
"\n",
"plt.style.use('seaborn-v0_8-whitegrid')\n",
"fig, ax = plt.subplots(figsize=(8, 8))\n",
"ax.set_title('Measurements on PHONE for the top 10k origins by popularity in CrUX')\n",
"ax.set_xlabel('Fraction of page loads served from Back/forward cache')\n",
"ax.set_ylabel('Fraction of page loads with instant LCP')\n",
"ax.plot(top10k_stats['back_forward_cache'], top10k_stats['instant_lcp_density'], '.', alpha=0.1)\n",
"b, a = np.polyfit(top10k_stats['back_forward_cache'], top10k_stats['instant_lcp_density'], deg=1)\n",
"xseq = np.linspace(0, top10k_stats['back_forward_cache'].max(), num=10)\n",
"ax.plot(xseq, a+ b * xseq, color=\"k\", lw=2.5)\n",
"\n",
"top10k_stats[['back_forward_cache', 'instant_lcp_density', 'good_lcp_density']].corr()"
],
"metadata": {
"colab": {
"height": 837,
"base_uri": "https://localhost:8080/"
},
"id": "t59C0GvlzYy0",
"outputId": "fa88e4f5-cc38-4e26-8d7c-5f28fd431c1b"
},
"execution_count": 7,
"outputs": [
{
"output_type": "execute_result",
"data": {
"text/plain": [
" back_forward_cache instant_lcp_density good_lcp_density\n",
"back_forward_cache 1.000000 0.867845 0.28877\n",
"instant_lcp_density 0.867845 1.000000 0.35064\n",
"good_lcp_density 0.288770 0.350640 1.00000"
],
"text/html": [
"\n",
" | \n", " | back_forward_cache | \n", "instant_lcp_density | \n", "good_lcp_density | \n", "
|---|---|---|---|
| back_forward_cache | \n", "1.000000 | \n", "0.867845 | \n", "0.28877 | \n", "
| instant_lcp_density | \n", "0.867845 | \n", "1.000000 | \n", "0.35064 | \n", "
| good_lcp_density | \n", "0.288770 | \n", "0.350640 | \n", "1.00000 | \n", "
| \n", " | prerender | \n", "instant_lcp_density | \n", "good_lcp_density | \n", "
|---|---|---|---|
| prerender | \n", "1.000000 | \n", "-0.035178 | \n", "-0.040279 | \n", "
| instant_lcp_density | \n", "-0.035178 | \n", "1.000000 | \n", "0.350640 | \n", "
| good_lcp_density | \n", "-0.040279 | \n", "0.350640 | \n", "1.000000 | \n", "
| \n", " | navigate_cache | \n", "instant_lcp_density | \n", "good_lcp_density | \n", "
|---|---|---|---|
| navigate_cache | \n", "1.000000 | \n", "0.011346 | \n", "-0.105994 | \n", "
| instant_lcp_density | \n", "0.011346 | \n", "1.000000 | \n", "0.350640 | \n", "
| good_lcp_density | \n", "-0.105994 | \n", "0.350640 | \n", "1.000000 | \n", "