From f4e505113c1c028004de513d530978cc488faac3 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Mon, 23 Jan 2023 19:04:03 +0400
Subject: [PATCH] Add rendering for best practices lists

---
 .../frontend-performance.json                 |  2 +-
 .../frontend-performance.md                   |  2 +-
 src/components/BestPracticeHeader.astro       | 87 +++++++++++++++++++
 src/components/BestPracticeHint.astro         | 20 +++++
 src/components/DownloadPopup.astro            |  2 +-
 src/components/RoadmapHeader.astro            |  4 +-
 ...ResourcesAlert.astro => RoadmapHint.astro} |  0
 .../best-practices/[bestPracticeId].astro     |  6 +-
 src/pages/best-practices/index.astro          |  3 +-
 9 files changed, 116 insertions(+), 10 deletions(-)
 rename public/jsons/{checklists => best-practices}/frontend-performance.json (51%)
 create mode 100644 src/components/BestPracticeHeader.astro
 create mode 100644 src/components/BestPracticeHint.astro
 rename src/components/{ResourcesAlert.astro => RoadmapHint.astro} (100%)

diff --git a/public/jsons/checklists/frontend-performance.json b/public/jsons/best-practices/frontend-performance.json
similarity index 51%
rename from public/jsons/checklists/frontend-performance.json
rename to public/jsons/best-practices/frontend-performance.json
index ad57b9d69..fce289593 100644
--- a/public/jsons/checklists/frontend-performance.json
+++ b/public/jsons/best-practices/frontend-performance.json
@@ -1 +1 @@
-{"mockup":{"controls":{"control":[{"ID":"14805","typeID":"TextArea","zOrder":"7","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"461"},{"ID":"14806","typeID":"Label","zOrder":"8","measuredW":"251","measuredH":"28","x":"291","y":"464","properties":{"size":"20","text":"Minimize number of iframes"}},{"ID":"14813","typeID":"Label","zOrder":"9","measuredW":"327","measuredH":"40","x":"676","y":"216","properties":{"text":"Frontend Performance","size":"32"}},{"ID":"14848","typeID":"Canvas","zOrder":"10","w":"361","h":"150","measuredW":"100","measuredH":"70","x":"1089","y":"148"},{"ID":"14849","typeID":"Label","zOrder":"11","measuredW":"332","measuredH":"26","x":"1105","y":"166","properties":{"text":"Find the detailed version of this checklist","size":"18"}},{"ID":"14850","typeID":"Label","zOrder":"12","measuredW":"318","measuredH":"26","x":"1105","y":"194","properties":{"size":"18","text":"With details on how to implement these"}},{"ID":"14853","typeID":"Canvas","zOrder":"15","w":"373","h":"169","measuredW":"100","measuredH":"70","x":"229","y":"135"},{"ID":"14854","typeID":"__group__","zOrder":"16","measuredW":"191","measuredH":"27","w":"191","h":"27","x":"259","y":"209","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":"14855","typeID":"__group__","zOrder":"17","measuredW":"202","measuredH":"27","w":"202","h":"27","x":"259","y":"245","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":"14856","typeID":"Label","zOrder":"18","measuredW":"209","measuredH":"32","x":"259","y":"159","properties":{"size":"24","text":"Related Roadmaps"}},{"ID":"14857","typeID":"Arrow","zOrder":"19","w":"1","h":"76","measuredW":"150","measuredH":"100","x":"802","y":"124","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":"14882","typeID":"TextArea","zOrder":"20","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"849","y":"461"},{"ID":"14883","typeID":"Label","zOrder":"21","measuredW":"481","measuredH":"28","x":"897","y":"462","properties":{"size":"20","text":"Minified HTML - Remove comments and whitespaces"}},{"ID":"14915","typeID":"TextArea","zOrder":"22","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"849","y":"500"},{"ID":"14916","typeID":"Label","zOrder":"23","measuredW":"271","measuredH":"28","x":"897","y":"501","properties":{"text":"Use Content Delivery Network","size":"20"}},{"ID":"14920","typeID":"TextArea","zOrder":"24","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"850","y":"1158"},{"ID":"14921","typeID":"Label","zOrder":"25","measuredW":"274","measuredH":"28","x":"893","y":"1161","properties":{"size":"20","text":"Pre-load URLs where possible"}},{"ID":"14922","typeID":"TextArea","zOrder":"26","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"501"},{"ID":"14923","typeID":"Label","zOrder":"27","measuredW":"461","measuredH":"28","x":"291","y":"504","properties":{"size":"20","text":"Minified CSS - Remove comments, whitespaces etc"}},{"ID":"14926","typeID":"TextArea","zOrder":"28","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"850","y":"1197"},{"ID":"14928","typeID":"Label","zOrder":"29","measuredW":"307","measuredH":"28","x":"893","y":"1198","properties":{"size":"20","text":"Concatenate CSS into a single file"}},{"ID":"14929","typeID":"TextArea","zOrder":"30","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"540"},{"ID":"14930","typeID":"Label","zOrder":"31","measuredW":"237","measuredH":"28","x":"291","y":"543","properties":{"size":"20","text":"CSS files are non-blocking"}},{"ID":"14931","typeID":"TextArea","zOrder":"32","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"850","y":"1240"},{"ID":"14932","typeID":"Label","zOrder":"33","measuredW":"191","measuredH":"28","x":"894","y":"1241","properties":{"size":"20","text":"Remove unused CSS"}},{"ID":"14933","typeID":"TextArea","zOrder":"34","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"579"},{"ID":"14934","typeID":"Label","zOrder":"35","measuredW":"389","measuredH":"28","x":"291","y":"582","properties":{"size":"20","text":"Inline the Critical CSS (above the fold CSS)"}},{"ID":"14935","typeID":"TextArea","zOrder":"36","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"619"},{"ID":"14936","typeID":"Label","zOrder":"37","measuredW":"299","measuredH":"28","x":"291","y":"622","properties":{"size":"20","text":"Avoid the embedded / inline CSS"}},{"ID":"14937","typeID":"TextArea","zOrder":"38","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"658"},{"ID":"14938","typeID":"Label","zOrder":"39","measuredW":"279","measuredH":"28","x":"291","y":"661","properties":{"size":"20","text":"Analyse stylesheets complexity"}},{"ID":"14939","typeID":"TextArea","zOrder":"40","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"850","y":"1282"},{"ID":"14940","typeID":"Label","zOrder":"41","measuredW":"213","measuredH":"28","x":"894","y":"1285","properties":{"size":"20","text":"Use WOFF2 font format"}},{"ID":"14941","typeID":"TextArea","zOrder":"42","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"850","y":"1322"},{"ID":"14942","typeID":"Label","zOrder":"43","measuredW":"362","measuredH":"28","x":"895","y":"1325","properties":{"size":"20","text":"Use preconnect to load your fonts faster"}},{"ID":"14943","typeID":"TextArea","zOrder":"44","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"850","y":"1361"},{"ID":"14944","typeID":"Label","zOrder":"45","measuredW":"326","measuredH":"28","x":"895","y":"1364","properties":{"size":"20","text":"Keep the web font size under 300kb"}},{"ID":"14945","typeID":"TextArea","zOrder":"46","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"850","y":"1401"},{"ID":"14946","typeID":"Label","zOrder":"47","measuredW":"269","measuredH":"28","x":"895","y":"1404","properties":{"size":"20","text":"Prevent Flash or Invisible Text"}},{"ID":"14947","typeID":"TextArea","zOrder":"48","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"696"},{"ID":"14948","typeID":"Label","zOrder":"49","measuredW":"458","measuredH":"28","x":"291","y":"697","properties":{"size":"20","text":"Compress your images / keep the image count low"}},{"ID":"14949","typeID":"TextArea","zOrder":"50","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"736"},{"ID":"14950","typeID":"Label","zOrder":"51","measuredW":"362","measuredH":"28","x":"291","y":"737","properties":{"size":"20","text":"Choose your image format appropriately"}},{"ID":"14951","typeID":"TextArea","zOrder":"52","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"849","y":"540"},{"ID":"14952","typeID":"Label","zOrder":"53","measuredW":"477","measuredH":"28","x":"897","y":"541","properties":{"size":"20","text":"Prefer using vector image rather than bitmap images"}},{"ID":"14953","typeID":"TextArea","zOrder":"54","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"849","y":"580"},{"ID":"14954","typeID":"Label","zOrder":"55","measuredW":"501","measuredH":"28","x":"897","y":"581","properties":{"size":"20","text":"Set width and height attributes on images (aspect ratio)"}},{"ID":"14955","typeID":"TextArea","zOrder":"56","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"849","y":"620"},{"ID":"14956","typeID":"Label","zOrder":"57","measuredW":"251","measuredH":"28","x":"897","y":"621","properties":{"size":"20","text":"Avoid using Base64 images"}},{"ID":"14957","typeID":"TextArea","zOrder":"58","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"849","y":"660"},{"ID":"14958","typeID":"Label","zOrder":"59","measuredW":"311","measuredH":"28","x":"897","y":"661","properties":{"size":"20","text":"Offscreen images are loaded lazily"}},{"ID":"14959","typeID":"TextArea","zOrder":"60","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"849","y":"700"},{"ID":"14960","typeID":"Label","zOrder":"61","measuredW":"516","measuredH":"28","x":"897","y":"701","properties":{"size":"20","text":"Ensure to serve images that are close to your display size"}},{"ID":"14961","typeID":"TextArea","zOrder":"62","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"777"},{"ID":"14962","typeID":"Label","zOrder":"63","measuredW":"194","measuredH":"28","x":"291","y":"778","properties":{"size":"20","text":"Minify your JavaScript"}},{"ID":"14964","typeID":"TextArea","zOrder":"64","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"849","y":"740"},{"ID":"14965","typeID":"Label","zOrder":"65","measuredW":"450","measuredH":"28","x":"897","y":"741","properties":{"size":"20","text":"Avoid multiple inline JavaScript snippets <script> "}},{"ID":"14966","typeID":"TextArea","zOrder":"66","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"816"},{"ID":"14967","typeID":"Label","zOrder":"67","measuredW":"391","measuredH":"28","x":"291","y":"817","properties":{"size":"20","text":"Non Blocking JavaScript: Use async / defer"}},{"ID":"14968","typeID":"TextArea","zOrder":"68","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"849","y":"781"},{"ID":"14969","typeID":"Label","zOrder":"69","measuredW":"323","measuredH":"28","x":"897","y":"782","properties":{"size":"20","text":"Keep your dependencies up to date"}},{"ID":"14970","typeID":"TextArea","zOrder":"70","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"850","y":"1441"},{"ID":"14971","typeID":"Label","zOrder":"71","measuredW":"375","measuredH":"28","x":"895","y":"1444","properties":{"size":"20","text":"Keep an eye on the size of dependencies"}},{"ID":"14972","typeID":"TextArea","zOrder":"72","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"849","y":"824"},{"ID":"14973","typeID":"Label","zOrder":"73","measuredW":"502","measuredH":"28","x":"897","y":"825","properties":{"size":"20","text":"Check for performance problems in your JavaScript files"}},{"ID":"14974","typeID":"TextArea","zOrder":"74","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"849","y":"865"},{"ID":"14975","typeID":"Label","zOrder":"75","measuredW":"481","measuredH":"28","x":"906","y":"864","properties":{"size":"20","text":"Service Workers for caching / performing heavy tasks"}},{"ID":"14976","typeID":"TextArea","zOrder":"76","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"860"},{"ID":"14977","typeID":"Label","zOrder":"77","measuredW":"249","measuredH":"28","x":"291","y":"861","properties":{"size":"20","text":"Use HTTPs on your website"}},{"ID":"14978","typeID":"TextArea","zOrder":"78","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"901"},{"ID":"14979","typeID":"Label","zOrder":"79","measuredW":"469","measuredH":"28","x":"292","y":"902","properties":{"size":"20","text":"Keep your page weight < 1500 KB (ideally < 500 kb)"}},{"ID":"14980","typeID":"TextArea","zOrder":"80","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"941"},{"ID":"14981","typeID":"Label","zOrder":"81","measuredW":"350","measuredH":"28","x":"292","y":"942","properties":{"size":"20","text":"Keep your page load time < 3 seconds"}},{"ID":"14982","typeID":"TextArea","zOrder":"82","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"982"},{"ID":"14983","typeID":"Label","zOrder":"83","measuredW":"380","measuredH":"28","x":"292","y":"983","properties":{"size":"20","text":"Keep the Time To First Byte < 1.3 seconds"}},{"ID":"14984","typeID":"TextArea","zOrder":"84","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"849","y":"906"},{"ID":"14985","typeID":"Label","zOrder":"85","measuredW":"391","measuredH":"28","x":"897","y":"907","properties":{"size":"20","text":"Cookie size should be less than 4096 bytes"}},{"ID":"14986","typeID":"TextArea","zOrder":"86","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"850","y":"949"},{"ID":"14987","typeID":"Label","zOrder":"87","measuredW":"320","measuredH":"28","x":"898","y":"950","properties":{"size":"20","text":"Keep the cookie count less than 20"}},{"ID":"14988","typeID":"TextArea","zOrder":"88","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"1025"},{"ID":"14989","typeID":"Label","zOrder":"89","measuredW":"229","measuredH":"28","x":"293","y":"1026","properties":{"size":"20","text":"Minimize HTTP Requests"}},{"ID":"14990","typeID":"TextArea","zOrder":"90","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"850","y":"990"},{"ID":"14991","typeID":"Label","zOrder":"91","measuredW":"299","measuredH":"28","x":"898","y":"991","properties":{"size":"20","text":"Use a CDN to deliver your assets"}},{"ID":"14992","typeID":"TextArea","zOrder":"92","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"1065"},{"ID":"14993","typeID":"Label","zOrder":"93","measuredW":"309","measuredH":"28","x":"293","y":"1066","properties":{"size":"20","text":"Serve files from the same protocol"}},{"ID":"14994","typeID":"TextArea","zOrder":"94","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"1105"},{"ID":"14995","typeID":"Label","zOrder":"95","measuredW":"367","measuredH":"28","x":"293","y":"1106","properties":{"size":"20","text":"Avoid requesting unreachable files (404)"}},{"ID":"14996","typeID":"TextArea","zOrder":"96","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"1146"},{"ID":"14997","typeID":"Label","zOrder":"97","measuredW":"308","measuredH":"28","x":"293","y":"1147","properties":{"size":"20","text":"Set HTTP cache headers properly"}},{"ID":"14998","typeID":"TextArea","zOrder":"98","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"1186"},{"ID":"14999","typeID":"Label","zOrder":"99","measuredW":"333","measuredH":"28","x":"293","y":"1187","properties":{"size":"20","text":"GZIP / Brotli compression is enabled"}},{"ID":"15024","typeID":"Label","zOrder":"100","measuredW":"111","measuredH":"28","x":"404","y":"390","properties":{"text":"High Priority","size":"20"}},{"ID":"15028","typeID":"Arrow","zOrder":"101","w":"1","h":"1583","measuredW":"150","measuredH":"100","x":"804","y":"277","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":"15030","typeID":"Arrow","zOrder":"4","w":"606","h":"1","measuredW":"150","measuredH":"100","x":"806","y":"1092","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":"15031","typeID":"Arrow","zOrder":"102","w":"576","h":"1","measuredW":"150","measuredH":"100","x":"229","y":"1286","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","p0":{"x":-0.45454545454546746,"y":-0.4545454545454959},"p1":{"x":0.49999999999999967,"y":0},"p2":{"x":575.8181818181818,"y":-0.4545454545454959},"color":"4273622"}},{"ID":"15034","typeID":"Canvas","zOrder":"13","w":"329","h":"51","measuredW":"100","measuredH":"70","x":"1105","y":"230","properties":{"color":"4273622","borderColor":"4273622"}},{"ID":"15035","typeID":"Label","zOrder":"14","measuredW":"172","measuredH":"28","x":"1184","y":"242","properties":{"color":"16777215","size":"20","text":"https://roadmap.sh"}},{"ID":"15036","typeID":"Canvas","zOrder":"6","w":"189","h":"50","measuredW":"100","measuredH":"70","x":"365","y":"379","properties":{"color":"16776960"}},{"ID":"15037","typeID":"Arrow","zOrder":"5","w":"1174","h":"1","measuredW":"150","measuredH":"100","x":"235","y":"403","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","p0":{"x":-0.15151515151515582,"y":0},"p1":{"x":0.4999578668592742,"y":0.0003556693697539091},"p2":{"x":1174.090909090909,"y":0},"color":"4273622"}},{"ID":"15038","typeID":"Canvas","zOrder":"103","w":"202","h":"50","measuredW":"100","measuredH":"70","x":"997","y":"377","properties":{"color":"16776960"}},{"ID":"15039","typeID":"Label","zOrder":"104","measuredW":"142","measuredH":"28","x":"1027","y":"388","properties":{"size":"20","text":"Medium Priority"}},{"ID":"15040","typeID":"Canvas","zOrder":"105","w":"202","h":"50","measuredW":"100","measuredH":"70","x":"997","y":"1067","properties":{"color":"16776960"}},{"ID":"15041","typeID":"Label","zOrder":"106","measuredW":"104","measuredH":"28","x":"1046","y":"1078","properties":{"size":"20","text":"Low Priority"}},{"ID":"15044","typeID":"Canvas","zOrder":"107","w":"242","h":"50","measuredW":"100","measuredH":"70","x":"339","y":"1260","properties":{"color":"4273622","borderColor":"4273622"}},{"ID":"15045","typeID":"Label","zOrder":"108","measuredW":"169","measuredH":"28","x":"375","y":"1271","properties":{"size":"20","text":"Performance Tools","color":"16777215"}},{"ID":"15047","typeID":"TextArea","zOrder":"109","w":"242","h":"44","measuredW":"200","measuredH":"140","x":"339","y":"1355","properties":{"color":"16770457"}},{"ID":"15048","typeID":"Label","zOrder":"110","measuredW":"155","measuredH":"25","x":"382","y":"1364","properties":{"size":"17","text":"PageSpeed Insights"}},{"ID":"15049","typeID":"TextArea","zOrder":"111","w":"242","h":"44","measuredW":"200","measuredH":"140","x":"339","y":"1404","properties":{"color":"16770457"}},{"ID":"15050","typeID":"Label","zOrder":"112","measuredW":"86","measuredH":"25","x":"417","y":"1413","properties":{"size":"17","text":"Lighthouse"}},{"ID":"15051","typeID":"TextArea","zOrder":"113","w":"242","h":"44","measuredW":"200","measuredH":"140","x":"339","y":"1452","properties":{"color":"16770457"}},{"ID":"15052","typeID":"Label","zOrder":"114","measuredW":"106","measuredH":"25","x":"407","y":"1461","properties":{"size":"17","text":"WebPageTest"}},{"ID":"15053","typeID":"TextArea","zOrder":"115","w":"242","h":"44","measuredW":"200","measuredH":"140","x":"339","y":"1500","properties":{"color":"16770457"}},{"ID":"15054","typeID":"Label","zOrder":"116","measuredW":"136","measuredH":"25","x":"392","y":"1509","properties":{"size":"17","text":"Chrome DevTools"}},{"ID":"15055","typeID":"TextArea","zOrder":"117","w":"242","h":"44","measuredW":"200","measuredH":"140","x":"339","y":"1548","properties":{"color":"16770457"}},{"ID":"15056","typeID":"Label","zOrder":"118","measuredW":"107","measuredH":"25","x":"406","y":"1557","properties":{"size":"17","text":"Bundlephobia"}},{"ID":"15057","typeID":"Arrow","zOrder":"3","w":"1","h":"79","measuredW":"150","measuredH":"100","x":"459","y":"1299","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":"15058","typeID":"Canvas","zOrder":"119","w":"272","h":"50","measuredW":"100","measuredH":"70","x":"985","y":"1545","properties":{"color":"4273622","borderColor":"4273622"}},{"ID":"15059","typeID":"Label","zOrder":"120","measuredW":"151","measuredH":"28","x":"1045","y":"1556","properties":{"size":"20","text":"More Resources","color":"16777215"}},{"ID":"15060","typeID":"Arrow","zOrder":"2","w":"606","h":"1","measuredW":"150","measuredH":"100","x":"806","y":"1570","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":"15061","typeID":"TextArea","zOrder":"121","w":"272","h":"44","measuredW":"200","measuredH":"140","x":"985","y":"1640","properties":{"color":"16770457"}},{"ID":"15062","typeID":"Label","zOrder":"122","measuredW":"209","measuredH":"25","x":"1016","y":"1649","properties":{"size":"17","text":"Framework Specific Guides"}},{"ID":"15063","typeID":"TextArea","zOrder":"123","w":"272","h":"44","measuredW":"200","measuredH":"140","x":"985","y":"1689","properties":{"color":"16770457"}},{"ID":"15064","typeID":"Label","zOrder":"124","measuredW":"233","measuredH":"25","x":"1004","y":"1698","properties":{"size":"17","text":"Recommended Talks / Guides"}},{"ID":"15065","typeID":"Arrow","zOrder":"1","w":"1","h":"90","measuredW":"150","measuredH":"100","x":"1108","y":"1571","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":"15066","typeID":"TextArea","zOrder":"125","w":"242","h":"44","measuredW":"200","measuredH":"140","x":"339","y":"1596","properties":{"color":"16770457"}},{"ID":"15067","typeID":"Label","zOrder":"126","measuredW":"100","measuredH":"25","x":"410","y":"1605","properties":{"size":"17","text":"Squoosh.app"}},{"ID":"15076","typeID":"Arrow","zOrder":"0","w":"1","h":"81","measuredW":"150","measuredH":"100","x":"804","y":"1893","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":"15077","typeID":"TextArea","zOrder":"127","w":"438","h":"118","measuredW":"200","measuredH":"140","x":"585","y":"1807"},{"ID":"15078","typeID":"Label","zOrder":"128","measuredW":"366","measuredH":"25","x":"621","y":"1826","properties":{"size":"17","text":"Continue Learning with following relevant tracks"}},{"ID":"15079","typeID":"__group__","zOrder":"129","measuredW":"198","measuredH":"44","w":"198","h":"44","x":"808","y":"1863","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":"15080","typeID":"__group__","zOrder":"130","measuredW":"198","measuredH":"44","w":"198","h":"44","x":"600","y":"1863","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"}}]}}}]},"attributes":{"name":"New Wireframe 1 copy 3","order":1000016.2408968211,"parentID":null,"notes":""},"branchID":"Master","resourceID":"13C27694-0370-442D-AECD-EFA2B687DD15","mockupH":"1850","mockupW":"1221","measuredW":"1450","measuredH":"1974","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":"14805","typeID":"TextArea","zOrder":"7","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"461"},{"ID":"14806","typeID":"Label","zOrder":"8","measuredW":"251","measuredH":"28","x":"291","y":"464","properties":{"size":"20","text":"Minimize number of iframes"}},{"ID":"14813","typeID":"Label","zOrder":"9","measuredW":"327","measuredH":"40","x":"676","y":"216","properties":{"text":"Frontend Performance","size":"32"}},{"ID":"14848","typeID":"Canvas","zOrder":"10","w":"361","h":"150","measuredW":"100","measuredH":"70","x":"1089","y":"148"},{"ID":"14849","typeID":"Label","zOrder":"11","measuredW":"332","measuredH":"26","x":"1105","y":"166","properties":{"text":"Find the detailed version of this checklist","size":"18"}},{"ID":"14850","typeID":"Label","zOrder":"12","measuredW":"318","measuredH":"26","x":"1105","y":"194","properties":{"size":"18","text":"With details on how to implement these"}},{"ID":"14853","typeID":"Canvas","zOrder":"15","w":"373","h":"169","measuredW":"100","measuredH":"70","x":"226","y":"138"},{"ID":"14854","typeID":"__group__","zOrder":"16","measuredW":"191","measuredH":"27","w":"191","h":"27","x":"256","y":"212","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":"14855","typeID":"__group__","zOrder":"17","measuredW":"202","measuredH":"27","w":"202","h":"27","x":"256","y":"248","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":"14856","typeID":"Label","zOrder":"18","measuredW":"209","measuredH":"32","x":"256","y":"162","properties":{"size":"24","text":"Related Roadmaps"}},{"ID":"14857","typeID":"Arrow","zOrder":"19","w":"1","h":"76","measuredW":"150","measuredH":"100","x":"802","y":"124","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":"14882","typeID":"TextArea","zOrder":"20","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"849","y":"461"},{"ID":"14883","typeID":"Label","zOrder":"21","measuredW":"481","measuredH":"28","x":"897","y":"462","properties":{"size":"20","text":"Minified HTML - Remove comments and whitespaces"}},{"ID":"14915","typeID":"TextArea","zOrder":"22","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"849","y":"500"},{"ID":"14916","typeID":"Label","zOrder":"23","measuredW":"271","measuredH":"28","x":"897","y":"501","properties":{"text":"Use Content Delivery Network","size":"20"}},{"ID":"14920","typeID":"TextArea","zOrder":"24","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"850","y":"1108"},{"ID":"14921","typeID":"Label","zOrder":"25","measuredW":"274","measuredH":"28","x":"893","y":"1111","properties":{"size":"20","text":"Pre-load URLs where possible"}},{"ID":"14922","typeID":"TextArea","zOrder":"26","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"501"},{"ID":"14923","typeID":"Label","zOrder":"27","measuredW":"461","measuredH":"28","x":"291","y":"504","properties":{"size":"20","text":"Minified CSS - Remove comments, whitespaces etc"}},{"ID":"14926","typeID":"TextArea","zOrder":"28","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"850","y":"1147"},{"ID":"14928","typeID":"Label","zOrder":"29","measuredW":"307","measuredH":"28","x":"893","y":"1148","properties":{"size":"20","text":"Concatenate CSS into a single file"}},{"ID":"14929","typeID":"TextArea","zOrder":"30","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"540"},{"ID":"14930","typeID":"Label","zOrder":"31","measuredW":"237","measuredH":"28","x":"291","y":"543","properties":{"size":"20","text":"CSS files are non-blocking"}},{"ID":"14931","typeID":"TextArea","zOrder":"32","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"850","y":"1190"},{"ID":"14932","typeID":"Label","zOrder":"33","measuredW":"191","measuredH":"28","x":"894","y":"1191","properties":{"size":"20","text":"Remove unused CSS"}},{"ID":"14933","typeID":"TextArea","zOrder":"34","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"579"},{"ID":"14934","typeID":"Label","zOrder":"35","measuredW":"389","measuredH":"28","x":"291","y":"582","properties":{"size":"20","text":"Inline the Critical CSS (above the fold CSS)"}},{"ID":"14935","typeID":"TextArea","zOrder":"36","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"619"},{"ID":"14936","typeID":"Label","zOrder":"37","measuredW":"299","measuredH":"28","x":"291","y":"622","properties":{"size":"20","text":"Avoid the embedded / inline CSS"}},{"ID":"14937","typeID":"TextArea","zOrder":"38","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"658"},{"ID":"14938","typeID":"Label","zOrder":"39","measuredW":"279","measuredH":"28","x":"291","y":"661","properties":{"size":"20","text":"Analyse stylesheets complexity"}},{"ID":"14939","typeID":"TextArea","zOrder":"40","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"850","y":"1232"},{"ID":"14940","typeID":"Label","zOrder":"41","measuredW":"213","measuredH":"28","x":"894","y":"1235","properties":{"size":"20","text":"Use WOFF2 font format"}},{"ID":"14941","typeID":"TextArea","zOrder":"42","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"850","y":"1272"},{"ID":"14942","typeID":"Label","zOrder":"43","measuredW":"362","measuredH":"28","x":"895","y":"1275","properties":{"size":"20","text":"Use preconnect to load your fonts faster"}},{"ID":"14943","typeID":"TextArea","zOrder":"44","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"850","y":"1311"},{"ID":"14944","typeID":"Label","zOrder":"45","measuredW":"326","measuredH":"28","x":"895","y":"1314","properties":{"size":"20","text":"Keep the web font size under 300kb"}},{"ID":"14945","typeID":"TextArea","zOrder":"46","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"850","y":"1351"},{"ID":"14946","typeID":"Label","zOrder":"47","measuredW":"269","measuredH":"28","x":"895","y":"1354","properties":{"size":"20","text":"Prevent Flash or Invisible Text"}},{"ID":"14947","typeID":"TextArea","zOrder":"48","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"696"},{"ID":"14948","typeID":"Label","zOrder":"49","measuredW":"458","measuredH":"28","x":"291","y":"697","properties":{"size":"20","text":"Compress your images / keep the image count low"}},{"ID":"14949","typeID":"TextArea","zOrder":"50","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"736"},{"ID":"14950","typeID":"Label","zOrder":"51","measuredW":"362","measuredH":"28","x":"291","y":"737","properties":{"size":"20","text":"Choose your image format appropriately"}},{"ID":"14951","typeID":"TextArea","zOrder":"52","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"849","y":"540"},{"ID":"14952","typeID":"Label","zOrder":"53","measuredW":"477","measuredH":"28","x":"897","y":"541","properties":{"size":"20","text":"Prefer using vector image rather than bitmap images"}},{"ID":"14953","typeID":"TextArea","zOrder":"54","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"849","y":"580"},{"ID":"14954","typeID":"Label","zOrder":"55","measuredW":"501","measuredH":"28","x":"897","y":"581","properties":{"size":"20","text":"Set width and height attributes on images (aspect ratio)"}},{"ID":"14955","typeID":"TextArea","zOrder":"56","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"849","y":"620"},{"ID":"14956","typeID":"Label","zOrder":"57","measuredW":"251","measuredH":"28","x":"897","y":"621","properties":{"size":"20","text":"Avoid using Base64 images"}},{"ID":"14957","typeID":"TextArea","zOrder":"58","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"849","y":"660"},{"ID":"14958","typeID":"Label","zOrder":"59","measuredW":"311","measuredH":"28","x":"897","y":"661","properties":{"size":"20","text":"Offscreen images are loaded lazily"}},{"ID":"14959","typeID":"TextArea","zOrder":"60","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"849","y":"700"},{"ID":"14960","typeID":"Label","zOrder":"61","measuredW":"516","measuredH":"28","x":"897","y":"701","properties":{"size":"20","text":"Ensure to serve images that are close to your display size"}},{"ID":"14961","typeID":"TextArea","zOrder":"62","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"777"},{"ID":"14962","typeID":"Label","zOrder":"63","measuredW":"194","measuredH":"28","x":"291","y":"778","properties":{"size":"20","text":"Minify your JavaScript"}},{"ID":"14964","typeID":"TextArea","zOrder":"64","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"849","y":"740"},{"ID":"14965","typeID":"Label","zOrder":"65","measuredW":"450","measuredH":"28","x":"897","y":"741","properties":{"size":"20","text":"Avoid multiple inline JavaScript snippets <script> "}},{"ID":"14966","typeID":"TextArea","zOrder":"66","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"816"},{"ID":"14967","typeID":"Label","zOrder":"67","measuredW":"391","measuredH":"28","x":"291","y":"817","properties":{"size":"20","text":"Non Blocking JavaScript: Use async / defer"}},{"ID":"14968","typeID":"TextArea","zOrder":"68","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"849","y":"781"},{"ID":"14969","typeID":"Label","zOrder":"69","measuredW":"323","measuredH":"28","x":"897","y":"782","properties":{"size":"20","text":"Keep your dependencies up to date"}},{"ID":"14970","typeID":"TextArea","zOrder":"70","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"850","y":"1391"},{"ID":"14971","typeID":"Label","zOrder":"71","measuredW":"375","measuredH":"28","x":"895","y":"1394","properties":{"size":"20","text":"Keep an eye on the size of dependencies"}},{"ID":"14972","typeID":"TextArea","zOrder":"72","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"849","y":"824"},{"ID":"14973","typeID":"Label","zOrder":"73","measuredW":"502","measuredH":"28","x":"897","y":"825","properties":{"size":"20","text":"Check for performance problems in your JavaScript files"}},{"ID":"14974","typeID":"TextArea","zOrder":"74","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"849","y":"865"},{"ID":"14975","typeID":"Label","zOrder":"75","measuredW":"481","measuredH":"28","x":"898","y":"864","properties":{"size":"20","text":"Service Workers for caching / performing heavy tasks"}},{"ID":"14976","typeID":"TextArea","zOrder":"76","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"860"},{"ID":"14977","typeID":"Label","zOrder":"77","measuredW":"249","measuredH":"28","x":"291","y":"861","properties":{"size":"20","text":"Use HTTPs on your website"}},{"ID":"14978","typeID":"TextArea","zOrder":"78","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"901"},{"ID":"14979","typeID":"Label","zOrder":"79","measuredW":"469","measuredH":"28","x":"292","y":"902","properties":{"size":"20","text":"Keep your page weight < 1500 KB (ideally < 500 kb)"}},{"ID":"14980","typeID":"TextArea","zOrder":"80","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"941"},{"ID":"14981","typeID":"Label","zOrder":"81","measuredW":"350","measuredH":"28","x":"292","y":"942","properties":{"size":"20","text":"Keep your page load time < 3 seconds"}},{"ID":"14982","typeID":"TextArea","zOrder":"82","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"982"},{"ID":"14983","typeID":"Label","zOrder":"83","measuredW":"380","measuredH":"28","x":"292","y":"983","properties":{"size":"20","text":"Keep the Time To First Byte < 1.3 seconds"}},{"ID":"14984","typeID":"TextArea","zOrder":"84","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"849","y":"906"},{"ID":"14985","typeID":"Label","zOrder":"85","measuredW":"391","measuredH":"28","x":"897","y":"907","properties":{"size":"20","text":"Cookie size should be less than 4096 bytes"}},{"ID":"14986","typeID":"TextArea","zOrder":"86","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"850","y":"949"},{"ID":"14987","typeID":"Label","zOrder":"87","measuredW":"320","measuredH":"28","x":"898","y":"950","properties":{"size":"20","text":"Keep the cookie count less than 20"}},{"ID":"14988","typeID":"TextArea","zOrder":"88","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"1025"},{"ID":"14989","typeID":"Label","zOrder":"89","measuredW":"229","measuredH":"28","x":"293","y":"1026","properties":{"size":"20","text":"Minimize HTTP Requests"}},{"ID":"14992","typeID":"TextArea","zOrder":"90","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"1065"},{"ID":"14993","typeID":"Label","zOrder":"91","measuredW":"309","measuredH":"28","x":"293","y":"1066","properties":{"size":"20","text":"Serve files from the same protocol"}},{"ID":"14994","typeID":"TextArea","zOrder":"92","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"1105"},{"ID":"14995","typeID":"Label","zOrder":"93","measuredW":"367","measuredH":"28","x":"293","y":"1106","properties":{"size":"20","text":"Avoid requesting unreachable files (404)"}},{"ID":"14996","typeID":"TextArea","zOrder":"94","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"1146"},{"ID":"14997","typeID":"Label","zOrder":"95","measuredW":"308","measuredH":"28","x":"293","y":"1147","properties":{"size":"20","text":"Set HTTP cache headers properly"}},{"ID":"14998","typeID":"TextArea","zOrder":"96","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"1186"},{"ID":"14999","typeID":"Label","zOrder":"97","measuredW":"333","measuredH":"28","x":"293","y":"1187","properties":{"size":"20","text":"GZIP / Brotli compression is enabled"}},{"ID":"15024","typeID":"Label","zOrder":"98","measuredW":"111","measuredH":"28","x":"404","y":"390","properties":{"text":"High Priority","size":"20"}},{"ID":"15028","typeID":"Arrow","zOrder":"99","w":"1","h":"1583","measuredW":"150","measuredH":"100","x":"804","y":"277","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":"15030","typeID":"Arrow","zOrder":"4","w":"726","h":"1","measuredW":"150","measuredH":"100","x":"806","y":"1042","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":"15031","typeID":"Arrow","zOrder":"100","w":"630","h":"1","measuredW":"150","measuredH":"100","x":"171","y":"1286","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":"15034","typeID":"Canvas","zOrder":"13","w":"329","h":"51","measuredW":"100","measuredH":"70","x":"1105","y":"230","properties":{"color":"4273622","borderColor":"4273622"}},{"ID":"15035","typeID":"Label","zOrder":"14","measuredW":"172","measuredH":"28","x":"1184","y":"242","properties":{"color":"16777215","size":"20","text":"https://roadmap.sh"}},{"ID":"15036","typeID":"Canvas","zOrder":"6","w":"189","h":"50","measuredW":"100","measuredH":"70","x":"365","y":"379","properties":{"color":"16776960"}},{"ID":"15037","typeID":"Arrow","zOrder":"5","w":"1252","h":"1","measuredW":"150","measuredH":"100","x":"215","y":"403","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":"15038","typeID":"Canvas","zOrder":"101","w":"202","h":"50","measuredW":"100","measuredH":"70","x":"997","y":"377","properties":{"color":"16776960"}},{"ID":"15039","typeID":"Label","zOrder":"102","measuredW":"142","measuredH":"28","x":"1027","y":"388","properties":{"size":"20","text":"Medium Priority"}},{"ID":"15040","typeID":"Canvas","zOrder":"103","w":"202","h":"50","measuredW":"100","measuredH":"70","x":"997","y":"1017","properties":{"color":"16776960"}},{"ID":"15041","typeID":"Label","zOrder":"104","measuredW":"104","measuredH":"28","x":"1046","y":"1028","properties":{"size":"20","text":"Low Priority"}},{"ID":"15044","typeID":"Canvas","zOrder":"105","w":"242","h":"50","measuredW":"100","measuredH":"70","x":"339","y":"1260","properties":{"color":"4273622","borderColor":"4273622"}},{"ID":"15045","typeID":"Label","zOrder":"106","measuredW":"169","measuredH":"28","x":"375","y":"1271","properties":{"size":"20","text":"Performance Tools","color":"16777215"}},{"ID":"15047","typeID":"TextArea","zOrder":"107","w":"242","h":"44","measuredW":"200","measuredH":"140","x":"339","y":"1355","properties":{"color":"16770457"}},{"ID":"15048","typeID":"Label","zOrder":"108","measuredW":"155","measuredH":"25","x":"382","y":"1364","properties":{"size":"17","text":"PageSpeed Insights"}},{"ID":"15049","typeID":"TextArea","zOrder":"109","w":"242","h":"44","measuredW":"200","measuredH":"140","x":"339","y":"1404","properties":{"color":"16770457"}},{"ID":"15050","typeID":"Label","zOrder":"110","measuredW":"86","measuredH":"25","x":"417","y":"1413","properties":{"size":"17","text":"Lighthouse"}},{"ID":"15051","typeID":"TextArea","zOrder":"111","w":"242","h":"44","measuredW":"200","measuredH":"140","x":"339","y":"1452","properties":{"color":"16770457"}},{"ID":"15052","typeID":"Label","zOrder":"112","measuredW":"106","measuredH":"25","x":"407","y":"1461","properties":{"size":"17","text":"WebPageTest"}},{"ID":"15053","typeID":"TextArea","zOrder":"113","w":"242","h":"44","measuredW":"200","measuredH":"140","x":"339","y":"1500","properties":{"color":"16770457"}},{"ID":"15054","typeID":"Label","zOrder":"114","measuredW":"136","measuredH":"25","x":"392","y":"1509","properties":{"size":"17","text":"Chrome DevTools"}},{"ID":"15055","typeID":"TextArea","zOrder":"115","w":"242","h":"44","measuredW":"200","measuredH":"140","x":"339","y":"1548","properties":{"color":"16770457"}},{"ID":"15056","typeID":"Label","zOrder":"116","measuredW":"107","measuredH":"25","x":"406","y":"1557","properties":{"size":"17","text":"Bundlephobia"}},{"ID":"15057","typeID":"Arrow","zOrder":"3","w":"1","h":"79","measuredW":"150","measuredH":"100","x":"459","y":"1299","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":"15058","typeID":"Canvas","zOrder":"117","w":"272","h":"50","measuredW":"100","measuredH":"70","x":"985","y":"1475","properties":{"color":"4273622","borderColor":"4273622"}},{"ID":"15059","typeID":"Label","zOrder":"118","measuredW":"151","measuredH":"28","x":"1045","y":"1486","properties":{"size":"20","text":"More Resources","color":"16777215"}},{"ID":"15060","typeID":"Arrow","zOrder":"2","w":"606","h":"1","measuredW":"150","measuredH":"100","x":"806","y":"1500","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":"15061","typeID":"TextArea","zOrder":"119","w":"272","h":"44","measuredW":"200","measuredH":"140","x":"985","y":"1570","properties":{"color":"16770457"}},{"ID":"15062","typeID":"Label","zOrder":"120","measuredW":"209","measuredH":"25","x":"1016","y":"1579","properties":{"size":"17","text":"Framework Specific Guides"}},{"ID":"15063","typeID":"TextArea","zOrder":"121","w":"272","h":"44","measuredW":"200","measuredH":"140","x":"985","y":"1619","properties":{"color":"16770457"}},{"ID":"15064","typeID":"Label","zOrder":"122","measuredW":"233","measuredH":"25","x":"1004","y":"1628","properties":{"size":"17","text":"Recommended Talks / Guides"}},{"ID":"15065","typeID":"Arrow","zOrder":"1","w":"1","h":"90","measuredW":"150","measuredH":"100","x":"1108","y":"1501","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":"15066","typeID":"TextArea","zOrder":"123","w":"242","h":"44","measuredW":"200","measuredH":"140","x":"339","y":"1596","properties":{"color":"16770457"}},{"ID":"15067","typeID":"Label","zOrder":"124","measuredW":"100","measuredH":"25","x":"410","y":"1605","properties":{"size":"17","text":"Squoosh.app"}},{"ID":"15076","typeID":"Arrow","zOrder":"0","w":"1","h":"81","measuredW":"150","measuredH":"100","x":"804","y":"1833","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":"15077","typeID":"TextArea","zOrder":"125","w":"438","h":"118","measuredW":"200","measuredH":"140","x":"585","y":"1747"},{"ID":"15078","typeID":"Label","zOrder":"126","measuredW":"366","measuredH":"25","x":"621","y":"1766","properties":{"size":"17","text":"Continue Learning with following relevant tracks"}},{"ID":"15079","typeID":"__group__","zOrder":"127","measuredW":"198","measuredH":"44","w":"198","h":"44","x":"808","y":"1803","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":"15080","typeID":"__group__","zOrder":"128","measuredW":"198","measuredH":"44","w":"198","h":"44","x":"600","y":"1803","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"}}]}}}]},"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":"1532","measuredH":"1914","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/best-practices/frontend-performance/frontend-performance.md b/src/best-practices/frontend-performance/frontend-performance.md
index f13b87e9e..307cf49f5 100644
--- a/src/best-practices/frontend-performance/frontend-performance.md
+++ b/src/best-practices/frontend-performance/frontend-performance.md
@@ -10,7 +10,7 @@ title: "Frontend Performance"
 description: "Detailed list of best practices to improve your frontend performance"
 dimensions:
   width: 968
-  height: 2734.48
+  height: 1270.89
 schema:
   headline: "Frontend Performance Best Practices"
   description: "Detailed list of best practices to improve the frontend performance of your website. Each best practice carries further details and how to implement that best practice."
diff --git a/src/components/BestPracticeHeader.astro b/src/components/BestPracticeHeader.astro
new file mode 100644
index 000000000..3b1c08734
--- /dev/null
+++ b/src/components/BestPracticeHeader.astro
@@ -0,0 +1,87 @@
+---
+import BestPracticeHint from './BestPracticeHint.astro';
+import DownloadPopup from './DownloadPopup.astro';
+import Icon from './Icon.astro';
+import SubscribePopup from './SubscribePopup.astro';
+
+export interface Props {
+  title: string;
+  description: string;
+  bestPracticeId: string;
+  isUpcoming?: boolean;
+}
+
+const { title, description, bestPracticeId, isUpcoming = false } = Astro.props;
+const isBestPracticeReady = !isUpcoming;
+---
+
+<DownloadPopup />
+<SubscribePopup />
+
+<div class='border-b'>
+  <div class='py-5 sm:py-12 container relative'>
+    <div class='mt-0 mb-3 sm:mb-6'>
+      <h1 class='text-2xl sm:text-4xl mb-0.5 sm:mb-2 font-bold'>
+        {title}
+      </h1>
+      <p class='text-gray-500 text-sm sm:text-lg'>{description}</p>
+    </div>
+
+    <div class='flex justify-between'>
+      <div class='flex gap-1 sm:gap-2'>
+        <a
+          href='/best-practices'
+          class='bg-gray-500 py-1.5 px-3 rounded-md text-white text-xs sm:text-sm font-medium hover:bg-gray-600'
+          aria-label='Back to All Best Practices'
+        >
+          &larr;<span class='hidden sm:inline'>&nbsp;All Best Practices</span>
+        </a>
+
+        {
+          isBestPracticeReady && (
+            <button
+              data-popup='download-popup'
+              class='inline-flex items-center justify-center bg-yellow-400 py-1.5 px-3 text-xs sm:text-sm font-medium rounded-md hover:bg-yellow-500'
+              aria-label='Download Best Practice'
+              ga-category='Subscription'
+              ga-action='Clicked Popup Opener'
+              ga-label='Download Best Practice Popup'
+            >
+              <Icon icon='download' />
+              <span class='hidden sm:inline ml-2'>Download</span>
+            </button>
+          )
+        }
+
+        <button
+          data-popup='subscribe-popup'
+          class='inline-flex items-center justify-center bg-yellow-400 py-1.5 px-3 text-xs sm:text-sm font-medium rounded-md hover:bg-yellow-500'
+          aria-label='Subscribe for Updates'
+          ga-category='Subscription'
+          ga-action='Clicked Popup Opener'
+          ga-label='Subscribe Best Practice Popup'
+        >
+          <Icon icon='email' />
+          <span class='ml-2'>Subscribe</span>
+        </button>
+      </div>
+
+      {
+        isBestPracticeReady && (
+          <a
+            href={`https://github.com/kamranahmedse/developer-roadmap/issues/new?title=[Suggestion] ${title}`}
+            target='_blank'
+            class='inline-flex items-center justify-center bg-gray-500 text-white py-1.5 px-3 text-xs sm:text-sm font-medium rounded-md hover:bg-gray-600'
+            aria-label='Suggest Changes'
+          >
+            <Icon icon='comment' class='h-3 w-3' />
+            <span class='ml-2 hidden sm:inline'>Suggest Changes</span>
+            <span class='ml-2 inline sm:hidden'>Suggest</span>
+          </a>
+        )
+      }
+    </div>
+
+    <BestPracticeHint bestPracticeId={bestPracticeId} />
+  </div>
+</div>
diff --git a/src/components/BestPracticeHint.astro b/src/components/BestPracticeHint.astro
new file mode 100644
index 000000000..484a7d582
--- /dev/null
+++ b/src/components/BestPracticeHint.astro
@@ -0,0 +1,20 @@
+---
+export interface Props {
+  bestPracticeId: string;
+}
+---
+
+<div class='mt-4 sm:mt-7 border-0 sm:border rounded-md mb-0 sm:-mb-[65px]'>
+  <!-- Desktop: Roadmap Resources - Alert -->
+  <div class='hidden sm:flex justify-between px-2 bg-white items-center rounded-md p-1.5'>
+    <p class='text-sm'>
+      <span class='text-yellow-900 bg-yellow-200 py-0.5 px-1 text-xs rounded-sm font-medium uppercase mr-0.5'>Tip</span>
+      Click the best practices for details and resources
+    </p>
+  </div>
+
+  <!-- Mobile - Roadmap resources alert -->
+  <p class='block sm:hidden text-sm border border-yellow-500 text-yellow-700 rounded-md py-1.5 px-2 bg-white relative'>
+    Click the best practices for details and resources
+  </p>
+</div>
diff --git a/src/components/DownloadPopup.astro b/src/components/DownloadPopup.astro
index 82aa6e90e..7a78a5060 100644
--- a/src/components/DownloadPopup.astro
+++ b/src/components/DownloadPopup.astro
@@ -5,7 +5,7 @@ import CaptchaFields from './Captcha/CaptchaFields.astro';
 
 <Popup
   id='download-popup'
-  title='Download Roadmap'
+  title='Download'
   subtitle='Enter your email below to receive the download link.'
 >
   <form
diff --git a/src/components/RoadmapHeader.astro b/src/components/RoadmapHeader.astro
index 69afe1da6..1457d26e4 100644
--- a/src/components/RoadmapHeader.astro
+++ b/src/components/RoadmapHeader.astro
@@ -1,7 +1,7 @@
 ---
 import DownloadPopup from './DownloadPopup.astro';
 import Icon from './Icon.astro';
-import ResourcesAlert from './ResourcesAlert.astro';
+import RoadmapHint from './RoadmapHint.astro';
 import RoadmapNote from './RoadmapNote.astro';
 import SubscribePopup from './SubscribePopup.astro';
 import TopicSearch from './TopicSearch/TopicSearch.astro';
@@ -109,7 +109,7 @@ const isRoadmapReady = !isUpcoming;
     </div>
 
     <!-- Desktop: Roadmap Resources - Alert -->
-    {hasTopics && <ResourcesAlert roadmapId={roadmapId} />}
+    {hasTopics && <RoadmapHint roadmapId={roadmapId} />}
 
     {hasSearch && <TopicSearch />}
   </div>
diff --git a/src/components/ResourcesAlert.astro b/src/components/RoadmapHint.astro
similarity index 100%
rename from src/components/ResourcesAlert.astro
rename to src/components/RoadmapHint.astro
diff --git a/src/pages/best-practices/[bestPracticeId].astro b/src/pages/best-practices/[bestPracticeId].astro
index 93193e6e3..6651ff4d0 100644
--- a/src/pages/best-practices/[bestPracticeId].astro
+++ b/src/pages/best-practices/[bestPracticeId].astro
@@ -1,8 +1,8 @@
 ---
+import BestPracticeHeader from '../../components/BestPracticeHeader.astro';
 import CaptchaScripts from '../../components/Captcha/CaptchaScripts.astro';
 import InteractiveRoadmap from '../../components/InteractiveRoadmap/InteractiveRoadmap.astro';
 import MarkdownFile from '../../components/MarkdownFile.astro';
-import RoadmapHeader from '../../components/RoadmapHeader.astro';
 import UpcomingForm from '../../components/UpcomingForm.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { BestPracticeFrontmatter,getBestPracticeIds } from '../../lib/best-pratice';
@@ -50,10 +50,10 @@ if (bestPracticeData.schema) {
   noIndex={bestPracticeData.isUpcoming}
   jsonLd={jsonLdSchema}
 >
-  <RoadmapHeader
+  <BestPracticeHeader
     title={bestPracticeData.title}
     description={bestPracticeData.description}
-    roadmapId={bestPracticeId}
+    bestPracticeId={bestPracticeId}
     isUpcoming={bestPracticeData.isUpcoming}
   />
 
diff --git a/src/pages/best-practices/index.astro b/src/pages/best-practices/index.astro
index 2627f7a70..491d68ad8 100644
--- a/src/pages/best-practices/index.astro
+++ b/src/pages/best-practices/index.astro
@@ -15,7 +15,6 @@ const bestPractices = await getAllBestPractices();
   <SimplePageHeader
     title='Best Practices'
     description='Best practices on different topics with detailed implementation guidelines'
-    showYouTubeAlert={true}
   />
 
   <div class='bg-gray-100 pt-4 pb-14 sm:pt-8 sm:pb-16'>
@@ -34,4 +33,4 @@ const bestPractices = await getAllBestPractices();
       </div>
     </div>
   </div>
-</BaseLayout>
\ No newline at end of file
+</BaseLayout>