From 7103263ba66159dbd51f6e904040ec26b56af227 Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Thu, 22 Dec 2022 15:00:55 +0400 Subject: [PATCH] Breakdown the performance metrics --- .../roadmaps/100-frontend/content-paths.json | 6 +- .../109-prpl-pattern.md | 13 + .../110-rail-model.md | 13 + .../111-performance-metrics.md | 15 + .../112-lighthouse.md | 10 + .../113-browser-devtools.md | 18 + public/project/frontend.json | 508 ++++++++++-------- 7 files changed, 368 insertions(+), 215 deletions(-) create mode 100644 content/roadmaps/100-frontend/content/117-progressive-web-apps/109-prpl-pattern.md create mode 100644 content/roadmaps/100-frontend/content/117-progressive-web-apps/110-rail-model.md create mode 100644 content/roadmaps/100-frontend/content/117-progressive-web-apps/111-performance-metrics.md create mode 100644 content/roadmaps/100-frontend/content/117-progressive-web-apps/112-lighthouse.md create mode 100644 content/roadmaps/100-frontend/content/117-progressive-web-apps/113-browser-devtools.md diff --git a/content/roadmaps/100-frontend/content-paths.json b/content/roadmaps/100-frontend/content-paths.json index e4a62fdd4..08f01cdb2 100644 --- a/content/roadmaps/100-frontend/content-paths.json +++ b/content/roadmaps/100-frontend/content-paths.json @@ -107,7 +107,6 @@ "type-checkers:typescript": "/roadmaps/100-frontend/content/116-type-checkers/100-typescript.md", "type-checkers:flow": "/roadmaps/100-frontend/content/116-type-checkers/101-flow.md", "progressive-web-apps": "/roadmaps/100-frontend/content/117-progressive-web-apps/readme.md", - "progressive-web-apps:performance": "/roadmaps/100-frontend/content/117-progressive-web-apps/101-performance.md", "progressive-web-apps:storage": "/roadmaps/100-frontend/content/117-progressive-web-apps/100-storage.md", "progressive-web-apps:web-sockets": "/roadmaps/100-frontend/content/117-progressive-web-apps/101-web-sockets.md", "progressive-web-apps:server-sent-events": "/roadmaps/100-frontend/content/117-progressive-web-apps/102-server-sent-events.md", @@ -117,6 +116,11 @@ "progressive-web-apps:device-orientation": "/roadmaps/100-frontend/content/117-progressive-web-apps/106-device-orientation.md", "progressive-web-apps:payments": "/roadmaps/100-frontend/content/117-progressive-web-apps/107-payments.md", "progressive-web-apps:credentials": "/roadmaps/100-frontend/content/117-progressive-web-apps/108-credentials.md", + "progressive-web-apps:prpl-pattern": "/roadmaps/100-frontend/content/117-progressive-web-apps/109-prpl-pattern.md", + "progressive-web-apps:rail-model": "/roadmaps/100-frontend/content/117-progressive-web-apps/110-rail-model.md", + "progressive-web-apps:performance-metrics": "/roadmaps/100-frontend/content/117-progressive-web-apps/111-performance-metrics.md", + "progressive-web-apps:lighthouse": "/roadmaps/100-frontend/content/117-progressive-web-apps/112-lighthouse.md", + "progressive-web-apps:browser-devtools": "/roadmaps/100-frontend/content/117-progressive-web-apps/113-browser-devtools.md", "server-side-rendering": "/roadmaps/100-frontend/content/118-server-side-rendering/readme.md", "server-side-rendering:react-js": "/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/readme.md", "server-side-rendering:react-js:next-js": "/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/100-next-js.md", diff --git a/content/roadmaps/100-frontend/content/117-progressive-web-apps/109-prpl-pattern.md b/content/roadmaps/100-frontend/content/117-progressive-web-apps/109-prpl-pattern.md new file mode 100644 index 000000000..cd90f5b92 --- /dev/null +++ b/content/roadmaps/100-frontend/content/117-progressive-web-apps/109-prpl-pattern.md @@ -0,0 +1,13 @@ +# PRPL Pattern + +The PRPL pattern is a performance optimization pattern for web applications that focuses on minimizing the time it takes for the initial rendering of a web page. It stands for Push, Render, Pre-cache, and Lazy-load, and it involves the following steps: + +* Push: Prioritize the delivery of critical resources, such as HTML, CSS, and JavaScript, to the client as early as possible. +* Render: Start rendering the web page as soon as the critical resources are received, even if some non-critical resources are still being downloaded. +* Pre-cache: Pre-cache non-critical resources in the background so that they are available when needed. +* Lazy-load: Defer the loading of non-critical resources until they are needed, such as when the user scrolls to them or interacts with them. + +The PRPL pattern is designed to improve the perceived performance of a web page by reducing the time it takes for the page to become interactive. It is particularly useful for applications that are served over slow or unreliable networks, as it allows the page to render as quickly as possible and then gradually load the remaining resources. + +Free Content +PRPL Pattern - Google Developers diff --git a/content/roadmaps/100-frontend/content/117-progressive-web-apps/110-rail-model.md b/content/roadmaps/100-frontend/content/117-progressive-web-apps/110-rail-model.md new file mode 100644 index 000000000..e67429983 --- /dev/null +++ b/content/roadmaps/100-frontend/content/117-progressive-web-apps/110-rail-model.md @@ -0,0 +1,13 @@ +# RAIL Model + +The RAIL model is a performance optimization model for web applications that focuses on improving the perceived performance of a web page. It stands for Response, Animation, Idle, and Load, and it involves the following four performance goals: + +* Response: The time it takes for the web page to respond to user input should be under 100 milliseconds. +* Animation: The time it takes for an animation to run should be under 10 milliseconds. +* Idle: The web page should take advantage of idle time to perform non-critical tasks. +* Load: The time it takes for the web page to fully load should be under 1 second. + +The RAIL model is designed to provide a framework for optimizing the performance of a web page by focusing on the four key areas that impact the user's perception of performance. It is particularly useful for applications that require high levels of interactivity, such as games and social media applications. + +Free Content +RAIL Model - Google Developers diff --git a/content/roadmaps/100-frontend/content/117-progressive-web-apps/111-performance-metrics.md b/content/roadmaps/100-frontend/content/117-progressive-web-apps/111-performance-metrics.md new file mode 100644 index 000000000..49197b144 --- /dev/null +++ b/content/roadmaps/100-frontend/content/117-progressive-web-apps/111-performance-metrics.md @@ -0,0 +1,15 @@ +# Performance Metrics + +Web performance metrics are quantitative measures of the performance of a web page or application. They are used to assess the speed and efficiency of a web page, and they can help identify areas for improvement. Some common web performance metrics include: + +* Load time: The time it takes for a web page to fully load and become interactive. +* First contentful paint (FCP): The time it takes for the first content to appear on the page. +* Time to interactive (TTI): The time it takes for the page to become fully interactive. +* First input delay (FID): The time it takes for the page to respond to the first user input. +* Total blocking time (TBT): The time it takes for the page to become fully interactive, taking into account the time spent blocking the main thread. + +There are many tools and techniques available for measuring web performance metrics, including browser dev tools, performance monitoring tools, and web performance APIs. By tracking these metrics and analyzing the results, web developers can identify areas for improvement and optimize the performance of their web pages. + +Free Content +Web Performance Metrics - Google Developers +Measuring performance and user experience - Google Developers diff --git a/content/roadmaps/100-frontend/content/117-progressive-web-apps/112-lighthouse.md b/content/roadmaps/100-frontend/content/117-progressive-web-apps/112-lighthouse.md new file mode 100644 index 000000000..4373ed99d --- /dev/null +++ b/content/roadmaps/100-frontend/content/117-progressive-web-apps/112-lighthouse.md @@ -0,0 +1,10 @@ +# Lighthouse + +Lighthouse is an open-source tool developed by Google that is used to audit the performance, accessibility, and SEO of web pages. It is available as a browser extension and as a command-line tool, and it can be run on any web page to generate a report with recommendations for improvement. + +Lighthouse works by simulating the load and interaction of a web page and measuring various performance metrics, such as load time, time to first paint, and time to interactive. It also checks for common issues such as incorrect image sizes, missing alt text, and broken links. + +Lighthouse provides a comprehensive and easy-to-use tool for identifying and fixing performance and accessibility issues on web pages. It is widely used by web developers and is integrated into many popular development tools. + +Free Content +Lighthouse - Google Developers diff --git a/content/roadmaps/100-frontend/content/117-progressive-web-apps/113-browser-devtools.md b/content/roadmaps/100-frontend/content/117-progressive-web-apps/113-browser-devtools.md new file mode 100644 index 000000000..9703e0e6a --- /dev/null +++ b/content/roadmaps/100-frontend/content/117-progressive-web-apps/113-browser-devtools.md @@ -0,0 +1,18 @@ +# Browser DevTools + +Most of the browsers have built-in developer tools that help you perform web development specific tasks on a webpage. My personal recommendation would be to use Chrome DevTools as it is the most advanced and has the most features. However, if you are using a different browser, you can still use the DevTools to debug your web application. + +Chrome DevTools is a set of web development tools built into the Google Chrome browser. It allows web developers to debug and optimize web pages by providing a range of features for inspecting and manipulating the page's HTML, CSS, and JavaScript. + +Some of the features provided by Chrome DevTools include: + +* **Elements panel**: Inspect and modify the page's HTML and CSS. +* **Console panel**: View and debug JavaScript errors and log messages. +* **Network panel**: Monitor network requests and responses, and analyze performance issues. +* **Performance panel**: Analyze the performance of the page and identify bottlenecks. +* **Application panel**: Inspect the page's resources, such as cookies and local storage. + +Chrome DevTools is a powerful and essential tool for web developers, and it is widely used to debug and optimize web pages. It is constantly updated with new features and improvements, and it is available on all modern web browsers. + +Free Content +Chrome DevTools - Google Developers diff --git a/public/project/frontend.json b/public/project/frontend.json index 3bbf64240..0f2f1ea80 100644 --- a/public/project/frontend.json +++ b/public/project/frontend.json @@ -9717,181 +9717,10 @@ } } }, - { - "ID": "13958", - "typeID": "__group__", - "zOrder": "211", - "measuredW": "269", - "measuredH": "290", - "w": "269", - "h": "290", - "x": "398", - "y": "2445", - "properties": { - "controlName": "101-progressive-web-apps:performance" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "Canvas", - "zOrder": "0", - "w": "262", - "h": "281", - "measuredW": "100", - "measuredH": "70", - "x": "7", - "y": "9" - }, - { - "ID": "1", - "typeID": "TextInput", - "zOrder": "1", - "w": "225", - "measuredW": "124", - "measuredH": "32", - "x": "27", - "y": "28", - "properties": { - "align": "center", - "color": "16776960", - "size": "18", - "text": "PRPL Pattern" - } - }, - { - "ID": "2", - "typeID": "TextInput", - "zOrder": "2", - "w": "225", - "measuredW": "110", - "measuredH": "32", - "x": "27", - "y": "66", - "properties": { - "align": "center", - "color": "16776960", - "size": "18", - "text": "RAIL Model" - } - }, - { - "ID": "3", - "typeID": "TextInput", - "zOrder": "3", - "w": "225", - "measuredW": "185", - "measuredH": "32", - "x": "27", - "y": "104", - "properties": { - "align": "center", - "color": "16776960", - "size": "18", - "text": "Performance Metrics" - } - }, - { - "ID": "4", - "typeID": "TextInput", - "zOrder": "4", - "w": "225", - "measuredW": "156", - "measuredH": "32", - "x": "27", - "y": "141", - "properties": { - "align": "center", - "color": "16776960", - "size": "18", - "text": "Using Lighthouse" - } - }, - { - "ID": "5", - "typeID": "TextInput", - "zOrder": "5", - "w": "225", - "measuredW": "141", - "measuredH": "32", - "x": "27", - "y": "179", - "properties": { - "align": "center", - "color": "16776960", - "size": "18", - "text": "Using DevTools" - } - }, - { - "ID": "6", - "typeID": "Label", - "zOrder": "6", - "w": "185", - "measuredW": "176", - "measuredH": "25", - "x": "47", - "y": "224", - "properties": { - "size": "17", - "text": "Calculating, Measuring" - } - }, - { - "ID": "7", - "typeID": "Label", - "zOrder": "7", - "w": "224", - "measuredW": "212", - "measuredH": "25", - "x": "27", - "y": "251", - "properties": { - "size": "17", - "text": "and improving performance" - } - }, - { - "ID": "8", - "typeID": "Icon", - "zOrder": "8", - "measuredW": "24", - "measuredH": "24", - "x": "0", - "y": "0", - "properties": { - "color": "16777215", - "icon": { - "ID": "circle", - "size": "small" - } - } - }, - { - "ID": "9", - "typeID": "Icon", - "zOrder": "9", - "measuredW": "24", - "measuredH": "24", - "x": "0", - "y": "0", - "properties": { - "color": "10066329", - "icon": { - "ID": "check-circle", - "size": "small" - } - } - } - ] - } - } - }, { "ID": "13959", "typeID": "__group__", - "zOrder": "212", + "zOrder": "221", "measuredW": "285", "measuredH": "59", "w": "285", @@ -9970,7 +9799,7 @@ { "ID": "13960", "typeID": "__group__", - "zOrder": "213", + "zOrder": "222", "measuredW": "125", "measuredH": "41", "w": "125", @@ -10049,7 +9878,7 @@ { "ID": "13961", "typeID": "__group__", - "zOrder": "214", + "zOrder": "223", "measuredW": "116", "measuredH": "41", "w": "116", @@ -10128,7 +9957,7 @@ { "ID": "13962", "typeID": "__group__", - "zOrder": "215", + "zOrder": "224", "measuredW": "127", "measuredH": "41", "w": "127", @@ -10224,7 +10053,7 @@ { "ID": "13963", "typeID": "__group__", - "zOrder": "216", + "zOrder": "225", "measuredW": "121", "measuredH": "41", "w": "121", @@ -10320,7 +10149,7 @@ { "ID": "13964", "typeID": "__group__", - "zOrder": "217", + "zOrder": "226", "measuredW": "127", "measuredH": "41", "w": "127", @@ -10416,7 +10245,7 @@ { "ID": "13965", "typeID": "__group__", - "zOrder": "218", + "zOrder": "227", "measuredW": "122", "measuredH": "41", "w": "122", @@ -10512,7 +10341,7 @@ { "ID": "13966", "typeID": "__group__", - "zOrder": "219", + "zOrder": "228", "measuredW": "220", "measuredH": "59", "w": "220", @@ -10592,7 +10421,7 @@ { "ID": "13967", "typeID": "__group__", - "zOrder": "220", + "zOrder": "229", "measuredW": "156", "measuredH": "41", "w": "156", @@ -10672,7 +10501,7 @@ { "ID": "13968", "typeID": "__group__", - "zOrder": "221", + "zOrder": "230", "measuredW": "147", "measuredH": "41", "w": "147", @@ -10719,7 +10548,7 @@ { "ID": "13969", "typeID": "__group__", - "zOrder": "222", + "zOrder": "231", "measuredW": "157", "measuredH": "41", "w": "157", @@ -10799,7 +10628,7 @@ { "ID": "13970", "typeID": "__group__", - "zOrder": "223", + "zOrder": "232", "measuredW": "157", "measuredH": "41", "w": "157", @@ -10895,7 +10724,7 @@ { "ID": "13971", "typeID": "__group__", - "zOrder": "224", + "zOrder": "233", "measuredW": "147", "measuredH": "41", "w": "147", @@ -10943,7 +10772,7 @@ { "ID": "13972", "typeID": "__group__", - "zOrder": "225", + "zOrder": "234", "measuredW": "152", "measuredH": "50", "w": "152", @@ -11022,7 +10851,7 @@ { "ID": "13973", "typeID": "__group__", - "zOrder": "226", + "zOrder": "235", "measuredW": "175", "measuredH": "41", "w": "175", @@ -11118,7 +10947,7 @@ { "ID": "13974", "typeID": "__group__", - "zOrder": "227", + "zOrder": "236", "measuredW": "238", "measuredH": "60", "w": "238", @@ -11197,7 +11026,7 @@ { "ID": "13975", "typeID": "__group__", - "zOrder": "228", + "zOrder": "237", "measuredW": "199", "measuredH": "40", "w": "199", @@ -11277,7 +11106,7 @@ { "ID": "13976", "typeID": "__group__", - "zOrder": "229", + "zOrder": "238", "measuredW": "199", "measuredH": "40", "w": "199", @@ -11357,7 +11186,7 @@ { "ID": "13977", "typeID": "__group__", - "zOrder": "230", + "zOrder": "239", "measuredW": "199", "measuredH": "40", "w": "199", @@ -11437,7 +11266,7 @@ { "ID": "13978", "typeID": "__group__", - "zOrder": "231", + "zOrder": "240", "measuredW": "156", "measuredH": "43", "w": "156", @@ -11517,7 +11346,7 @@ { "ID": "13979", "typeID": "__group__", - "zOrder": "232", + "zOrder": "241", "measuredW": "156", "measuredH": "41", "w": "156", @@ -11597,7 +11426,7 @@ { "ID": "13980", "typeID": "__group__", - "zOrder": "233", + "zOrder": "242", "measuredW": "212", "measuredH": "40", "w": "212", @@ -11693,7 +11522,7 @@ { "ID": "13981", "typeID": "__group__", - "zOrder": "234", + "zOrder": "243", "measuredW": "159", "measuredH": "40", "w": "159", @@ -11786,7 +11615,7 @@ { "ID": "13982", "typeID": "__group__", - "zOrder": "235", + "zOrder": "244", "measuredW": "159", "measuredH": "40", "w": "159", @@ -11895,7 +11724,7 @@ { "ID": "13984", "typeID": "__group__", - "zOrder": "236", + "zOrder": "245", "measuredW": "157", "measuredH": "41", "w": "157", @@ -11976,7 +11805,7 @@ { "ID": "13985", "typeID": "__group__", - "zOrder": "237", + "zOrder": "246", "measuredW": "158", "measuredH": "49", "w": "158", @@ -12055,7 +11884,7 @@ { "ID": "13986", "typeID": "__group__", - "zOrder": "238", + "zOrder": "247", "measuredW": "152", "measuredH": "40", "w": "152", @@ -12150,7 +11979,7 @@ { "ID": "13987", "typeID": "__group__", - "zOrder": "239", + "zOrder": "248", "measuredW": "152", "measuredH": "40", "w": "152", @@ -12245,7 +12074,7 @@ { "ID": "13990", "typeID": "__group__", - "zOrder": "240", + "zOrder": "249", "measuredW": "204", "measuredH": "39", "w": "204", @@ -12324,7 +12153,7 @@ { "ID": "13991", "typeID": "__group__", - "zOrder": "241", + "zOrder": "250", "measuredW": "116", "measuredH": "41", "w": "116", @@ -12403,7 +12232,7 @@ { "ID": "13992", "typeID": "__group__", - "zOrder": "242", + "zOrder": "251", "measuredW": "159", "measuredH": "41", "w": "159", @@ -12482,7 +12311,7 @@ { "ID": "13993", "typeID": "__group__", - "zOrder": "243", + "zOrder": "252", "measuredW": "196", "measuredH": "41", "w": "196", @@ -12592,7 +12421,7 @@ { "ID": "13995", "typeID": "__group__", - "zOrder": "244", + "zOrder": "253", "measuredW": "157", "measuredH": "41", "w": "157", @@ -12671,7 +12500,7 @@ { "ID": "13996", "typeID": "__group__", - "zOrder": "245", + "zOrder": "254", "measuredW": "128", "measuredH": "40", "w": "128", @@ -12796,7 +12625,7 @@ { "ID": "13998", "typeID": "__group__", - "zOrder": "246", + "zOrder": "255", "measuredW": "122", "measuredH": "41", "w": "122", @@ -12950,7 +12779,7 @@ { "ID": "14001", "typeID": "__group__", - "zOrder": "247", + "zOrder": "256", "measuredW": "411", "measuredH": "87", "w": "411", @@ -13071,7 +12900,7 @@ { "ID": "14006", "typeID": "__group__", - "zOrder": "248", + "zOrder": "257", "measuredW": "333", "measuredH": "228", "w": "333", @@ -13128,7 +12957,7 @@ { "ID": "14007", "typeID": "__group__", - "zOrder": "249", + "zOrder": "258", "measuredW": "145", "measuredH": "40", "w": "145", @@ -13223,7 +13052,7 @@ { "ID": "14008", "typeID": "__group__", - "zOrder": "250", + "zOrder": "259", "measuredW": "150", "measuredH": "37", "w": "150", @@ -13318,7 +13147,7 @@ { "ID": "14009", "typeID": "__group__", - "zOrder": "251", + "zOrder": "260", "measuredW": "157", "measuredH": "39", "w": "157", @@ -13413,7 +13242,7 @@ { "ID": "14010", "typeID": "__group__", - "zOrder": "252", + "zOrder": "261", "measuredW": "149", "measuredH": "37", "w": "149", @@ -13508,7 +13337,7 @@ { "ID": "14011", "typeID": "__group__", - "zOrder": "253", + "zOrder": "262", "measuredW": "161", "measuredH": "39", "w": "161", @@ -13603,7 +13432,7 @@ { "ID": "14012", "typeID": "__group__", - "zOrder": "254", + "zOrder": "263", "measuredW": "161", "measuredH": "39", "w": "161", @@ -14089,6 +13918,257 @@ ] } } + }, + { + "ID": "14036", + "typeID": "Canvas", + "zOrder": "211", + "w": "262", + "h": "281", + "measuredW": "100", + "measuredH": "70", + "x": "405", + "y": "2454" + }, + { + "ID": "14042", + "typeID": "Label", + "zOrder": "217", + "w": "185", + "measuredW": "176", + "measuredH": "25", + "x": "445", + "y": "2669", + "properties": { + "size": "17", + "text": "Calculating, Measuring" + } + }, + { + "ID": "14043", + "typeID": "Label", + "zOrder": "218", + "w": "224", + "measuredW": "212", + "measuredH": "25", + "x": "425", + "y": "2696", + "properties": { + "size": "17", + "text": "and improving performance" + } + }, + { + "ID": "14044", + "typeID": "Icon", + "zOrder": "219", + "measuredW": "24", + "measuredH": "24", + "x": "398", + "y": "2445", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "14045", + "typeID": "Icon", + "zOrder": "220", + "measuredW": "24", + "measuredH": "24", + "x": "398", + "y": "2445", + "properties": { + "color": "10066329", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + }, + { + "ID": "14046", + "typeID": "__group__", + "zOrder": "212", + "measuredW": "225", + "measuredH": "32", + "w": "225", + "h": "32", + "x": "425", + "y": "2473", + "properties": { + "controlName": "109-progressive-web-apps:prpl-pattern" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextInput", + "zOrder": "0", + "w": "225", + "measuredW": "124", + "measuredH": "32", + "x": "0", + "y": "0", + "properties": { + "align": "center", + "color": "16776960", + "size": "18", + "text": "PRPL Pattern" + } + } + ] + } + } + }, + { + "ID": "14047", + "typeID": "__group__", + "zOrder": "213", + "measuredW": "225", + "measuredH": "32", + "w": "225", + "h": "32", + "x": "425", + "y": "2511", + "properties": { + "controlName": "110-progressive-web-apps:rail-model" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextInput", + "zOrder": "0", + "w": "225", + "measuredW": "110", + "measuredH": "32", + "x": "0", + "y": "0", + "properties": { + "align": "center", + "color": "16776960", + "size": "18", + "text": "RAIL Model" + } + } + ] + } + } + }, + { + "ID": "14048", + "typeID": "__group__", + "zOrder": "214", + "measuredW": "225", + "measuredH": "32", + "w": "225", + "h": "32", + "x": "425", + "y": "2549", + "properties": { + "controlName": "111-progressive-web-apps:performance-metrics" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextInput", + "zOrder": "0", + "w": "225", + "measuredW": "185", + "measuredH": "32", + "x": "0", + "y": "0", + "properties": { + "align": "center", + "color": "16776960", + "size": "18", + "text": "Performance Metrics" + } + } + ] + } + } + }, + { + "ID": "14049", + "typeID": "__group__", + "zOrder": "215", + "measuredW": "225", + "measuredH": "32", + "w": "225", + "h": "32", + "x": "425", + "y": "2586", + "properties": { + "controlName": "112-progressive-web-apps:lighthouse" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextInput", + "zOrder": "0", + "w": "225", + "measuredW": "156", + "measuredH": "32", + "x": "0", + "y": "0", + "properties": { + "align": "center", + "color": "16776960", + "size": "18", + "text": "Using Lighthouse" + } + } + ] + } + } + }, + { + "ID": "14050", + "typeID": "__group__", + "zOrder": "216", + "measuredW": "225", + "measuredH": "32", + "w": "225", + "h": "32", + "x": "425", + "y": "2624", + "properties": { + "controlName": "113-progressive-web-apps:browser-devtools" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextInput", + "zOrder": "0", + "w": "225", + "measuredW": "141", + "measuredH": "32", + "x": "0", + "y": "0", + "properties": { + "align": "center", + "color": "16776960", + "size": "18", + "text": "Using DevTools" + } + } + ] + } + } } ] },