From 415dc2d8e8d4252257a7022c462ed18189ea2d78 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 24 Jan 2023 19:57:42 +0400
Subject: [PATCH] Handle mark done/pending functionality in best practices

---
 .../best-practices/frontend-performance.json  | 3770 +----------------
 .../FrameRenderer/FrameRenderer.css           |  164 +-
 src/components/FrameRenderer/renderer.js      |   13 +
 src/components/TopicOverlay/topic.js          |   45 +-
 4 files changed, 140 insertions(+), 3852 deletions(-)

diff --git a/public/jsons/best-practices/frontend-performance.json b/public/jsons/best-practices/frontend-performance.json
index 021511bad..da92dc2b5 100644
--- a/public/jsons/best-practices/frontend-performance.json
+++ b/public/jsons/best-practices/frontend-performance.json
@@ -1,3769 +1 @@
-{
-    "mockup": {
-        "controls": {
-            "control": [
-                {
-                    "ID": "15137",
-                    "typeID": "Arrow",
-                    "zOrder": "0",
-                    "w": "1",
-                    "h": "81",
-                    "measuredW": "150",
-                    "measuredH": "100",
-                    "x": "814",
-                    "y": "1843",
-                    "properties": {
-                        "curvature": "0",
-                        "leftArrow": "false",
-                        "rightArrow": "false",
-                        "stroke": "dotted",
-                        "color": "10027263",
-                        "p0": {
-                            "x": 0,
-                            "y": 0
-                        },
-                        "p1": {
-                            "x": 0.49999999999999994,
-                            "y": 0
-                        },
-                        "p2": {
-                            "x": 0,
-                            "y": 81.09090909090901
-                        }
-                    }
-                },
-                {
-                    "ID": "15138",
-                    "typeID": "Arrow",
-                    "zOrder": "1",
-                    "w": "1",
-                    "h": "90",
-                    "measuredW": "150",
-                    "measuredH": "100",
-                    "x": "1118",
-                    "y": "1511",
-                    "properties": {
-                        "curvature": "0",
-                        "leftArrow": "false",
-                        "rightArrow": "false",
-                        "color": "4273622",
-                        "stroke": "dotted",
-                        "p0": {
-                            "x": 0,
-                            "y": -0.48484848484849863
-                        },
-                        "p1": {
-                            "x": 0.5,
-                            "y": 0
-                        },
-                        "p2": {
-                            "x": 0,
-                            "y": 89.20412121212144
-                        }
-                    }
-                },
-                {
-                    "ID": "15139",
-                    "typeID": "Arrow",
-                    "zOrder": "2",
-                    "w": "606",
-                    "h": "1",
-                    "measuredW": "150",
-                    "measuredH": "100",
-                    "x": "816",
-                    "y": "1510",
-                    "properties": {
-                        "curvature": "0",
-                        "leftArrow": "false",
-                        "rightArrow": "false",
-                        "p0": {
-                            "x": 0.4393939393939945,
-                            "y": 0
-                        },
-                        "p1": {
-                            "x": 0.499957866859274,
-                            "y": 0.000355669369753909
-                        },
-                        "p2": {
-                            "x": 606.8787878787878,
-                            "y": 0
-                        },
-                        "color": "4273622"
-                    }
-                },
-                {
-                    "ID": "15140",
-                    "typeID": "Arrow",
-                    "zOrder": "3",
-                    "w": "1",
-                    "h": "79",
-                    "measuredW": "150",
-                    "measuredH": "100",
-                    "x": "469",
-                    "y": "1309",
-                    "properties": {
-                        "curvature": "0",
-                        "leftArrow": "false",
-                        "rightArrow": "false",
-                        "color": "4273622",
-                        "p0": {
-                            "x": 0,
-                            "y": -0.48484848484849863
-                        },
-                        "p1": {
-                            "x": 0.5,
-                            "y": 0
-                        },
-                        "p2": {
-                            "x": 0,
-                            "y": 78.78896363636386
-                        },
-                        "stroke": "dotted"
-                    }
-                },
-                {
-                    "ID": "15141",
-                    "typeID": "Arrow",
-                    "zOrder": "4",
-                    "w": "726",
-                    "h": "1",
-                    "measuredW": "150",
-                    "measuredH": "100",
-                    "x": "816",
-                    "y": "1052",
-                    "properties": {
-                        "curvature": "0",
-                        "leftArrow": "false",
-                        "rightArrow": "false",
-                        "color": "4273622",
-                        "p0": {
-                            "x": -0.2686368305519409,
-                            "y": 0
-                        },
-                        "p1": {
-                            "x": 0.5001077701859017,
-                            "y": 0.0003391382343339101
-                        },
-                        "p2": {
-                            "x": 725.5310311167375,
-                            "y": 0
-                        }
-                    }
-                },
-                {
-                    "ID": "15142",
-                    "typeID": "Arrow",
-                    "zOrder": "5",
-                    "w": "1252",
-                    "h": "1",
-                    "measuredW": "150",
-                    "measuredH": "100",
-                    "x": "225",
-                    "y": "413",
-                    "properties": {
-                        "curvature": "0",
-                        "leftArrow": "false",
-                        "rightArrow": "false",
-                        "p0": {
-                            "x": 0,
-                            "y": 0
-                        },
-                        "p1": {
-                            "x": 0.49994495226877456,
-                            "y": 0.0003335799224988863
-                        },
-                        "p2": {
-                            "x": 1252,
-                            "y": 0
-                        },
-                        "color": "4273622"
-                    }
-                },
-                {
-                    "ID": "15143",
-                    "typeID": "Canvas",
-                    "zOrder": "6",
-                    "w": "189",
-                    "h": "50",
-                    "measuredW": "100",
-                    "measuredH": "70",
-                    "x": "375",
-                    "y": "389",
-                    "properties": {
-                        "color": "16776960"
-                    }
-                },
-                {
-                    "ID": "15145",
-                    "typeID": "Label",
-                    "zOrder": "9",
-                    "measuredW": "327",
-                    "measuredH": "40",
-                    "x": "686",
-                    "y": "226",
-                    "properties": {
-                        "text": "Frontend Performance",
-                        "size": "32"
-                    }
-                },
-                {
-                    "ID": "15146",
-                    "typeID": "Canvas",
-                    "zOrder": "10",
-                    "w": "361",
-                    "h": "150",
-                    "measuredW": "100",
-                    "measuredH": "70",
-                    "x": "1099",
-                    "y": "158"
-                },
-                {
-                    "ID": "15147",
-                    "typeID": "Label",
-                    "zOrder": "11",
-                    "measuredW": "332",
-                    "measuredH": "26",
-                    "x": "1115",
-                    "y": "176",
-                    "properties": {
-                        "text": "Find the detailed version of this checklist",
-                        "size": "18"
-                    }
-                },
-                {
-                    "ID": "15148",
-                    "typeID": "Label",
-                    "zOrder": "12",
-                    "measuredW": "318",
-                    "measuredH": "26",
-                    "x": "1115",
-                    "y": "204",
-                    "properties": {
-                        "size": "18",
-                        "text": "With details on how to implement these"
-                    }
-                },
-                {
-                    "ID": "15149",
-                    "typeID": "Canvas",
-                    "zOrder": "13",
-                    "w": "329",
-                    "h": "51",
-                    "measuredW": "100",
-                    "measuredH": "70",
-                    "x": "1115",
-                    "y": "240",
-                    "properties": {
-                        "color": "4273622",
-                        "borderColor": "4273622"
-                    }
-                },
-                {
-                    "ID": "15150",
-                    "typeID": "Label",
-                    "zOrder": "14",
-                    "measuredW": "172",
-                    "measuredH": "28",
-                    "x": "1194",
-                    "y": "252",
-                    "properties": {
-                        "color": "16777215",
-                        "size": "20",
-                        "text": "https://roadmap.sh"
-                    }
-                },
-                {
-                    "ID": "15151",
-                    "typeID": "Canvas",
-                    "zOrder": "15",
-                    "w": "373",
-                    "h": "169",
-                    "measuredW": "100",
-                    "measuredH": "70",
-                    "x": "236",
-                    "y": "148"
-                },
-                {
-                    "ID": "15152",
-                    "typeID": "__group__",
-                    "zOrder": "16",
-                    "measuredW": "191",
-                    "measuredH": "27",
-                    "w": "191",
-                    "h": "27",
-                    "x": "266",
-                    "y": "222",
-                    "properties": {
-                        "controlName": "ext_link:roadmap.sh/frontend"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "Label",
-                                    "zOrder": "0",
-                                    "measuredW": "158",
-                                    "measuredH": "26",
-                                    "x": "33",
-                                    "y": "0",
-                                    "properties": {
-                                        "size": "18",
-                                        "text": "Frontend Roadmap"
-                                    }
-                                },
-                                {
-                                    "ID": "1",
-                                    "typeID": "__group__",
-                                    "zOrder": "1",
-                                    "measuredW": "24",
-                                    "measuredH": "24",
-                                    "w": "24",
-                                    "h": "24",
-                                    "x": "0",
-                                    "y": "3",
-                                    "children": {
-                                        "controls": {
-                                            "control": [
-                                                {
-                                                    "ID": "0",
-                                                    "typeID": "Icon",
-                                                    "zOrder": "0",
-                                                    "measuredW": "24",
-                                                    "measuredH": "24",
-                                                    "x": "0",
-                                                    "y": "0",
-                                                    "properties": {
-                                                        "color": "16777215",
-                                                        "icon": {
-                                                            "ID": "circle",
-                                                            "size": "small"
-                                                        }
-                                                    }
-                                                },
-                                                {
-                                                    "ID": "1",
-                                                    "typeID": "Icon",
-                                                    "zOrder": "1",
-                                                    "measuredW": "24",
-                                                    "measuredH": "24",
-                                                    "x": "0",
-                                                    "y": "0",
-                                                    "properties": {
-                                                        "color": "10066329",
-                                                        "icon": {
-                                                            "ID": "check-circle",
-                                                            "size": "small"
-                                                        }
-                                                    }
-                                                }
-                                            ]
-                                        }
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15153",
-                    "typeID": "__group__",
-                    "zOrder": "17",
-                    "measuredW": "202",
-                    "measuredH": "27",
-                    "w": "202",
-                    "h": "27",
-                    "x": "266",
-                    "y": "258",
-                    "properties": {
-                        "controlName": "ext_link:roadmap.sh/javascript"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "Label",
-                                    "zOrder": "0",
-                                    "measuredW": "169",
-                                    "measuredH": "26",
-                                    "x": "33",
-                                    "y": "0",
-                                    "properties": {
-                                        "size": "18",
-                                        "text": "JavaScript Roadmap"
-                                    }
-                                },
-                                {
-                                    "ID": "1",
-                                    "typeID": "__group__",
-                                    "zOrder": "1",
-                                    "measuredW": "24",
-                                    "measuredH": "24",
-                                    "w": "24",
-                                    "h": "24",
-                                    "x": "0",
-                                    "y": "3",
-                                    "children": {
-                                        "controls": {
-                                            "control": [
-                                                {
-                                                    "ID": "0",
-                                                    "typeID": "Icon",
-                                                    "zOrder": "0",
-                                                    "measuredW": "24",
-                                                    "measuredH": "24",
-                                                    "x": "0",
-                                                    "y": "0",
-                                                    "properties": {
-                                                        "color": "16777215",
-                                                        "icon": {
-                                                            "ID": "circle",
-                                                            "size": "small"
-                                                        }
-                                                    }
-                                                },
-                                                {
-                                                    "ID": "1",
-                                                    "typeID": "Icon",
-                                                    "zOrder": "1",
-                                                    "measuredW": "24",
-                                                    "measuredH": "24",
-                                                    "x": "0",
-                                                    "y": "0",
-                                                    "properties": {
-                                                        "color": "10066329",
-                                                        "icon": {
-                                                            "ID": "check-circle",
-                                                            "size": "small"
-                                                        }
-                                                    }
-                                                }
-                                            ]
-                                        }
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15154",
-                    "typeID": "Label",
-                    "zOrder": "18",
-                    "measuredW": "209",
-                    "measuredH": "32",
-                    "x": "266",
-                    "y": "172",
-                    "properties": {
-                        "size": "24",
-                        "text": "Related Roadmaps"
-                    }
-                },
-                {
-                    "ID": "15155",
-                    "typeID": "Arrow",
-                    "zOrder": "19",
-                    "w": "1",
-                    "h": "76",
-                    "measuredW": "150",
-                    "measuredH": "100",
-                    "x": "812",
-                    "y": "134",
-                    "properties": {
-                        "curvature": "0",
-                        "leftArrow": "false",
-                        "rightArrow": "false",
-                        "p0": {
-                            "x": 0,
-                            "y": 0
-                        },
-                        "p1": {
-                            "x": 0.49999999999999994,
-                            "y": 0
-                        },
-                        "p2": {
-                            "x": 0,
-                            "y": 76.17275043077757
-                        },
-                        "stroke": "dotted",
-                        "color": "10027263"
-                    }
-                },
-                {
-                    "ID": "15157",
-                    "typeID": "__group__",
-                    "zOrder": "21",
-                    "measuredW": "481",
-                    "measuredH": "28",
-                    "w": "481",
-                    "h": "28",
-                    "x": "907",
-                    "y": "472",
-                    "properties": {
-                        "controlName": "minify-html"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "Label",
-                                    "zOrder": "0",
-                                    "measuredW": "481",
-                                    "measuredH": "28",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "size": "20",
-                                        "text": "Minified HTML - Remove comments and whitespaces"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15159",
-                    "typeID": "__group__",
-                    "zOrder": "23",
-                    "measuredW": "271",
-                    "measuredH": "28",
-                    "w": "271",
-                    "h": "28",
-                    "x": "907",
-                    "y": "511",
-                    "properties": {
-                        "controlName": "use-cdn"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "Label",
-                                    "zOrder": "0",
-                                    "measuredW": "271",
-                                    "measuredH": "28",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "text": "Use Content Delivery Network",
-                                        "size": "20"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15161",
-                    "typeID": "__group__",
-                    "zOrder": "25",
-                    "measuredW": "274",
-                    "measuredH": "28",
-                    "w": "274",
-                    "h": "28",
-                    "x": "903",
-                    "y": "1121",
-                    "properties": {
-                        "controlName": "pre-load-urls-where-possible"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "Label",
-                                    "zOrder": "0",
-                                    "measuredW": "274",
-                                    "measuredH": "28",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "size": "20",
-                                        "text": "Pre-load URLs where possible"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15163",
-                    "typeID": "__group__",
-                    "zOrder": "27",
-                    "measuredW": "461",
-                    "measuredH": "28",
-                    "w": "461",
-                    "h": "28",
-                    "x": "301",
-                    "y": "514",
-                    "properties": {
-                        "controlName": "minify-css"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "Label",
-                                    "zOrder": "0",
-                                    "measuredW": "461",
-                                    "measuredH": "28",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "size": "20",
-                                        "text": "Minified CSS - Remove comments, whitespaces etc"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15165",
-                    "typeID": "__group__",
-                    "zOrder": "29",
-                    "measuredW": "307",
-                    "measuredH": "28",
-                    "w": "307",
-                    "h": "28",
-                    "x": "903",
-                    "y": "1158",
-                    "properties": {
-                        "controlName": "concatenate-css-single-file"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "Label",
-                                    "zOrder": "0",
-                                    "measuredW": "307",
-                                    "measuredH": "28",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "size": "20",
-                                        "text": "Concatenate CSS into a single file"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15167",
-                    "typeID": "__group__",
-                    "zOrder": "31",
-                    "measuredW": "237",
-                    "measuredH": "28",
-                    "w": "237",
-                    "h": "28",
-                    "x": "301",
-                    "y": "553",
-                    "properties": {
-                        "controlName": "make-css-files-non-blocking"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "Label",
-                                    "zOrder": "0",
-                                    "measuredW": "237",
-                                    "measuredH": "28",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "size": "20",
-                                        "text": "CSS files are non-blocking"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15169",
-                    "typeID": "__group__",
-                    "zOrder": "33",
-                    "measuredW": "191",
-                    "measuredH": "28",
-                    "w": "191",
-                    "h": "28",
-                    "x": "904",
-                    "y": "1201",
-                    "properties": {
-                        "controlName": "remove-unused-css"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "Label",
-                                    "zOrder": "0",
-                                    "measuredW": "191",
-                                    "measuredH": "28",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "size": "20",
-                                        "text": "Remove unused CSS"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15171",
-                    "typeID": "__group__",
-                    "zOrder": "35",
-                    "measuredW": "389",
-                    "measuredH": "28",
-                    "w": "389",
-                    "h": "28",
-                    "x": "301",
-                    "y": "592",
-                    "properties": {
-                        "controlName": "inline-critical-css"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "Label",
-                                    "zOrder": "0",
-                                    "measuredW": "389",
-                                    "measuredH": "28",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "size": "20",
-                                        "text": "Inline the Critical CSS (above the fold CSS)"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15173",
-                    "typeID": "__group__",
-                    "zOrder": "37",
-                    "measuredW": "299",
-                    "measuredH": "28",
-                    "w": "299",
-                    "h": "28",
-                    "x": "301",
-                    "y": "632",
-                    "properties": {
-                        "controlName": "avoid-inline-css"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "Label",
-                                    "zOrder": "0",
-                                    "measuredW": "299",
-                                    "measuredH": "28",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "size": "20",
-                                        "text": "Avoid the embedded / inline CSS"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15175",
-                    "typeID": "__group__",
-                    "zOrder": "39",
-                    "measuredW": "279",
-                    "measuredH": "28",
-                    "w": "279",
-                    "h": "28",
-                    "x": "301",
-                    "y": "671",
-                    "properties": {
-                        "controlName": "analyse-stylesheets-complexity"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "Label",
-                                    "zOrder": "0",
-                                    "measuredW": "279",
-                                    "measuredH": "28",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "size": "20",
-                                        "text": "Analyse stylesheets complexity"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15177",
-                    "typeID": "__group__",
-                    "zOrder": "41",
-                    "measuredW": "213",
-                    "measuredH": "28",
-                    "w": "213",
-                    "h": "28",
-                    "x": "904",
-                    "y": "1245",
-                    "properties": {
-                        "controlName": "use-woff2-font-format"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "Label",
-                                    "zOrder": "0",
-                                    "measuredW": "213",
-                                    "measuredH": "28",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "size": "20",
-                                        "text": "Use WOFF2 font format"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15179",
-                    "typeID": "__group__",
-                    "zOrder": "43",
-                    "measuredW": "362",
-                    "measuredH": "28",
-                    "w": "362",
-                    "h": "28",
-                    "x": "905",
-                    "y": "1285",
-                    "properties": {
-                        "controlName": "use-preconnect-to-load-fonts"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "Label",
-                                    "zOrder": "0",
-                                    "measuredW": "362",
-                                    "measuredH": "28",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "size": "20",
-                                        "text": "Use preconnect to load your fonts faster"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15181",
-                    "typeID": "__group__",
-                    "zOrder": "45",
-                    "measuredW": "326",
-                    "measuredH": "28",
-                    "w": "326",
-                    "h": "28",
-                    "x": "905",
-                    "y": "1324",
-                    "properties": {
-                        "controlName": "keep-web-font-under-300k"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "Label",
-                                    "zOrder": "0",
-                                    "measuredW": "326",
-                                    "measuredH": "28",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "size": "20",
-                                        "text": "Keep the web font size under 300kb"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15183",
-                    "typeID": "__group__",
-                    "zOrder": "47",
-                    "measuredW": "269",
-                    "measuredH": "28",
-                    "w": "269",
-                    "h": "28",
-                    "x": "905",
-                    "y": "1364",
-                    "properties": {
-                        "controlName": "prevent-flash-text"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "Label",
-                                    "zOrder": "0",
-                                    "measuredW": "269",
-                                    "measuredH": "28",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "size": "20",
-                                        "text": "Prevent Flash or Invisible Text"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15185",
-                    "typeID": "__group__",
-                    "zOrder": "49",
-                    "measuredW": "458",
-                    "measuredH": "28",
-                    "w": "458",
-                    "h": "28",
-                    "x": "301",
-                    "y": "707",
-                    "properties": {
-                        "controlName": "compress-your-images"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "Label",
-                                    "zOrder": "0",
-                                    "measuredW": "458",
-                                    "measuredH": "28",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "size": "20",
-                                        "text": "Compress your images / keep the image count low"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15187",
-                    "typeID": "__group__",
-                    "zOrder": "51",
-                    "measuredW": "362",
-                    "measuredH": "28",
-                    "w": "362",
-                    "h": "28",
-                    "x": "301",
-                    "y": "747",
-                    "properties": {
-                        "controlName": "choose-image-format-approprietly"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "Label",
-                                    "zOrder": "0",
-                                    "measuredW": "362",
-                                    "measuredH": "28",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "size": "20",
-                                        "text": "Choose your image format appropriately"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15189",
-                    "typeID": "__group__",
-                    "zOrder": "53",
-                    "measuredW": "477",
-                    "measuredH": "28",
-                    "w": "477",
-                    "h": "28",
-                    "x": "907",
-                    "y": "551",
-                    "properties": {
-                        "controlName": "prefer-vector-images"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "Label",
-                                    "zOrder": "0",
-                                    "measuredW": "477",
-                                    "measuredH": "28",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "size": "20",
-                                        "text": "Prefer using vector image rather than bitmap images"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15191",
-                    "typeID": "__group__",
-                    "zOrder": "55",
-                    "measuredW": "501",
-                    "measuredH": "28",
-                    "w": "501",
-                    "h": "28",
-                    "x": "907",
-                    "y": "591",
-                    "properties": {
-                        "controlName": "set-width-height-images"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "Label",
-                                    "zOrder": "0",
-                                    "measuredW": "501",
-                                    "measuredH": "28",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "size": "20",
-                                        "text": "Set width and height attributes on images (aspect ratio)"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15193",
-                    "typeID": "__group__",
-                    "zOrder": "57",
-                    "measuredW": "251",
-                    "measuredH": "28",
-                    "w": "251",
-                    "h": "28",
-                    "x": "907",
-                    "y": "631",
-                    "properties": {
-                        "controlName": "avoid-base64-images"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "Label",
-                                    "zOrder": "0",
-                                    "measuredW": "251",
-                                    "measuredH": "28",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "size": "20",
-                                        "text": "Avoid using Base64 images"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15195",
-                    "typeID": "__group__",
-                    "zOrder": "59",
-                    "measuredW": "311",
-                    "measuredH": "28",
-                    "w": "311",
-                    "h": "28",
-                    "x": "907",
-                    "y": "671",
-                    "properties": {
-                        "controlName": "load-offscreen-images-lazily"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "Label",
-                                    "zOrder": "0",
-                                    "measuredW": "311",
-                                    "measuredH": "28",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "size": "20",
-                                        "text": "Offscreen images are loaded lazily"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15197",
-                    "typeID": "__group__",
-                    "zOrder": "61",
-                    "measuredW": "516",
-                    "measuredH": "28",
-                    "w": "516",
-                    "h": "28",
-                    "x": "907",
-                    "y": "711",
-                    "properties": {
-                        "controlName": "serve-exact-size-images"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "Label",
-                                    "zOrder": "0",
-                                    "measuredW": "516",
-                                    "measuredH": "28",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "size": "20",
-                                        "text": "Ensure to serve images that are close to your display size"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15199",
-                    "typeID": "__group__",
-                    "zOrder": "63",
-                    "measuredW": "194",
-                    "measuredH": "28",
-                    "w": "194",
-                    "h": "28",
-                    "x": "301",
-                    "y": "788",
-                    "properties": {
-                        "controlName": "minify-your-javascript"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "__group__",
-                                    "zOrder": "0",
-                                    "measuredW": "194",
-                                    "measuredH": "28",
-                                    "w": "194",
-                                    "h": "28",
-                                    "x": "0",
-                                    "y": "0",
-                                    "children": {
-                                        "controls": {
-                                            "control": [
-                                                {
-                                                    "ID": "0",
-                                                    "typeID": "Label",
-                                                    "zOrder": "0",
-                                                    "measuredW": "194",
-                                                    "measuredH": "28",
-                                                    "x": "0",
-                                                    "y": "0",
-                                                    "properties": {
-                                                        "size": "20",
-                                                        "text": "Minify your JavaScript"
-                                                    }
-                                                }
-                                            ]
-                                        }
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15201",
-                    "typeID": "__group__",
-                    "zOrder": "65",
-                    "measuredW": "450",
-                    "measuredH": "28",
-                    "w": "450",
-                    "h": "28",
-                    "x": "907",
-                    "y": "751",
-                    "properties": {
-                        "controlName": "avoid-multiple-inline-js-snippets"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "Label",
-                                    "zOrder": "0",
-                                    "measuredW": "450",
-                                    "measuredH": "28",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "size": "20",
-                                        "text": "Avoid multiple inline JavaScript snippets <script> "
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15203",
-                    "typeID": "__group__",
-                    "zOrder": "67",
-                    "measuredW": "391",
-                    "measuredH": "28",
-                    "w": "391",
-                    "h": "28",
-                    "x": "301",
-                    "y": "827",
-                    "properties": {
-                        "controlName": "use-non-blocking-javascript"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "Label",
-                                    "zOrder": "0",
-                                    "measuredW": "391",
-                                    "measuredH": "28",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "size": "20",
-                                        "text": "Non Blocking JavaScript: Use async / defer"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15205",
-                    "typeID": "__group__",
-                    "zOrder": "69",
-                    "measuredW": "323",
-                    "measuredH": "28",
-                    "w": "323",
-                    "h": "28",
-                    "x": "907",
-                    "y": "792",
-                    "properties": {
-                        "controlName": "keep-dependencies-up-to-date"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "Label",
-                                    "zOrder": "0",
-                                    "measuredW": "323",
-                                    "measuredH": "28",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "size": "20",
-                                        "text": "Keep your dependencies up to date"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15207",
-                    "typeID": "__group__",
-                    "zOrder": "71",
-                    "measuredW": "375",
-                    "measuredH": "28",
-                    "w": "375",
-                    "h": "28",
-                    "x": "905",
-                    "y": "1404",
-                    "properties": {
-                        "controlName": "check-dependency-size"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "Label",
-                                    "zOrder": "0",
-                                    "measuredW": "375",
-                                    "measuredH": "28",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "size": "20",
-                                        "text": "Keep an eye on the size of dependencies"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15209",
-                    "typeID": "__group__",
-                    "zOrder": "73",
-                    "measuredW": "502",
-                    "measuredH": "28",
-                    "w": "502",
-                    "h": "28",
-                    "x": "907",
-                    "y": "835",
-                    "properties": {
-                        "controlName": "analyze-js-for-perf-issues"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "Label",
-                                    "zOrder": "0",
-                                    "measuredW": "502",
-                                    "measuredH": "28",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "size": "20",
-                                        "text": "Check for performance problems in your JavaScript files"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15211",
-                    "typeID": "__group__",
-                    "zOrder": "75",
-                    "measuredW": "481",
-                    "measuredH": "28",
-                    "w": "481",
-                    "h": "28",
-                    "x": "908",
-                    "y": "874",
-                    "properties": {
-                        "controlName": "use-service-workers-for-caching"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "Label",
-                                    "zOrder": "0",
-                                    "measuredW": "481",
-                                    "measuredH": "28",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "size": "20",
-                                        "text": "Service Workers for caching / performing heavy tasks"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15213",
-                    "typeID": "__group__",
-                    "zOrder": "77",
-                    "measuredW": "249",
-                    "measuredH": "28",
-                    "w": "249",
-                    "h": "28",
-                    "x": "301",
-                    "y": "871",
-                    "properties": {
-                        "controlName": "use-https-on-your-website"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "Label",
-                                    "zOrder": "0",
-                                    "measuredW": "249",
-                                    "measuredH": "28",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "size": "20",
-                                        "text": "Use HTTPs on your website"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15215",
-                    "typeID": "__group__",
-                    "zOrder": "79",
-                    "measuredW": "469",
-                    "measuredH": "28",
-                    "w": "469",
-                    "h": "28",
-                    "x": "302",
-                    "y": "912",
-                    "properties": {
-                        "controlName": "page-weight-below-1500"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "Label",
-                                    "zOrder": "0",
-                                    "measuredW": "469",
-                                    "measuredH": "28",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "size": "20",
-                                        "text": "Keep your page weight < 1500 KB (ideally < 500 kb)"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15217",
-                    "typeID": "__group__",
-                    "zOrder": "81",
-                    "measuredW": "350",
-                    "measuredH": "28",
-                    "w": "350",
-                    "h": "28",
-                    "x": "302",
-                    "y": "952",
-                    "properties": {
-                        "controlName": "page-load-time-below-3s"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "Label",
-                                    "zOrder": "0",
-                                    "measuredW": "350",
-                                    "measuredH": "28",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "size": "20",
-                                        "text": "Keep your page load time < 3 seconds"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15219",
-                    "typeID": "__group__",
-                    "zOrder": "83",
-                    "measuredW": "380",
-                    "measuredH": "28",
-                    "w": "380",
-                    "h": "28",
-                    "x": "302",
-                    "y": "993",
-                    "properties": {
-                        "controlName": "keep-ttfb-less-1-3s"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "Label",
-                                    "zOrder": "0",
-                                    "measuredW": "380",
-                                    "measuredH": "28",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "size": "20",
-                                        "text": "Keep the Time To First Byte < 1.3 seconds"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15221",
-                    "typeID": "__group__",
-                    "zOrder": "85",
-                    "measuredW": "391",
-                    "measuredH": "28",
-                    "w": "391",
-                    "h": "28",
-                    "x": "907",
-                    "y": "917",
-                    "properties": {
-                        "controlName": "cookie-size-less-4096-bytes"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "Label",
-                                    "zOrder": "0",
-                                    "measuredW": "391",
-                                    "measuredH": "28",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "size": "20",
-                                        "text": "Cookie size should be less than 4096 bytes"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15223",
-                    "typeID": "__group__",
-                    "zOrder": "87",
-                    "measuredW": "320",
-                    "measuredH": "28",
-                    "w": "320",
-                    "h": "28",
-                    "x": "908",
-                    "y": "960",
-                    "properties": {
-                        "controlName": "keep-cookie-count-below-20"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "Label",
-                                    "zOrder": "0",
-                                    "measuredW": "320",
-                                    "measuredH": "28",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "size": "20",
-                                        "text": "Keep the cookie count less than 20"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15225",
-                    "typeID": "__group__",
-                    "zOrder": "89",
-                    "measuredW": "229",
-                    "measuredH": "28",
-                    "w": "229",
-                    "h": "28",
-                    "x": "303",
-                    "y": "1036",
-                    "properties": {
-                        "controlName": "minimize-http-requests"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "Label",
-                                    "zOrder": "0",
-                                    "measuredW": "229",
-                                    "measuredH": "28",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "size": "20",
-                                        "text": "Minimize HTTP Requests"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15227",
-                    "typeID": "__group__",
-                    "zOrder": "91",
-                    "measuredW": "309",
-                    "measuredH": "28",
-                    "w": "309",
-                    "h": "28",
-                    "x": "303",
-                    "y": "1076",
-                    "properties": {
-                        "controlName": "use-same-protocol"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "Label",
-                                    "zOrder": "0",
-                                    "measuredW": "309",
-                                    "measuredH": "28",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "size": "20",
-                                        "text": "Serve files from the same protocol"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15229",
-                    "typeID": "__group__",
-                    "zOrder": "93",
-                    "measuredW": "367",
-                    "measuredH": "28",
-                    "w": "367",
-                    "h": "28",
-                    "x": "303",
-                    "y": "1116",
-                    "properties": {
-                        "controlName": "avoid-404-files"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "Label",
-                                    "zOrder": "0",
-                                    "measuredW": "367",
-                                    "measuredH": "28",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "size": "20",
-                                        "text": "Avoid requesting unreachable files (404)"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15231",
-                    "typeID": "__group__",
-                    "zOrder": "95",
-                    "measuredW": "308",
-                    "measuredH": "28",
-                    "w": "308",
-                    "h": "28",
-                    "x": "303",
-                    "y": "1157",
-                    "properties": {
-                        "controlName": "use-http-cache-headers"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "Label",
-                                    "zOrder": "0",
-                                    "measuredW": "308",
-                                    "measuredH": "28",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "size": "20",
-                                        "text": "Set HTTP cache headers properly"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15233",
-                    "typeID": "__group__",
-                    "zOrder": "97",
-                    "measuredW": "333",
-                    "measuredH": "28",
-                    "w": "333",
-                    "h": "28",
-                    "x": "303",
-                    "y": "1197",
-                    "properties": {
-                        "controlName": "enable-compression"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "Label",
-                                    "zOrder": "0",
-                                    "measuredW": "333",
-                                    "measuredH": "28",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "size": "20",
-                                        "text": "GZIP / Brotli compression is enabled"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15234",
-                    "typeID": "Label",
-                    "zOrder": "98",
-                    "measuredW": "111",
-                    "measuredH": "28",
-                    "x": "414",
-                    "y": "400",
-                    "properties": {
-                        "text": "High Priority",
-                        "size": "20"
-                    }
-                },
-                {
-                    "ID": "15235",
-                    "typeID": "Arrow",
-                    "zOrder": "99",
-                    "w": "1",
-                    "h": "1583",
-                    "measuredW": "150",
-                    "measuredH": "100",
-                    "x": "814",
-                    "y": "287",
-                    "properties": {
-                        "curvature": "0",
-                        "leftArrow": "false",
-                        "rightArrow": "false",
-                        "p0": {
-                            "x": 0,
-                            "y": -0.48484848484849863
-                        },
-                        "p1": {
-                            "x": 0.49999999999999994,
-                            "y": 0
-                        },
-                        "p2": {
-                            "x": 0,
-                            "y": 1582.047272727273
-                        },
-                        "color": "4273622"
-                    }
-                },
-                {
-                    "ID": "15236",
-                    "typeID": "Arrow",
-                    "zOrder": "100",
-                    "w": "630",
-                    "h": "1",
-                    "measuredW": "150",
-                    "measuredH": "100",
-                    "x": "181",
-                    "y": "1296",
-                    "properties": {
-                        "curvature": "0",
-                        "leftArrow": "false",
-                        "rightArrow": "false",
-                        "color": "4273622",
-                        "p0": {
-                            "x": 0.48416950727948915,
-                            "y": 0
-                        },
-                        "p1": {
-                            "x": 0.4997238005050516,
-                            "y": 0.00038783741855417725
-                        },
-                        "p2": {
-                            "x": 630.4475453407811,
-                            "y": 0
-                        }
-                    }
-                },
-                {
-                    "ID": "15237",
-                    "typeID": "Canvas",
-                    "zOrder": "101",
-                    "w": "202",
-                    "h": "50",
-                    "measuredW": "100",
-                    "measuredH": "70",
-                    "x": "1007",
-                    "y": "387",
-                    "properties": {
-                        "color": "16776960"
-                    }
-                },
-                {
-                    "ID": "15238",
-                    "typeID": "Label",
-                    "zOrder": "102",
-                    "measuredW": "142",
-                    "measuredH": "28",
-                    "x": "1037",
-                    "y": "398",
-                    "properties": {
-                        "size": "20",
-                        "text": "Medium Priority"
-                    }
-                },
-                {
-                    "ID": "15239",
-                    "typeID": "Canvas",
-                    "zOrder": "103",
-                    "w": "202",
-                    "h": "50",
-                    "measuredW": "100",
-                    "measuredH": "70",
-                    "x": "1007",
-                    "y": "1027",
-                    "properties": {
-                        "color": "16776960"
-                    }
-                },
-                {
-                    "ID": "15240",
-                    "typeID": "Label",
-                    "zOrder": "104",
-                    "measuredW": "104",
-                    "measuredH": "28",
-                    "x": "1056",
-                    "y": "1038",
-                    "properties": {
-                        "size": "20",
-                        "text": "Low Priority"
-                    }
-                },
-                {
-                    "ID": "15241",
-                    "typeID": "Canvas",
-                    "zOrder": "105",
-                    "w": "242",
-                    "h": "50",
-                    "measuredW": "100",
-                    "measuredH": "70",
-                    "x": "349",
-                    "y": "1270",
-                    "properties": {
-                        "color": "4273622",
-                        "borderColor": "4273622"
-                    }
-                },
-                {
-                    "ID": "15242",
-                    "typeID": "Label",
-                    "zOrder": "106",
-                    "measuredW": "169",
-                    "measuredH": "28",
-                    "x": "385",
-                    "y": "1281",
-                    "properties": {
-                        "size": "20",
-                        "text": "Performance Tools",
-                        "color": "16777215"
-                    }
-                },
-                {
-                    "ID": "15243",
-                    "typeID": "__group__",
-                    "zOrder": "107",
-                    "measuredW": "242",
-                    "measuredH": "44",
-                    "w": "242",
-                    "h": "44",
-                    "x": "349",
-                    "y": "1365",
-                    "properties": {
-                        "controlName": "page-speed-insights"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "242",
-                                    "h": "44",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "color": "16770457"
-                                    }
-                                },
-                                {
-                                    "ID": "1",
-                                    "typeID": "Label",
-                                    "zOrder": "1",
-                                    "measuredW": "155",
-                                    "measuredH": "25",
-                                    "x": "43",
-                                    "y": "9",
-                                    "properties": {
-                                        "size": "17",
-                                        "text": "PageSpeed Insights"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15244",
-                    "typeID": "__group__",
-                    "zOrder": "108",
-                    "measuredW": "242",
-                    "measuredH": "44",
-                    "w": "242",
-                    "h": "44",
-                    "x": "349",
-                    "y": "1414",
-                    "properties": {
-                        "controlName": "lighthouse"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "242",
-                                    "h": "44",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "color": "16770457"
-                                    }
-                                },
-                                {
-                                    "ID": "1",
-                                    "typeID": "Label",
-                                    "zOrder": "1",
-                                    "measuredW": "86",
-                                    "measuredH": "25",
-                                    "x": "78",
-                                    "y": "9",
-                                    "properties": {
-                                        "size": "17",
-                                        "text": "Lighthouse"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15245",
-                    "typeID": "__group__",
-                    "zOrder": "109",
-                    "measuredW": "242",
-                    "measuredH": "44",
-                    "w": "242",
-                    "h": "44",
-                    "x": "349",
-                    "y": "1462",
-                    "properties": {
-                        "controlName": "web-page-test"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "242",
-                                    "h": "44",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "color": "16770457"
-                                    }
-                                },
-                                {
-                                    "ID": "1",
-                                    "typeID": "Label",
-                                    "zOrder": "1",
-                                    "measuredW": "106",
-                                    "measuredH": "25",
-                                    "x": "68",
-                                    "y": "9",
-                                    "properties": {
-                                        "size": "17",
-                                        "text": "WebPageTest"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15246",
-                    "typeID": "__group__",
-                    "zOrder": "110",
-                    "measuredW": "242",
-                    "measuredH": "44",
-                    "w": "242",
-                    "h": "44",
-                    "x": "349",
-                    "y": "1510",
-                    "properties": {
-                        "controlName": "chrome-dev-tools"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "242",
-                                    "h": "44",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "color": "16770457"
-                                    }
-                                },
-                                {
-                                    "ID": "1",
-                                    "typeID": "Label",
-                                    "zOrder": "1",
-                                    "measuredW": "136",
-                                    "measuredH": "25",
-                                    "x": "53",
-                                    "y": "9",
-                                    "properties": {
-                                        "size": "17",
-                                        "text": "Chrome DevTools"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15247",
-                    "typeID": "__group__",
-                    "zOrder": "111",
-                    "measuredW": "242",
-                    "measuredH": "44",
-                    "w": "242",
-                    "h": "44",
-                    "x": "349",
-                    "y": "1558",
-                    "properties": {
-                        "controlName": "bundlephobia"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "242",
-                                    "h": "44",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "color": "16770457"
-                                    }
-                                },
-                                {
-                                    "ID": "1",
-                                    "typeID": "Label",
-                                    "zOrder": "1",
-                                    "measuredW": "107",
-                                    "measuredH": "25",
-                                    "x": "67",
-                                    "y": "9",
-                                    "properties": {
-                                        "size": "17",
-                                        "text": "Bundlephobia"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15248",
-                    "typeID": "Canvas",
-                    "zOrder": "112",
-                    "w": "272",
-                    "h": "50",
-                    "measuredW": "100",
-                    "measuredH": "70",
-                    "x": "995",
-                    "y": "1485",
-                    "properties": {
-                        "color": "4273622",
-                        "borderColor": "4273622"
-                    }
-                },
-                {
-                    "ID": "15249",
-                    "typeID": "Label",
-                    "zOrder": "113",
-                    "measuredW": "151",
-                    "measuredH": "28",
-                    "x": "1055",
-                    "y": "1496",
-                    "properties": {
-                        "size": "20",
-                        "text": "More Resources",
-                        "color": "16777215"
-                    }
-                },
-                {
-                    "ID": "15250",
-                    "typeID": "__group__",
-                    "zOrder": "114",
-                    "measuredW": "272",
-                    "measuredH": "44",
-                    "w": "272",
-                    "h": "44",
-                    "x": "995",
-                    "y": "1580",
-                    "properties": {
-                        "controlName": "framework-guides"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "272",
-                                    "h": "44",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "color": "16770457"
-                                    }
-                                },
-                                {
-                                    "ID": "1",
-                                    "typeID": "Label",
-                                    "zOrder": "1",
-                                    "measuredW": "209",
-                                    "measuredH": "25",
-                                    "x": "31",
-                                    "y": "9",
-                                    "properties": {
-                                        "size": "17",
-                                        "text": "Framework Specific Guides"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15251",
-                    "typeID": "__group__",
-                    "zOrder": "115",
-                    "measuredW": "272",
-                    "measuredH": "44",
-                    "w": "272",
-                    "h": "44",
-                    "x": "995",
-                    "y": "1629",
-                    "properties": {
-                        "controlName": "recommended-guides"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "272",
-                                    "h": "44",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "color": "16770457"
-                                    }
-                                },
-                                {
-                                    "ID": "1",
-                                    "typeID": "Label",
-                                    "zOrder": "1",
-                                    "measuredW": "233",
-                                    "measuredH": "25",
-                                    "x": "19",
-                                    "y": "9",
-                                    "properties": {
-                                        "size": "17",
-                                        "text": "Recommended Talks / Guides"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15252",
-                    "typeID": "__group__",
-                    "zOrder": "116",
-                    "measuredW": "242",
-                    "measuredH": "44",
-                    "w": "242",
-                    "h": "44",
-                    "x": "349",
-                    "y": "1606",
-                    "properties": {
-                        "controlName": "squoosh-ap"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "242",
-                                    "h": "44",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "color": "16770457"
-                                    }
-                                },
-                                {
-                                    "ID": "1",
-                                    "typeID": "Label",
-                                    "zOrder": "1",
-                                    "measuredW": "100",
-                                    "measuredH": "25",
-                                    "x": "71",
-                                    "y": "9",
-                                    "properties": {
-                                        "size": "17",
-                                        "text": "Squoosh.app"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15253",
-                    "typeID": "TextArea",
-                    "zOrder": "117",
-                    "w": "438",
-                    "h": "118",
-                    "measuredW": "200",
-                    "measuredH": "140",
-                    "x": "595",
-                    "y": "1757"
-                },
-                {
-                    "ID": "15254",
-                    "typeID": "Label",
-                    "zOrder": "118",
-                    "measuredW": "366",
-                    "measuredH": "25",
-                    "x": "631",
-                    "y": "1776",
-                    "properties": {
-                        "size": "17",
-                        "text": "Continue Learning with following relevant tracks"
-                    }
-                },
-                {
-                    "ID": "15255",
-                    "typeID": "__group__",
-                    "zOrder": "119",
-                    "measuredW": "198",
-                    "measuredH": "44",
-                    "w": "198",
-                    "h": "44",
-                    "x": "818",
-                    "y": "1813",
-                    "properties": {
-                        "controlName": "ext_link:roadmap.sh/backend"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "198",
-                                    "h": "44",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "color": "16770457"
-                                    }
-                                },
-                                {
-                                    "ID": "1",
-                                    "typeID": "Label",
-                                    "zOrder": "1",
-                                    "measuredW": "147",
-                                    "measuredH": "25",
-                                    "x": "25",
-                                    "y": "9",
-                                    "properties": {
-                                        "size": "17",
-                                        "text": "Backend Roadmap"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15256",
-                    "typeID": "__group__",
-                    "zOrder": "120",
-                    "measuredW": "198",
-                    "measuredH": "44",
-                    "w": "198",
-                    "h": "44",
-                    "x": "610",
-                    "y": "1813",
-                    "properties": {
-                        "controlName": "ext_link:roadmap.sh/frontend"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "198",
-                                    "h": "44",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "color": "16770457"
-                                    }
-                                },
-                                {
-                                    "ID": "1",
-                                    "typeID": "Label",
-                                    "zOrder": "1",
-                                    "measuredW": "149",
-                                    "measuredH": "25",
-                                    "x": "24",
-                                    "y": "9",
-                                    "properties": {
-                                        "size": "17",
-                                        "text": "Frontend Roadmap"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15258",
-                    "typeID": "__group__",
-                    "zOrder": "8",
-                    "measuredW": "251",
-                    "measuredH": "28",
-                    "w": "251",
-                    "h": "28",
-                    "x": "301",
-                    "y": "472",
-                    "properties": {
-                        "controlName": "minimize-iframe-count"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "Label",
-                                    "zOrder": "0",
-                                    "measuredW": "251",
-                                    "measuredH": "28",
-                                    "x": "0",
-                                    "y": "0",
-                                    "properties": {
-                                        "size": "20",
-                                        "text": "Minimize number of iframes"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15261",
-                    "typeID": "__group__",
-                    "zOrder": "7",
-                    "measuredW": "30",
-                    "measuredH": "30",
-                    "w": "30",
-                    "h": "30",
-                    "x": "255",
-                    "y": "471",
-                    "properties": {
-                        "controlName": "check:minimize-iframe-count"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "30",
-                                    "h": "30",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0"
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15262",
-                    "typeID": "__group__",
-                    "zOrder": "26",
-                    "measuredW": "29",
-                    "measuredH": "30",
-                    "w": "29",
-                    "h": "30",
-                    "x": "255",
-                    "y": "511",
-                    "properties": {
-                        "controlName": "check:minify-css"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "29",
-                                    "h": "30",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0"
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15263",
-                    "typeID": "__group__",
-                    "zOrder": "30",
-                    "measuredW": "29",
-                    "measuredH": "30",
-                    "w": "29",
-                    "h": "30",
-                    "x": "255",
-                    "y": "550",
-                    "properties": {
-                        "controlName": "check:make-css-files-non-blocking"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "29",
-                                    "h": "30",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0"
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15264",
-                    "typeID": "__group__",
-                    "zOrder": "34",
-                    "measuredW": "29",
-                    "measuredH": "30",
-                    "w": "29",
-                    "h": "30",
-                    "x": "255",
-                    "y": "589",
-                    "properties": {
-                        "controlName": "check:inline-critical-css"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "29",
-                                    "h": "30",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0"
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15265",
-                    "typeID": "__group__",
-                    "zOrder": "36",
-                    "measuredW": "29",
-                    "measuredH": "30",
-                    "w": "29",
-                    "h": "30",
-                    "x": "255",
-                    "y": "629",
-                    "properties": {
-                        "controlName": "check:avoid-inline-css"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "29",
-                                    "h": "30",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0"
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15266",
-                    "typeID": "__group__",
-                    "zOrder": "38",
-                    "measuredW": "29",
-                    "measuredH": "30",
-                    "w": "29",
-                    "h": "30",
-                    "x": "255",
-                    "y": "668",
-                    "properties": {
-                        "controlName": "check:analyse-stylesheets-complexity"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "29",
-                                    "h": "30",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0"
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15267",
-                    "typeID": "__group__",
-                    "zOrder": "48",
-                    "measuredW": "29",
-                    "measuredH": "30",
-                    "w": "29",
-                    "h": "30",
-                    "x": "255",
-                    "y": "706",
-                    "properties": {
-                        "controlName": "check:compress-your-images"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "29",
-                                    "h": "30",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0"
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15268",
-                    "typeID": "__group__",
-                    "zOrder": "50",
-                    "measuredW": "29",
-                    "measuredH": "30",
-                    "w": "29",
-                    "h": "30",
-                    "x": "255",
-                    "y": "746",
-                    "properties": {
-                        "controlName": "check:choose-image-format-approprietly"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "29",
-                                    "h": "30",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0"
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15269",
-                    "typeID": "__group__",
-                    "zOrder": "62",
-                    "measuredW": "29",
-                    "measuredH": "30",
-                    "w": "29",
-                    "h": "30",
-                    "x": "255",
-                    "y": "787",
-                    "properties": {
-                        "controlName": "check:minify-your-javascript"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "29",
-                                    "h": "30",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0"
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15270",
-                    "typeID": "__group__",
-                    "zOrder": "66",
-                    "measuredW": "29",
-                    "measuredH": "30",
-                    "w": "29",
-                    "h": "30",
-                    "x": "255",
-                    "y": "826",
-                    "properties": {
-                        "controlName": "check:use-non-blocking-javascript"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "29",
-                                    "h": "30",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0"
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15271",
-                    "typeID": "__group__",
-                    "zOrder": "76",
-                    "measuredW": "29",
-                    "measuredH": "30",
-                    "w": "29",
-                    "h": "30",
-                    "x": "255",
-                    "y": "870",
-                    "properties": {
-                        "controlName": "check:use-https-on-your-website"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "29",
-                                    "h": "30",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0"
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15272",
-                    "typeID": "__group__",
-                    "zOrder": "78",
-                    "measuredW": "29",
-                    "measuredH": "30",
-                    "w": "29",
-                    "h": "30",
-                    "x": "255",
-                    "y": "911",
-                    "properties": {
-                        "controlName": "check:page-weight-below-1500"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "29",
-                                    "h": "30",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0"
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15273",
-                    "typeID": "__group__",
-                    "zOrder": "80",
-                    "measuredW": "29",
-                    "measuredH": "30",
-                    "w": "29",
-                    "h": "30",
-                    "x": "255",
-                    "y": "951",
-                    "properties": {
-                        "controlName": "check:page-load-time-below-3s"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "29",
-                                    "h": "30",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0"
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15274",
-                    "typeID": "__group__",
-                    "zOrder": "82",
-                    "measuredW": "29",
-                    "measuredH": "30",
-                    "w": "29",
-                    "h": "30",
-                    "x": "255",
-                    "y": "992",
-                    "properties": {
-                        "controlName": "check:keep-ttfb-less-1-3s"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "29",
-                                    "h": "30",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0"
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15275",
-                    "typeID": "__group__",
-                    "zOrder": "88",
-                    "measuredW": "29",
-                    "measuredH": "30",
-                    "w": "29",
-                    "h": "30",
-                    "x": "255",
-                    "y": "1035",
-                    "properties": {
-                        "controlName": "check:minimize-http-requests"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "29",
-                                    "h": "30",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0"
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15276",
-                    "typeID": "__group__",
-                    "zOrder": "90",
-                    "measuredW": "29",
-                    "measuredH": "30",
-                    "w": "29",
-                    "h": "30",
-                    "x": "255",
-                    "y": "1075",
-                    "properties": {
-                        "controlName": "check:use-same-protocol"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "29",
-                                    "h": "30",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0"
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15277",
-                    "typeID": "__group__",
-                    "zOrder": "92",
-                    "measuredW": "29",
-                    "measuredH": "30",
-                    "w": "29",
-                    "h": "30",
-                    "x": "255",
-                    "y": "1115",
-                    "properties": {
-                        "controlName": "check:avoid-404-files"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "29",
-                                    "h": "30",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0"
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15278",
-                    "typeID": "__group__",
-                    "zOrder": "94",
-                    "measuredW": "29",
-                    "measuredH": "30",
-                    "w": "29",
-                    "h": "30",
-                    "x": "255",
-                    "y": "1156",
-                    "properties": {
-                        "controlName": "check:use-http-cache-headers"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "29",
-                                    "h": "30",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0"
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15279",
-                    "typeID": "__group__",
-                    "zOrder": "96",
-                    "measuredW": "29",
-                    "measuredH": "30",
-                    "w": "29",
-                    "h": "30",
-                    "x": "255",
-                    "y": "1196",
-                    "properties": {
-                        "controlName": "check:enable-compression"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "29",
-                                    "h": "30",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0"
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15280",
-                    "typeID": "__group__",
-                    "zOrder": "20",
-                    "measuredW": "29",
-                    "measuredH": "30",
-                    "w": "29",
-                    "h": "30",
-                    "x": "859",
-                    "y": "471",
-                    "properties": {
-                        "controlName": "check:minify-html"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "29",
-                                    "h": "30",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0"
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15282",
-                    "typeID": "__group__",
-                    "zOrder": "22",
-                    "measuredW": "29",
-                    "measuredH": "30",
-                    "w": "29",
-                    "h": "30",
-                    "x": "859",
-                    "y": "510",
-                    "properties": {
-                        "controlName": "check:use-cdn"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "29",
-                                    "h": "30",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0"
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15283",
-                    "typeID": "__group__",
-                    "zOrder": "52",
-                    "measuredW": "29",
-                    "measuredH": "30",
-                    "w": "29",
-                    "h": "30",
-                    "x": "859",
-                    "y": "550",
-                    "properties": {
-                        "controlName": "check:prefer-vector-images"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "29",
-                                    "h": "30",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0"
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15284",
-                    "typeID": "__group__",
-                    "zOrder": "54",
-                    "measuredW": "29",
-                    "measuredH": "30",
-                    "w": "29",
-                    "h": "30",
-                    "x": "859",
-                    "y": "590",
-                    "properties": {
-                        "controlName": "check:set-width-height-images"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "29",
-                                    "h": "30",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0"
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15285",
-                    "typeID": "__group__",
-                    "zOrder": "56",
-                    "measuredW": "29",
-                    "measuredH": "30",
-                    "w": "29",
-                    "h": "30",
-                    "x": "859",
-                    "y": "630",
-                    "properties": {
-                        "controlName": "check:avoid-base64-images"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "29",
-                                    "h": "30",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0"
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15286",
-                    "typeID": "__group__",
-                    "zOrder": "58",
-                    "measuredW": "29",
-                    "measuredH": "30",
-                    "w": "29",
-                    "h": "30",
-                    "x": "859",
-                    "y": "670",
-                    "properties": {
-                        "controlName": "check:load-offscreen-images-lazily"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "29",
-                                    "h": "30",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0"
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15287",
-                    "typeID": "__group__",
-                    "zOrder": "60",
-                    "measuredW": "29",
-                    "measuredH": "30",
-                    "w": "29",
-                    "h": "30",
-                    "x": "859",
-                    "y": "710",
-                    "properties": {
-                        "controlName": "check:serve-exact-size-images"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "29",
-                                    "h": "30",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0"
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15288",
-                    "typeID": "__group__",
-                    "zOrder": "64",
-                    "measuredW": "29",
-                    "measuredH": "30",
-                    "w": "29",
-                    "h": "30",
-                    "x": "859",
-                    "y": "750",
-                    "properties": {
-                        "controlName": "check:avoid-multiple-inline-js-snippets"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "29",
-                                    "h": "30",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0"
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15289",
-                    "typeID": "__group__",
-                    "zOrder": "68",
-                    "measuredW": "29",
-                    "measuredH": "30",
-                    "w": "29",
-                    "h": "30",
-                    "x": "859",
-                    "y": "791",
-                    "properties": {
-                        "controlName": "check:keep-dependencies-up-to-date"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "29",
-                                    "h": "30",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0"
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15290",
-                    "typeID": "__group__",
-                    "zOrder": "72",
-                    "measuredW": "29",
-                    "measuredH": "30",
-                    "w": "29",
-                    "h": "30",
-                    "x": "859",
-                    "y": "834",
-                    "properties": {
-                        "controlName": "check:analyze-js-for-perf-issues"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "29",
-                                    "h": "30",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0"
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15291",
-                    "typeID": "__group__",
-                    "zOrder": "74",
-                    "measuredW": "29",
-                    "measuredH": "30",
-                    "w": "29",
-                    "h": "30",
-                    "x": "859",
-                    "y": "875",
-                    "properties": {
-                        "controlName": "check:use-service-workers-for-caching"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "29",
-                                    "h": "30",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0"
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15292",
-                    "typeID": "__group__",
-                    "zOrder": "84",
-                    "measuredW": "29",
-                    "measuredH": "30",
-                    "w": "29",
-                    "h": "30",
-                    "x": "859",
-                    "y": "916",
-                    "properties": {
-                        "controlName": "check:cookie-size-less-4096-bytes"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "29",
-                                    "h": "30",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0"
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15293",
-                    "typeID": "__group__",
-                    "zOrder": "86",
-                    "measuredW": "29",
-                    "measuredH": "30",
-                    "w": "29",
-                    "h": "30",
-                    "x": "860",
-                    "y": "959",
-                    "properties": {
-                        "controlName": "check:keep-cookie-count-below-20"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "29",
-                                    "h": "30",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0"
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15294",
-                    "typeID": "__group__",
-                    "zOrder": "24",
-                    "measuredW": "29",
-                    "measuredH": "30",
-                    "w": "29",
-                    "h": "30",
-                    "x": "860",
-                    "y": "1118",
-                    "properties": {
-                        "controlName": "check:pre-load-urls-where-possible"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "29",
-                                    "h": "30",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0"
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15295",
-                    "typeID": "__group__",
-                    "zOrder": "28",
-                    "measuredW": "29",
-                    "measuredH": "30",
-                    "w": "29",
-                    "h": "30",
-                    "x": "860",
-                    "y": "1157",
-                    "properties": {
-                        "controlName": "check:concatenate-css-single-file"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "29",
-                                    "h": "30",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0"
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15296",
-                    "typeID": "__group__",
-                    "zOrder": "32",
-                    "measuredW": "29",
-                    "measuredH": "30",
-                    "w": "29",
-                    "h": "30",
-                    "x": "860",
-                    "y": "1200",
-                    "properties": {
-                        "controlName": "check:remove-unused-css"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "29",
-                                    "h": "30",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0"
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15297",
-                    "typeID": "__group__",
-                    "zOrder": "40",
-                    "measuredW": "29",
-                    "measuredH": "30",
-                    "w": "29",
-                    "h": "30",
-                    "x": "860",
-                    "y": "1242",
-                    "properties": {
-                        "controlName": "check:use-woff2-font-format"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "29",
-                                    "h": "30",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0"
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15298",
-                    "typeID": "__group__",
-                    "zOrder": "42",
-                    "measuredW": "29",
-                    "measuredH": "30",
-                    "w": "29",
-                    "h": "30",
-                    "x": "860",
-                    "y": "1282",
-                    "properties": {
-                        "controlName": "check:use-preconnect-to-load-fonts"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "29",
-                                    "h": "30",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0"
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15299",
-                    "typeID": "__group__",
-                    "zOrder": "44",
-                    "measuredW": "29",
-                    "measuredH": "30",
-                    "w": "29",
-                    "h": "30",
-                    "x": "860",
-                    "y": "1321",
-                    "properties": {
-                        "controlName": "check:keep-web-font-under-300k"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "29",
-                                    "h": "30",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0"
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15300",
-                    "typeID": "__group__",
-                    "zOrder": "46",
-                    "measuredW": "29",
-                    "measuredH": "30",
-                    "w": "29",
-                    "h": "30",
-                    "x": "860",
-                    "y": "1361",
-                    "properties": {
-                        "controlName": "check:prevent-flash-text"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "29",
-                                    "h": "30",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0"
-                                }
-                            ]
-                        }
-                    }
-                },
-                {
-                    "ID": "15301",
-                    "typeID": "__group__",
-                    "zOrder": "70",
-                    "measuredW": "29",
-                    "measuredH": "30",
-                    "w": "29",
-                    "h": "30",
-                    "x": "860",
-                    "y": "1401",
-                    "properties": {
-                        "controlName": "check:check-dependency-size"
-                    },
-                    "children": {
-                        "controls": {
-                            "control": [
-                                {
-                                    "ID": "0",
-                                    "typeID": "TextArea",
-                                    "zOrder": "0",
-                                    "w": "29",
-                                    "h": "30",
-                                    "measuredW": "200",
-                                    "measuredH": "140",
-                                    "x": "0",
-                                    "y": "0"
-                                }
-                            ]
-                        }
-                    }
-                }
-            ]
-        },
-        "attributes": {
-            "name": "New Wireframe 1 copy 3",
-            "order": 1000016.2408968211,
-            "parentID": null,
-            "notes": ""
-        },
-        "branchID": "Master",
-        "resourceID": "13C27694-0370-442D-AECD-EFA2B687DD15",
-        "mockupH": "1790",
-        "mockupW": "1361",
-        "measuredW": "1542",
-        "measuredH": "1924",
-        "version": "1.0"
-    },
-    "groupOffset": {
-        "x": 0,
-        "y": 0
-    },
-    "dependencies": [],
-    "projectID": "file:///Users/kamranahmed/Desktop/devops%20roadmap%5C.bmpr"
-}
\ No newline at end of file
+{"mockup":{"controls":{"control":[{"ID":"15137","typeID":"Arrow","zOrder":"0","w":"1","h":"81","measuredW":"150","measuredH":"100","x":"814","y":"1843","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","stroke":"dotted","color":"10027263","p0":{"x":0,"y":0},"p1":{"x":0.49999999999999994,"y":0},"p2":{"x":0,"y":81.09090909090901}}},{"ID":"15138","typeID":"Arrow","zOrder":"1","w":"1","h":"90","measuredW":"150","measuredH":"100","x":"1118","y":"1511","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","color":"4273622","stroke":"dotted","p0":{"x":0,"y":-0.48484848484849863},"p1":{"x":0.5,"y":0},"p2":{"x":0,"y":89.20412121212144}}},{"ID":"15139","typeID":"Arrow","zOrder":"2","w":"606","h":"1","measuredW":"150","measuredH":"100","x":"816","y":"1510","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","p0":{"x":0.4393939393939945,"y":0},"p1":{"x":0.499957866859274,"y":0.000355669369753909},"p2":{"x":606.8787878787878,"y":0},"color":"4273622"}},{"ID":"15140","typeID":"Arrow","zOrder":"3","w":"1","h":"79","measuredW":"150","measuredH":"100","x":"469","y":"1309","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","color":"4273622","p0":{"x":0,"y":-0.48484848484849863},"p1":{"x":0.5,"y":0},"p2":{"x":0,"y":78.78896363636386},"stroke":"dotted"}},{"ID":"15141","typeID":"Arrow","zOrder":"4","w":"726","h":"1","measuredW":"150","measuredH":"100","x":"816","y":"1052","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","color":"4273622","p0":{"x":-0.2686368305519409,"y":0},"p1":{"x":0.5001077701859017,"y":0.0003391382343339101},"p2":{"x":725.5310311167375,"y":0}}},{"ID":"15142","typeID":"Arrow","zOrder":"5","w":"1252","h":"1","measuredW":"150","measuredH":"100","x":"225","y":"413","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","p0":{"x":0,"y":0},"p1":{"x":0.49994495226877456,"y":0.0003335799224988863},"p2":{"x":1252,"y":0},"color":"4273622"}},{"ID":"15143","typeID":"Canvas","zOrder":"6","w":"189","h":"50","measuredW":"100","measuredH":"70","x":"375","y":"389","properties":{"color":"16776960"}},{"ID":"15145","typeID":"Label","zOrder":"9","measuredW":"327","measuredH":"40","x":"686","y":"226","properties":{"text":"Frontend Performance","size":"32"}},{"ID":"15146","typeID":"Canvas","zOrder":"10","w":"361","h":"150","measuredW":"100","measuredH":"70","x":"1099","y":"158"},{"ID":"15147","typeID":"Label","zOrder":"11","measuredW":"332","measuredH":"26","x":"1115","y":"176","properties":{"text":"Find the detailed version of this checklist","size":"18"}},{"ID":"15148","typeID":"Label","zOrder":"12","measuredW":"318","measuredH":"26","x":"1115","y":"204","properties":{"size":"18","text":"With details on how to implement these"}},{"ID":"15149","typeID":"Canvas","zOrder":"13","w":"329","h":"51","measuredW":"100","measuredH":"70","x":"1115","y":"240","properties":{"color":"4273622","borderColor":"4273622"}},{"ID":"15150","typeID":"Label","zOrder":"14","measuredW":"172","measuredH":"28","x":"1194","y":"252","properties":{"color":"16777215","size":"20","text":"https://roadmap.sh"}},{"ID":"15151","typeID":"Canvas","zOrder":"15","w":"373","h":"169","measuredW":"100","measuredH":"70","x":"236","y":"148"},{"ID":"15152","typeID":"__group__","zOrder":"16","measuredW":"191","measuredH":"27","w":"191","h":"27","x":"266","y":"222","properties":{"controlName":"ext_link:roadmap.sh/frontend"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"158","measuredH":"26","x":"33","y":"0","properties":{"size":"18","text":"Frontend Roadmap"}},{"ID":"1","typeID":"__group__","zOrder":"1","measuredW":"24","measuredH":"24","w":"24","h":"24","x":"0","y":"3","children":{"controls":{"control":[{"ID":"0","typeID":"Icon","zOrder":"0","measuredW":"24","measuredH":"24","x":"0","y":"0","properties":{"color":"16777215","icon":{"ID":"circle","size":"small"}}},{"ID":"1","typeID":"Icon","zOrder":"1","measuredW":"24","measuredH":"24","x":"0","y":"0","properties":{"color":"10066329","icon":{"ID":"check-circle","size":"small"}}}]}}}]}}},{"ID":"15153","typeID":"__group__","zOrder":"17","measuredW":"202","measuredH":"27","w":"202","h":"27","x":"266","y":"258","properties":{"controlName":"ext_link:roadmap.sh/javascript"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"169","measuredH":"26","x":"33","y":"0","properties":{"size":"18","text":"JavaScript Roadmap"}},{"ID":"1","typeID":"__group__","zOrder":"1","measuredW":"24","measuredH":"24","w":"24","h":"24","x":"0","y":"3","children":{"controls":{"control":[{"ID":"0","typeID":"Icon","zOrder":"0","measuredW":"24","measuredH":"24","x":"0","y":"0","properties":{"color":"16777215","icon":{"ID":"circle","size":"small"}}},{"ID":"1","typeID":"Icon","zOrder":"1","measuredW":"24","measuredH":"24","x":"0","y":"0","properties":{"color":"10066329","icon":{"ID":"check-circle","size":"small"}}}]}}}]}}},{"ID":"15154","typeID":"Label","zOrder":"18","measuredW":"209","measuredH":"32","x":"266","y":"172","properties":{"size":"24","text":"Related Roadmaps"}},{"ID":"15155","typeID":"Arrow","zOrder":"19","w":"1","h":"76","measuredW":"150","measuredH":"100","x":"812","y":"134","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","p0":{"x":0,"y":0},"p1":{"x":0.49999999999999994,"y":0},"p2":{"x":0,"y":76.17275043077757},"stroke":"dotted","color":"10027263"}},{"ID":"15157","typeID":"__group__","zOrder":"21","measuredW":"481","measuredH":"28","w":"481","h":"28","x":"907","y":"472","properties":{"controlName":"minify-html"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"481","measuredH":"28","x":"0","y":"0","properties":{"size":"20","text":"Minified HTML - Remove comments and whitespaces"}}]}}},{"ID":"15159","typeID":"__group__","zOrder":"23","measuredW":"271","measuredH":"28","w":"271","h":"28","x":"907","y":"511","properties":{"controlName":"use-cdn"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"271","measuredH":"28","x":"0","y":"0","properties":{"text":"Use Content Delivery Network","size":"20"}}]}}},{"ID":"15161","typeID":"__group__","zOrder":"25","measuredW":"274","measuredH":"28","w":"274","h":"28","x":"903","y":"1121","properties":{"controlName":"pre-load-urls-where-possible"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"274","measuredH":"28","x":"0","y":"0","properties":{"size":"20","text":"Pre-load URLs where possible"}}]}}},{"ID":"15163","typeID":"__group__","zOrder":"27","measuredW":"461","measuredH":"28","w":"461","h":"28","x":"301","y":"514","properties":{"controlName":"minify-css"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"461","measuredH":"28","x":"0","y":"0","properties":{"size":"20","text":"Minified CSS - Remove comments, whitespaces etc"}}]}}},{"ID":"15165","typeID":"__group__","zOrder":"29","measuredW":"307","measuredH":"28","w":"307","h":"28","x":"903","y":"1158","properties":{"controlName":"concatenate-css-single-file"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"307","measuredH":"28","x":"0","y":"0","properties":{"size":"20","text":"Concatenate CSS into a single file"}}]}}},{"ID":"15167","typeID":"__group__","zOrder":"31","measuredW":"237","measuredH":"28","w":"237","h":"28","x":"301","y":"553","properties":{"controlName":"make-css-files-non-blocking"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"237","measuredH":"28","x":"0","y":"0","properties":{"size":"20","text":"CSS files are non-blocking"}}]}}},{"ID":"15169","typeID":"__group__","zOrder":"33","measuredW":"191","measuredH":"28","w":"191","h":"28","x":"904","y":"1201","properties":{"controlName":"remove-unused-css"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"191","measuredH":"28","x":"0","y":"0","properties":{"size":"20","text":"Remove unused CSS"}}]}}},{"ID":"15171","typeID":"__group__","zOrder":"35","measuredW":"389","measuredH":"28","w":"389","h":"28","x":"301","y":"592","properties":{"controlName":"inline-critical-css"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"389","measuredH":"28","x":"0","y":"0","properties":{"size":"20","text":"Inline the Critical CSS (above the fold CSS)"}}]}}},{"ID":"15173","typeID":"__group__","zOrder":"37","measuredW":"299","measuredH":"28","w":"299","h":"28","x":"301","y":"632","properties":{"controlName":"avoid-inline-css"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"299","measuredH":"28","x":"0","y":"0","properties":{"size":"20","text":"Avoid the embedded / inline CSS"}}]}}},{"ID":"15175","typeID":"__group__","zOrder":"39","measuredW":"279","measuredH":"28","w":"279","h":"28","x":"301","y":"671","properties":{"controlName":"analyse-stylesheets-complexity"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"279","measuredH":"28","x":"0","y":"0","properties":{"size":"20","text":"Analyse stylesheets complexity"}}]}}},{"ID":"15177","typeID":"__group__","zOrder":"41","measuredW":"213","measuredH":"28","w":"213","h":"28","x":"904","y":"1245","properties":{"controlName":"use-woff2-font-format"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"213","measuredH":"28","x":"0","y":"0","properties":{"size":"20","text":"Use WOFF2 font format"}}]}}},{"ID":"15179","typeID":"__group__","zOrder":"43","measuredW":"362","measuredH":"28","w":"362","h":"28","x":"905","y":"1285","properties":{"controlName":"use-preconnect-to-load-fonts"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"362","measuredH":"28","x":"0","y":"0","properties":{"size":"20","text":"Use preconnect to load your fonts faster"}}]}}},{"ID":"15181","typeID":"__group__","zOrder":"45","measuredW":"326","measuredH":"28","w":"326","h":"28","x":"905","y":"1324","properties":{"controlName":"keep-web-font-under-300k"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"326","measuredH":"28","x":"0","y":"0","properties":{"size":"20","text":"Keep the web font size under 300kb"}}]}}},{"ID":"15183","typeID":"__group__","zOrder":"47","measuredW":"269","measuredH":"28","w":"269","h":"28","x":"905","y":"1364","properties":{"controlName":"prevent-flash-text"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"269","measuredH":"28","x":"0","y":"0","properties":{"size":"20","text":"Prevent Flash or Invisible Text"}}]}}},{"ID":"15185","typeID":"__group__","zOrder":"49","measuredW":"458","measuredH":"28","w":"458","h":"28","x":"301","y":"707","properties":{"controlName":"compress-your-images"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"458","measuredH":"28","x":"0","y":"0","properties":{"size":"20","text":"Compress your images / keep the image count low"}}]}}},{"ID":"15187","typeID":"__group__","zOrder":"51","measuredW":"362","measuredH":"28","w":"362","h":"28","x":"301","y":"747","properties":{"controlName":"choose-image-format-approprietly"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"362","measuredH":"28","x":"0","y":"0","properties":{"size":"20","text":"Choose your image format appropriately"}}]}}},{"ID":"15189","typeID":"__group__","zOrder":"53","measuredW":"477","measuredH":"28","w":"477","h":"28","x":"907","y":"551","properties":{"controlName":"prefer-vector-images"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"477","measuredH":"28","x":"0","y":"0","properties":{"size":"20","text":"Prefer using vector image rather than bitmap images"}}]}}},{"ID":"15191","typeID":"__group__","zOrder":"55","measuredW":"501","measuredH":"28","w":"501","h":"28","x":"907","y":"591","properties":{"controlName":"set-width-height-images"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"501","measuredH":"28","x":"0","y":"0","properties":{"size":"20","text":"Set width and height attributes on images (aspect ratio)"}}]}}},{"ID":"15193","typeID":"__group__","zOrder":"57","measuredW":"251","measuredH":"28","w":"251","h":"28","x":"907","y":"631","properties":{"controlName":"avoid-base64-images"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"251","measuredH":"28","x":"0","y":"0","properties":{"size":"20","text":"Avoid using Base64 images"}}]}}},{"ID":"15195","typeID":"__group__","zOrder":"59","measuredW":"311","measuredH":"28","w":"311","h":"28","x":"907","y":"671","properties":{"controlName":"load-offscreen-images-lazily"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"311","measuredH":"28","x":"0","y":"0","properties":{"size":"20","text":"Offscreen images are loaded lazily"}}]}}},{"ID":"15197","typeID":"__group__","zOrder":"61","measuredW":"516","measuredH":"28","w":"516","h":"28","x":"907","y":"711","properties":{"controlName":"serve-exact-size-images"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"516","measuredH":"28","x":"0","y":"0","properties":{"size":"20","text":"Ensure to serve images that are close to your display size"}}]}}},{"ID":"15201","typeID":"__group__","zOrder":"65","measuredW":"450","measuredH":"28","w":"450","h":"28","x":"907","y":"751","properties":{"controlName":"avoid-multiple-inline-js-snippets"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"450","measuredH":"28","x":"0","y":"0","properties":{"size":"20","text":"Avoid multiple inline JavaScript snippets <script> "}}]}}},{"ID":"15203","typeID":"__group__","zOrder":"67","measuredW":"391","measuredH":"28","w":"391","h":"28","x":"301","y":"827","properties":{"controlName":"use-non-blocking-javascript"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"391","measuredH":"28","x":"0","y":"0","properties":{"size":"20","text":"Non Blocking JavaScript: Use async / defer"}}]}}},{"ID":"15205","typeID":"__group__","zOrder":"69","measuredW":"323","measuredH":"28","w":"323","h":"28","x":"907","y":"792","properties":{"controlName":"keep-dependencies-up-to-date"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"323","measuredH":"28","x":"0","y":"0","properties":{"size":"20","text":"Keep your dependencies up to date"}}]}}},{"ID":"15207","typeID":"__group__","zOrder":"71","measuredW":"375","measuredH":"28","w":"375","h":"28","x":"905","y":"1404","properties":{"controlName":"check-dependency-size"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"375","measuredH":"28","x":"0","y":"0","properties":{"size":"20","text":"Keep an eye on the size of dependencies"}}]}}},{"ID":"15209","typeID":"__group__","zOrder":"73","measuredW":"502","measuredH":"28","w":"502","h":"28","x":"907","y":"835","properties":{"controlName":"analyze-js-for-perf-issues"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"502","measuredH":"28","x":"0","y":"0","properties":{"size":"20","text":"Check for performance problems in your JavaScript files"}}]}}},{"ID":"15211","typeID":"__group__","zOrder":"75","measuredW":"481","measuredH":"28","w":"481","h":"28","x":"908","y":"874","properties":{"controlName":"use-service-workers-for-caching"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"481","measuredH":"28","x":"0","y":"0","properties":{"size":"20","text":"Service Workers for caching / performing heavy tasks"}}]}}},{"ID":"15213","typeID":"__group__","zOrder":"77","measuredW":"249","measuredH":"28","w":"249","h":"28","x":"301","y":"871","properties":{"controlName":"use-https-on-your-website"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"249","measuredH":"28","x":"0","y":"0","properties":{"size":"20","text":"Use HTTPs on your website"}}]}}},{"ID":"15215","typeID":"__group__","zOrder":"79","measuredW":"469","measuredH":"28","w":"469","h":"28","x":"302","y":"912","properties":{"controlName":"page-weight-below-1500"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"469","measuredH":"28","x":"0","y":"0","properties":{"size":"20","text":"Keep your page weight < 1500 KB (ideally < 500 kb)"}}]}}},{"ID":"15217","typeID":"__group__","zOrder":"81","measuredW":"350","measuredH":"28","w":"350","h":"28","x":"302","y":"952","properties":{"controlName":"page-load-time-below-3s"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"350","measuredH":"28","x":"0","y":"0","properties":{"size":"20","text":"Keep your page load time < 3 seconds"}}]}}},{"ID":"15219","typeID":"__group__","zOrder":"83","measuredW":"380","measuredH":"28","w":"380","h":"28","x":"302","y":"993","properties":{"controlName":"keep-ttfb-less-1-3s"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"380","measuredH":"28","x":"0","y":"0","properties":{"size":"20","text":"Keep the Time To First Byte < 1.3 seconds"}}]}}},{"ID":"15221","typeID":"__group__","zOrder":"85","measuredW":"391","measuredH":"28","w":"391","h":"28","x":"907","y":"917","properties":{"controlName":"cookie-size-less-4096-bytes"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"391","measuredH":"28","x":"0","y":"0","properties":{"size":"20","text":"Cookie size should be less than 4096 bytes"}}]}}},{"ID":"15223","typeID":"__group__","zOrder":"87","measuredW":"320","measuredH":"28","w":"320","h":"28","x":"908","y":"960","properties":{"controlName":"keep-cookie-count-below-20"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"320","measuredH":"28","x":"0","y":"0","properties":{"size":"20","text":"Keep the cookie count less than 20"}}]}}},{"ID":"15225","typeID":"__group__","zOrder":"89","measuredW":"229","measuredH":"28","w":"229","h":"28","x":"303","y":"1036","properties":{"controlName":"minimize-http-requests"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"229","measuredH":"28","x":"0","y":"0","properties":{"size":"20","text":"Minimize HTTP Requests"}}]}}},{"ID":"15227","typeID":"__group__","zOrder":"91","measuredW":"309","measuredH":"28","w":"309","h":"28","x":"303","y":"1076","properties":{"controlName":"use-same-protocol"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"309","measuredH":"28","x":"0","y":"0","properties":{"size":"20","text":"Serve files from the same protocol"}}]}}},{"ID":"15229","typeID":"__group__","zOrder":"93","measuredW":"367","measuredH":"28","w":"367","h":"28","x":"303","y":"1116","properties":{"controlName":"avoid-404-files"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"367","measuredH":"28","x":"0","y":"0","properties":{"size":"20","text":"Avoid requesting unreachable files (404)"}}]}}},{"ID":"15231","typeID":"__group__","zOrder":"95","measuredW":"308","measuredH":"28","w":"308","h":"28","x":"303","y":"1157","properties":{"controlName":"use-http-cache-headers"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"308","measuredH":"28","x":"0","y":"0","properties":{"size":"20","text":"Set HTTP cache headers properly"}}]}}},{"ID":"15233","typeID":"__group__","zOrder":"97","measuredW":"333","measuredH":"28","w":"333","h":"28","x":"303","y":"1197","properties":{"controlName":"enable-compression"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"333","measuredH":"28","x":"0","y":"0","properties":{"size":"20","text":"GZIP / Brotli compression is enabled"}}]}}},{"ID":"15234","typeID":"Label","zOrder":"98","measuredW":"111","measuredH":"28","x":"414","y":"400","properties":{"text":"High Priority","size":"20"}},{"ID":"15235","typeID":"Arrow","zOrder":"99","w":"1","h":"1583","measuredW":"150","measuredH":"100","x":"814","y":"287","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","p0":{"x":0,"y":-0.48484848484849863},"p1":{"x":0.49999999999999994,"y":0},"p2":{"x":0,"y":1582.047272727273},"color":"4273622"}},{"ID":"15236","typeID":"Arrow","zOrder":"100","w":"630","h":"1","measuredW":"150","measuredH":"100","x":"181","y":"1296","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","color":"4273622","p0":{"x":0.48416950727948915,"y":0},"p1":{"x":0.4997238005050516,"y":0.00038783741855417725},"p2":{"x":630.4475453407811,"y":0}}},{"ID":"15237","typeID":"Canvas","zOrder":"101","w":"202","h":"50","measuredW":"100","measuredH":"70","x":"1007","y":"387","properties":{"color":"16776960"}},{"ID":"15238","typeID":"Label","zOrder":"102","measuredW":"142","measuredH":"28","x":"1037","y":"398","properties":{"size":"20","text":"Medium Priority"}},{"ID":"15239","typeID":"Canvas","zOrder":"103","w":"202","h":"50","measuredW":"100","measuredH":"70","x":"1007","y":"1027","properties":{"color":"16776960"}},{"ID":"15240","typeID":"Label","zOrder":"104","measuredW":"104","measuredH":"28","x":"1056","y":"1038","properties":{"size":"20","text":"Low Priority"}},{"ID":"15241","typeID":"Canvas","zOrder":"105","w":"242","h":"50","measuredW":"100","measuredH":"70","x":"349","y":"1270","properties":{"color":"4273622","borderColor":"4273622"}},{"ID":"15242","typeID":"Label","zOrder":"106","measuredW":"169","measuredH":"28","x":"385","y":"1281","properties":{"size":"20","text":"Performance Tools","color":"16777215"}},{"ID":"15243","typeID":"__group__","zOrder":"107","measuredW":"242","measuredH":"44","w":"242","h":"44","x":"349","y":"1365","properties":{"controlName":"page-speed-insights"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"242","h":"44","measuredW":"200","measuredH":"140","x":"0","y":"0","properties":{"color":"16770457"}},{"ID":"1","typeID":"Label","zOrder":"1","measuredW":"155","measuredH":"25","x":"43","y":"9","properties":{"size":"17","text":"PageSpeed Insights"}}]}}},{"ID":"15244","typeID":"__group__","zOrder":"108","measuredW":"242","measuredH":"44","w":"242","h":"44","x":"349","y":"1414","properties":{"controlName":"lighthouse"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"242","h":"44","measuredW":"200","measuredH":"140","x":"0","y":"0","properties":{"color":"16770457"}},{"ID":"1","typeID":"Label","zOrder":"1","measuredW":"86","measuredH":"25","x":"78","y":"9","properties":{"size":"17","text":"Lighthouse"}}]}}},{"ID":"15245","typeID":"__group__","zOrder":"109","measuredW":"242","measuredH":"44","w":"242","h":"44","x":"349","y":"1462","properties":{"controlName":"web-page-test"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"242","h":"44","measuredW":"200","measuredH":"140","x":"0","y":"0","properties":{"color":"16770457"}},{"ID":"1","typeID":"Label","zOrder":"1","measuredW":"106","measuredH":"25","x":"68","y":"9","properties":{"size":"17","text":"WebPageTest"}}]}}},{"ID":"15246","typeID":"__group__","zOrder":"110","measuredW":"242","measuredH":"44","w":"242","h":"44","x":"349","y":"1510","properties":{"controlName":"chrome-dev-tools"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"242","h":"44","measuredW":"200","measuredH":"140","x":"0","y":"0","properties":{"color":"16770457"}},{"ID":"1","typeID":"Label","zOrder":"1","measuredW":"136","measuredH":"25","x":"53","y":"9","properties":{"size":"17","text":"Chrome DevTools"}}]}}},{"ID":"15247","typeID":"__group__","zOrder":"111","measuredW":"242","measuredH":"44","w":"242","h":"44","x":"349","y":"1558","properties":{"controlName":"bundlephobia"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"242","h":"44","measuredW":"200","measuredH":"140","x":"0","y":"0","properties":{"color":"16770457"}},{"ID":"1","typeID":"Label","zOrder":"1","measuredW":"107","measuredH":"25","x":"67","y":"9","properties":{"size":"17","text":"Bundlephobia"}}]}}},{"ID":"15248","typeID":"Canvas","zOrder":"112","w":"272","h":"50","measuredW":"100","measuredH":"70","x":"995","y":"1485","properties":{"color":"4273622","borderColor":"4273622"}},{"ID":"15249","typeID":"Label","zOrder":"113","measuredW":"151","measuredH":"28","x":"1055","y":"1496","properties":{"size":"20","text":"More Resources","color":"16777215"}},{"ID":"15250","typeID":"__group__","zOrder":"114","measuredW":"272","measuredH":"44","w":"272","h":"44","x":"995","y":"1580","properties":{"controlName":"framework-guides"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"272","h":"44","measuredW":"200","measuredH":"140","x":"0","y":"0","properties":{"color":"16770457"}},{"ID":"1","typeID":"Label","zOrder":"1","measuredW":"209","measuredH":"25","x":"31","y":"9","properties":{"size":"17","text":"Framework Specific Guides"}}]}}},{"ID":"15251","typeID":"__group__","zOrder":"115","measuredW":"272","measuredH":"44","w":"272","h":"44","x":"995","y":"1629","properties":{"controlName":"recommended-guides"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"272","h":"44","measuredW":"200","measuredH":"140","x":"0","y":"0","properties":{"color":"16770457"}},{"ID":"1","typeID":"Label","zOrder":"1","measuredW":"233","measuredH":"25","x":"19","y":"9","properties":{"size":"17","text":"Recommended Talks / Guides"}}]}}},{"ID":"15252","typeID":"__group__","zOrder":"116","measuredW":"242","measuredH":"44","w":"242","h":"44","x":"349","y":"1606","properties":{"controlName":"squoosh-ap"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"242","h":"44","measuredW":"200","measuredH":"140","x":"0","y":"0","properties":{"color":"16770457"}},{"ID":"1","typeID":"Label","zOrder":"1","measuredW":"100","measuredH":"25","x":"71","y":"9","properties":{"size":"17","text":"Squoosh.app"}}]}}},{"ID":"15253","typeID":"TextArea","zOrder":"117","w":"438","h":"118","measuredW":"200","measuredH":"140","x":"595","y":"1757"},{"ID":"15254","typeID":"Label","zOrder":"118","measuredW":"366","measuredH":"25","x":"631","y":"1776","properties":{"size":"17","text":"Continue Learning with following relevant tracks"}},{"ID":"15255","typeID":"__group__","zOrder":"119","measuredW":"198","measuredH":"44","w":"198","h":"44","x":"818","y":"1813","properties":{"controlName":"ext_link:roadmap.sh/backend"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"198","h":"44","measuredW":"200","measuredH":"140","x":"0","y":"0","properties":{"color":"16770457"}},{"ID":"1","typeID":"Label","zOrder":"1","measuredW":"147","measuredH":"25","x":"25","y":"9","properties":{"size":"17","text":"Backend Roadmap"}}]}}},{"ID":"15256","typeID":"__group__","zOrder":"120","measuredW":"198","measuredH":"44","w":"198","h":"44","x":"610","y":"1813","properties":{"controlName":"ext_link:roadmap.sh/frontend"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"198","h":"44","measuredW":"200","measuredH":"140","x":"0","y":"0","properties":{"color":"16770457"}},{"ID":"1","typeID":"Label","zOrder":"1","measuredW":"149","measuredH":"25","x":"24","y":"9","properties":{"size":"17","text":"Frontend Roadmap"}}]}}},{"ID":"15258","typeID":"__group__","zOrder":"8","measuredW":"251","measuredH":"28","w":"251","h":"28","x":"301","y":"472","properties":{"controlName":"minimize-iframe-count"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"251","measuredH":"28","x":"0","y":"0","properties":{"size":"20","text":"Minimize number of iframes"}}]}}},{"ID":"15261","typeID":"__group__","zOrder":"7","measuredW":"30","measuredH":"30","w":"30","h":"30","x":"255","y":"471","properties":{"controlName":"check:minimize-iframe-count"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"30","h":"30","measuredW":"200","measuredH":"140","x":"0","y":"0"}]}}},{"ID":"15262","typeID":"__group__","zOrder":"26","measuredW":"29","measuredH":"30","w":"29","h":"30","x":"255","y":"511","properties":{"controlName":"check:minify-css"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"0","y":"0"}]}}},{"ID":"15263","typeID":"__group__","zOrder":"30","measuredW":"29","measuredH":"30","w":"29","h":"30","x":"255","y":"550","properties":{"controlName":"check:make-css-files-non-blocking"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"0","y":"0"}]}}},{"ID":"15264","typeID":"__group__","zOrder":"34","measuredW":"29","measuredH":"30","w":"29","h":"30","x":"255","y":"589","properties":{"controlName":"check:inline-critical-css"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"0","y":"0"}]}}},{"ID":"15265","typeID":"__group__","zOrder":"36","measuredW":"29","measuredH":"30","w":"29","h":"30","x":"255","y":"629","properties":{"controlName":"check:avoid-inline-css"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"0","y":"0"}]}}},{"ID":"15266","typeID":"__group__","zOrder":"38","measuredW":"29","measuredH":"30","w":"29","h":"30","x":"255","y":"668","properties":{"controlName":"check:analyse-stylesheets-complexity"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"0","y":"0"}]}}},{"ID":"15267","typeID":"__group__","zOrder":"48","measuredW":"29","measuredH":"30","w":"29","h":"30","x":"255","y":"706","properties":{"controlName":"check:compress-your-images"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"0","y":"0"}]}}},{"ID":"15268","typeID":"__group__","zOrder":"50","measuredW":"29","measuredH":"30","w":"29","h":"30","x":"255","y":"746","properties":{"controlName":"check:choose-image-format-approprietly"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"0","y":"0"}]}}},{"ID":"15269","typeID":"__group__","zOrder":"62","measuredW":"29","measuredH":"30","w":"29","h":"30","x":"255","y":"787","properties":{"controlName":"check:minify-your-javascript"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"0","y":"0"}]}}},{"ID":"15270","typeID":"__group__","zOrder":"66","measuredW":"29","measuredH":"30","w":"29","h":"30","x":"255","y":"826","properties":{"controlName":"check:use-non-blocking-javascript"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"0","y":"0"}]}}},{"ID":"15271","typeID":"__group__","zOrder":"76","measuredW":"29","measuredH":"30","w":"29","h":"30","x":"255","y":"870","properties":{"controlName":"check:use-https-on-your-website"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"0","y":"0"}]}}},{"ID":"15272","typeID":"__group__","zOrder":"78","measuredW":"29","measuredH":"30","w":"29","h":"30","x":"255","y":"911","properties":{"controlName":"check:page-weight-below-1500"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"0","y":"0"}]}}},{"ID":"15273","typeID":"__group__","zOrder":"80","measuredW":"29","measuredH":"30","w":"29","h":"30","x":"255","y":"951","properties":{"controlName":"check:page-load-time-below-3s"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"0","y":"0"}]}}},{"ID":"15274","typeID":"__group__","zOrder":"82","measuredW":"29","measuredH":"30","w":"29","h":"30","x":"255","y":"992","properties":{"controlName":"check:keep-ttfb-less-1-3s"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"0","y":"0"}]}}},{"ID":"15275","typeID":"__group__","zOrder":"88","measuredW":"29","measuredH":"30","w":"29","h":"30","x":"255","y":"1035","properties":{"controlName":"check:minimize-http-requests"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"0","y":"0"}]}}},{"ID":"15276","typeID":"__group__","zOrder":"90","measuredW":"29","measuredH":"30","w":"29","h":"30","x":"255","y":"1075","properties":{"controlName":"check:use-same-protocol"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"0","y":"0"}]}}},{"ID":"15277","typeID":"__group__","zOrder":"92","measuredW":"29","measuredH":"30","w":"29","h":"30","x":"255","y":"1115","properties":{"controlName":"check:avoid-404-files"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"0","y":"0"}]}}},{"ID":"15278","typeID":"__group__","zOrder":"94","measuredW":"29","measuredH":"30","w":"29","h":"30","x":"255","y":"1156","properties":{"controlName":"check:use-http-cache-headers"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"0","y":"0"}]}}},{"ID":"15279","typeID":"__group__","zOrder":"96","measuredW":"29","measuredH":"30","w":"29","h":"30","x":"255","y":"1196","properties":{"controlName":"check:enable-compression"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"0","y":"0"}]}}},{"ID":"15280","typeID":"__group__","zOrder":"20","measuredW":"29","measuredH":"30","w":"29","h":"30","x":"859","y":"471","properties":{"controlName":"check:minify-html"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"0","y":"0"}]}}},{"ID":"15282","typeID":"__group__","zOrder":"22","measuredW":"29","measuredH":"30","w":"29","h":"30","x":"859","y":"510","properties":{"controlName":"check:use-cdn"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"0","y":"0"}]}}},{"ID":"15283","typeID":"__group__","zOrder":"52","measuredW":"29","measuredH":"30","w":"29","h":"30","x":"859","y":"550","properties":{"controlName":"check:prefer-vector-images"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"0","y":"0"}]}}},{"ID":"15284","typeID":"__group__","zOrder":"54","measuredW":"29","measuredH":"30","w":"29","h":"30","x":"859","y":"590","properties":{"controlName":"check:set-width-height-images"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"0","y":"0"}]}}},{"ID":"15285","typeID":"__group__","zOrder":"56","measuredW":"29","measuredH":"30","w":"29","h":"30","x":"859","y":"630","properties":{"controlName":"check:avoid-base64-images"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"0","y":"0"}]}}},{"ID":"15286","typeID":"__group__","zOrder":"58","measuredW":"29","measuredH":"30","w":"29","h":"30","x":"859","y":"670","properties":{"controlName":"check:load-offscreen-images-lazily"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"0","y":"0"}]}}},{"ID":"15287","typeID":"__group__","zOrder":"60","measuredW":"29","measuredH":"30","w":"29","h":"30","x":"859","y":"710","properties":{"controlName":"check:serve-exact-size-images"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"0","y":"0"}]}}},{"ID":"15288","typeID":"__group__","zOrder":"64","measuredW":"29","measuredH":"30","w":"29","h":"30","x":"859","y":"750","properties":{"controlName":"check:avoid-multiple-inline-js-snippets"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"0","y":"0"}]}}},{"ID":"15289","typeID":"__group__","zOrder":"68","measuredW":"29","measuredH":"30","w":"29","h":"30","x":"859","y":"791","properties":{"controlName":"check:keep-dependencies-up-to-date"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"0","y":"0"}]}}},{"ID":"15290","typeID":"__group__","zOrder":"72","measuredW":"29","measuredH":"30","w":"29","h":"30","x":"859","y":"834","properties":{"controlName":"check:analyze-js-for-perf-issues"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"0","y":"0"}]}}},{"ID":"15291","typeID":"__group__","zOrder":"74","measuredW":"29","measuredH":"30","w":"29","h":"30","x":"859","y":"875","properties":{"controlName":"check:use-service-workers-for-caching"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"0","y":"0"}]}}},{"ID":"15292","typeID":"__group__","zOrder":"84","measuredW":"29","measuredH":"30","w":"29","h":"30","x":"859","y":"916","properties":{"controlName":"check:cookie-size-less-4096-bytes"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"0","y":"0"}]}}},{"ID":"15293","typeID":"__group__","zOrder":"86","measuredW":"29","measuredH":"30","w":"29","h":"30","x":"860","y":"959","properties":{"controlName":"check:keep-cookie-count-below-20"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"0","y":"0"}]}}},{"ID":"15294","typeID":"__group__","zOrder":"24","measuredW":"29","measuredH":"30","w":"29","h":"30","x":"860","y":"1118","properties":{"controlName":"check:pre-load-urls-where-possible"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"0","y":"0"}]}}},{"ID":"15295","typeID":"__group__","zOrder":"28","measuredW":"29","measuredH":"30","w":"29","h":"30","x":"860","y":"1157","properties":{"controlName":"check:concatenate-css-single-file"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"0","y":"0"}]}}},{"ID":"15296","typeID":"__group__","zOrder":"32","measuredW":"29","measuredH":"30","w":"29","h":"30","x":"860","y":"1200","properties":{"controlName":"check:remove-unused-css"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"0","y":"0"}]}}},{"ID":"15297","typeID":"__group__","zOrder":"40","measuredW":"29","measuredH":"30","w":"29","h":"30","x":"860","y":"1242","properties":{"controlName":"check:use-woff2-font-format"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"0","y":"0"}]}}},{"ID":"15298","typeID":"__group__","zOrder":"42","measuredW":"29","measuredH":"30","w":"29","h":"30","x":"860","y":"1282","properties":{"controlName":"check:use-preconnect-to-load-fonts"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"0","y":"0"}]}}},{"ID":"15299","typeID":"__group__","zOrder":"44","measuredW":"29","measuredH":"30","w":"29","h":"30","x":"860","y":"1321","properties":{"controlName":"check:keep-web-font-under-300k"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"0","y":"0"}]}}},{"ID":"15300","typeID":"__group__","zOrder":"46","measuredW":"29","measuredH":"30","w":"29","h":"30","x":"860","y":"1361","properties":{"controlName":"check:prevent-flash-text"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"0","y":"0"}]}}},{"ID":"15301","typeID":"__group__","zOrder":"70","measuredW":"29","measuredH":"30","w":"29","h":"30","x":"860","y":"1401","properties":{"controlName":"check:check-dependency-size"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"0","y":"0"}]}}},{"ID":"15302","typeID":"__group__","zOrder":"63","measuredW":"194","measuredH":"28","w":"194","h":"28","x":"301","y":"788","properties":{"controlName":"minify-your-javascript"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"194","measuredH":"28","x":"0","y":"0","properties":{"size":"20","text":"Minify your JavaScript"}}]}}}]},"attributes":{"name":"New Wireframe 1 copy 3","order":1000016.2408968211,"parentID":null,"notes":""},"branchID":"Master","resourceID":"13C27694-0370-442D-AECD-EFA2B687DD15","mockupH":"1790","mockupW":"1361","measuredW":"1542","measuredH":"1924","version":"1.0"},"groupOffset":{"x":0,"y":0},"dependencies":[],"projectID":"file:///Users/kamranahmed/Desktop/devops%20roadmap%5C.bmpr"}
\ No newline at end of file
diff --git a/src/components/FrameRenderer/FrameRenderer.css b/src/components/FrameRenderer/FrameRenderer.css
index 419486adc..e9777bef2 100644
--- a/src/components/FrameRenderer/FrameRenderer.css
+++ b/src/components/FrameRenderer/FrameRenderer.css
@@ -1,86 +1,90 @@
 svg text tspan {
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-rendering: optimizeSpeed;
-  }
-  
-  code {
-    background: #1e1e3f;
-    color: #9efeff;
-    padding: 3px 5px;
-    font-size: 14px;
-    border-radius: 3px;
-  }
-  
-  svg .clickable-group {
-    cursor: pointer;
-  }
-  
-  svg .clickable-group:hover > [fill='rgb(65,53,214)'] {
-    fill: #232381;
-    stroke: #232381;
-  }
-  
-  svg .clickable-group:hover > [fill='rgb(255,255,0)'] {
-    fill: #d6d700;
-  }
-  
-  svg .clickable-group:hover > [fill='rgb(255,229,153)'] {
-    fill: #f3c950;
-  }
-  
-  svg .clickable-group:hover > [fill='rgb(153,153,153)'] {
-    fill: #646464;
-  }
-  
-  svg .clickable-group:hover > [fill='rgb(255,255,255)'] {
-    fill: #d7d7d7;
-  }
-  
-  svg .clickable-group:hover > [fill='rgb(255,255,221)'] {
-    fill: #e5e5be;
-  }
-  
-  svg .clickable-group:hover > [fill='rgb(255,217,102)'] {
-    fill: #d9b443;
-  }
-  
-  svg .done rect {
-    fill: #cbcbcb !important;
-  }
-  
-  svg .done text {
-    text-decoration: line-through;
-  }
-  
-  /************************************
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeSpeed;
+}
+
+code {
+  background: #1e1e3f;
+  color: #9efeff;
+  padding: 3px 5px;
+  font-size: 14px;
+  border-radius: 3px;
+}
+
+svg .clickable-group {
+  cursor: pointer;
+}
+
+svg .clickable-group:hover > [fill='rgb(65,53,214)'] {
+  fill: #232381;
+  stroke: #232381;
+}
+
+svg .clickable-group:hover > [fill='rgb(255,255,0)'] {
+  fill: #d6d700;
+}
+
+svg .clickable-group:hover > [fill='rgb(255,229,153)'] {
+  fill: #f3c950;
+}
+
+svg .clickable-group:hover > [fill='rgb(153,153,153)'] {
+  fill: #646464;
+}
+
+svg .clickable-group:hover > [fill='rgb(255,255,255)'] {
+  fill: #d7d7d7;
+}
+
+svg .clickable-group:hover > [fill='rgb(255,255,221)'] {
+  fill: #e5e5be;
+}
+
+svg .clickable-group:hover > [fill='rgb(255,217,102)'] {
+  fill: #d9b443;
+}
+
+svg .done rect {
+  fill: #cbcbcb !important;
+}
+
+svg .done text {
+  text-decoration: line-through;
+}
+
+svg .clickable-group.done[data-group-id^='check:'] rect {
+  fill: gray !important;
+  stroke: gray;
+}
+
+/************************************
     Aspect ratio implementation
   *************************************/
-  [style*="--aspect-ratio"] > :first-child {
-    width: 100%;
+[style*='--aspect-ratio'] > :first-child {
+  width: 100%;
+}
+
+[style*='--aspect-ratio'] > img {
+  height: auto;
+}
+
+@supports (--custom: property) {
+  [style*='--aspect-ratio'] {
+    position: relative;
   }
-  
-  [style*="--aspect-ratio"] > img {
-    height: auto;
+
+  [style*='--aspect-ratio']::before {
+    content: '';
+    display: block;
+    /*noinspection CssUnresolvedCustomProperty*/
+    padding-bottom: calc(100% / (var(--aspect-ratio)));
   }
-  
-  @supports (--custom:property) {
-    [style*="--aspect-ratio"] {
-      position: relative;
-    }
-  
-    [style*="--aspect-ratio"]::before {
-      content: "";
-      display: block;
-      /*noinspection CssUnresolvedCustomProperty*/
-      padding-bottom: calc(100% / (var(--aspect-ratio)));
-    }
-  
-    [style*="--aspect-ratio"] > :first-child {
-      position: absolute;
-      top: 0;
-      left: 0;
-      height: 100%;
-    }
+
+  [style*='--aspect-ratio'] > :first-child {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
   }
-  
\ No newline at end of file
+}
diff --git a/src/components/FrameRenderer/renderer.js b/src/components/FrameRenderer/renderer.js
index ddb25f551..ce6f0adbf 100644
--- a/src/components/FrameRenderer/renderer.js
+++ b/src/components/FrameRenderer/renderer.js
@@ -80,6 +80,19 @@ export class Renderer {
       return;
     }
 
+    if (/^check:/.test(groupId)) {
+      window.dispatchEvent(
+        new CustomEvent(`${this.resourceType}.topic.toggle`, {
+          detail: {
+            topicId: groupId.replace('check:', ''),
+            resourceType: this.resourceType,
+            resourceId: this.resourceId,
+          },
+        })
+      );
+      return;
+    }
+
     // Remove sorting prefix from groupId
     const normalizedGroupId = groupId.replace(/^\d+-/, '');
 
diff --git a/src/components/TopicOverlay/topic.js b/src/components/TopicOverlay/topic.js
index 114868986..1ebd0c59e 100644
--- a/src/components/TopicOverlay/topic.js
+++ b/src/components/TopicOverlay/topic.js
@@ -16,6 +16,8 @@ export class Topic {
 
     this.handleRoadmapTopicClick = this.handleRoadmapTopicClick.bind(this);
     this.handleBestPracticeTopicClick = this.handleBestPracticeTopicClick.bind(this);
+    this.handleBestPracticeTopicToggle = this.handleBestPracticeTopicToggle.bind(this);
+    this.handleBestPracticeTopicPending = this.handleBestPracticeTopicPending.bind(this);
 
     this.close = this.close.bind(this);
     this.resetDOM = this.resetDOM.bind(this);
@@ -138,6 +140,31 @@ export class Topic {
       });
   }
 
+  handleBestPracticeTopicToggle(e) {
+    const { resourceId: bestPracticeId, topicId } = e.detail;
+    if (!topicId || !bestPracticeId) {
+      console.log('Missing topic or bestPracticeId: ', e.detail);
+      return;
+    }
+
+    const isDone = localStorage.getItem(topicId) === 'done';
+    if (isDone) {
+      this.markAsPending(topicId);
+    } else {
+      this.markAsDone(topicId);
+    }
+  }
+
+  handleBestPracticeTopicPending(e) {
+    const { resourceId: bestPracticeId, topicId } = e.detail;
+    if (!topicId || !bestPracticeId) {
+      console.log('Missing topic or bestPracticeId: ', e.detail);
+      return;
+    }
+
+    this.markAsPending(topicId);
+  }
+
   handleBestPracticeTopicClick(e) {
     const { resourceId: bestPracticeId, topicId } = e.detail;
     if (!topicId || !bestPracticeId) {
@@ -169,10 +196,10 @@ export class Topic {
   }
 
   querySvgElementsByTopicId(topicId) {
-    const elements = document.querySelectorAll(`[data-group-id$="-${topicId}"]`);
     const matchingElements = [];
 
-    elements.forEach((element) => {
+    // Elements having sort order in the beginning of the group id
+    document.querySelectorAll(`[data-group-id$="-${topicId}"]`).forEach((element) => {
       const foundGroupId = element?.dataset?.groupId || '';
       const validGroupRegex = new RegExp(`^\\d+-${topicId}$`);
 
@@ -181,6 +208,16 @@ export class Topic {
       }
     });
 
+    // Elements with exact match of the topic id
+    document.querySelectorAll(`[data-group-id="${topicId}"]`).forEach((element) => {
+      matchingElements.push(element);
+    });
+
+    // Matching "check:XXXX" box of the topic
+    document.querySelectorAll(`[data-group-id="check:${topicId}"]`).forEach((element) => {
+      matchingElements.push(element);
+    });
+
     return matchingElements;
   }
 
@@ -229,8 +266,10 @@ export class Topic {
   }
 
   init() {
-    window.addEventListener('roadmap.topic.click', this.handleRoadmapTopicClick);
     window.addEventListener('best-practice.topic.click', this.handleBestPracticeTopicClick);
+    window.addEventListener('best-practice.topic.toggle', this.handleBestPracticeTopicToggle);
+
+    window.addEventListener('roadmap.topic.click', this.handleRoadmapTopicClick);
     window.addEventListener('click', this.handleOverlayClick);
     window.addEventListener('contextmenu', this.rightClickListener);