report: use KiB instead of KB (#10870)

GoogleChrome · Jun 4, 2020 · 41175fe · 41175fe
1 parent 7109852
commit 41175fe
Show file tree

Hide file tree

Showing 21 changed files with 57 additions and 44 deletions.
diff --git a/docs/performance-budgets.md b/docs/performance-budgets.md
@@ -102,7 +102,7 @@ Supported timing metrics:
 
 ### Resource Budgets
 
-Use the optional `resourceSizes` property to define budgets for the *size* of page resources. In this context, budgets are defined in kilobytes.
+Use the optional `resourceSizes` property to define budgets for the *size* of page resources. In this context, budgets are defined in kibibytes (1 KiB = 1024 bytes).
 
 ```json
 "resourceSizes": [

diff --git a/lighthouse-cli/test/smokehouse/test-definitions/perf/expectations.js b/lighthouse-cli/test/smokehouse/test-definitions/perf/expectations.js
@@ -68,7 +68,7 @@ module.exports = [
       audits: {
         'resource-summary': {
           score: null,
-          displayValue: '10 requests • 164 KB',
+          displayValue: '10 requests • 164 KiB',
           details: {
             items: [
               {resourceType: 'total', requestCount: 10, transferSize: '168000±1000'},

diff --git a/lighthouse-core/audits/byte-efficiency/total-byte-weight.js b/lighthouse-core/audits/byte-efficiency/total-byte-weight.js
@@ -19,8 +19,8 @@ const UIStrings = {
   'Large network payloads cost users real money and are highly correlated with ' +
   'long load times. [Learn ' +
   'more](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 kilobytes (e.g. 142 KB) */
-  displayValue: 'Total size was {totalBytes, number, bytes}\xa0KB',
+  /** 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',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);

diff --git a/lighthouse-core/audits/byte-efficiency/unused-css-rules.js b/lighthouse-core/audits/byte-efficiency/unused-css-rules.js
@@ -20,7 +20,7 @@ const UIStrings = {
 
 const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
-// Allow 10KB of unused CSS to permit `:hover` and other styles not used on a non-interactive load.
+// Allow 10KiB of unused CSS to permit `:hover` and other styles not used on a non-interactive load.
 // @see https://github.com/GoogleChrome/lighthouse/issues/9353 for more discussion.
 const IGNORE_THRESHOLD_IN_BYTES = 10 * 1024;
 

diff --git a/lighthouse-core/audits/resource-summary.js b/lighthouse-core/audits/resource-summary.js
@@ -15,10 +15,10 @@ const UIStrings = {
   /** Description of a Lighthouse audit that tells the user that they can setup a budgets for the quantity and size of page resources. No character length limits. 'Learn More' becomes link text to additional documentation. */
   description: 'To set budgets for the quantity and size of page resources,' +
     ' add a budget.json file. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/budgets).',
-  /** [ICU Syntax] Label for an audit identifying the number of requests and kilobytes used to load the page. */
+  /** [ICU Syntax] Label for an audit identifying the number of requests and kibibytes used to load the page. */
   displayValue: `{requestCount, plural, ` +
-    `=1 {1 request • {byteCount, number, bytes} KB} ` +
-    `other {# requests • {byteCount, number, bytes} KB}}`,
+    `=1 {1 request • {byteCount, number, bytes} KiB} ` +
+    `other {# requests • {byteCount, number, bytes} KiB}}`,
 };
 
 const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);

diff --git a/lighthouse-core/gather/gatherers/dobetterweb/optimized-images.js b/lighthouse-core/gather/gatherers/dobetterweb/optimized-images.js
@@ -26,7 +26,7 @@ const MAX_RESOURCE_SIZE_TO_ENCODE = 2000 * 1024;
 const JPEG_QUALITY = 0.92;
 const WEBP_QUALITY = 0.85;
 
-const MINIMUM_IMAGE_SIZE = 4096; // savings of <4 KB will be ignored in the audit anyway
+const MINIMUM_IMAGE_SIZE = 4096; // savings of <4 KiB will be ignored in the audit anyway
 
 const IMAGE_REGEX = /^image\/((x|ms|x-ms)-)?(png|bmp|jpeg)$/;
 

diff --git a/lighthouse-core/lib/i18n/README.md b/lighthouse-core/lib/i18n/README.md
@@ -268,12 +268,12 @@ CTC is a name that is distinct and identifies this as the Chrome translation for
     This is also the point at which ICU is replaced by values. So this...
 
     ```javascript
-    message = "Total size was {totalBytes, number, bytes} KB"
+    message = "Total size was {totalBytes, number, bytes} KiB"
     sent_values = {totalBytes: 10240}
     ```
 
     Becomes...
 
     ```javascript
-    message = "Total size was 10 KB"
+    message = "Total size was 10 KiB"
     ```
diff --git a/lighthouse-core/lib/i18n/i18n.js b/lighthouse-core/lib/i18n/i18n.js
@@ -50,8 +50,8 @@ const UIStrings = {
   ms: '{timeInMs, number, milliseconds}\xa0ms',
   /** Used to show the duration in seconds that something lasted. The {timeInMs} placeholder will be replaced with the time duration, shown in seconds (e.g. 5.2 s) */
   seconds: '{timeInMs, number, seconds}\xa0s',
-  /** 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',
+  /** 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 kibibytes (e.g. 148 KiB) */
+  displayValueByteSavings: 'Potential savings of {wastedBytes, number, bytes}\xa0KiB',
   /** 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 a column in a data table; entries will be the URL of a web resource */

diff --git a/lighthouse-core/lib/i18n/locales/en-US.json b/lighthouse-core/lib/i18n/locales/en-US.json
@@ -432,7 +432,7 @@
     "message": "Large network payloads cost users real money and are highly correlated with long load times. [Learn more](https://web.dev/total-byte-weight)."
   },
   "lighthouse-core/audits/byte-efficiency/total-byte-weight.js | displayValue": {
-    "message": "Total size was {totalBytes, number, bytes} KB"
+    "message": "Total size was {totalBytes, number, bytes} KiB"
   },
   "lighthouse-core/audits/byte-efficiency/total-byte-weight.js | failureTitle": {
     "message": "Avoid enormous network payloads"
@@ -984,7 +984,7 @@
     "message": "To set budgets for the quantity and size of page resources, add a budget.json file. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/budgets)."
   },
   "lighthouse-core/audits/resource-summary.js | displayValue": {
-    "message": "{requestCount, plural, =1 {1 request • {byteCount, number, bytes} KB} other {# requests • {byteCount, number, bytes} KB}}"
+    "message": "{requestCount, plural, =1 {1 request • {byteCount, number, bytes} KiB} other {# requests • {byteCount, number, bytes} KiB}}"
   },
   "lighthouse-core/audits/resource-summary.js | title": {
     "message": "Keep request counts low and transfer sizes small"
@@ -1512,7 +1512,7 @@
     "message": "Cumulative Layout Shift"
   },
   "lighthouse-core/lib/i18n/i18n.js | displayValueByteSavings": {
-    "message": "Potential savings of {wastedBytes, number, bytes} KB"
+    "message": "Potential savings of {wastedBytes, number, bytes} KiB"
   },
   "lighthouse-core/lib/i18n/i18n.js | displayValueMsSavings": {
     "message": "Potential savings of {wastedMs, number, milliseconds} ms"

diff --git a/lighthouse-core/lib/i18n/locales/en-XL.json b/lighthouse-core/lib/i18n/locales/en-XL.json
@@ -432,7 +432,7 @@
     "message": "L̂ár̂ǵê ńêt́ŵór̂ḱ p̂áŷĺôád̂ś ĉóŝt́ ûśêŕŝ ŕêál̂ ḿôńêý âńd̂ ár̂é ĥíĝh́l̂ý ĉór̂ŕêĺât́êd́ ŵít̂h́ l̂ón̂ǵ l̂óâd́ t̂ím̂éŝ. [Ĺêár̂ń m̂ór̂é](https://web.dev/total-byte-weight)."
   },
   "lighthouse-core/audits/byte-efficiency/total-byte-weight.js | displayValue": {
-    "message": "T̂ót̂ál̂ śîźê ẃâś {totalBytes, number, bytes} K̂B́"
+    "message": "T̂ót̂ál̂ śîźê ẃâś {totalBytes, number, bytes} K̂íB̂"
   },
   "lighthouse-core/audits/byte-efficiency/total-byte-weight.js | failureTitle": {
     "message": "Âv́ôíd̂ én̂ór̂ḿôúŝ ńêt́ŵór̂ḱ p̂áŷĺôád̂ś"
@@ -984,7 +984,7 @@
     "message": "T̂ó ŝét̂ b́ûd́ĝét̂ś f̂ór̂ t́ĥé q̂úâńt̂ít̂ý âńd̂ śîźê óf̂ ṕâǵê ŕêśôúr̂ćêś, âd́d̂ á b̂úd̂ǵêt́.ĵśôń f̂íl̂é. [L̂éâŕn̂ ḿôŕê](https://developers.google.com/web/tools/lighthouse/audits/budgets)."
   },
   "lighthouse-core/audits/resource-summary.js | displayValue": {
-    "message": "{requestCount, plural, =1 {1 r̂éq̂úêśt̂ • {byteCount, number, bytes} ḰB̂} other {# ŕêq́ûéŝt́ŝ • {byteCount, number, bytes} ḰB̂}}"
+    "message": "{requestCount, plural, =1 {1 r̂éq̂úêśt̂ • {byteCount, number, bytes} ḰîB́} other {# r̂éq̂úêśt̂ś • {byteCount, number, bytes} K̂íB̂}}"
   },
   "lighthouse-core/audits/resource-summary.js | title": {
     "message": "K̂éêṕ r̂éq̂úêśt̂ ćôún̂t́ŝ ĺôẃ âńd̂ t́r̂án̂śf̂ér̂ śîźêś ŝḿâĺl̂"
@@ -1512,7 +1512,7 @@
     "message": "Ĉúm̂úl̂át̂ív̂é L̂áŷóût́ Ŝh́îf́t̂"
   },
   "lighthouse-core/lib/i18n/i18n.js | displayValueByteSavings": {
-    "message": "P̂ót̂én̂t́îál̂ śâv́îńĝś ôf́ {wastedBytes, number, bytes} K̂B́"
+    "message": "P̂ót̂én̂t́îál̂ śâv́îńĝś ôf́ {wastedBytes, number, bytes} K̂íB̂"
   },
   "lighthouse-core/lib/i18n/i18n.js | displayValueMsSavings": {
     "message": "P̂ót̂én̂t́îál̂ śâv́îńĝś ôf́ {wastedMs, number, milliseconds} m̂ś"

diff --git a/lighthouse-core/report/html/renderer/crc-details-renderer.js b/lighthouse-core/report/html/renderer/crc-details-renderer.js
@@ -132,7 +132,7 @@ class CriticalRequestChainRenderer {
       const span = dom.createElement('span', 'crc-node__chain-duration');
       span.textContent = ' - ' + Util.i18n.formatMilliseconds((endTime - startTime) * 1000) + ', ';
       const span2 = dom.createElement('span', 'crc-node__chain-duration');
-      span2.textContent = Util.i18n.formatBytesToKB(transferSize, 0.01);
+      span2.textContent = Util.i18n.formatBytesToKiB(transferSize, 0.01);
 
       treevalEl.appendChild(span);
       treevalEl.appendChild(span2);

diff --git a/lighthouse-core/report/html/renderer/details-renderer.js b/lighthouse-core/report/html/renderer/details-renderer.js
@@ -75,8 +75,11 @@ class DetailsRenderer {
    */
   _renderBytes(details) {
     // TODO: handle displayUnit once we have something other than 'kb'
-    const value = Util.i18n.formatBytesToKB(details.value, details.granularity);
-    return this._renderText(value);
+    // Note that 'kb' is historical and actually represents KiB.
+    const value = Util.i18n.formatBytesToKiB(details.value, details.granularity);
+    const textEl = this._renderText(value);
+    textEl.title = Util.i18n.formatBytes(details.value);
+    return textEl;
   }
 
   /**
@@ -155,7 +158,7 @@ class DetailsRenderer {
 
   /**
    * @param {string} text
-   * @return {Element}
+   * @return {HTMLDivElement}
    */
   _renderText(text) {
     const element = this._dom.createElement('div', 'lh-text');

diff --git a/lighthouse-core/report/html/renderer/i18n.js b/lighthouse-core/report/html/renderer/i18n.js
@@ -44,9 +44,19 @@ class I18n {
    * @param {number=} granularity Controls how coarse the displayed value is, defaults to 0.1
    * @return {string}
    */
-  formatBytesToKB(size, granularity = 0.1) {
+  formatBytesToKiB(size, granularity = 0.1) {
     const kbs = this._numberFormatter.format(Math.round(size / 1024 / granularity) * granularity);
-    return `${kbs}${NBSP2}KB`;
+    return `${kbs}${NBSP2}KiB`;
+  }
+
+  /**
+   * @param {number} size
+   * @param {number=} granularity Controls how coarse the displayed value is, defaults to 0.1
+   * @return {string}
+   */
+  formatBytes(size, granularity = 1) {
+    const kbs = this._numberFormatter.format(Math.round(size / granularity) * granularity);
+    return `${kbs}${NBSP2}bytes`;
   }
 
   /**

diff --git a/lighthouse-core/test/audits/byte-efficiency/byte-efficiency-audit-test.js b/lighthouse-core/test/audits/byte-efficiency/byte-efficiency-audit-test.js
@@ -146,7 +146,7 @@ describe('Byte efficiency base audit', () => {
     });
   });
 
-  it('should populate KB', () => {
+  it('should populate KiB', () => {
     const result = ByteEfficiencyAudit.createAuditProduct({
       headings: baseHeadings,
       items: [

diff --git a/lighthouse-core/test/audits/resource-summary-test.js b/lighthouse-core/test/audits/resource-summary-test.js
@@ -41,7 +41,7 @@ describe('Performance: Resource summary audit', () => {
 
   it('has the correct display value', async () => {
     const result = await ResourceSummaryAudit.audit(artifacts, context);
-    expect(result.displayValue).toBeDisplayString('5 requests • 0 KB');
+    expect(result.displayValue).toBeDisplayString('5 requests • 0 KiB');
   });
 
   it('includes the correct properties for each table item', async () => {

diff --git a/lighthouse-core/test/config/budget-test.js b/lighthouse-core/test/config/budget-test.js
@@ -261,8 +261,8 @@ describe('Budget', () => {
     });
 
     it('throws when an invalid budget is supplied', () => {
-      budgets[0].timings[0].budget = '100KB';
-      assert.throws(_ => Budget.initializeBudget(budgets), /Invalid budget: 100KB/);
+      budgets[0].timings[0].budget = '100KiB';
+      assert.throws(_ => Budget.initializeBudget(budgets), /Invalid budget: 100KiB/);
     });
 
     it('throws when a tolerance is supplied', () => {

diff --git a/lighthouse-core/test/report/html/renderer/crc-details-renderer-test.js b/lighthouse-core/test/report/html/renderer/crc-details-renderer-test.js
@@ -113,7 +113,7 @@ describe('DetailsRenderer', () => {
     assert.equal(chains[1].querySelector('.lh-text__url-host').textContent, '(example.com)');
     const durationNodes = chains[1].querySelectorAll('.crc-node__chain-duration');
     assert.equal(durationNodes[0].textContent, ' - 5,000\xa0ms, ');
-    // Note: actual transferSize is 2000 bytes but formatter formats to KBs.
-    assert.equal(durationNodes[1].textContent, '1.95\xa0KB');
+    // Note: actual transferSize is 2000 bytes but formatter formats to KiBs.
+    assert.equal(durationNodes[1].textContent, '1.95\xa0KiB');
   });
 });
diff --git a/lighthouse-core/test/report/html/renderer/details-renderer-test.js b/lighthouse-core/test/report/html/renderer/details-renderer-test.js
@@ -126,8 +126,8 @@ describe('DetailsRenderer', () => {
         type: 'opportunity',
         headings: [
           {key: 'url', valueType: 'url', label: 'URL'},
-          {key: 'totalBytes', valueType: 'bytes', label: 'Size (KB)'},
-          {key: 'wastedBytes', valueType: 'bytes', label: 'Potential Savings (KB)'},
+          {key: 'totalBytes', valueType: 'bytes', label: 'Size (KiB)'},
+          {key: 'wastedBytes', valueType: 'bytes', label: 'Potential Savings (KiB)'},
         ],
         items: [{
           url: 'https://example.com',

diff --git a/lighthouse-core/test/report/html/renderer/i18n-test.js b/lighthouse-core/test/report/html/renderer/i18n-test.js
@@ -38,9 +38,9 @@ describe('util helpers', () => {
 
   it('formats bytes', () => {
     const i18n = new I18n('en', {...Util.UIStrings});
-    assert.equal(i18n.formatBytesToKB(100), `0.1${NBSP}KB`);
-    assert.equal(i18n.formatBytesToKB(2000), `2${NBSP}KB`);
-    assert.equal(i18n.formatBytesToKB(1014 * 1024), `1,014${NBSP}KB`);
+    assert.equal(i18n.formatBytesToKiB(100), `0.1${NBSP}KiB`);
+    assert.equal(i18n.formatBytesToKiB(2000), `2${NBSP}KiB`);
+    assert.equal(i18n.formatBytesToKiB(1014 * 1024), `1,014${NBSP}KiB`);
   });
 
   it('formats ms', () => {
@@ -62,7 +62,7 @@ describe('util helpers', () => {
 
     const i18n = new I18n('de', {...Util.UIStrings});
     assert.strictEqual(i18n.formatNumber(number), '12.346,9');
-    assert.strictEqual(i18n.formatBytesToKB(number), `12,1${NBSP}KB`);
+    assert.strictEqual(i18n.formatBytesToKiB(number), `12,1${NBSP}KiB`);
     assert.strictEqual(i18n.formatMilliseconds(number), `12.350${NBSP}ms`);
     assert.strictEqual(i18n.formatSeconds(number), `12,3${NBSP}s`);
   });
@@ -73,7 +73,7 @@ describe('util helpers', () => {
 
     const i18n = new I18n('en-XA', {...Util.UIStrings});
     assert.strictEqual(i18n.formatNumber(number), '12.346,9');
-    assert.strictEqual(i18n.formatBytesToKB(number), `12,1${NBSP}KB`);
+    assert.strictEqual(i18n.formatBytesToKiB(number), `12,1${NBSP}KiB`);
     assert.strictEqual(i18n.formatMilliseconds(number), `12.350${NBSP}ms`);
     assert.strictEqual(i18n.formatSeconds(number), `12,3${NBSP}s`);
   });

diff --git a/lighthouse-core/test/results/sample_v2.json b/lighthouse-core/test/results/sample_v2.json
@@ -1587,7 +1587,7 @@
       "description": "To set budgets for the quantity and size of page resources, add a budget.json file. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/budgets).",
       "score": null,
       "scoreDisplayMode": "informative",
-      "displayValue": "16 requests • 157 KB",
+      "displayValue": "16 requests • 157 KiB",
       "details": {
         "type": "table",
         "headings": [
@@ -2663,7 +2663,7 @@
       "scoreDisplayMode": "numeric",
       "numericValue": 160738,
       "numericUnit": "byte",
-      "displayValue": "Total size was 157 KB",
+      "displayValue": "Total size was 157 KiB",
       "details": {
         "type": "table",
         "headings": [
@@ -2823,7 +2823,7 @@
       "scoreDisplayMode": "numeric",
       "numericValue": 150,
       "numericUnit": "millisecond",
-      "displayValue": "Potential savings of 30 KB",
+      "displayValue": "Potential savings of 30 KiB",
       "warnings": [],
       "details": {
         "type": "opportunity",
@@ -2898,7 +2898,7 @@
       "scoreDisplayMode": "numeric",
       "numericValue": 0,
       "numericUnit": "millisecond",
-      "displayValue": "Potential savings of 9 KB",
+      "displayValue": "Potential savings of 9 KiB",
       "warnings": [],
       "details": {
         "type": "opportunity",
@@ -2963,7 +2963,7 @@
       "scoreDisplayMode": "numeric",
       "numericValue": 300,
       "numericUnit": "millisecond",
-      "displayValue": "Potential savings of 63 KB",
+      "displayValue": "Potential savings of 63 KiB",
       "details": {
         "type": "opportunity",
         "headings": [

diff --git a/types/budget.d.ts b/types/budget.d.ts
@@ -31,7 +31,7 @@ declare global {
       export interface ResourceBudget {
         /** The resource type that a budget applies to. */
         resourceType: ResourceType;
-        /** Budget for resource. Depending on context, this is either the count or size (KB) of a resource. */
+        /** Budget for resource. Depending on context, this is either the count or size (KiB) of a resource. */
         budget: number;
       }