lighthouse 9.5.0-dev.20220720 → 9.5.0-dev.20220723

package/lighthouse-core/audits/accessibility/valid-lang.js

@@ -22,7 +22,7 @@ const UIStrings = {
   /** Description of a Lighthouse audit that tells the user *why* they should try to pass. 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: 'Specifying a valid [BCP 47 language](https://www.w3.org/International/questions/qa-choosing-language-tags#question) ' +
       'on elements helps ensure that text is pronounced correctly by a screen reader. ' +
-      '[Learn more](https://dequeuniversity.com/rules/axe/4.4/valid-lang).',
+      '[Learn how to use the `lang` attribute](https://dequeuniversity.com/rules/axe/4.4/valid-lang).',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(import.meta.url, UIStrings);

package/lighthouse-core/audits/accessibility/video-caption.js

@@ -23,7 +23,7 @@ const UIStrings = {
   /** Description of a Lighthouse audit that tells the user *why* they should try to pass. 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: 'When a video provides a caption it is easier for deaf and hearing impaired ' +
       'users to access its information. ' +
-      '[Learn more](https://dequeuniversity.com/rules/axe/4.4/video-caption).',
+      '[Learn more about video captions](https://dequeuniversity.com/rules/axe/4.4/video-caption).',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(import.meta.url, UIStrings);

package/lighthouse-core/audits/apple-touch-icon.js

@@ -20,7 +20,7 @@ const UIStrings = {
   /** Description of a Lighthouse audit that tells the user that having an apple-touch-icon allows websites to include an app icon to their installed progressive web apps, similar to a native app. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. "apple-touch-icon" is an HTML attribute value and should not be translated. */
   description: 'For ideal appearance on iOS when users add a progressive web app to the home ' +
     'screen, define an `apple-touch-icon`. It must point to a non-transparent 192px (or 180px) ' +
-    'square PNG. [Learn More](https://web.dev/apple-touch-icon/).',
+    'square PNG. [Learn more about `apple-touch-icon`](https://web.dev/apple-touch-icon/).',
   /** Warning that HTML attribute `apple-touch-icon-precomposed` should not be used in favor of `apple-touch-icon`.  "apple-touch-icon-precomposed" and "apple-touch-icon" are HTML attribute values and should not be translated. */
   precomposedWarning: '`apple-touch-icon-precomposed` is out of date; ' +
     '`apple-touch-icon` is preferred.',

package/lighthouse-core/audits/autocomplete.js

@@ -25,7 +25,7 @@ const UIStrings = {
   description: '`autocomplete` helps users submit forms quicker. To reduce user ' +
    'effort, consider enabling by setting the `autocomplete` ' +
    'attribute to a valid value.' +
-  ' [Learn more](https://developers.google.com/web/fundamentals/design-and-ux/input/forms#use_metadata_to_enable_auto-complete)',
+  ' [Learn more about `autocomplete` in forms](https://developers.google.com/web/fundamentals/design-and-ux/input/forms#use_metadata_to_enable_auto-complete)',
   /** Label for a column in a data table; entries will be the autocomplete token suggestions based on heuristics. */
   columnSuggestions: 'Suggested Token',
   /** Label for a column in a data table; entries will be the incorrect optional autocomplete tokens or prompting user to review them. */

package/lighthouse-core/audits/bootup-time.js

@@ -19,8 +19,8 @@ const UIStrings = {
   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://web.dev/bootup-time/).',
+    'You may find delivering smaller JS payloads helps with this. ' +
+    '[Learn how to reduce Javascript execution time](https://web.dev/bootup-time/).',
   /** 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 CPU Time',
   /** 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. */

package/lighthouse-core/audits/byte-efficiency/efficient-animated-content.js

@@ -18,7 +18,7 @@ const UIStrings = {
   /** 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://web.dev/efficient-animated-content/)',
+    'network bytes. [Learn more about efficient video formats](https://web.dev/efficient-animated-content/)',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(import.meta.url, UIStrings);

package/lighthouse-core/audits/byte-efficiency/legacy-javascript.js

@@ -40,7 +40,7 @@ const UIStrings = {
   // eslint-disable-next-line max-len
   // TODO: web.dev article. this codelab is good starting place: https://web.dev/codelab-serve-modern-code/
   /** Description of a Lighthouse audit that tells the user about old JavaScript that is no longer needed. 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: 'Polyfills and transforms enable legacy browsers to use new JavaScript features. However, many aren\'t necessary for modern browsers. For your bundled JavaScript, adopt a modern script deployment strategy using module/nomodule feature detection to reduce the amount of code shipped to modern browsers, while retaining support for legacy browsers. [Learn More](https://web.dev/publish-modern-javascript/)',
+  description: 'Polyfills and transforms enable legacy browsers to use new JavaScript features. However, many aren\'t necessary for modern browsers. For your bundled JavaScript, adopt a modern script deployment strategy using module/nomodule feature detection to reduce the amount of code shipped to modern browsers, while retaining support for legacy browsers. [Learn how to use modern JavaScript](https://web.dev/publish-modern-javascript/)',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(import.meta.url, UIStrings);

package/lighthouse-core/audits/byte-efficiency/modern-image-formats.js

@@ -18,7 +18,7 @@ const UIStrings = {
   /** 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 WebP and AVIF often provide better ' +
     'compression than PNG or JPEG, which means faster downloads and less data consumption. ' +
-    '[Learn more](https://web.dev/uses-webp-images/).',
+    '[Learn more about modern image formats](https://web.dev/uses-webp-images/).',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(import.meta.url, UIStrings);

package/lighthouse-core/audits/byte-efficiency/offscreen-images.js

@@ -24,7 +24,7 @@ const UIStrings = {
   description:
     'Consider lazy-loading offscreen and hidden images after all critical resources have ' +
     'finished loading to lower time to interactive. ' +
-    '[Learn more](https://web.dev/offscreen-images/).',
+    '[Learn how to defer offscreen images](https://web.dev/offscreen-images/).',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(import.meta.url, UIStrings);

package/lighthouse-core/audits/byte-efficiency/render-blocking-resources.js

@@ -36,7 +36,7 @@ const UIStrings = {
   /** 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://web.dev/render-blocking-resources/).',
+    'JS/styles. [Learn how to eliminate render-blocking resources](https://web.dev/render-blocking-resources/).',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(import.meta.url, UIStrings);

package/lighthouse-core/audits/byte-efficiency/total-byte-weight.js

@@ -18,8 +18,7 @@ const UIStrings = {
   /** 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 ' +
-  'more](https://web.dev/total-byte-weight/).',
+  'long load times. [Learn how to reduce payload sizes](https://web.dev/total-byte-weight/).',
   /** 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 kibibytes (e.g. 142 KiB) */
   displayValue: 'Total size was {totalBytes, number, bytes}\xa0KiB',
 };

package/lighthouse-core/audits/byte-efficiency/unminified-css.js

@@ -15,7 +15,7 @@ const UIStrings = {
   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://web.dev/unminified-css/).',
+    '[Learn how to minify CSS](https://web.dev/unminified-css/).',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(import.meta.url, UIStrings);

package/lighthouse-core/audits/byte-efficiency/unminified-javascript.js

@@ -15,7 +15,7 @@ const UIStrings = {
   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://web.dev/unminified-javascript/).',
+    '[Learn how to minify JavaScript](https://web.dev/unminified-javascript/).',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(import.meta.url, UIStrings);

package/lighthouse-core/audits/byte-efficiency/unused-css-rules.js

@@ -15,7 +15,7 @@ const UIStrings = {
   /** 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: 'Reduce unused rules from stylesheets and defer CSS not used for ' +
     'above-the-fold content to decrease bytes consumed by network activity. ' +
-    '[Learn more](https://web.dev/unused-css-rules/).',
+    '[Learn how to reduce unused CSS](https://web.dev/unused-css-rules/).',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(import.meta.url, UIStrings);

package/lighthouse-core/audits/byte-efficiency/unused-javascript.js

@@ -16,7 +16,7 @@ const UIStrings = {
   title: 'Reduce unused JavaScript',
   /** Description of a Lighthouse audit that tells the user *why* they should reduce 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: 'Reduce unused JavaScript and defer loading scripts until they are required to ' +
-    'decrease bytes consumed by network activity. [Learn more](https://web.dev/unused-javascript/).',
+    'decrease bytes consumed by network activity. [Learn how to reduce unused JavaScript](https://web.dev/unused-javascript/).',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(import.meta.url, UIStrings);

package/lighthouse-core/audits/byte-efficiency/uses-long-cache-ttl.js

@@ -21,7 +21,7 @@ const UIStrings = {
   /** 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://web.dev/uses-long-cache-ttl/).',
+    '[Learn more about efficient cache policies](https://web.dev/uses-long-cache-ttl/).',
   /** [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}

package/lighthouse-core/audits/byte-efficiency/uses-optimized-images.js

@@ -18,7 +18,7 @@ const UIStrings = {
   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://web.dev/uses-optimized-images/).',
+  '[Learn how to efficiently encode images](https://web.dev/uses-optimized-images/).',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(import.meta.url, UIStrings);

package/lighthouse-core/audits/byte-efficiency/uses-responsive-images.js

@@ -26,7 +26,7 @@ const UIStrings = {
   description:
   'Serve images that are appropriately-sized to save cellular data ' +
   'and improve load time. ' +
-  '[Learn more](https://web.dev/uses-responsive-images/).',
+  '[Learn how to size images](https://web.dev/uses-responsive-images/).',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(import.meta.url, UIStrings);

package/lighthouse-core/audits/byte-efficiency/uses-text-compression.js

@@ -19,7 +19,7 @@ const UIStrings = {
   /** 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://web.dev/uses-text-compression/).',
+    ' [Learn more about text compression](https://web.dev/uses-text-compression/).',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(import.meta.url, UIStrings);

package/lighthouse-core/audits/content-width.js

@@ -16,7 +16,7 @@ const UIStrings = {
   /** Description of a Lighthouse audit that tells the user why they should care that a site's content size should match its viewport size, which is the size of the screen the site is displayed on. 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: 'If the width of your app\'s content doesn\'t match the width ' +
     'of the viewport, your app might not be optimized for mobile screens. ' +
-    '[Learn more](https://web.dev/content-width/).',
+    '[Learn how to size content for the viewport](https://web.dev/content-width/).',
   /**
    * @description Explanatory message stating that the viewport size and window size differ.
    * @example {100} innerWidth

package/lighthouse-core/audits/critical-request-chains.js

@@ -17,7 +17,7 @@ const UIStrings = {
       'loaded 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://web.dev/critical-request-chains/).',
+      '[Learn how to avoid chaining critical requests](https://web.dev/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}

package/lighthouse-core/audits/csp-xss.js

@@ -18,7 +18,7 @@ const UIStrings = {
   /** Description of a Lighthouse audit that evaluates the security of a page's CSP. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. "CSP" stands for "Content Security Policy". "XSS" stands for "Cross Site Scripting". "CSP" and "XSS" do not need to be translated. */
   description: 'A strong Content Security Policy (CSP) significantly ' +
     'reduces the risk of cross-site scripting (XSS) attacks. ' +
-    '[Learn more](https://web.dev/csp-xss/)',
+    '[Learn how to use a CSP to prevent XSS](https://web.dev/csp-xss/)',
   /** Summary text for the results of a Lighthouse audit that evaluates the security of a page's CSP. This is displayed if no CSP is being enforced. "CSP" stands for "Content Security Policy". "CSP" does not need to be translated. */
   noCsp: 'No CSP found in enforcement mode',
   /** Message shown when one or more CSPs are defined in a <meta> tag. Shown in a table with a list of other CSP bypasses and warnings. "CSP" stands for "Content Security Policy". "CSP" and "HTTP" do not need to be translated. */

package/lighthouse-core/audits/deprecations.js

@@ -13,7 +13,9 @@ import {Audit} from './audit.js';
 
 import JsBundles from '../computed/js-bundles.js';
 import * as i18n from '../lib/i18n/i18n.js';
+import {getIssueDetailDescription} from '../lib/deprecations-strings.js';
 
+/* eslint-disable max-len */
 const UIStrings = {
   /** Title of a Lighthouse audit that provides detail on the use of deprecated APIs. This descriptive title is shown to users when the page does not use deprecated APIs. */
   title: 'Avoids deprecated APIs',
@@ -21,7 +23,7 @@ const UIStrings = {
   failureTitle: 'Uses deprecated APIs',
   /** Description of a Lighthouse audit that tells the user why they should not use deprecated APIs 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: 'Deprecated APIs will eventually be removed from the browser. ' +
-      '[Learn more](https://web.dev/deprecations/).',
+      '[Learn more about deprecated APIs](https://web.dev/deprecations/).',
   /** [ICU Syntax] Label for the audit identifying the number of warnings generated by using deprecated APIs. */
   displayValue: `{itemCount, plural,
     =1 {1 warning found}
@@ -32,6 +34,7 @@ const UIStrings = {
   /** Table column header for line of code (eg. 432) that is using a deprecated API. */
   columnLine: 'Line',
 };
+/* eslint-enable max-len */
 
 const str_ = i18n.createMessageInstanceIdFn(import.meta.url, UIStrings);
 
@@ -58,17 +61,35 @@ class Deprecations extends Audit {
     const bundles = await JsBundles.request(artifacts, context);
 
     const deprecations = artifacts.InspectorIssues.deprecationIssue
-      // TODO: translate these strings.
-      // see https://github.com/GoogleChrome/lighthouse/issues/13895
-      .filter(deprecation => !deprecation.type || deprecation.type === 'Untranslated')
       .map(deprecation => {
         const {scriptId, url, lineNumber, columnNumber} = deprecation.sourceCodeLocation;
         const bundle = bundles.find(bundle => bundle.script.scriptId === scriptId);
-        return {
-          value: deprecation.message || '',
+        const deprecationMeta = getIssueDetailDescription(deprecation);
+
+        /** @type {LH.Audit.Details.TableSubItems=} */
+        let subItems = undefined;
+        if (deprecationMeta.links.length) {
+          subItems = {
+            type: 'subitems',
+            items: deprecationMeta.links.map(link => ({
+              type: 'link',
+              url: link.link,
+              text: link.linkTitle,
+            })),
+          };
+        }
+
+        // @ts-expect-error: The english string used to be included on the protocol, but no longer is.
+        const legacyMessage = deprecation.message;
+
+        /** @type {LH.Audit.Details.TableItem} */
+        const item = {
+          value: deprecationMeta.message || legacyMessage || deprecation.type,
           // Protocol.Audits.SourceCodeLocation.columnNumber is 1-indexed, but we use 0-indexed.
           source: Audit.makeSourceLocation(url, lineNumber, columnNumber - 1, bundle),
+          subItems,
         };
+        return item;
       });
 
     /** @type {LH.Audit.Details.Table['headings']} */

package/lighthouse-core/audits/dobetterweb/charset.js

@@ -24,7 +24,7 @@ const UIStrings = {
   /** Description of a Lighthouse audit that tells the user why the charset needs to be defined early on. */
   description: 'A character encoding declaration is required. It can be done with a `<meta>` tag ' +
     'in the first 1024 bytes of the HTML or in the Content-Type HTTP response header. ' +
-    '[Learn more](https://web.dev/charset/).',
+    '[Learn more about declaring the character encoding](https://web.dev/charset/).',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(import.meta.url, UIStrings);

package/lighthouse-core/audits/dobetterweb/doctype.js

@@ -16,7 +16,7 @@ const UIStrings = {
   /** Description of a Lighthouse audit that tells the user why they should define an HTML doctype. 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: 'Specifying a doctype prevents the browser ' +
     'from switching to quirks-mode. ' +
-    '[Learn more](https://web.dev/doctype/).',
+    '[Learn more about the doctype declaration](https://web.dev/doctype/).',
   /** Explanatory message stating that the document has no doctype. */
   explanationNoDoctype: 'Document must contain a doctype',
   /** Explanatory message stating that the document has wrong doctype */

package/lighthouse-core/audits/dobetterweb/dom-size.js

@@ -23,7 +23,7 @@ const UIStrings = {
   /** 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 elements 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: 'A large DOM will 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://web.dev/dom-size/).',
+    'and produce costly [layout reflows](https://developers.google.com/speed/articles/reflow). [Learn how to avoid an excessive DOM size](https://web.dev/dom-size/).',
   /** Table column header for the type of statistic. These statistics describe how big the DOM is (count of DOM elements, children, depth). */
   columnStatistic: 'Statistic',
   /** Table column header for the observed value of the DOM statistic. */

package/lighthouse-core/audits/dobetterweb/geolocation-on-start.js

@@ -22,7 +22,7 @@ const UIStrings = {
   /** Description of a Lighthouse audit that tells the user why they should not ask for geolocation permissions on load. 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: 'Users are mistrustful of or confused by sites that request their ' +
     'location without context. Consider tying the request to a user action instead. ' +
-    '[Learn more](https://web.dev/geolocation-on-start/).',
+    '[Learn more about the geolocation permission](https://web.dev/geolocation-on-start/).',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(import.meta.url, UIStrings);

package/lighthouse-core/audits/dobetterweb/js-libraries.js

@@ -17,7 +17,7 @@ const UIStrings = {
   /** Title of a Lighthouse audit that provides detail on the Javascript libraries that are used on the page. */
   title: 'Detected JavaScript libraries',
   /** Description of a Lighthouse audit that tells the user what this audit is detecting. This is displayed after a user expands the section to see more. No character length limits. */
-  description: 'All front-end JavaScript libraries detected on the page. [Learn more](https://web.dev/js-libraries/).',
+  description: 'All front-end JavaScript libraries detected on the page. [Learn more about this JavaScript library detection diagnostic audit](https://web.dev/js-libraries/).',
   /** Label for a column in a data table; entries will be the version numbers of the detected Javascript libraries.  */
   columnVersion: 'Version',
 };

package/lighthouse-core/audits/dobetterweb/no-document-write.js

@@ -39,7 +39,7 @@ const UIStrings = {
   /** Description of a Lighthouse audit that tells the user why they should avoid `document.write`. 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: 'For users on slow connections, external scripts dynamically injected via ' +
       '`document.write()` can delay page load by tens of seconds. ' +
-      '[Learn more](https://web.dev/no-document-write/).',
+      '[Learn how to avoid document.write()](https://web.dev/no-document-write/).',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(import.meta.url, UIStrings);

package/lighthouse-core/audits/dobetterweb/no-vulnerable-libraries.js

@@ -32,7 +32,7 @@ const UIStrings = {
   /** Description of a Lighthouse audit that tells the user why they should be concerned about the third party Javascript libraries that they use. 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: 'Some third-party scripts may contain known security vulnerabilities ' +
     'that are easily identified and exploited by attackers. ' +
-    '[Learn more](https://web.dev/no-vulnerable-libraries/).',
+    '[Learn more about vulnerable libraries](https://web.dev/no-vulnerable-libraries/).',
   /** [ICU Syntax] Label for the audit identifying the number of vulnerable Javascript libraries found. */
   displayValue: `{itemCount, plural,
     =1 {1 vulnerability detected}

package/lighthouse-core/audits/dobetterweb/notification-on-start.js

@@ -22,7 +22,7 @@ const UIStrings = {
   /** Description of a Lighthouse audit that tells the user why they should not ask for notification permission on load. 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: 'Users are mistrustful of or confused by sites that request to send ' +
       'notifications without context. Consider tying the request to user gestures ' +
-      'instead. [Learn more](https://web.dev/notification-on-start/).',
+      'instead. [Learn more about responsibly getting permission for notifications](https://web.dev/notification-on-start/).',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(import.meta.url, UIStrings);

package/lighthouse-core/audits/dobetterweb/password-inputs-can-be-pasted-into.js

@@ -15,7 +15,7 @@ const UIStrings = {
   failureTitle: 'Prevents users to paste into password fields',
   /** Description of a Lighthouse audit that tells the user why they should allow pasting of content into password fields. 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: 'Preventing password pasting undermines good security policy. ' +
-      '[Learn more](https://web.dev/password-inputs-can-be-pasted-into/).',
+      '[Learn more about user-friendly password fields](https://web.dev/password-inputs-can-be-pasted-into/).',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(import.meta.url, UIStrings);

package/lighthouse-core/audits/dobetterweb/uses-http2.js

@@ -30,7 +30,7 @@ const UIStrings = {
   title: 'Use HTTP/2',
   /** Description of a Lighthouse audit that tells the user why they should use HTTP/2. 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: 'HTTP/2 offers many benefits over HTTP/1.1, including binary headers and ' +
-      'multiplexing. [Learn more](https://web.dev/uses-http2/).',
+      'multiplexing. [Learn more about HTTP/2](https://web.dev/uses-http2/).',
   /** [ICU Syntax] Label identifying the number of network requests that were not served with HTTP/2. */
   displayValue: `{itemCount, plural,
     =1 {1 request not served via HTTP/2}

package/lighthouse-core/audits/dobetterweb/uses-passive-event-listeners.js

@@ -22,7 +22,7 @@ const UIStrings = {
   /** Description of a Lighthouse audit that tells the user why they should use passive event listeners on 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: 'Consider marking your touch and wheel event listeners as `passive` ' +
       'to improve your page\'s scroll performance. ' +
-      '[Learn more](https://web.dev/uses-passive-event-listeners/).',
+      '[Learn more about adopting passive event listeners](https://web.dev/uses-passive-event-listeners/).',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(import.meta.url, UIStrings);

package/lighthouse-core/audits/errors-in-console.js

@@ -24,7 +24,7 @@ const UIStrings = {
   /** Description of a Lighthouse audit that tells the user why errors being logged to the devtools console are a cause for concern and so should be fixed. This is displayed after a user expands the section to see more. No character length limits. */
   description: 'Errors logged to the console indicate unresolved problems. ' +
     'They can come from network request failures and other browser concerns. ' +
-    '[Learn more](https://web.dev/errors-in-console/)',
+    '[Learn more about this errors in console diagnostic audit](https://web.dev/errors-in-console/)',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(import.meta.url, UIStrings);

package/lighthouse-core/audits/font-display.js

@@ -21,9 +21,9 @@ const UIStrings = {
   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 ' +
+    'Leverage the `font-display` CSS feature to ensure text is user-visible while ' +
     'webfonts are loading. ' +
-    '[Learn more](https://web.dev/font-display/).',
+    '[Learn more about `font-display`](https://web.dev/font-display/).',
   /**
    * @description [ICU Syntax] A warning message that is shown when Lighthouse couldn't automatically check some of the page's fonts, telling the user that they will need to manually check the fonts coming from a certain URL origin.
    * @example {https://font.cdn.com/} fontOrigin

package/lighthouse-core/audits/image-aspect-ratio.js

@@ -22,7 +22,7 @@ const UIStrings = {
   failureTitle: 'Displays images with incorrect aspect ratio',
   /** Description of a Lighthouse audit that tells the user why they should maintain the correct aspect ratios for all 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: 'Image display dimensions should match natural aspect ratio. ' +
-    '[Learn more](https://web.dev/image-aspect-ratio/).',
+    '[Learn more about image aspect ratio](https://web.dev/image-aspect-ratio/).',
   /**  Label for a column in a data table; entries in the column will be the numeric aspect ratio of an image as displayed in a web page. */
   columnDisplayed: 'Aspect Ratio (Displayed)',
   /**  Label for a column in a data table; entries in the column will be the numeric aspect ratio of the raw (actual) image. */

package/lighthouse-core/audits/image-size-responsive.js

@@ -23,7 +23,8 @@ const UIStrings = {
   failureTitle: 'Serves images with low resolution',
   /** Description of a Lighthouse audit that tells the user why they should maintain an appropriate size for all 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: 'Image natural dimensions should be proportional to the display size and the ' +
-    'pixel ratio to maximize image clarity. [Learn more](https://web.dev/serve-responsive-images/).',
+    'pixel ratio to maximize image clarity. ' +
+    '[Learn how to provide responsive images](https://web.dev/serve-responsive-images/).',
   /**  Label for a column in a data table; entries in the column will be a string representing the displayed size of the image. */
   columnDisplayed: 'Displayed size',
   /**  Label for a column in a data table; entries in the column will be a string representing the actual size of the image. */

package/lighthouse-core/audits/installable-manifest.js

@@ -16,7 +16,8 @@ const UIStrings = {
   /** Title of a Lighthouse audit that provides detail on if a website is installable as an application. This descriptive title is shown to users when a webapp is not installable. */
   'failureTitle': 'Web app manifest or service worker do not meet the installability requirements',
   /** Description of a Lighthouse audit that tells the user why installability is important for webapps. 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': `Service worker is the technology that enables your app to use many Progressive Web App features, such as offline, add to homescreen, and push notifications. With proper service worker and manifest implementations, browsers can proactively prompt users to add your app to their homescreen, which can lead to higher engagement. [Learn more](https://web.dev/installable-manifest/).`,
+  'description': `Service worker is the technology that enables your app to use many Progressive Web App features, such as offline, add to homescreen, and push notifications. With proper service worker and manifest implementations, browsers can proactively prompt users to add your app to their homescreen, which can lead to higher engagement. ' +
+  '[Learn more about manifest installability requirements](https://web.dev/installable-manifest/).`,
   /** Description Table column header for the observed value of the Installability failure reason statistic. */
   'columnValue': 'Failure reason',
   /**

package/lighthouse-core/audits/is-on-https.js

@@ -23,7 +23,7 @@ const UIStrings = {
       'over HTTPS. HTTPS prevents intruders from tampering with or passively listening ' +
       'in on the communications between your app and your users, and is a prerequisite for ' +
       'HTTP/2 and many new web platform APIs. ' +
-      '[Learn more](https://web.dev/is-on-https/).',
+      '[Learn more about HTTPS](https://web.dev/is-on-https/).',
   /** [ICU Syntax] Label identifying the number of insecure network requests found by an audit of a web page. */
   displayValue: `{itemCount, plural,
     =1 {1 insecure request found}

package/lighthouse-core/audits/largest-contentful-paint-element.js

@@ -13,7 +13,7 @@ const UIStrings = {
   title: 'Largest Contentful Paint element',
   /** Description of a Lighthouse audit that tells the user that the element shown was determined to be the Largest Contentful Paint. */
   description: 'This is the largest contentful element painted within the viewport. ' +
-    '[Learn More](https://web.dev/lighthouse-largest-contentful-paint/)',
+    '[Learn more about the Largest Contentful Paint element](https://web.dev/lighthouse-largest-contentful-paint/)',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(import.meta.url, UIStrings);

package/lighthouse-core/audits/lcp-lazy-loaded.js

@@ -14,7 +14,7 @@ const UIStrings = {
   /** Title of a Lighthouse audit that provides detail on whether the largest above-the-fold image was loaded with sufficient priority. This descriptive title is shown to users when the image was loaded inefficiently using the `loading=lazy` attribute. */
   failureTitle: 'Largest Contentful Paint image was lazily loaded',
   /** Description of a Lighthouse audit that tells the user why the advice is important. This is displayed after a user expands the section to see more. No character length limits. */
-  description: 'Above-the-fold images that are lazily loaded render later in the page lifecycle, which can delay the largest contentful paint. [Learn more](https://web.dev/lcp-lazy-loading/).',
+  description: 'Above-the-fold images that are lazily loaded render later in the page lifecycle, which can delay the largest contentful paint. [Learn more about optimal lazy loading](https://web.dev/lcp-lazy-loading/).',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(import.meta.url, UIStrings);

package/lighthouse-core/audits/long-tasks.js

@@ -22,7 +22,7 @@ const UIStrings = {
   /** Description of a diagnostic LH audit that shows the user the longest running tasks that occur when the page loads. */
   description: 'Lists the longest tasks on the main thread, ' +
     'useful for identifying worst contributors to input delay. ' +
-    '[Learn more](https://web.dev/long-tasks-devtools/)',
+    '[Learn how to avoid long main-thread tasks](https://web.dev/long-tasks-devtools/)',
   /** [ICU Syntax] Label identifying the number of long-running CPU tasks that occurred while loading a web page. */
   displayValue: `{itemCount, plural,
   =1 {# long task found}

package/lighthouse-core/audits/mainthread-work-breakdown.js

@@ -23,7 +23,7 @@ const UIStrings = {
   /** 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. ' +
-    '[Learn more](https://web.dev/mainthread-work-breakdown/)',
+    '[Learn how to minimize main-thread work](https://web.dev/mainthread-work-breakdown/)',
   /** Label for the Main Thread Category column in data tables, rows will have a main thread Category and main thread Task Name. */
   columnCategory: 'Category',
 };

package/lighthouse-core/audits/manual/pwa-cross-browser.js

@@ -14,7 +14,7 @@ const UIStrings = {
   title: 'Site works cross-browser',
   /** Description of a Lighthouse audit that tells the user why they should make sites work across different browsers. 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: 'To reach the most number of users, sites should work across ' +
-  'every major browser. [Learn more](https://web.dev/pwa-cross-browser/).',
+  'every major browser. [Learn about cross-browser compatibility](https://web.dev/pwa-cross-browser/).',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(import.meta.url, UIStrings);

package/lighthouse-core/audits/manual/pwa-each-page-has-url.js

@@ -13,7 +13,7 @@ const UIStrings = {
   title: 'Each page has a URL',
   /** Description of a Lighthouse audit that tells the user why they should use unique URLs for each web 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: 'Ensure individual pages are deep linkable via URL and that URLs are ' +
-      'unique for the purpose of shareability on social media. [Learn more](https://web.dev/pwa-each-page-has-url/).',
+      'unique for the purpose of shareability on social media. [Learn more about providing deep links](https://web.dev/pwa-each-page-has-url/).',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(import.meta.url, UIStrings);

package/lighthouse-core/audits/manual/pwa-page-transitions.js

@@ -13,7 +13,7 @@ const UIStrings = {
   title: 'Page transitions don\'t feel like they block on the network',
   /** Description of a Lighthouse audit that tells the user why they should make transitions in their web app feel fast. 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: 'Transitions should feel snappy as you tap around, even on a slow network. ' +
-    'This experience is key to a user\'s perception of performance. [Learn more](https://web.dev/pwa-page-transitions/).',
+    'This experience is key to a user\'s perception of performance. [Learn more about page transitions](https://web.dev/pwa-page-transitions/).',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(import.meta.url, UIStrings);

package/lighthouse-core/audits/maskable-icon.js

@@ -17,7 +17,7 @@ const UIStrings = {
   /** Description of a Lighthouse audit that tells the user why they their manifest should have at least one maskable icon. 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 maskable icon ensures that the image fills the entire ' +
     'shape without being letterboxed when installing ' +
-    'the app on a device. [Learn more](https://web.dev/maskable-icon-audit/).',
+    'the app on a device. [Learn about maskable manifest icons](https://web.dev/maskable-icon-audit/).',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(import.meta.url, UIStrings);

package/lighthouse-core/audits/metrics/cumulative-layout-shift.js

@@ -12,7 +12,8 @@ import * as i18n from '../../lib/i18n/i18n.js';
 const UIStrings = {
   /** Description of the Cumulative Layout Shift metric that indicates how much the page changes its layout while it loads. If big segments of the page shift their location during load, the Cumulative Layout Shift will be higher. 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: 'Cumulative Layout Shift measures the movement of visible ' +
-               'elements within the viewport. [Learn more](https://web.dev/cls/).',
+               'elements within the viewport. ' +
+               '[Learn more about the Cumulative Layout Shift metric](https://web.dev/cls/).',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(import.meta.url, UIStrings);