From e0e6168cfe7547051632b51af49594f1a5be1e18 Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Tue, 24 Jan 2023 19:07:35 +0400 Subject: [PATCH] Remove sorting information from best practices content --- bin/best-practice-content.cjs | 37 +- .../best-practices/frontend-performance.json | 4099 ++++++++++------- ...y.md => analyse-stylesheets-complexity.md} | 0 ...ssues.md => analyze-js-for-perf-issues.md} | 0 ...-avoid-404-files.md => avoid-404-files.md} | 0 ...ase64-images.md => avoid-base64-images.md} | 0 ...void-inline-css.md => avoid-inline-css.md} | 0 ...d => avoid-multiple-inline-js-snippets.md} | 0 .../{144-bundlephobia.md => bundlephobia.md} | 0 ...dency-size.md => check-dependency-size.md} | 0 ...md => choose-image-format-approprietly.md} | 0 ...hrome-dev-tools.md => chrome-dev-tools.md} | 0 ...your-images.md => compress-your-images.md} | 0 ...file.md => concatenate-css-single-file.md} | 0 ...ytes.md => cookie-size-less-4096-bytes.md} | 0 ...e-compression.md => enable-compression.md} | 0 ...ramework-guides.md => framework-guides.md} | 0 ...critical-css.md => inline-critical-css.md} | 0 ...ow-20.md => keep-cookie-count-below-20.md} | 0 ...ate.md => keep-dependencies-up-to-date.md} | 0 ...fb-less-1-3s.md => keep-ttfb-less-1-3s.md} | 0 ...er-300k.md => keep-web-font-under-300k.md} | 0 .../{141-lighthouse.md => lighthouse.md} | 0 ...ily.md => load-offscreen-images-lazily.md} | 0 ...king.md => make-css-files-non-blocking.md} | 0 .../{101-minify-css.md => minify-css.md} | 0 .../{119-minify-html.md => minify-html.md} | 0 ...avascript.md => minify-your-javascript.md} | 0 ...-requests.md => minimize-http-requests.md} | 0 ...rame-count.md => minimize-iframe-count.md} | 0 ...below-3s.md => page-load-time-below-3s.md} | 0 ...eed-insights.md => page-speed-insights.md} | 0 ...elow-1500.md => page-weight-below-1500.md} | 0 ...ble.md => pre-load-urls-where-possible.md} | 0 ...ctor-images.md => prefer-vector-images.md} | 0 ...nt-flash-text.md => prevent-flash-text.md} | 0 ...mended-guides.md => recommended-guides.md} | 0 ...ove-unused-css.md => remove-unused-css.md} | 0 ...e-images.md => serve-exact-size-images.md} | 0 ...t-images.md => set-width-height-images.md} | 0 .../{145-squoosh-ap.md => squoosh-ap.md} | 0 .../content/{120-use-cdn.md => use-cdn.md} | 0 ...e-headers.md => use-http-cache-headers.md} | 0 ...ebsite.md => use-https-on-your-website.md} | 0 ...ript.md => use-non-blocking-javascript.md} | 0 ...nts.md => use-preconnect-to-load-fonts.md} | 0 ...-same-protocol.md => use-same-protocol.md} | 0 ....md => use-service-workers-for-caching.md} | 0 ...ont-format.md => use-woff2-font-format.md} | 0 ...{142-web-page-test.md => web-page-test.md} | 0 50 files changed, 2440 insertions(+), 1696 deletions(-) rename src/best-practices/frontend-performance/content/{105-analyse-stylesheets-complexity.md => analyse-stylesheets-complexity.md} (100%) rename src/best-practices/frontend-performance/content/{128-analyze-js-for-perf-issues.md => analyze-js-for-perf-issues.md} (100%) rename src/best-practices/frontend-performance/content/{116-avoid-404-files.md => avoid-404-files.md} (100%) rename src/best-practices/frontend-performance/content/{123-avoid-base64-images.md => avoid-base64-images.md} (100%) rename src/best-practices/frontend-performance/content/{104-avoid-inline-css.md => avoid-inline-css.md} (100%) rename src/best-practices/frontend-performance/content/{126-avoid-multiple-inline-js-snippets.md => avoid-multiple-inline-js-snippets.md} (100%) rename src/best-practices/frontend-performance/content/{144-bundlephobia.md => bundlephobia.md} (100%) rename src/best-practices/frontend-performance/content/{139-check-dependency-size.md => check-dependency-size.md} (100%) rename src/best-practices/frontend-performance/content/{107-choose-image-format-approprietly.md => choose-image-format-approprietly.md} (100%) rename src/best-practices/frontend-performance/content/{143-chrome-dev-tools.md => chrome-dev-tools.md} (100%) rename src/best-practices/frontend-performance/content/{106-compress-your-images.md => compress-your-images.md} (100%) rename src/best-practices/frontend-performance/content/{133-concatenate-css-single-file.md => concatenate-css-single-file.md} (100%) rename src/best-practices/frontend-performance/content/{130-cookie-size-less-4096-bytes.md => cookie-size-less-4096-bytes.md} (100%) rename src/best-practices/frontend-performance/content/{118-enable-compression.md => enable-compression.md} (100%) rename src/best-practices/frontend-performance/content/{146-framework-guides.md => framework-guides.md} (100%) rename src/best-practices/frontend-performance/content/{103-inline-critical-css.md => inline-critical-css.md} (100%) rename src/best-practices/frontend-performance/content/{131-keep-cookie-count-below-20.md => keep-cookie-count-below-20.md} (100%) rename src/best-practices/frontend-performance/content/{127-keep-dependencies-up-to-date.md => keep-dependencies-up-to-date.md} (100%) rename src/best-practices/frontend-performance/content/{113-keep-ttfb-less-1-3s.md => keep-ttfb-less-1-3s.md} (100%) rename src/best-practices/frontend-performance/content/{137-keep-web-font-under-300k.md => keep-web-font-under-300k.md} (100%) rename src/best-practices/frontend-performance/content/{141-lighthouse.md => lighthouse.md} (100%) rename src/best-practices/frontend-performance/content/{124-load-offscreen-images-lazily.md => load-offscreen-images-lazily.md} (100%) rename src/best-practices/frontend-performance/content/{102-make-css-files-non-blocking.md => make-css-files-non-blocking.md} (100%) rename src/best-practices/frontend-performance/content/{101-minify-css.md => minify-css.md} (100%) rename src/best-practices/frontend-performance/content/{119-minify-html.md => minify-html.md} (100%) rename src/best-practices/frontend-performance/content/{108-minify-your-javascript.md => minify-your-javascript.md} (100%) rename src/best-practices/frontend-performance/content/{114-minimize-http-requests.md => minimize-http-requests.md} (100%) rename src/best-practices/frontend-performance/content/{100-minimize-iframe-count.md => minimize-iframe-count.md} (100%) rename src/best-practices/frontend-performance/content/{112-page-load-time-below-3s.md => page-load-time-below-3s.md} (100%) rename src/best-practices/frontend-performance/content/{140-page-speed-insights.md => page-speed-insights.md} (100%) rename src/best-practices/frontend-performance/content/{111-page-weight-below-1500.md => page-weight-below-1500.md} (100%) rename src/best-practices/frontend-performance/content/{132-pre-load-urls-where-possible.md => pre-load-urls-where-possible.md} (100%) rename src/best-practices/frontend-performance/content/{121-prefer-vector-images.md => prefer-vector-images.md} (100%) rename src/best-practices/frontend-performance/content/{138-prevent-flash-text.md => prevent-flash-text.md} (100%) rename src/best-practices/frontend-performance/content/{147-recommended-guides.md => recommended-guides.md} (100%) rename src/best-practices/frontend-performance/content/{134-remove-unused-css.md => remove-unused-css.md} (100%) rename src/best-practices/frontend-performance/content/{125-serve-exact-size-images.md => serve-exact-size-images.md} (100%) rename src/best-practices/frontend-performance/content/{122-set-width-height-images.md => set-width-height-images.md} (100%) rename src/best-practices/frontend-performance/content/{145-squoosh-ap.md => squoosh-ap.md} (100%) rename src/best-practices/frontend-performance/content/{120-use-cdn.md => use-cdn.md} (100%) rename src/best-practices/frontend-performance/content/{117-use-http-cache-headers.md => use-http-cache-headers.md} (100%) rename src/best-practices/frontend-performance/content/{110-use-https-on-your-website.md => use-https-on-your-website.md} (100%) rename src/best-practices/frontend-performance/content/{109-use-non-blocking-javascript.md => use-non-blocking-javascript.md} (100%) rename src/best-practices/frontend-performance/content/{136-use-preconnect-to-load-fonts.md => use-preconnect-to-load-fonts.md} (100%) rename src/best-practices/frontend-performance/content/{115-use-same-protocol.md => use-same-protocol.md} (100%) rename src/best-practices/frontend-performance/content/{129-use-service-workers-for-caching.md => use-service-workers-for-caching.md} (100%) rename src/best-practices/frontend-performance/content/{135-use-woff2-font-format.md => use-woff2-font-format.md} (100%) rename src/best-practices/frontend-performance/content/{142-web-page-test.md => web-page-test.md} (100%) diff --git a/bin/best-practice-content.cjs b/bin/best-practice-content.cjs index d7bf95b3d..6204a8230 100644 --- a/bin/best-practice-content.cjs +++ b/bin/best-practice-content.cjs @@ -41,7 +41,7 @@ if (fs.existsSync(bestPracticeContentDirPath)) { process.exit(1); } -function prepareDirTree(control, dirTree, dirSortOrders) { +function prepareDirTree(control, dirTree) { // Directories are only created for groups if (control.typeID !== '__group__') { return; @@ -49,18 +49,14 @@ function prepareDirTree(control, dirTree, dirSortOrders) { // e.g. 104-testing-your-apps:other-options const controlName = control?.properties?.controlName || ''; - // e.g. 104 - const sortOrder = controlName.match(/^\d+/)?.[0]; // No directory for a group without control name - if (!controlName || !sortOrder) { + if (!controlName || controlName.startsWith('check:') || controlName.startsWith('ext_link:')) { return; } - // e.g. testing-your-apps:other-options - const controlNameWithoutSortOrder = controlName.replace(/^\d+-/, ''); // e.g. ['testing-your-apps', 'other-options'] - const dirParts = controlNameWithoutSortOrder.split(':'); + const dirParts = controlName.split(':'); // Nest the dir path in the dirTree let currDirTree = dirTree; @@ -69,37 +65,33 @@ function prepareDirTree(control, dirTree, dirSortOrders) { currDirTree = currDirTree[dirPart]; }); - dirSortOrders[controlNameWithoutSortOrder] = Number(sortOrder); - const childrenControls = control.children.controls.control; // No more children if (childrenControls.length) { childrenControls.forEach((childControl) => { - prepareDirTree(childControl, dirTree, dirSortOrders); + prepareDirTree(childControl, dirTree); }); } - return { dirTree, dirSortOrders }; + return { dirTree }; } const bestPractice = require(path.join(__dirname, `../public/jsons/best-practices/${bestPracticeId}`)); const controls = bestPractice.mockup.controls.control; -// Prepare the dir tree that we will be creating and also calculate the sort orders +// Prepare the dir tree that we will be creating const dirTree = {}; -const dirSortOrders = {}; controls.forEach((control) => { - prepareDirTree(control, dirTree, dirSortOrders); + prepareDirTree(control, dirTree); }); /** * @param parentDir Parent directory in which directory is to be created * @param dirTree Nested dir tree to be created - * @param sortOrders Mapping from groupName to sort order * @param filePaths The mapping from groupName to file path */ -function createDirTree(parentDir, dirTree, sortOrders, filePaths = {}) { +function createDirTree(parentDir, dirTree, filePaths = {}) { const childrenDirNames = Object.keys(dirTree); const hasChildren = childrenDirNames.length !== 0; @@ -107,7 +99,6 @@ function createDirTree(parentDir, dirTree, sortOrders, filePaths = {}) { const groupName = parentDir .replace(bestPracticeContentDirPath, '') // Remove base dir path .replace(/(^\/)|(\/$)/g, '') // Remove trailing slashes - .replace(/(^\d+?-)/g, '') // Remove sorting information .replaceAll('/', ':') // Replace slashes with `:` .replace(/:\d+-/, ':'); @@ -117,15 +108,6 @@ function createDirTree(parentDir, dirTree, sortOrders, filePaths = {}) { ?.replaceAll('-', ' ') .replace(/^\w/, ($0) => $0.toUpperCase()); - const sortOrder = sortOrders[groupName] || ''; - - // Attach sorting information to dirname - // e.g. /best-practices/frontend-performance/content/internet - // ———> /best-practices/frontend-performance/content/103-internet - if (sortOrder) { - parentDir = parentDir.replace(/(.+?)([^\/]+)?$/, `$1${sortOrder}-$2`); - } - // If no children, create a file for this under the parent directory if (!hasChildren) { let fileName = `${parentDir}.md`; @@ -150,7 +132,6 @@ function createDirTree(parentDir, dirTree, sortOrders, filePaths = {}) { createDirTree( path.join(parentDir, dirName), dirTree[dirName], - dirSortOrders, filePaths ); }); @@ -159,5 +140,5 @@ function createDirTree(parentDir, dirTree, sortOrders, filePaths = {}) { } // Create directories and get back the paths for created directories -createDirTree(bestPracticeContentDirPath, dirTree, dirSortOrders); +createDirTree(bestPracticeContentDirPath, dirTree); console.log('Created best practice content directory structure'); \ No newline at end of file diff --git a/public/jsons/best-practices/frontend-performance.json b/public/jsons/best-practices/frontend-performance.json index 98dcaab38..021511bad 100644 --- a/public/jsons/best-practices/frontend-performance.json +++ b/public/jsons/best-practices/frontend-performance.json @@ -3,76 +3,296 @@ "controls": { "control": [ { - "ID": "14813", + "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": "8", + "zOrder": "9", "measuredW": "327", "measuredH": "40", - "x": "676", - "y": "216", + "x": "686", + "y": "226", "properties": { "text": "Frontend Performance", "size": "32" } }, { - "ID": "14848", + "ID": "15146", "typeID": "Canvas", - "zOrder": "9", + "zOrder": "10", "w": "361", "h": "150", "measuredW": "100", "measuredH": "70", - "x": "1089", - "y": "148" + "x": "1099", + "y": "158" }, { - "ID": "14849", + "ID": "15147", "typeID": "Label", - "zOrder": "10", + "zOrder": "11", "measuredW": "332", "measuredH": "26", - "x": "1105", - "y": "166", + "x": "1115", + "y": "176", "properties": { "text": "Find the detailed version of this checklist", "size": "18" } }, { - "ID": "14850", + "ID": "15148", "typeID": "Label", - "zOrder": "11", + "zOrder": "12", "measuredW": "318", "measuredH": "26", - "x": "1105", - "y": "194", + "x": "1115", + "y": "204", "properties": { "size": "18", "text": "With details on how to implement these" } }, { - "ID": "14853", + "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": "226", - "y": "138" + "x": "236", + "y": "148" }, { - "ID": "14854", + "ID": "15152", "typeID": "__group__", - "zOrder": "15", + "zOrder": "16", "measuredW": "191", "measuredH": "27", "w": "191", "h": "27", - "x": "256", - "y": "212", + "x": "266", + "y": "222", "properties": { "controlName": "ext_link:roadmap.sh/frontend" }, @@ -146,15 +366,15 @@ } }, { - "ID": "14855", + "ID": "15153", "typeID": "__group__", - "zOrder": "16", + "zOrder": "17", "measuredW": "202", "measuredH": "27", "w": "202", "h": "27", - "x": "256", - "y": "248", + "x": "266", + "y": "258", "properties": { "controlName": "ext_link:roadmap.sh/javascript" }, @@ -228,28 +448,28 @@ } }, { - "ID": "14856", + "ID": "15154", "typeID": "Label", - "zOrder": "17", + "zOrder": "18", "measuredW": "209", "measuredH": "32", - "x": "256", - "y": "162", + "x": "266", + "y": "172", "properties": { "size": "24", "text": "Related Roadmaps" } }, { - "ID": "14857", + "ID": "15155", "typeID": "Arrow", - "zOrder": "18", + "zOrder": "19", "w": "1", "h": "76", "measuredW": "150", "measuredH": "100", - "x": "802", - "y": "124", + "x": "812", + "y": "134", "properties": { "curvature": "0", "leftArrow": "false", @@ -271,457 +491,1332 @@ } }, { - "ID": "14882", - "typeID": "TextArea", - "zOrder": "19", - "w": "29", - "h": "30", - "measuredW": "200", - "measuredH": "140", - "x": "849", - "y": "461" - }, - { - "ID": "14915", - "typeID": "TextArea", + "ID": "15157", + "typeID": "__group__", "zOrder": "21", - "w": "29", - "h": "30", - "measuredW": "200", - "measuredH": "140", - "x": "849", - "y": "500" + "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": "14920", - "typeID": "TextArea", + "ID": "15159", + "typeID": "__group__", "zOrder": "23", - "w": "29", - "h": "30", - "measuredW": "200", - "measuredH": "140", - "x": "850", - "y": "1108" + "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": "14922", - "typeID": "TextArea", + "ID": "15161", + "typeID": "__group__", "zOrder": "25", - "w": "29", - "h": "30", - "measuredW": "200", - "measuredH": "140", - "x": "245", - "y": "501" + "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": "14926", - "typeID": "TextArea", + "ID": "15163", + "typeID": "__group__", "zOrder": "27", - "w": "29", - "h": "30", - "measuredW": "200", - "measuredH": "140", - "x": "850", - "y": "1147" + "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": "14929", - "typeID": "TextArea", + "ID": "15165", + "typeID": "__group__", "zOrder": "29", - "w": "29", - "h": "30", - "measuredW": "200", - "measuredH": "140", - "x": "245", - "y": "540" + "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": "14931", - "typeID": "TextArea", + "ID": "15167", + "typeID": "__group__", "zOrder": "31", - "w": "29", - "h": "30", - "measuredW": "200", - "measuredH": "140", - "x": "850", - "y": "1190" + "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": "14933", - "typeID": "TextArea", + "ID": "15169", + "typeID": "__group__", "zOrder": "33", - "w": "29", - "h": "30", - "measuredW": "200", - "measuredH": "140", - "x": "245", - "y": "579" + "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": "14935", - "typeID": "TextArea", + "ID": "15171", + "typeID": "__group__", "zOrder": "35", - "w": "29", - "h": "30", - "measuredW": "200", - "measuredH": "140", - "x": "245", - "y": "619" + "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": "14937", - "typeID": "TextArea", + "ID": "15173", + "typeID": "__group__", "zOrder": "37", - "w": "29", - "h": "30", - "measuredW": "200", - "measuredH": "140", - "x": "245", - "y": "658" + "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": "14939", - "typeID": "TextArea", + "ID": "15175", + "typeID": "__group__", "zOrder": "39", - "w": "29", - "h": "30", - "measuredW": "200", - "measuredH": "140", - "x": "850", - "y": "1232" + "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": "14941", - "typeID": "TextArea", + "ID": "15177", + "typeID": "__group__", "zOrder": "41", - "w": "29", - "h": "30", - "measuredW": "200", - "measuredH": "140", - "x": "850", - "y": "1272" + "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": "14943", - "typeID": "TextArea", + "ID": "15179", + "typeID": "__group__", "zOrder": "43", - "w": "29", - "h": "30", - "measuredW": "200", - "measuredH": "140", - "x": "850", - "y": "1311" + "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": "14945", - "typeID": "TextArea", + "ID": "15181", + "typeID": "__group__", "zOrder": "45", - "w": "29", - "h": "30", - "measuredW": "200", - "measuredH": "140", - "x": "850", - "y": "1351" + "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": "14947", - "typeID": "TextArea", + "ID": "15183", + "typeID": "__group__", "zOrder": "47", - "w": "29", - "h": "30", - "measuredW": "200", - "measuredH": "140", - "x": "245", - "y": "696" + "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": "14949", - "typeID": "TextArea", + "ID": "15185", + "typeID": "__group__", "zOrder": "49", - "w": "29", - "h": "30", - "measuredW": "200", - "measuredH": "140", - "x": "245", - "y": "736" + "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": "14951", - "typeID": "TextArea", + "ID": "15187", + "typeID": "__group__", "zOrder": "51", - "w": "29", - "h": "30", - "measuredW": "200", - "measuredH": "140", - "x": "849", - "y": "540" + "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": "14953", - "typeID": "TextArea", + "ID": "15189", + "typeID": "__group__", "zOrder": "53", - "w": "29", - "h": "30", - "measuredW": "200", - "measuredH": "140", - "x": "849", - "y": "580" + "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": "14955", - "typeID": "TextArea", + "ID": "15191", + "typeID": "__group__", "zOrder": "55", - "w": "29", - "h": "30", - "measuredW": "200", - "measuredH": "140", - "x": "849", - "y": "620" + "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": "14957", - "typeID": "TextArea", + "ID": "15193", + "typeID": "__group__", "zOrder": "57", - "w": "29", - "h": "30", - "measuredW": "200", - "measuredH": "140", - "x": "849", - "y": "660" + "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": "14959", - "typeID": "TextArea", + "ID": "15195", + "typeID": "__group__", "zOrder": "59", - "w": "29", - "h": "30", - "measuredW": "200", - "measuredH": "140", - "x": "849", - "y": "700" + "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": "14961", - "typeID": "TextArea", + "ID": "15197", + "typeID": "__group__", "zOrder": "61", - "w": "29", - "h": "30", - "measuredW": "200", - "measuredH": "140", - "x": "245", - "y": "777" + "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": "14964", - "typeID": "TextArea", + "ID": "15199", + "typeID": "__group__", "zOrder": "63", - "w": "29", - "h": "30", - "measuredW": "200", - "measuredH": "140", - "x": "849", - "y": "740" + "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": "14966", - "typeID": "TextArea", + "ID": "15201", + "typeID": "__group__", "zOrder": "65", - "w": "29", - "h": "30", - "measuredW": "200", - "measuredH": "140", - "x": "245", - "y": "816" + "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