From 600ecbadf79a2c512b81baf1e8c3794c8b38c6b2 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Fri, 27 Jul 2018 16:55:38 -0700 Subject: [PATCH] core(i18n): add descriptions to UI strings (#5743) --- lighthouse-core/audits/bootup-time.js | 11 +- .../efficient-animated-content.js | 2 + .../byte-efficiency/offscreen-images.js | 2 + .../render-blocking-resources.js | 2 + .../byte-efficiency/total-byte-weight.js | 3 + .../audits/byte-efficiency/unminified-css.js | 2 + .../byte-efficiency/unminified-javascript.js | 2 + .../byte-efficiency/unused-css-rules.js | 2 + .../byte-efficiency/unused-javascript.js | 4 +- .../byte-efficiency/uses-long-cache-ttl.js | 4 + .../byte-efficiency/uses-optimized-images.js | 2 + .../byte-efficiency/uses-responsive-images.js | 2 + .../byte-efficiency/uses-text-compression.js | 4 +- .../byte-efficiency/uses-webp-images.js | 2 + .../audits/critical-request-chains.js | 5 +- .../audits/dobetterweb/dom-size.js | 7 + lighthouse-core/audits/font-display.js | 3 + .../audits/mainthread-work-breakdown.js | 4 + .../audits/metrics/estimated-input-latency.js | 2 + .../audits/metrics/first-contentful-paint.js | 4 +- .../audits/metrics/first-cpu-idle.js | 2 + .../audits/metrics/first-meaningful-paint.js | 2 + lighthouse-core/audits/metrics/interactive.js | 2 + lighthouse-core/audits/metrics/speed-index.js | 2 + lighthouse-core/audits/redirects.js | 2 + lighthouse-core/audits/time-to-first-byte.js | 3 + lighthouse-core/audits/user-timings.js | 3 + lighthouse-core/audits/uses-rel-preconnect.js | 4 +- lighthouse-core/audits/uses-rel-preload.js | 6 +- lighthouse-core/config/default-config.js | 8 +- lighthouse-core/lib/i18n.js | 8 +- lighthouse-core/lib/locales/en-US.json | 286 ++++++++++++------ lighthouse-core/report/html/renderer/util.js | 14 +- .../scripts/i18n/collect-strings.js | 6 +- lighthouse-core/test/results/sample_v2.json | 16 +- 35 files changed, 306 insertions(+), 127 deletions(-) diff --git a/lighthouse-core/audits/bootup-time.js b/lighthouse-core/audits/bootup-time.js index 924721949aca..64117d88b5a2 100644 --- a/lighthouse-core/audits/bootup-time.js +++ b/lighthouse-core/audits/bootup-time.js @@ -11,14 +11,21 @@ const {taskGroups} = require('../lib/task-groups'); const i18n = require('../lib/i18n'); const UIStrings = { - title: 'JavaScript boot-up time', - failureTitle: 'Reduce JavaScript boot-up time', + /** Title of a diagnostic audit that provides detail on the time spent executing javascript files during the load. This descriptive title is shown to users when the amount is acceptable and no user action is required. */ + title: 'JavaScript execution time', + /** Title of a diagnostic audit that provides detail on the time spent executing javascript files during the load. This imperative title is shown to users when there is a significant amount of execution time that could be reduced. */ + failureTitle: 'Reduce JavaScript execution time', + /** Description of a Lighthouse audit that tells the user that they should reduce the amount of time spent executing javascript and one method of doing so. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */ description: 'Consider reducing the time spent parsing, compiling, and executing JS. ' + 'You may find delivering smaller JS payloads helps with this. [Learn ' + 'more](https://developers.google.com/web/tools/lighthouse/audits/bootup).', + /** Label for the total time column in a data table; entries will be the number of milliseconds spent executing per resource loaded by the page. */ columnTotal: 'Total', + /** Label for a time column in a data table; entries will be the number of milliseconds spent evaluating script for every script loaded by the page. */ columnScriptEval: 'Script Evaluation', + /** Label for a time column in a data table; entries will be the number of milliseconds spent parsing script files for every script loaded by the page. */ columnScriptParse: 'Script Parse', + /** A message displayed in a Lighthouse audit result warning that Chrome extensions on the user's system substantially affected Lighthouse's measurements and instructs the user on how to run again without those extensions. */ chromeExtensionsWarning: 'Chrome extensions negatively affected this page\'s load' + ' performance. Try auditing the page in incognito mode or from a clean Chrome profile.', }; diff --git a/lighthouse-core/audits/byte-efficiency/efficient-animated-content.js b/lighthouse-core/audits/byte-efficiency/efficient-animated-content.js index 09dc7d6743a8..4584876e8906 100644 --- a/lighthouse-core/audits/byte-efficiency/efficient-animated-content.js +++ b/lighthouse-core/audits/byte-efficiency/efficient-animated-content.js @@ -13,7 +13,9 @@ const ByteEfficiencyAudit = require('./byte-efficiency-audit'); const i18n = require('../../lib/i18n'); const UIStrings = { + /** Imperative title of a Lighthouse audit that tells the user to use video formats rather than animated GIFs, which are wasteful. This is displayed in a list of audit titles that Lighthouse generates. */ title: 'Use video formats for animated content', + /** Description of a Lighthouse audit that tells the user *why* they should use video instead of GIF format for delivering animated content. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */ description: 'Large GIFs are inefficient for delivering animated content. Consider using ' + 'MPEG4/WebM videos for animations and PNG/WebP for static images instead of GIF to save ' + 'network bytes. [Learn more](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/replace-animated-gifs-with-video/)', diff --git a/lighthouse-core/audits/byte-efficiency/offscreen-images.js b/lighthouse-core/audits/byte-efficiency/offscreen-images.js index 49b3f1dc3ca8..478960cf0cec 100644 --- a/lighthouse-core/audits/byte-efficiency/offscreen-images.js +++ b/lighthouse-core/audits/byte-efficiency/offscreen-images.js @@ -15,7 +15,9 @@ const URL = require('../../lib/url-shim'); const i18n = require('../../lib/i18n'); const UIStrings = { + /** Imperative title of a Lighthouse audit that tells the user to defer loading offscreen images. Offscreen images are images located outside of the visible browser viewport. As they are unseen by the user and slow down page load, they should be loaded later, closer to when the user is going to see them. This is displayed in a list of audit titles that Lighthouse generates. */ title: 'Defer offscreen images', + /** Description of a Lighthouse audit that tells the user *why* they should defer loading offscreen images. Offscreen images are images located outside of the visible browser viewport. As they are unseen by the user and slow down page load, they should be loaded later, closer to when the user is going to see them. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */ description: 'Consider lazy-loading offscreen and hidden images after all critical resources have ' + 'finished loading to lower time to interactive. ' + diff --git a/lighthouse-core/audits/byte-efficiency/render-blocking-resources.js b/lighthouse-core/audits/byte-efficiency/render-blocking-resources.js index 0124b7c2871e..f823e655ef3c 100644 --- a/lighthouse-core/audits/byte-efficiency/render-blocking-resources.js +++ b/lighthouse-core/audits/byte-efficiency/render-blocking-resources.js @@ -27,7 +27,9 @@ const NetworkRequest = require('../../lib/network-request'); const MINIMUM_WASTED_MS = 50; const UIStrings = { + /** Imperative title of a Lighthouse audit that tells the user to reduce or remove network resources that block the initial render of the page. This is displayed in a list of audit titles that Lighthouse generates. */ title: 'Eliminate render-blocking resources', + /** Description of a Lighthouse audit that tells the user *why* they should reduce or remove network resources that block the initial render of the page. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */ description: 'Resources are blocking the first paint of your page. Consider ' + 'delivering critical JS/CSS inline and deferring all non-critical ' + 'JS/styles. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/blocking-resources).', diff --git a/lighthouse-core/audits/byte-efficiency/total-byte-weight.js b/lighthouse-core/audits/byte-efficiency/total-byte-weight.js index 9c0a33acce9e..d06688595fa3 100644 --- a/lighthouse-core/audits/byte-efficiency/total-byte-weight.js +++ b/lighthouse-core/audits/byte-efficiency/total-byte-weight.js @@ -9,8 +9,11 @@ const ByteEfficiencyAudit = require('./byte-efficiency-audit'); const i18n = require('../../lib/i18n'); const UIStrings = { + /** Title of a diagnostic audit that provides detail on large network resources required during page load. 'Payloads' is roughly equivalent to 'resources'. This descriptive title is shown to users when the amount is acceptable and no user action is required. */ title: 'Avoids enormous network payloads', + /** Title of a diagnostic audit that provides detail on large network resources required during page load. 'Payloads' is roughly equivalent to 'resources'. This imperative title is shown to users when there is a significant amount of execution time that could be reduced. */ failureTitle: 'Avoid enormous network payloads', + /** Description of a Lighthouse audit that tells the user *why* they should reduce the size of the network resources required by the page. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */ description: 'Large network payloads cost users real money and are highly correlated with ' + 'long load times. [Learn ' + diff --git a/lighthouse-core/audits/byte-efficiency/unminified-css.js b/lighthouse-core/audits/byte-efficiency/unminified-css.js index 724094561575..8eee2fcd4c6a 100644 --- a/lighthouse-core/audits/byte-efficiency/unminified-css.js +++ b/lighthouse-core/audits/byte-efficiency/unminified-css.js @@ -10,7 +10,9 @@ const UnusedCSSRules = require('./unused-css-rules'); const i18n = require('../../lib/i18n'); const UIStrings = { + /** Imperative title of a Lighthouse audit that tells the user to minify (remove whitespace) the page's CSS code. This is displayed in a list of audit titles that Lighthouse generates. */ title: 'Minify CSS', + /** Description of a Lighthouse audit that tells the user *why* they should minify (remove whitespace) the page's CSS code. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */ description: 'Minifying CSS files can reduce network payload sizes. ' + '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/minify-css).', }; diff --git a/lighthouse-core/audits/byte-efficiency/unminified-javascript.js b/lighthouse-core/audits/byte-efficiency/unminified-javascript.js index cdfee1242c68..7be15b1a8dc8 100644 --- a/lighthouse-core/audits/byte-efficiency/unminified-javascript.js +++ b/lighthouse-core/audits/byte-efficiency/unminified-javascript.js @@ -10,7 +10,9 @@ const esprima = require('esprima'); const i18n = require('../../lib/i18n'); const UIStrings = { + /** Imperative title of a Lighthouse audit that tells the user to minify the page’s JS code to reduce file size. This is displayed in a list of audit titles that Lighthouse generates. */ title: 'Minify JavaScript', + /** Description of a Lighthouse audit that tells the user *why* they should minify the page’s JS code to reduce file size. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */ description: 'Minifying JavaScript files can reduce payload sizes and script parse time. ' + '[Learn more](https://developers.google.com/speed/docs/insights/MinifyResources).', }; diff --git a/lighthouse-core/audits/byte-efficiency/unused-css-rules.js b/lighthouse-core/audits/byte-efficiency/unused-css-rules.js index 0bc18aaae311..c2b48cc339f1 100644 --- a/lighthouse-core/audits/byte-efficiency/unused-css-rules.js +++ b/lighthouse-core/audits/byte-efficiency/unused-css-rules.js @@ -9,7 +9,9 @@ const ByteEfficiencyAudit = require('./byte-efficiency-audit'); const i18n = require('../../lib/i18n'); const UIStrings = { + /** Imperative title of a Lighthouse audit that tells the user to remove content from their CSS that isn’t needed immediately and instead load that content at a later time. This is displayed in a list of audit titles that Lighthouse generates. */ title: 'Defer unused CSS', + /** Description of a Lighthouse audit that tells the user *why* they should defer loading any content in CSS that isn’t needed at page load. This is displayed after a user expands the section to see more. No word length limits. 'Learn More' becomes link text to additional documentation. */ description: 'Remove unused rules from stylesheets to reduce unnecessary ' + 'bytes consumed by network activity. ' + '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/unused-css).', diff --git a/lighthouse-core/audits/byte-efficiency/unused-javascript.js b/lighthouse-core/audits/byte-efficiency/unused-javascript.js index c4cb18b81574..767e7877202a 100644 --- a/lighthouse-core/audits/byte-efficiency/unused-javascript.js +++ b/lighthouse-core/audits/byte-efficiency/unused-javascript.js @@ -9,7 +9,9 @@ const ByteEfficiencyAudit = require('./byte-efficiency-audit'); const i18n = require('../../lib/i18n'); const UIStrings = { - title: 'Unused JavaScript', + /** Imperative title of a Lighthouse audit that tells the user to remove JavaScript that is never evaluated during page load. This is displayed in a list of audit titles that Lighthouse generates. */ + title: 'Remove unused JavaScript', + /** Description of a Lighthouse audit that tells the user *why* they should remove JavaScript that is never needed/evaluated by the browser. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */ description: 'Remove unused JavaScript to reduce bytes consumed by network activity.', }; diff --git a/lighthouse-core/audits/byte-efficiency/uses-long-cache-ttl.js b/lighthouse-core/audits/byte-efficiency/uses-long-cache-ttl.js index 6ebc06c4821d..32462e039c24 100644 --- a/lighthouse-core/audits/byte-efficiency/uses-long-cache-ttl.js +++ b/lighthouse-core/audits/byte-efficiency/uses-long-cache-ttl.js @@ -15,11 +15,15 @@ const linearInterpolation = require('../../lib/statistics').linearInterpolation; const i18n = require('../../lib/i18n'); const UIStrings = { + /** Title of a diagnostic audit that provides detail on the cache policy applies to the page's static assets. Cache refers to browser disk cache, which keeps old versions of network resources around for future use. This is displayed in a list of audit titles that Lighthouse generates. */ title: 'Uses efficient cache policy on static assets', + /** Title of a diagnostic audit that provides details on the any page resources that could have been served with more efficient cache policies. Cache refers to browser disk cache, which keeps old versions of network resources around for future use. This imperative title is shown to users when there is a significant amount of assets served with poor cache policies. */ failureTitle: 'Serve static assets with an efficient cache policy', + /** Description of a Lighthouse audit that tells the user *why* they need to adopt a long cache lifetime policy. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */ description: 'A long cache lifetime can speed up repeat visits to your page. ' + '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/cache-policy).', + /** [ICU Syntax] Label for the audit identifying network resources with inefficient cache values. Clicking this will expand the audit to show the resources. */ displayValue: `{itemCount, plural, =1 {1 resource found} other {# resources found} diff --git a/lighthouse-core/audits/byte-efficiency/uses-optimized-images.js b/lighthouse-core/audits/byte-efficiency/uses-optimized-images.js index 46b0020fc45b..333776bffa3e 100644 --- a/lighthouse-core/audits/byte-efficiency/uses-optimized-images.js +++ b/lighthouse-core/audits/byte-efficiency/uses-optimized-images.js @@ -14,7 +14,9 @@ const URL = require('../../lib/url-shim'); const i18n = require('../../lib/i18n'); const UIStrings = { + /** Imperative title of a Lighthouse audit that tells the user to encode images with optimization (better compression). This is displayed in a list of audit titles that Lighthouse generates. */ title: 'Efficiently encode images', + /** Description of a Lighthouse audit that tells the user *why* they need to efficiently encode images. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */ description: 'Optimized images load faster and consume less cellular data. ' + '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/optimize-images).', }; diff --git a/lighthouse-core/audits/byte-efficiency/uses-responsive-images.js b/lighthouse-core/audits/byte-efficiency/uses-responsive-images.js index c91cfee70b23..2112832aff59 100644 --- a/lighthouse-core/audits/byte-efficiency/uses-responsive-images.js +++ b/lighthouse-core/audits/byte-efficiency/uses-responsive-images.js @@ -19,7 +19,9 @@ const URL = require('../../lib/url-shim'); const i18n = require('../../lib/i18n'); const UIStrings = { + /** Imperative title of a Lighthouse audit that tells the user to resize images to match the display dimensions. This is displayed in a list of audit titles that Lighthouse generates. */ title: 'Properly size images', + /** Description of a Lighthouse audit that tells the user *why* they need to serve appropriately sized images. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */ description: 'Serve images that are appropriately-sized to save cellular data ' + 'and improve load time. ' + diff --git a/lighthouse-core/audits/byte-efficiency/uses-text-compression.js b/lighthouse-core/audits/byte-efficiency/uses-text-compression.js index c40697f5d914..a796e879d2ff 100644 --- a/lighthouse-core/audits/byte-efficiency/uses-text-compression.js +++ b/lighthouse-core/audits/byte-efficiency/uses-text-compression.js @@ -14,8 +14,10 @@ const URL = require('../../lib/url-shim'); const i18n = require('../../lib/i18n'); const UIStrings = { + /** Imperative title of a Lighthouse audit that tells the user to enable text compression (like gzip) in order to enhance the performance of a page. This is displayed in a list of audit titles that Lighthouse generates. */ title: 'Enable text compression', - description: 'Text-based responses should be served with compression (gzip, deflate or' + + /** Description of a Lighthouse audit that tells the user *why* their text-based resources should be served with compression (like gzip). This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */ + description: 'Text-based resources should be served with compression (gzip, deflate or' + ' brotli) to minimize total network bytes.' + ' [Learn more](https://developers.google.com/web/tools/lighthouse/audits/text-compression).', }; diff --git a/lighthouse-core/audits/byte-efficiency/uses-webp-images.js b/lighthouse-core/audits/byte-efficiency/uses-webp-images.js index 94bb043adfee..9279c612bb39 100644 --- a/lighthouse-core/audits/byte-efficiency/uses-webp-images.js +++ b/lighthouse-core/audits/byte-efficiency/uses-webp-images.js @@ -13,7 +13,9 @@ const URL = require('../../lib/url-shim'); const i18n = require('../../lib/i18n'); const UIStrings = { + /** Imperative title of a Lighthouse audit that tells the user to serve images in newer and more efficient image formats in order to enhance the performance of a page. A non-modern image format was designed 20+ years ago. This is displayed in a list of audit titles that Lighthouse generates. */ title: 'Serve images in next-gen formats', + /** Description of a Lighthouse audit that tells the user *why* they should use newer and more efficient image formats. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */ description: 'Image formats like JPEG 2000, JPEG XR, and WebP often provide better ' + 'compression than PNG or JPEG, which means faster downloads and less data consumption. ' + '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/webp).', diff --git a/lighthouse-core/audits/critical-request-chains.js b/lighthouse-core/audits/critical-request-chains.js index c0315258cfb4..c04d8c5d53a4 100644 --- a/lighthouse-core/audits/critical-request-chains.js +++ b/lighthouse-core/audits/critical-request-chains.js @@ -9,12 +9,15 @@ const Audit = require('./audit'); const i18n = require('../lib/i18n'); const UIStrings = { - title: 'Minimize Critical Request Chains', + /** Imperative title of a Lighthouse audit that tells the user to reduce the depth of critical network requests to enhance initial load of a page. Critical request chains are series of dependent network requests that are important for page rendering. For example, here's a 4-request-deep chain: The biglogo.jpg image is required, but is requested via the styles.css style code, which is requested by the initialize.js javascript, which is requested by the page's HTML. This is displayed in a list of audit titles that Lighthouse generates. */ + title: 'Minimize Critical Requests Depth', + /** Description of a Lighthouse audit that tells the user *why* they should reduce the depth of critical network requests to enhance initial load of a page . This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */ description: 'The Critical Request Chains below show you what resources are ' + 'issued with a high priority. Consider reducing ' + 'the length of chains, reducing the download size of resources, or ' + 'deferring the download of unnecessary resources to improve page load. ' + '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/critical-request-chains).', + /** [ICU Syntax] Label for an audit identifying the number of sequences of dependent network requests used to load the page. */ displayValue: `{itemCount, plural, =1 {1 chain found} other {# chains found} diff --git a/lighthouse-core/audits/dobetterweb/dom-size.js b/lighthouse-core/audits/dobetterweb/dom-size.js index 045556626e52..de0872d36096 100644 --- a/lighthouse-core/audits/dobetterweb/dom-size.js +++ b/lighthouse-core/audits/dobetterweb/dom-size.js @@ -21,17 +21,24 @@ const MAX_DOM_TREE_WIDTH = 60; const MAX_DOM_TREE_DEPTH = 32; const UIStrings = { + /** Title of a diagnostic audit that provides detail on the size of the web page's DOM. The size of a DOM is characterized by the total number of DOM nodes and greatest DOM depth. This descriptive title is shown to users when the amount is acceptable and no user action is required. */ title: 'Avoids an excessive DOM size', + /** Title of a diagnostic audit that provides detail on the size of the web page's DOM. The size of a DOM is characterized by the total number of DOM nodes and greatest DOM depth. This imperative title is shown to users when there is a significant amount of execution time that could be reduced. */ failureTitle: 'Avoid an excessive DOM size', + /** Description of a Lighthouse audit that tells the user *why* they should reduce the size of the web page's DOM. The size of a DOM is characterized by the total number of DOM nodes and greatest DOM depth. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */ description: 'Browser engineers recommend pages contain fewer than ' + `~${MAX_DOM_NODES.toLocaleString()} DOM nodes. The sweet spot is a tree ` + `depth < ${MAX_DOM_TREE_DEPTH} elements and fewer than ${MAX_DOM_TREE_WIDTH} ` + 'children/parent element. A large DOM can increase memory usage, cause longer ' + '[style calculations](https://developers.google.com/web/fundamentals/performance/rendering/reduce-the-scope-and-complexity-of-style-calculations), ' + 'and produce costly [layout reflows](https://developers.google.com/speed/articles/reflow). [Learn more](https://developers.google.com/web/tools/lighthouse/audits/dom-size).', + /** Label for the total number of DOM nodes found in the page. */ columnDOMNodes: 'Total DOM Nodes', + /** Label for the numeric value of the maximum depth in the page's DOM tree. */ columnDOMDepth: 'Maximum DOM Depth', + /** Label for the value of the maximum number of children any DOM node in the page has. */ columnDOMWidth: 'Maximum Children', + /** [ICU Syntax] Label for an audit identifying the number of DOM nodes found in the page. */ displayValue: `{itemCount, plural, =1 {1 node} other {# nodes} diff --git a/lighthouse-core/audits/font-display.js b/lighthouse-core/audits/font-display.js index 4302c5d6a585..080c43997be0 100644 --- a/lighthouse-core/audits/font-display.js +++ b/lighthouse-core/audits/font-display.js @@ -11,8 +11,11 @@ const allowedFontFaceDisplays = ['block', 'fallback', 'optional', 'swap']; const i18n = require('../lib/i18n'); const UIStrings = { + /** Title of a diagnostic audit that provides detail on if all the text on a webpage was visible while the page was loading its webfonts. This descriptive title is shown to users when the amount is acceptable and no user action is required. */ title: 'All text remains visible during webfont loads', + /** Title of a diagnostic audit that provides detail on the load of the page's webfonts. Often the text is invisible for seconds before the webfont resource is loaded. This imperative title is shown to users when there is a significant amount of execution time that could be reduced. */ failureTitle: 'Ensure text remains visible during webfont load', + /** Description of a Lighthouse audit that tells the user *why* they should use the font-display CSS feature. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */ description: 'Leverage the font-display CSS feature to ensure text is user-visible while ' + 'webfonts are loading. ' + '[Learn more](https://developers.google.com/web/updates/2016/02/font-display).', diff --git a/lighthouse-core/audits/mainthread-work-breakdown.js b/lighthouse-core/audits/mainthread-work-breakdown.js index 4a64514c09b0..16166cff754f 100644 --- a/lighthouse-core/audits/mainthread-work-breakdown.js +++ b/lighthouse-core/audits/mainthread-work-breakdown.js @@ -15,10 +15,14 @@ const {taskGroups} = require('../lib/task-groups'); const i18n = require('../lib/i18n'); const UIStrings = { + /** Title of a diagnostic audit that provides detail on the main thread work the browser did to load the page. This descriptive title is shown to users when the amount is acceptable and no user action is required. */ title: 'Minimizes main thread work', + /** Title of a diagnostic audit that provides detail on the main thread work the browser did to load the page. This imperative title is shown to users when there is a significant amount of execution time that could be reduced. */ failureTitle: 'Minimize main thread work', + /** Description of a Lighthouse audit that tells the user *why* they should reduce JS execution times. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */ description: 'Consider reducing the time spent parsing, compiling and executing JS. ' + 'You may find delivering smaller JS payloads helps with this.', + /** Label for the Main Thread Category column in data tables, rows will have a main thread Category and main thread Task Name. */ columnCategory: 'Category', }; diff --git a/lighthouse-core/audits/metrics/estimated-input-latency.js b/lighthouse-core/audits/metrics/estimated-input-latency.js index 88b096c559e9..653662c1f9ad 100644 --- a/lighthouse-core/audits/metrics/estimated-input-latency.js +++ b/lighthouse-core/audits/metrics/estimated-input-latency.js @@ -9,7 +9,9 @@ const Audit = require('../audit'); const i18n = require('../../lib/i18n'); const UIStrings = { + /** The name of the metric that marks the estimated time between the page receiving input (a user clicking, tapping, or typing) and the page responding. Shown to users as the label for the numeric metric value. Ideally fits within a ~40 character limit. */ title: 'Estimated Input Latency', + /** Description of the Estimated Input Latency metric that estimates the amount of time, in milliseconds, that the app takes to respond to user input. This description is displayed within a tooltip when the user hovers on the metric name to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */ description: 'The score above is an estimate of how long your app takes to respond to user ' + 'input, in milliseconds, during the busiest 5s window of page load. If your ' + 'latency is higher than 50 ms, users may perceive your app as laggy. ' + diff --git a/lighthouse-core/audits/metrics/first-contentful-paint.js b/lighthouse-core/audits/metrics/first-contentful-paint.js index b3772148d3cf..bf5ad01c446b 100644 --- a/lighthouse-core/audits/metrics/first-contentful-paint.js +++ b/lighthouse-core/audits/metrics/first-contentful-paint.js @@ -9,8 +9,10 @@ const Audit = require('../audit'); const i18n = require('../../lib/i18n'); const UIStrings = { + /** The name of the metric that marks the time at which the first text or image is painted by the browser. Shown to users as the label for the numeric metric value. Ideally fits within a ~40 character limit. */ title: 'First Contentful Paint', - description: 'First contentful paint marks the time at which the first text/image is ' + + /** Description of the First Contentful Paint (FCP) metric, which marks the time at which the first text or image is painted by the browser. This is displayed within a tooltip when the user hovers on the metric name to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */ + description: 'First contentful paint marks the time at which the first text or image is ' + `painted. [Learn more](https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics#first_paint_and_first_contentful_paint).`, }; diff --git a/lighthouse-core/audits/metrics/first-cpu-idle.js b/lighthouse-core/audits/metrics/first-cpu-idle.js index 96a70636b5e1..26e75df7da21 100644 --- a/lighthouse-core/audits/metrics/first-cpu-idle.js +++ b/lighthouse-core/audits/metrics/first-cpu-idle.js @@ -9,7 +9,9 @@ const Audit = require('../audit'); const i18n = require('../../lib/i18n'); const UIStrings = { + /** The name of the metric that marks when the page has displayed content and the CPU is not busy executing the page's scripts. Shown to users as the label for the numeric metric value. Ideally fits within a ~40 character limit. */ title: 'First CPU Idle', + /** Description of the First CPU Idle metric, which marks the time at which the page has displayed content and the CPU is not busy executing the page's scripts. This is displayed within a tooltip when the user hovers on the metric name to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */ description: 'First CPU Idle marks the first time at which the page\'s main thread is ' + 'quiet enough to handle input. ' + '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/first-interactive).', diff --git a/lighthouse-core/audits/metrics/first-meaningful-paint.js b/lighthouse-core/audits/metrics/first-meaningful-paint.js index 116503edf1d5..4a46fbe33c05 100644 --- a/lighthouse-core/audits/metrics/first-meaningful-paint.js +++ b/lighthouse-core/audits/metrics/first-meaningful-paint.js @@ -9,7 +9,9 @@ const Audit = require('../audit'); const i18n = require('../../lib/i18n'); const UIStrings = { + /** The name of the metric that marks the time at which a majority of the content has been painted by the browser. Shown to users as the label for the numeric metric value. Ideally fits within a ~40 character limit. */ title: 'First Meaningful Paint', + /** Description of the First Meaningful Paint (FMP) metric, which marks the time at which a majority of the content has been painted by the browser. This is displayed within a tooltip when the user hovers on the metric name to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */ description: 'First Meaningful Paint measures when the primary content of a page is ' + 'visible. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/first-meaningful-paint).', }; diff --git a/lighthouse-core/audits/metrics/interactive.js b/lighthouse-core/audits/metrics/interactive.js index ec5014b1c9ca..d9be0ec6da14 100644 --- a/lighthouse-core/audits/metrics/interactive.js +++ b/lighthouse-core/audits/metrics/interactive.js @@ -9,7 +9,9 @@ const Audit = require('../audit'); const i18n = require('../../lib/i18n'); const UIStrings = { + /** The name of the metric that marks the time at which the page is fully loaded and is able to quickly respond to user input (clicks, taps, and keypresses feel responsive). Shown to users as the label for the numeric metric value. Ideally fits within a ~40 character limit. */ title: 'Time to Interactive', + /** Description of the Time to Interactive (TTI) metric, which evaluates when a page has completed its primary network activity and main thread work. This is displayed within a tooltip when the user hovers on the metric name to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */ description: 'Interactive marks the time at which the page is fully interactive. ' + '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/consistently-interactive).', }; diff --git a/lighthouse-core/audits/metrics/speed-index.js b/lighthouse-core/audits/metrics/speed-index.js index ed111929547e..246f291c7641 100644 --- a/lighthouse-core/audits/metrics/speed-index.js +++ b/lighthouse-core/audits/metrics/speed-index.js @@ -9,7 +9,9 @@ const Audit = require('../audit'); const i18n = require('../../lib/i18n'); const UIStrings = { + /** The name of the metric that summarizes how quickly the page looked visually complete. The name of this metric is largely abstract and can be loosely translated. Shown to users as the label for the numeric metric value. Ideally fits within a ~40 character limit. */ title: 'Speed Index', + /** Description of the Speed Index metric, which summarizes how quickly the page looked visually complete. This is displayed within a tooltip when the user hovers on the metric name to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */ description: 'Speed Index shows how quickly the contents of a page are visibly populated. ' + '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/speed-index).', }; diff --git a/lighthouse-core/audits/redirects.js b/lighthouse-core/audits/redirects.js index 80b7bfbd0d29..a7af0cdf1419 100644 --- a/lighthouse-core/audits/redirects.js +++ b/lighthouse-core/audits/redirects.js @@ -10,7 +10,9 @@ const UnusedBytes = require('./byte-efficiency/byte-efficiency-audit'); const i18n = require('../lib/i18n'); const UIStrings = { + /** Imperative title of a Lighthouse audit that tells the user to eliminate the redirects taken through multiple URLs to load the page. This is shown in a list of audits that Lighthouse generates. */ title: 'Avoid multiple page redirects', + /** Description of a Lighthouse audit that tells users why they should reduce the number of server-side redirects on their page. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */ description: 'Redirects introduce additional delays before the page can be loaded. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/redirects).', }; diff --git a/lighthouse-core/audits/time-to-first-byte.js b/lighthouse-core/audits/time-to-first-byte.js index 2af498de52ef..74807cb66ffd 100644 --- a/lighthouse-core/audits/time-to-first-byte.js +++ b/lighthouse-core/audits/time-to-first-byte.js @@ -9,8 +9,11 @@ const Audit = require('./audit'); const i18n = require('../lib/i18n'); const UIStrings = { + /** Title of a diagnostic audit that provides detail on how long it took from starting a request to when the server started responding. This descriptive title is shown to users when the amount is acceptable and no user action is required. */ title: 'Server response times are low (TTFB)', + /** Title of a diagnostic audit that provides detail on how long it took from starting a request to when the server started responding. This imperative title is shown to users when there is a significant amount of execution time that could be reduced. */ failureTitle: 'Reduce server response times (TTFB)', + /** Description of a Lighthouse audit that tells the user *why* they should reduce the amount of time it takes their server to start responding to requests. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */ description: 'Time To First Byte identifies the time at which your server sends a response.' + ' [Learn more](https://developers.google.com/web/tools/lighthouse/audits/ttfb).', /** Used to summarize the total Time to First Byte duration for the primary HTML response. The `{timeInMs}` placeholder will be replaced with the time duration, shown in milliseconds (e.g. 210 ms) */ diff --git a/lighthouse-core/audits/user-timings.js b/lighthouse-core/audits/user-timings.js index 68a732653327..d885f4753217 100644 --- a/lighthouse-core/audits/user-timings.js +++ b/lighthouse-core/audits/user-timings.js @@ -9,10 +9,13 @@ const Audit = require('./audit'); const i18n = require('../lib/i18n'); const UIStrings = { + /** Descriptive title of a diagnostic audit that provides details on any timestamps generated by the page. User Timing refers to the 'User Timing API', which enables a website to record specific times as 'marks', or spans of time as 'measures'. */ title: 'User Timing marks and measures', + /** Description of a Lighthouse audit that tells the user they may want to use the User Timing API to help measure the performance of aspects of their page load and interaction. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */ description: 'Consider instrumenting your app with the User Timing API to create custom, ' + 'real-world measurements of key user experiences. ' + '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/user-timing).', + /** [ICU Syntax] Label for an audit identifying the number of User Timing timestamps present in the page. */ displayValue: `{itemCount, plural, =1 {1 user timing} other {# user timings} diff --git a/lighthouse-core/audits/uses-rel-preconnect.js b/lighthouse-core/audits/uses-rel-preconnect.js index 859e2e05bac5..9e84d00c49c5 100644 --- a/lighthouse-core/audits/uses-rel-preconnect.js +++ b/lighthouse-core/audits/uses-rel-preconnect.js @@ -19,7 +19,9 @@ const PRECONNECT_SOCKET_MAX_IDLE = 15; const IGNORE_THRESHOLD_IN_MS = 50; const UIStrings = { - title: 'Avoid multiple, costly round trips to any origin', + /** Imperative title of a Lighthouse audit that tells the user to connect early to internet domains that will be used to load page resources. Origin is the correct term, however 'domain name' could be used if neccsesary. This is displayed in a list of audit titles that Lighthouse generates. */ + title: 'Preconnect to required origins', + /** Description of a Lighthouse audit that tells the user how to connect early to third-party domains that will be used to load page resources. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */ description: 'Consider adding preconnect or dns-prefetch resource hints to establish early ' + `connections to important third-party origins. [Learn more](https://developers.google.com/web/fundamentals/performance/resource-prioritization#preconnect).`, diff --git a/lighthouse-core/audits/uses-rel-preload.js b/lighthouse-core/audits/uses-rel-preload.js index c12d70680df9..f557c74ed6ff 100644 --- a/lighthouse-core/audits/uses-rel-preload.js +++ b/lighthouse-core/audits/uses-rel-preload.js @@ -11,9 +11,11 @@ const UnusedBytes = require('./byte-efficiency/byte-efficiency-audit'); const i18n = require('../lib/i18n'); const UIStrings = { + /** Imperative title of a Lighthouse audit that tells the user to use to initiate important network requests earlier during page load. This is displayed in a list of audit titles that Lighthouse generates. */ title: 'Preload key requests', - description: 'Consider using to prioritize fetching late-discovered ' + - 'resources sooner. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/preload).', + /** Description of a Lighthouse audit that tells the user *why* they should preload important network requests. The associated network requests are started halfway through pageload (or later) but should be started at the beginning. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */ + description: 'Consider using to prioritize fetching resources that are ' + + 'currently requested later in page load. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/preload).', }; const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings); diff --git a/lighthouse-core/config/default-config.js b/lighthouse-core/config/default-config.js index 2a75aea04b23..1926990e1f15 100644 --- a/lighthouse-core/config/default-config.js +++ b/lighthouse-core/config/default-config.js @@ -11,11 +11,17 @@ const constants = require('./constants'); const i18n = require('../lib/i18n'); const UIStrings = { + /** Title of the Performance category of audits. Equivalent to 'Web performance', this term is inclusive of all web page speed and loading optimization topics. Also used as a label of a score gauge; try to limit to 20 characters. */ performanceCategoryTitle: 'Performance', + /** Title of the speed metrics section of the Performance category. Within this section are various speed metrics which quantify the pageload performance into values presented in seconds and milliseconds. */ metricGroupTitle: 'Metrics', + /** Title of the opportunity section of the Performance category. Within this section are audits with imperative titles that suggest actions the user can take to improve the loading performance of their web page. 'Suggestion'/'Optimization'/'Recommendation' are reasonable synonyms for 'opportunity' in this case. */ loadOpportunitiesGroupTitle: 'Opportunities', - loadOpportunitiesGroupDescription: 'These are opportunities to speed up your application by optimizing the following resources.', + /** Description of the opportunity section of the Performance category. 'Optimizations' could also be 'recommendations' or 'suggestions'. Within this section are audits with imperative titles that suggest actions the user can take to improve the loading performance of their web page. */ + loadOpportunitiesGroupDescription: 'These optimizations can speed up your page load.', + /** Title of the diagnostics section of the Performance category. Within this section are audits with non-imperative titles that provide more detail on the page's page load performance characteristics. Whereas the 'Opportunities' suggest an action along with expected time savings, diagnostics do not. Within this section, the user may read the details and deduce additional actions they could take. */ diagnosticsGroupTitle: 'Diagnostics', + /** Description of the diagnostics section of the Performance category. Within this section are audits with non-imperative titles that provide more detail on the page's page load performance characteristics. Whereas the 'Opportunities' suggest an action along with expected time savings, diagnostics do not. Within this section, the user may read the details and deduce additional actions they could take. */ diagnosticsGroupDescription: 'More information about the performance of your application.', }; diff --git a/lighthouse-core/lib/i18n.js b/lighthouse-core/lib/i18n.js index c8c681f4a2cd..52ac83a888de 100644 --- a/lighthouse-core/lib/i18n.js +++ b/lighthouse-core/lib/i18n.js @@ -35,11 +35,11 @@ const MESSAGE_INSTANCE_ID_REGEX = /(.* \| .*) # (\d+)$/; const UIStrings = { - /** Used to show the duration in milliseconds that something lasted. The `{timeInMs}` placeholder will be replaced with the time duration, shown in milliseconds (e.g. 63 ms) */ +/** Used to show the duration in milliseconds that something lasted. The `{timeInMs}` placeholder will be replaced with the time duration, shown in milliseconds (e.g. 63 ms) */ ms: '{timeInMs, number, milliseconds}\xa0ms', - /** Used to show how many bytes the user could reduce their page by if they implemented the suggestions. The `{wastedBytes}` placeholder will be replaced with the number of bytes, shown in kilobytes (e.g. 148 KB) */ + /** Label shown per-audit to show how many bytes smaller the page could be if the user implemented the suggestions. The `{wastedBytes}` placeholder will be replaced with the number of bytes, shown in kilobytes (e.g. 148 KB) */ displayValueByteSavings: 'Potential savings of {wastedBytes, number, bytes}\xa0KB', - /** Used to show how many milliseconds the user could reduce page load by if they implemented the suggestions. The `{wastedMs}` placeholder will be replaced with the time duration, shown in milliseconds (e.g. 140 ms) */ + /** Label shown per-audit to show how many milliseconds faster the page load could be if the user implemented the suggestions. The `{wastedMs}` placeholder will be replaced with the time duration, shown in milliseconds (e.g. 140 ms) */ displayValueMsSavings: 'Potential savings of {wastedMs, number, milliseconds}\xa0ms', /** Label for the URL column in data tables, entries will be the URL of a web resource */ columnURL: 'URL', @@ -51,7 +51,7 @@ const UIStrings = { columnWastedBytes: 'Potential Savings (KB)', /** Label for the wasted bytes column in data tables, entries will be the number of milliseconds the user could reduce page load by if they implemented the suggestions */ columnWastedMs: 'Potential Savings (ms)', - /** Label for the time spent column in data tables, entries will be the number of milliseconds the spent during a particular activity */ + /** Label for the time spent column in data tables, entries will be the number of milliseconds spent during a particular activity */ columnTimeSpent: 'Time Spent', }; diff --git a/lighthouse-core/lib/locales/en-US.json b/lighthouse-core/lib/locales/en-US.json index 6624076a8a33..414b156a8c45 100644 --- a/lighthouse-core/lib/locales/en-US.json +++ b/lighthouse-core/lib/locales/en-US.json @@ -1,267 +1,343 @@ { "lighthouse-core/audits/bootup-time.js | title": { - "message": "JavaScript boot-up time" + "message": "JavaScript execution time", + "description": "Title of a diagnostic audit that provides detail on the time spent executing javascript files during the load. This descriptive title is shown to users when the amount is acceptable and no user action is required." }, "lighthouse-core/audits/bootup-time.js | failureTitle": { - "message": "Reduce JavaScript boot-up time", - "description": "Shown to users as the title of the audit when it is in a failing state." + "message": "Reduce JavaScript execution time", + "description": "Title of a diagnostic audit that provides detail on the time spent executing javascript files during the load. This imperative title is shown to users when there is a significant amount of execution time that could be reduced." }, "lighthouse-core/audits/bootup-time.js | description": { - "message": "Consider reducing the time spent parsing, compiling, and executing JS. You may find delivering smaller JS payloads helps with this. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/bootup)." + "message": "Consider reducing the time spent parsing, compiling, and executing JS. You may find delivering smaller JS payloads helps with this. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/bootup).", + "description": "Description of a Lighthouse audit that tells the user that they should reduce the amount of time spent executing javascript and one method of doing so. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation." }, "lighthouse-core/audits/bootup-time.js | columnTotal": { - "message": "Total" + "message": "Total", + "description": "Label for the total time column in a data table; entries will be the number of milliseconds spent executing per resource loaded by the page." }, "lighthouse-core/audits/bootup-time.js | columnScriptEval": { - "message": "Script Evaluation" + "message": "Script Evaluation", + "description": "Label for a time column in a data table; entries will be the number of milliseconds spent evaluating script for every script loaded by the page." }, "lighthouse-core/audits/bootup-time.js | columnScriptParse": { - "message": "Script Parse" + "message": "Script Parse", + "description": "Label for a time column in a data table; entries will be the number of milliseconds spent parsing script files for every script loaded by the page." }, "lighthouse-core/audits/bootup-time.js | chromeExtensionsWarning": { - "message": "Chrome extensions negatively affected this page's load performance. Try auditing the page in incognito mode or from a clean Chrome profile." + "message": "Chrome extensions negatively affected this page's load performance. Try auditing the page in incognito mode or from a clean Chrome profile.", + "description": "A message displayed in a Lighthouse audit result warning that Chrome extensions on the user's system substantially affected Lighthouse's measurements and instructs the user on how to run again without those extensions." }, "lighthouse-core/audits/byte-efficiency/efficient-animated-content.js | title": { - "message": "Use video formats for animated content" + "message": "Use video formats for animated content", + "description": "Imperative title of a Lighthouse audit that tells the user to use video formats rather than animated GIFs, which are wasteful. This is displayed in a list of audit titles that Lighthouse generates." }, "lighthouse-core/audits/byte-efficiency/efficient-animated-content.js | description": { - "message": "Large GIFs are inefficient for delivering animated content. Consider using MPEG4/WebM videos for animations and PNG/WebP for static images instead of GIF to save network bytes. [Learn more](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/replace-animated-gifs-with-video/)" + "message": "Large GIFs are inefficient for delivering animated content. Consider using MPEG4/WebM videos for animations and PNG/WebP for static images instead of GIF to save network bytes. [Learn more](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/replace-animated-gifs-with-video/)", + "description": "Description of a Lighthouse audit that tells the user *why* they should use video instead of GIF format for delivering animated content. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation." }, "lighthouse-core/audits/byte-efficiency/offscreen-images.js | title": { - "message": "Defer offscreen images" + "message": "Defer offscreen images", + "description": "Imperative title of a Lighthouse audit that tells the user to defer loading offscreen images. Offscreen images are images located outside of the visible browser viewport. As they are unseen by the user and slow down page load, they should be loaded later, closer to when the user is going to see them. This is displayed in a list of audit titles that Lighthouse generates." }, "lighthouse-core/audits/byte-efficiency/offscreen-images.js | description": { - "message": "Consider lazy-loading offscreen and hidden images after all critical resources have finished loading to lower time to interactive. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/offscreen-images)." + "message": "Consider lazy-loading offscreen and hidden images after all critical resources have finished loading to lower time to interactive. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/offscreen-images).", + "description": "Description of a Lighthouse audit that tells the user *why* they should defer loading offscreen images. Offscreen images are images located outside of the visible browser viewport. As they are unseen by the user and slow down page load, they should be loaded later, closer to when the user is going to see them. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation." }, "lighthouse-core/audits/byte-efficiency/render-blocking-resources.js | title": { - "message": "Eliminate render-blocking resources" + "message": "Eliminate render-blocking resources", + "description": "Imperative title of a Lighthouse audit that tells the user to reduce or remove network resources that block the initial render of the page. This is displayed in a list of audit titles that Lighthouse generates." }, "lighthouse-core/audits/byte-efficiency/render-blocking-resources.js | description": { - "message": "Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/blocking-resources)." + "message": "Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/blocking-resources).", + "description": "Description of a Lighthouse audit that tells the user *why* they should reduce or remove network resources that block the initial render of the page. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation." }, "lighthouse-core/audits/byte-efficiency/total-byte-weight.js | title": { - "message": "Avoids enormous network payloads" + "message": "Avoids enormous network payloads", + "description": "Title of a diagnostic audit that provides detail on large network resources required during page load. 'Payloads' is roughly equivalent to 'resources'. This descriptive title is shown to users when the amount is acceptable and no user action is required." }, "lighthouse-core/audits/byte-efficiency/total-byte-weight.js | failureTitle": { "message": "Avoid enormous network payloads", - "description": "Shown to users as the title of the audit when it is in a failing state." + "description": "Title of a diagnostic audit that provides detail on large network resources required during page load. 'Payloads' is roughly equivalent to 'resources'. This imperative title is shown to users when there is a significant amount of execution time that could be reduced." }, "lighthouse-core/audits/byte-efficiency/total-byte-weight.js | description": { - "message": "Large network payloads cost users real money and are highly correlated with long load times. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/network-payloads)." + "message": "Large network payloads cost users real money and are highly correlated with long load times. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/network-payloads).", + "description": "Description of a Lighthouse audit that tells the user *why* they should reduce the size of the network resources required by the page. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation." }, "lighthouse-core/audits/byte-efficiency/total-byte-weight.js | displayValue": { "message": "Total size was {totalBytes, number, bytes} KB", "description": "Used to summarize the total byte size of the page and all its network requests. The `{totalBytes}` placeholder will be replaced with the total byte sizes, shown in kilobytes (e.g. 142 KB)" }, "lighthouse-core/audits/byte-efficiency/unminified-css.js | title": { - "message": "Minify CSS" + "message": "Minify CSS", + "description": "Imperative title of a Lighthouse audit that tells the user to minify (remove whitespace) the page's CSS code. This is displayed in a list of audit titles that Lighthouse generates." }, "lighthouse-core/audits/byte-efficiency/unminified-css.js | description": { - "message": "Minifying CSS files can reduce network payload sizes. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/minify-css)." + "message": "Minifying CSS files can reduce network payload sizes. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/minify-css).", + "description": "Description of a Lighthouse audit that tells the user *why* they should minify (remove whitespace) the page's CSS code. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation." }, "lighthouse-core/audits/byte-efficiency/unminified-javascript.js | title": { - "message": "Minify JavaScript" + "message": "Minify JavaScript", + "description": "Imperative title of a Lighthouse audit that tells the user to minify the page’s JS code to reduce file size. This is displayed in a list of audit titles that Lighthouse generates." }, "lighthouse-core/audits/byte-efficiency/unminified-javascript.js | description": { - "message": "Minifying JavaScript files can reduce payload sizes and script parse time. [Learn more](https://developers.google.com/speed/docs/insights/MinifyResources)." + "message": "Minifying JavaScript files can reduce payload sizes and script parse time. [Learn more](https://developers.google.com/speed/docs/insights/MinifyResources).", + "description": "Description of a Lighthouse audit that tells the user *why* they should minify the page’s JS code to reduce file size. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation." }, "lighthouse-core/audits/byte-efficiency/unused-css-rules.js | title": { - "message": "Defer unused CSS" + "message": "Defer unused CSS", + "description": "Imperative title of a Lighthouse audit that tells the user to remove content from their CSS that isn’t needed immediately and instead load that content at a later time. This is displayed in a list of audit titles that Lighthouse generates." }, "lighthouse-core/audits/byte-efficiency/unused-css-rules.js | description": { - "message": "Remove unused rules from stylesheets to reduce unnecessary bytes consumed by network activity. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/unused-css)." + "message": "Remove unused rules from stylesheets to reduce unnecessary bytes consumed by network activity. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/unused-css).", + "description": "Description of a Lighthouse audit that tells the user *why* they should defer loading any content in CSS that isn’t needed at page load. This is displayed after a user expands the section to see more. No word length limits. 'Learn More' becomes link text to additional documentation." }, "lighthouse-core/audits/byte-efficiency/unused-javascript.js | title": { - "message": "Unused JavaScript" + "message": "Remove unused JavaScript", + "description": "Imperative title of a Lighthouse audit that tells the user to remove JavaScript that is never evaluated during page load. This is displayed in a list of audit titles that Lighthouse generates." }, "lighthouse-core/audits/byte-efficiency/unused-javascript.js | description": { - "message": "Remove unused JavaScript to reduce bytes consumed by network activity." + "message": "Remove unused JavaScript to reduce bytes consumed by network activity.", + "description": "Description of a Lighthouse audit that tells the user *why* they should remove JavaScript that is never needed/evaluated by the browser. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation." }, "lighthouse-core/audits/byte-efficiency/uses-long-cache-ttl.js | title": { - "message": "Uses efficient cache policy on static assets" + "message": "Uses efficient cache policy on static assets", + "description": "Title of a diagnostic audit that provides detail on the cache policy applies to the page's static assets. Cache refers to browser disk cache, which keeps old versions of network resources around for future use. This is displayed in a list of audit titles that Lighthouse generates." }, "lighthouse-core/audits/byte-efficiency/uses-long-cache-ttl.js | failureTitle": { "message": "Serve static assets with an efficient cache policy", - "description": "Shown to users as the title of the audit when it is in a failing state." + "description": "Title of a diagnostic audit that provides details on the any page resources that could have been served with more efficient cache policies. Cache refers to browser disk cache, which keeps old versions of network resources around for future use. This imperative title is shown to users when there is a significant amount of assets served with poor cache policies." }, "lighthouse-core/audits/byte-efficiency/uses-long-cache-ttl.js | description": { - "message": "A long cache lifetime can speed up repeat visits to your page. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/cache-policy)." + "message": "A long cache lifetime can speed up repeat visits to your page. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/cache-policy).", + "description": "Description of a Lighthouse audit that tells the user *why* they need to adopt a long cache lifetime policy. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation." }, "lighthouse-core/audits/byte-efficiency/uses-long-cache-ttl.js | displayValue": { - "message": "{itemCount, plural,\n =1 {1 resource found}\n other {# resources found}\n }" + "message": "{itemCount, plural,\n =1 {1 resource found}\n other {# resources found}\n }", + "description": "[ICU Syntax] Label for the audit identifying network resources with inefficient cache values. Clicking this will expand the audit to show the resources." }, "lighthouse-core/audits/byte-efficiency/uses-optimized-images.js | title": { - "message": "Efficiently encode images" + "message": "Efficiently encode images", + "description": "Imperative title of a Lighthouse audit that tells the user to encode images with optimization (better compression). This is displayed in a list of audit titles that Lighthouse generates." }, "lighthouse-core/audits/byte-efficiency/uses-optimized-images.js | description": { - "message": "Optimized images load faster and consume less cellular data. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/optimize-images)." + "message": "Optimized images load faster and consume less cellular data. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/optimize-images).", + "description": "Description of a Lighthouse audit that tells the user *why* they need to efficiently encode images. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation." }, "lighthouse-core/audits/byte-efficiency/uses-responsive-images.js | title": { - "message": "Properly size images" + "message": "Properly size images", + "description": "Imperative title of a Lighthouse audit that tells the user to resize images to match the display dimensions. This is displayed in a list of audit titles that Lighthouse generates." }, "lighthouse-core/audits/byte-efficiency/uses-responsive-images.js | description": { - "message": "Serve images that are appropriately-sized to save cellular data and improve load time. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/oversized-images)." + "message": "Serve images that are appropriately-sized to save cellular data and improve load time. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/oversized-images).", + "description": "Description of a Lighthouse audit that tells the user *why* they need to serve appropriately sized images. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation." }, "lighthouse-core/audits/byte-efficiency/uses-text-compression.js | title": { - "message": "Enable text compression" + "message": "Enable text compression", + "description": "Imperative title of a Lighthouse audit that tells the user to enable text compression (like gzip) in order to enhance the performance of a page. This is displayed in a list of audit titles that Lighthouse generates." }, "lighthouse-core/audits/byte-efficiency/uses-text-compression.js | description": { - "message": "Text-based responses should be served with compression (gzip, deflate or brotli) to minimize total network bytes. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/text-compression)." + "message": "Text-based resources should be served with compression (gzip, deflate or brotli) to minimize total network bytes. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/text-compression).", + "description": "Description of a Lighthouse audit that tells the user *why* their text-based resources should be served with compression (like gzip). This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation." }, "lighthouse-core/audits/byte-efficiency/uses-webp-images.js | title": { - "message": "Serve images in next-gen formats" + "message": "Serve images in next-gen formats", + "description": "Imperative title of a Lighthouse audit that tells the user to serve images in newer and more efficient image formats in order to enhance the performance of a page. A non-modern image format was designed 20+ years ago. This is displayed in a list of audit titles that Lighthouse generates." }, "lighthouse-core/audits/byte-efficiency/uses-webp-images.js | description": { - "message": "Image formats like JPEG 2000, JPEG XR, and WebP often provide better compression than PNG or JPEG, which means faster downloads and less data consumption. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/webp)." + "message": "Image formats like JPEG 2000, JPEG XR, and WebP often provide better compression than PNG or JPEG, which means faster downloads and less data consumption. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/webp).", + "description": "Description of a Lighthouse audit that tells the user *why* they should use newer and more efficient image formats. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation." }, "lighthouse-core/audits/critical-request-chains.js | title": { - "message": "Minimize Critical Request Chains" + "message": "Minimize Critical Requests Depth", + "description": "Imperative title of a Lighthouse audit that tells the user to reduce the depth of critical network requests to enhance initial load of a page. Critical request chains are series of dependent network requests that are important for page rendering. For example, here's a 4-request-deep chain: The biglogo.jpg image is required, but is requested via the styles.css style code, which is requested by the initialize.js javascript, which is requested by the page's HTML. This is displayed in a list of audit titles that Lighthouse generates." }, "lighthouse-core/audits/critical-request-chains.js | description": { - "message": "The Critical Request Chains below show you what resources are issued with a high priority. Consider reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources to improve page load. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/critical-request-chains)." + "message": "The Critical Request Chains below show you what resources are issued with a high priority. Consider reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources to improve page load. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/critical-request-chains).", + "description": "Description of a Lighthouse audit that tells the user *why* they should reduce the depth of critical network requests to enhance initial load of a page . This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation." }, "lighthouse-core/audits/critical-request-chains.js | displayValue": { - "message": "{itemCount, plural,\n =1 {1 chain found}\n other {# chains found}\n }" + "message": "{itemCount, plural,\n =1 {1 chain found}\n other {# chains found}\n }", + "description": "[ICU Syntax] Label for an audit identifying the number of sequences of dependent network requests used to load the page." }, "lighthouse-core/audits/dobetterweb/dom-size.js | title": { - "message": "Avoids an excessive DOM size" + "message": "Avoids an excessive DOM size", + "description": "Title of a diagnostic audit that provides detail on the size of the web page's DOM. The size of a DOM is characterized by the total number of DOM nodes and greatest DOM depth. This descriptive title is shown to users when the amount is acceptable and no user action is required." }, "lighthouse-core/audits/dobetterweb/dom-size.js | failureTitle": { "message": "Avoid an excessive DOM size", - "description": "Shown to users as the title of the audit when it is in a failing state." + "description": "Title of a diagnostic audit that provides detail on the size of the web page's DOM. The size of a DOM is characterized by the total number of DOM nodes and greatest DOM depth. This imperative title is shown to users when there is a significant amount of execution time that could be reduced." }, "lighthouse-core/audits/dobetterweb/dom-size.js | description": { - "message": "Browser engineers recommend pages contain fewer than ~1,500 DOM nodes. The sweet spot is a tree depth < 32 elements and fewer than 60 children/parent element. A large DOM can increase memory usage, cause longer [style calculations](https://developers.google.com/web/fundamentals/performance/rendering/reduce-the-scope-and-complexity-of-style-calculations), and produce costly [layout reflows](https://developers.google.com/speed/articles/reflow). [Learn more](https://developers.google.com/web/tools/lighthouse/audits/dom-size)." + "message": "Browser engineers recommend pages contain fewer than ~1,500 DOM nodes. The sweet spot is a tree depth < 32 elements and fewer than 60 children/parent element. A large DOM can increase memory usage, cause longer [style calculations](https://developers.google.com/web/fundamentals/performance/rendering/reduce-the-scope-and-complexity-of-style-calculations), and produce costly [layout reflows](https://developers.google.com/speed/articles/reflow). [Learn more](https://developers.google.com/web/tools/lighthouse/audits/dom-size).", + "description": "Description of a Lighthouse audit that tells the user *why* they should reduce the size of the web page's DOM. The size of a DOM is characterized by the total number of DOM nodes and greatest DOM depth. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation." }, "lighthouse-core/audits/dobetterweb/dom-size.js | columnDOMNodes": { - "message": "Total DOM Nodes" + "message": "Total DOM Nodes", + "description": "Label for the total number of DOM nodes found in the page." }, "lighthouse-core/audits/dobetterweb/dom-size.js | columnDOMDepth": { - "message": "Maximum DOM Depth" + "message": "Maximum DOM Depth", + "description": "Label for the numeric value of the maximum depth in the page's DOM tree." }, "lighthouse-core/audits/dobetterweb/dom-size.js | columnDOMWidth": { - "message": "Maximum Children" + "message": "Maximum Children", + "description": "Label for the value of the maximum number of children any DOM node in the page has." }, "lighthouse-core/audits/dobetterweb/dom-size.js | displayValue": { - "message": "{itemCount, plural,\n =1 {1 node}\n other {# nodes}\n }" + "message": "{itemCount, plural,\n =1 {1 node}\n other {# nodes}\n }", + "description": "[ICU Syntax] Label for an audit identifying the number of DOM nodes found in the page." }, "lighthouse-core/audits/font-display.js | title": { - "message": "All text remains visible during webfont loads" + "message": "All text remains visible during webfont loads", + "description": "Title of a diagnostic audit that provides detail on if all the text on a webpage was visible while the page was loading its webfonts. This descriptive title is shown to users when the amount is acceptable and no user action is required." }, "lighthouse-core/audits/font-display.js | failureTitle": { "message": "Ensure text remains visible during webfont load", - "description": "Shown to users as the title of the audit when it is in a failing state." + "description": "Title of a diagnostic audit that provides detail on the load of the page's webfonts. Often the text is invisible for seconds before the webfont resource is loaded. This imperative title is shown to users when there is a significant amount of execution time that could be reduced." }, "lighthouse-core/audits/font-display.js | description": { - "message": "Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading. [Learn more](https://developers.google.com/web/updates/2016/02/font-display)." + "message": "Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading. [Learn more](https://developers.google.com/web/updates/2016/02/font-display).", + "description": "Description of a Lighthouse audit that tells the user *why* they should use the font-display CSS feature. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation." }, "lighthouse-core/audits/mainthread-work-breakdown.js | title": { - "message": "Minimizes main thread work" + "message": "Minimizes main thread work", + "description": "Title of a diagnostic audit that provides detail on the main thread work the browser did to load the page. This descriptive title is shown to users when the amount is acceptable and no user action is required." }, "lighthouse-core/audits/mainthread-work-breakdown.js | failureTitle": { "message": "Minimize main thread work", - "description": "Shown to users as the title of the audit when it is in a failing state." + "description": "Title of a diagnostic audit that provides detail on the main thread work the browser did to load the page. This imperative title is shown to users when there is a significant amount of execution time that could be reduced." }, "lighthouse-core/audits/mainthread-work-breakdown.js | description": { - "message": "Consider reducing the time spent parsing, compiling and executing JS. You may find delivering smaller JS payloads helps with this." + "message": "Consider reducing the time spent parsing, compiling and executing JS. You may find delivering smaller JS payloads helps with this.", + "description": "Description of a Lighthouse audit that tells the user *why* they should reduce JS execution times. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation." }, "lighthouse-core/audits/mainthread-work-breakdown.js | columnCategory": { - "message": "Category" + "message": "Category", + "description": "Label for the Main Thread Category column in data tables, rows will have a main thread Category and main thread Task Name." }, "lighthouse-core/audits/metrics/estimated-input-latency.js | title": { - "message": "Estimated Input Latency" + "message": "Estimated Input Latency", + "description": "The name of the metric that marks the estimated time between the page receiving input (a user clicking, tapping, or typing) and the page responding. Shown to users as the label for the numeric metric value. Ideally fits within a ~40 character limit." }, "lighthouse-core/audits/metrics/estimated-input-latency.js | description": { - "message": "The score above is an estimate of how long your app takes to respond to user input, in milliseconds, during the busiest 5s window of page load. If your latency is higher than 50 ms, users may perceive your app as laggy. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/estimated-input-latency)." + "message": "The score above is an estimate of how long your app takes to respond to user input, in milliseconds, during the busiest 5s window of page load. If your latency is higher than 50 ms, users may perceive your app as laggy. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/estimated-input-latency).", + "description": "Description of the Estimated Input Latency metric that estimates the amount of time, in milliseconds, that the app takes to respond to user input. This description is displayed within a tooltip when the user hovers on the metric name to see more. No character length limits. 'Learn More' becomes link text to additional documentation." }, "lighthouse-core/audits/metrics/first-contentful-paint.js | title": { - "message": "First Contentful Paint" + "message": "First Contentful Paint", + "description": "The name of the metric that marks the time at which the first text or image is painted by the browser. Shown to users as the label for the numeric metric value. Ideally fits within a ~40 character limit." }, "lighthouse-core/audits/metrics/first-contentful-paint.js | description": { - "message": "First contentful paint marks the time at which the first text/image is painted. [Learn more](https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics#first_paint_and_first_contentful_paint)." + "message": "First contentful paint marks the time at which the first text or image is painted. [Learn more](https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics#first_paint_and_first_contentful_paint).", + "description": "Description of the First Contentful Paint (FCP) metric, which marks the time at which the first text or image is painted by the browser. This is displayed within a tooltip when the user hovers on the metric name to see more. No character length limits. 'Learn More' becomes link text to additional documentation." }, "lighthouse-core/audits/metrics/first-cpu-idle.js | title": { - "message": "First CPU Idle" + "message": "First CPU Idle", + "description": "The name of the metric that marks when the page has displayed content and the CPU is not busy executing the page's scripts. Shown to users as the label for the numeric metric value. Ideally fits within a ~40 character limit." }, "lighthouse-core/audits/metrics/first-cpu-idle.js | description": { - "message": "First CPU Idle marks the first time at which the page's main thread is quiet enough to handle input. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/first-interactive)." + "message": "First CPU Idle marks the first time at which the page's main thread is quiet enough to handle input. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/first-interactive).", + "description": "Description of the First CPU Idle metric, which marks the time at which the page has displayed content and the CPU is not busy executing the page's scripts. This is displayed within a tooltip when the user hovers on the metric name to see more. No character length limits. 'Learn More' becomes link text to additional documentation." }, "lighthouse-core/audits/metrics/first-meaningful-paint.js | title": { - "message": "First Meaningful Paint" + "message": "First Meaningful Paint", + "description": "The name of the metric that marks the time at which a majority of the content has been painted by the browser. Shown to users as the label for the numeric metric value. Ideally fits within a ~40 character limit." }, "lighthouse-core/audits/metrics/first-meaningful-paint.js | description": { - "message": "First Meaningful Paint measures when the primary content of a page is visible. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/first-meaningful-paint)." + "message": "First Meaningful Paint measures when the primary content of a page is visible. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/first-meaningful-paint).", + "description": "Description of the First Meaningful Paint (FMP) metric, which marks the time at which a majority of the content has been painted by the browser. This is displayed within a tooltip when the user hovers on the metric name to see more. No character length limits. 'Learn More' becomes link text to additional documentation." }, "lighthouse-core/audits/metrics/interactive.js | title": { - "message": "Time to Interactive" + "message": "Time to Interactive", + "description": "The name of the metric that marks the time at which the page is fully loaded and is able to quickly respond to user input (clicks, taps, and keypresses feel responsive). Shown to users as the label for the numeric metric value. Ideally fits within a ~40 character limit." }, "lighthouse-core/audits/metrics/interactive.js | description": { - "message": "Interactive marks the time at which the page is fully interactive. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/consistently-interactive)." + "message": "Interactive marks the time at which the page is fully interactive. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/consistently-interactive).", + "description": "Description of the Time to Interactive (TTI) metric, which evaluates when a page has completed its primary network activity and main thread work. This is displayed within a tooltip when the user hovers on the metric name to see more. No character length limits. 'Learn More' becomes link text to additional documentation." }, "lighthouse-core/audits/metrics/speed-index.js | title": { - "message": "Speed Index" + "message": "Speed Index", + "description": "The name of the metric that summarizes how quickly the page looked visually complete. The name of this metric is largely abstract and can be loosely translated. Shown to users as the label for the numeric metric value. Ideally fits within a ~40 character limit." }, "lighthouse-core/audits/metrics/speed-index.js | description": { - "message": "Speed Index shows how quickly the contents of a page are visibly populated. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/speed-index)." + "message": "Speed Index shows how quickly the contents of a page are visibly populated. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/speed-index).", + "description": "Description of the Speed Index metric, which summarizes how quickly the page looked visually complete. This is displayed within a tooltip when the user hovers on the metric name to see more. No character length limits. 'Learn More' becomes link text to additional documentation." }, "lighthouse-core/audits/redirects.js | title": { - "message": "Avoid multiple page redirects" + "message": "Avoid multiple page redirects", + "description": "Imperative title of a Lighthouse audit that tells the user to eliminate the redirects taken through multiple URLs to load the page. This is shown in a list of audits that Lighthouse generates." }, "lighthouse-core/audits/redirects.js | description": { - "message": "Redirects introduce additional delays before the page can be loaded. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/redirects)." + "message": "Redirects introduce additional delays before the page can be loaded. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/redirects).", + "description": "Description of a Lighthouse audit that tells users why they should reduce the number of server-side redirects on their page. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation." }, "lighthouse-core/audits/time-to-first-byte.js | title": { - "message": "Server response times are low (TTFB)" + "message": "Server response times are low (TTFB)", + "description": "Title of a diagnostic audit that provides detail on how long it took from starting a request to when the server started responding. This descriptive title is shown to users when the amount is acceptable and no user action is required." }, "lighthouse-core/audits/time-to-first-byte.js | failureTitle": { "message": "Reduce server response times (TTFB)", - "description": "Shown to users as the title of the audit when it is in a failing state." + "description": "Title of a diagnostic audit that provides detail on how long it took from starting a request to when the server started responding. This imperative title is shown to users when there is a significant amount of execution time that could be reduced." }, "lighthouse-core/audits/time-to-first-byte.js | description": { - "message": "Time To First Byte identifies the time at which your server sends a response. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/ttfb)." + "message": "Time To First Byte identifies the time at which your server sends a response. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/ttfb).", + "description": "Description of a Lighthouse audit that tells the user *why* they should reduce the amount of time it takes their server to start responding to requests. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation." }, "lighthouse-core/audits/time-to-first-byte.js | displayValue": { "message": "Root document took {timeInMs, number, milliseconds} ms", "description": "Used to summarize the total Time to First Byte duration for the primary HTML response. The `{timeInMs}` placeholder will be replaced with the time duration, shown in milliseconds (e.g. 210 ms)" }, "lighthouse-core/audits/user-timings.js | title": { - "message": "User Timing marks and measures" + "message": "User Timing marks and measures", + "description": "Descriptive title of a diagnostic audit that provides details on any timestamps generated by the page. User Timing refers to the 'User Timing API', which enables a website to record specific times as 'marks', or spans of time as 'measures'." }, "lighthouse-core/audits/user-timings.js | description": { - "message": "Consider instrumenting your app with the User Timing API to create custom, real-world measurements of key user experiences. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/user-timing)." + "message": "Consider instrumenting your app with the User Timing API to create custom, real-world measurements of key user experiences. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/user-timing).", + "description": "Description of a Lighthouse audit that tells the user they may want to use the User Timing API to help measure the performance of aspects of their page load and interaction. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation." }, "lighthouse-core/audits/user-timings.js | displayValue": { - "message": "{itemCount, plural,\n =1 {1 user timing}\n other {# user timings}\n }" + "message": "{itemCount, plural,\n =1 {1 user timing}\n other {# user timings}\n }", + "description": "[ICU Syntax] Label for an audit identifying the number of User Timing timestamps present in the page." }, "lighthouse-core/audits/uses-rel-preconnect.js | title": { - "message": "Avoid multiple, costly round trips to any origin" + "message": "Preconnect to required origins", + "description": "Imperative title of a Lighthouse audit that tells the user to connect early to internet domains that will be used to load page resources. Origin is the correct term, however 'domain name' could be used if neccsesary. This is displayed in a list of audit titles that Lighthouse generates." }, "lighthouse-core/audits/uses-rel-preconnect.js | description": { - "message": "Consider adding preconnect or dns-prefetch resource hints to establish early connections to important third-party origins. [Learn more](https://developers.google.com/web/fundamentals/performance/resource-prioritization#preconnect)." + "message": "Consider adding preconnect or dns-prefetch resource hints to establish early connections to important third-party origins. [Learn more](https://developers.google.com/web/fundamentals/performance/resource-prioritization#preconnect).", + "description": "Description of a Lighthouse audit that tells the user how to connect early to third-party domains that will be used to load page resources. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation." }, "lighthouse-core/audits/uses-rel-preload.js | title": { - "message": "Preload key requests" + "message": "Preload key requests", + "description": "Imperative title of a Lighthouse audit that tells the user to use to initiate important network requests earlier during page load. This is displayed in a list of audit titles that Lighthouse generates." }, "lighthouse-core/audits/uses-rel-preload.js | description": { - "message": "Consider using to prioritize fetching late-discovered resources sooner. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/preload)." + "message": "Consider using to prioritize fetching resources that are currently requested later in page load. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/preload).", + "description": "Description of a Lighthouse audit that tells the user *why* they should preload important network requests. The associated network requests are started halfway through pageload (or later) but should be started at the beginning. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation." }, "lighthouse-core/config/default-config.js | performanceCategoryTitle": { - "message": "Performance" + "message": "Performance", + "description": "Title of the Performance category of audits. Equivalent to 'Web performance', this term is inclusive of all web page speed and loading optimization topics. Also used as a label of a score gauge; try to limit to 20 characters." }, "lighthouse-core/config/default-config.js | metricGroupTitle": { - "message": "Metrics" + "message": "Metrics", + "description": "Title of the speed metrics section of the Performance category. Within this section are various speed metrics which quantify the pageload performance into values presented in seconds and milliseconds." }, "lighthouse-core/config/default-config.js | loadOpportunitiesGroupTitle": { - "message": "Opportunities" + "message": "Opportunities", + "description": "Title of the opportunity section of the Performance category. Within this section are audits with imperative titles that suggest actions the user can take to improve the loading performance of their web page. 'Suggestion'/'Optimization'/'Recommendation' are reasonable synonyms for 'opportunity' in this case." }, "lighthouse-core/config/default-config.js | loadOpportunitiesGroupDescription": { - "message": "These are opportunities to speed up your application by optimizing the following resources." + "message": "These optimizations can speed up your page load.", + "description": "Description of the opportunity section of the Performance category. 'Optimizations' could also be 'recommendations' or 'suggestions'. Within this section are audits with imperative titles that suggest actions the user can take to improve the loading performance of their web page." }, "lighthouse-core/config/default-config.js | diagnosticsGroupTitle": { - "message": "Diagnostics" + "message": "Diagnostics", + "description": "Title of the diagnostics section of the Performance category. Within this section are audits with non-imperative titles that provide more detail on the page's page load performance characteristics. Whereas the 'Opportunities' suggest an action along with expected time savings, diagnostics do not. Within this section, the user may read the details and deduce additional actions they could take." }, "lighthouse-core/config/default-config.js | diagnosticsGroupDescription": { - "message": "More information about the performance of your application." + "message": "More information about the performance of your application.", + "description": "Description of the diagnostics section of the Performance category. Within this section are audits with non-imperative titles that provide more detail on the page's page load performance characteristics. Whereas the 'Opportunities' suggest an action along with expected time savings, diagnostics do not. Within this section, the user may read the details and deduce additional actions they could take." }, "lighthouse-core/lib/i18n.js | ms": { "message": "{timeInMs, number, milliseconds} ms", @@ -269,11 +345,11 @@ }, "lighthouse-core/lib/i18n.js | displayValueByteSavings": { "message": "Potential savings of {wastedBytes, number, bytes} KB", - "description": "Used to show how many bytes the user could reduce their page by if they implemented the suggestions. The `{wastedBytes}` placeholder will be replaced with the number of bytes, shown in kilobytes (e.g. 148 KB)" + "description": "Label shown per-audit to show how many bytes smaller the page could be if the user implemented the suggestions. The `{wastedBytes}` placeholder will be replaced with the number of bytes, shown in kilobytes (e.g. 148 KB)" }, "lighthouse-core/lib/i18n.js | displayValueMsSavings": { "message": "Potential savings of {wastedMs, number, milliseconds} ms", - "description": "Used to show how many milliseconds the user could reduce page load by if they implemented the suggestions. The `{wastedMs}` placeholder will be replaced with the time duration, shown in milliseconds (e.g. 140 ms)" + "description": "Label shown per-audit to show how many milliseconds faster the page load could be if the user implemented the suggestions. The `{wastedMs}` placeholder will be replaced with the time duration, shown in milliseconds (e.g. 140 ms)" }, "lighthouse-core/lib/i18n.js | columnURL": { "message": "URL", @@ -297,42 +373,54 @@ }, "lighthouse-core/lib/i18n.js | columnTimeSpent": { "message": "Time Spent", - "description": "Label for the time spent column in data tables, entries will be the number of milliseconds the spent during a particular activity" + "description": "Label for the time spent column in data tables, entries will be the number of milliseconds spent during a particular activity" }, "lighthouse-core/report/html/renderer/util.js | varianceDisclaimer": { - "message": "Values are estimated and may vary." + "message": "Values are estimated and may vary.", + "description": "Disclaimer shown to users below the metric values (First Contentful Paint, Time to Interactive, etc) to warn them that the numbers they see will likely change slightly the next time they run Lighthouse." }, "lighthouse-core/report/html/renderer/util.js | opportunityResourceColumnLabel": { - "message": "Resource to optimize" + "message": "Opportunity", + "description": "Column heading label for the listing of opportunity audits. Each audit title represents an opportunity. There are only 2 columns, so no strict character limit." }, "lighthouse-core/report/html/renderer/util.js | opportunitySavingsColumnLabel": { - "message": "Estimated Savings" + "message": "Estimated Savings", + "description": "Column heading label for the estimated page load savings of opportunity audits. Estimated Savings is the total amount of time (in seconds) that Lighthouse computed could be reduced from the total page load time, if the suggested action is taken. There are only 2 columns, so no strict character limit." }, "lighthouse-core/report/html/renderer/util.js | errorMissingAuditInfo": { - "message": "Report error: no audit information" + "message": "Report error: no audit information", + "description": "An error string displayed next to a particular audit when it has errored, but not provided any specific error message." }, "lighthouse-core/report/html/renderer/util.js | errorLabel": { - "message": "Error!" + "message": "Error!", + "description": "A label, shown next to an audit title or metric title, indicating that there was an error computing it. The user can hover on the label to reveal a tooltip with the extended error message. Translation should be short (< 20 characters)." }, "lighthouse-core/report/html/renderer/util.js | warningHeader": { - "message": "Warnings: " + "message": "Warnings: ", + "description": "This label is shown above a bulleted list of warnings. It is shown directly below an audit that produced warnings. Warnings describe situations the user should be aware of, as Lighthouse was unable to complete all the work required on this audit. For example, The 'Unable to decode image (biglogo.jpg)' warning may show up below an image encoding audit." }, "lighthouse-core/report/html/renderer/util.js | auditGroupExpandTooltip": { - "message": "Show audits" + "message": "Show audits", + "description": "The tooltip text on an expandable chevron icon. Clicking the icon expands a section to reveal a list of audit results that was hidden by default." }, "lighthouse-core/report/html/renderer/util.js | passedAuditsGroupTitle": { - "message": "Passed audits" + "message": "Passed audits", + "description": "Section heading shown above a list of audits that are passing. 'Passed' here refers to a passing grade. This section is collapsed by default, as the user should be focusing on the failed audits instead. Users can click this heading to reveal the list." }, "lighthouse-core/report/html/renderer/util.js | notApplicableAuditsGroupTitle": { - "message": "Not applicable" + "message": "Not applicable", + "description": "Section heading shown above a list of audits that do not apply to the page. For example, if an audit is 'Are images optimized?', but the page has no images on it, the audit will be marked as not applicable. This is neither passing or failing. This section is collapsed by default, as the user should be focusing on the failed audits instead. Users can click this heading to reveal the list." }, "lighthouse-core/report/html/renderer/util.js | manualAuditsGroupTitle": { - "message": "Additional items to manually check" + "message": "Additional items to manually check", + "description": "Section heading shown above a list of audits that were not computed by Lighthouse. They serve as a list of suggestions for the user to go and manually check. For example, Lighthouse can't automate testing cross-browser compatibility, so that is listed within this section, so the user is reminded to test it themselves. This section is collapsed by default, as the user should be focusing on the failed audits instead. Users can click this heading to reveal the list." }, "lighthouse-core/report/html/renderer/util.js | toplevelWarningsMessage": { - "message": "There were issues affecting this run of Lighthouse:" + "message": "There were issues affecting this run of Lighthouse:", + "description": "Label shown preceding any important warnings that may have invalidated the entire report. For example, if the user has Chrome extensions installed, they may add enough performance overhead that Lighthouse's performance metrics are unreliable. If shown, this will be displayed at the top of the report UI." }, "lighthouse-core/report/html/renderer/util.js | scorescaleLabel": { - "message": "Score scale:" + "message": "Score scale:", + "description": "Label preceding a pictorial explanation of the scoring scale: 0-50 is red (bad), 50-90 is orange (ok), 90-100 is green (good). These colors are used throughout the report to provide context for how good/bad a particular result is." } } diff --git a/lighthouse-core/report/html/renderer/util.js b/lighthouse-core/report/html/renderer/util.js index 0bdc243906d7..cb1f8f9839ea 100644 --- a/lighthouse-core/report/html/renderer/util.js +++ b/lighthouse-core/report/html/renderer/util.js @@ -379,19 +379,31 @@ class Util { } Util.UIStrings = { + /** Disclaimer shown to users below the metric values (First Contentful Paint, Time to Interactive, etc) to warn them that the numbers they see will likely change slightly the next time they run Lighthouse. */ varianceDisclaimer: 'Values are estimated and may vary.', - opportunityResourceColumnLabel: 'Resource to optimize', + /** Column heading label for the listing of opportunity audits. Each audit title represents an opportunity. There are only 2 columns, so no strict character limit. */ + opportunityResourceColumnLabel: 'Opportunity', + /** Column heading label for the estimated page load savings of opportunity audits. Estimated Savings is the total amount of time (in seconds) that Lighthouse computed could be reduced from the total page load time, if the suggested action is taken. There are only 2 columns, so no strict character limit. */ opportunitySavingsColumnLabel: 'Estimated Savings', + /** An error string displayed next to a particular audit when it has errored, but not provided any specific error message. */ errorMissingAuditInfo: 'Report error: no audit information', + /** A label, shown next to an audit title or metric title, indicating that there was an error computing it. The user can hover on the label to reveal a tooltip with the extended error message. Translation should be short (< 20 characters). */ errorLabel: 'Error!', + /** This label is shown above a bulleted list of warnings. It is shown directly below an audit that produced warnings. Warnings describe situations the user should be aware of, as Lighthouse was unable to complete all the work required on this audit. For example, The 'Unable to decode image (biglogo.jpg)' warning may show up below an image encoding audit. */ warningHeader: 'Warnings: ', + /** The tooltip text on an expandable chevron icon. Clicking the icon expands a section to reveal a list of audit results that was hidden by default. */ auditGroupExpandTooltip: 'Show audits', + /** Section heading shown above a list of audits that are passing. 'Passed' here refers to a passing grade. This section is collapsed by default, as the user should be focusing on the failed audits instead. Users can click this heading to reveal the list. */ passedAuditsGroupTitle: 'Passed audits', + /** Section heading shown above a list of audits that do not apply to the page. For example, if an audit is 'Are images optimized?', but the page has no images on it, the audit will be marked as not applicable. This is neither passing or failing. This section is collapsed by default, as the user should be focusing on the failed audits instead. Users can click this heading to reveal the list. */ notApplicableAuditsGroupTitle: 'Not applicable', + /** Section heading shown above a list of audits that were not computed by Lighthouse. They serve as a list of suggestions for the user to go and manually check. For example, Lighthouse can't automate testing cross-browser compatibility, so that is listed within this section, so the user is reminded to test it themselves. This section is collapsed by default, as the user should be focusing on the failed audits instead. Users can click this heading to reveal the list. */ manualAuditsGroupTitle: 'Additional items to manually check', + /** Label shown preceding any important warnings that may have invalidated the entire report. For example, if the user has Chrome extensions installed, they may add enough performance overhead that Lighthouse's performance metrics are unreliable. If shown, this will be displayed at the top of the report UI. */ toplevelWarningsMessage: 'There were issues affecting this run of Lighthouse:', + /** Label preceding a pictorial explanation of the scoring scale: 0-50 is red (bad), 50-90 is orange (ok), 90-100 is green (good). These colors are used throughout the report to provide context for how good/bad a particular result is. */ scorescaleLabel: 'Score scale:', }; diff --git a/lighthouse-core/scripts/i18n/collect-strings.js b/lighthouse-core/scripts/i18n/collect-strings.js index 719ca6bd43fd..4778feb16287 100644 --- a/lighthouse-core/scripts/i18n/collect-strings.js +++ b/lighthouse-core/scripts/i18n/collect-strings.js @@ -30,10 +30,6 @@ const ignoredPathComponents = [ '-renderer.js', ]; -const defaultDescriptions = { - failureTitle: 'Shown to users as the title of the audit when it is in a failing state.', -}; - // @ts-ignore - @types/esprima lacks all of these function computeDescription(ast, property, startRange) { const endRange = property.range[0]; @@ -43,7 +39,7 @@ function computeDescription(ast, property, startRange) { return comment.value.replace('*', '').trim(); } - return defaultDescriptions[property.key.name]; + return ''; } /** diff --git a/lighthouse-core/test/results/sample_v2.json b/lighthouse-core/test/results/sample_v2.json index 1038e8b5c829..2259651ed881 100644 --- a/lighthouse-core/test/results/sample_v2.json +++ b/lighthouse-core/test/results/sample_v2.json @@ -75,7 +75,7 @@ "first-contentful-paint": { "id": "first-contentful-paint", "title": "First Contentful Paint", - "description": "First contentful paint marks the time at which the first text/image is painted. [Learn more](https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics#first_paint_and_first_contentful_paint).", + "description": "First contentful paint marks the time at which the first text or image is painted. [Learn more](https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics#first_paint_and_first_contentful_paint).", "score": 0.51, "scoreDisplayMode": "numeric", "rawValue": 3969.135, @@ -278,7 +278,7 @@ }, "critical-request-chains": { "id": "critical-request-chains", - "title": "Minimize Critical Request Chains", + "title": "Minimize Critical Requests Depth", "description": "The Critical Request Chains below show you what resources are issued with a high priority. Consider reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources to improve page load. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/critical-request-chains).", "score": null, "scoreDisplayMode": "informative", @@ -687,7 +687,7 @@ }, "bootup-time": { "id": "bootup-time", - "title": "JavaScript boot-up time", + "title": "JavaScript execution time", "description": "Consider reducing the time spent parsing, compiling, and executing JS. You may find delivering smaller JS payloads helps with this. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/bootup).", "score": 0.92, "scoreDisplayMode": "numeric", @@ -748,7 +748,7 @@ "uses-rel-preload": { "id": "uses-rel-preload", "title": "Preload key requests", - "description": "Consider using to prioritize fetching late-discovered resources sooner. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/preload).", + "description": "Consider using to prioritize fetching resources that are currently requested later in page load. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/preload).", "score": 1, "scoreDisplayMode": "numeric", "rawValue": 0, @@ -762,7 +762,7 @@ }, "uses-rel-preconnect": { "id": "uses-rel-preconnect", - "title": "Avoid multiple, costly round trips to any origin", + "title": "Preconnect to required origins", "description": "Consider adding preconnect or dns-prefetch resource hints to establish early connections to important third-party origins. [Learn more](https://developers.google.com/web/fundamentals/performance/resource-prioritization#preconnect).", "score": 1, "scoreDisplayMode": "numeric", @@ -2064,7 +2064,7 @@ "uses-text-compression": { "id": "uses-text-compression", "title": "Enable text compression", - "description": "Text-based responses should be served with compression (gzip, deflate or brotli) to minimize total network bytes. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/text-compression).", + "description": "Text-based resources should be served with compression (gzip, deflate or brotli) to minimize total network bytes. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/text-compression).", "score": 0.88, "scoreDisplayMode": "numeric", "rawValue": 150, @@ -3322,7 +3322,7 @@ }, "load-opportunities": { "title": "Opportunities", - "description": "These are opportunities to speed up your application by optimizing the following resources." + "description": "These optimizations can speed up your page load." }, "diagnostics": { "title": "Diagnostics", @@ -3376,7 +3376,7 @@ "i18n": { "rendererFormattedStrings": { "varianceDisclaimer": "Values are estimated and may vary.", - "opportunityResourceColumnLabel": "Resource to optimize", + "opportunityResourceColumnLabel": "Opportunity", "opportunitySavingsColumnLabel": "Estimated Savings", "errorMissingAuditInfo": "Report error: no audit information", "errorLabel": "Error!",