diff --git a/example/src/index.js b/example/src/index.js
index 50b1efd..78518b6 100644
--- a/example/src/index.js
+++ b/example/src/index.js
@@ -5,7 +5,7 @@ import ReportViewer from '../../src';
import '../../src/report-styles.css';
import './index.css';
-import jsonReport from './report5.json';
+import jsonReport from './report6.json';
const App = () => (
diff --git a/example/src/report6.json b/example/src/report6.json
new file mode 100644
index 0000000..9b5e11e
--- /dev/null
+++ b/example/src/report6.json
@@ -0,0 +1,5053 @@
+{
+ "requestedUrl": "https://blencorp.com/",
+ "finalUrl": "https://blencorp.com/",
+ "lighthouseVersion": "6.1.0",
+ "userAgent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/83.0.4103.93 Safari/537.36",
+ "fetchTime": "2020-07-09T22:54:13.633Z",
+ "environment": {
+ "networkUserAgent": "Mozilla/5.0 (Linux; Android 7.0; Moto G (4)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4143.7 Mobile Safari/537.36 Chrome-Lighthouse",
+ "hostUserAgent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/83.0.4103.93 Safari/537.36",
+ "benchmarkIndex": 701
+ },
+ "runWarnings": [],
+ "configSettings": {
+ "emulatedFormFactor": "mobile",
+ "locale": "en-US",
+ "onlyCategories": [
+ "pwa",
+ "performance",
+ "accessibility",
+ "best-practices",
+ "seo"
+ ],
+ "channel": "lr"
+ },
+ "audits": {
+ "aria-input-field-name": {
+ "id": "aria-input-field-name",
+ "title": "ARIA input fields have accessible names",
+ "description": "When an input field doesn't have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers. [Learn more](https://web.dev/aria-input-field-name/).",
+ "score": null,
+ "scoreDisplayMode": "notApplicable"
+ },
+ "content-width": {
+ "id": "content-width",
+ "title": "Content is sized correctly for the viewport",
+ "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/).",
+ "score": 1,
+ "scoreDisplayMode": "binary"
+ },
+ "speed-index": {
+ "id": "speed-index",
+ "title": "Speed Index",
+ "description": "Speed Index shows how quickly the contents of a page are visibly populated. [Learn more](https://web.dev/speed-index/).",
+ "score": 0.95,
+ "scoreDisplayMode": "numeric",
+ "displayValue": "2.9 s",
+ "numericValue": 2880.3503529808213
+ },
+ "diagnostics": {
+ "id": "diagnostics",
+ "title": "Diagnostics",
+ "description": "Collection of useful page vitals.",
+ "score": null,
+ "scoreDisplayMode": "informative",
+ "details": {
+ "items": [
+ {
+ "totalByteWeight": 736186,
+ "maxRtt": 0.00019831840647958885,
+ "mainDocumentTransferSize": 4588,
+ "numTasks": 733,
+ "numTasksOver10ms": 12,
+ "maxServerLatency": null,
+ "numFonts": 3,
+ "numScripts": 18,
+ "numTasksOver500ms": 0,
+ "numRequests": 45,
+ "rtt": 0.00019831840647958885,
+ "numTasksOver25ms": 7,
+ "throughput": 47780185962.29611,
+ "totalTaskTime": 654.3159999999979,
+ "numTasksOver100ms": 1,
+ "numTasksOver50ms": 2,
+ "numStylesheets": 7
+ }
+ ],
+ "type": "debugdata"
+ }
+ },
+ "is-on-https": {
+ "id": "is-on-https",
+ "title": "Uses HTTPS",
+ "description": "All sites should be protected with HTTPS, even ones that don't handle sensitive data. This includes avoiding [mixed content](https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content), where some resources are loaded over HTTP despite the initial request being servedover 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/).",
+ "score": 1,
+ "scoreDisplayMode": "binary",
+ "details": {
+ "items": [],
+ "type": "table",
+ "headings": []
+ }
+ },
+ "main-thread-tasks": {
+ "id": "main-thread-tasks",
+ "title": "Tasks",
+ "description": "Lists the toplevel main thread tasks that executed during page load.",
+ "score": null,
+ "scoreDisplayMode": "informative",
+ "details": {
+ "headings": [
+ {
+ "itemType": "ms",
+ "key": "startTime",
+ "text": "Start Time",
+ "granularity": 1
+ },
+ {
+ "key": "duration",
+ "text": "End Time",
+ "itemType": "ms",
+ "granularity": 1
+ }
+ ],
+ "type": "table",
+ "items": [
+ {
+ "startTime": 128.49,
+ "duration": 9.422
+ },
+ {
+ "duration": 5.389,
+ "startTime": 141.051
+ },
+ {
+ "duration": 5.951,
+ "startTime": 173.3
+ },
+ {
+ "duration": 77.784,
+ "startTime": 267.461
+ },
+ {
+ "startTime": 345.274,
+ "duration": 41.413
+ },
+ {
+ "startTime": 390.311,
+ "duration": 24.253
+ },
+ {
+ "startTime": 420.976,
+ "duration": 6.996
+ },
+ {
+ "duration": 16.582,
+ "startTime": 429.389
+ },
+ {
+ "duration": 17.315,
+ "startTime": 460.369
+ },
+ {
+ "duration": 19.729,
+ "startTime": 478.753
+ },
+ {
+ "duration": 18.328,
+ "startTime": 501.893
+ },
+ {
+ "duration": 107.261,
+ "startTime": 523.167
+ },
+ {
+ "startTime": 641.826,
+ "duration": 35.182
+ },
+ {
+ "startTime": 677.457,
+ "duration": 8.42
+ },
+ {
+ "startTime": 688.682,
+ "duration": 40.34
+ },
+ {
+ "startTime": 731.84,
+ "duration": 30.82
+ },
+ {
+ "startTime": 772.986,
+ "duration": 7.328
+ },
+ {
+ "duration": 44.853,
+ "startTime": 1139.707
+ },
+ {
+ "startTime": 1228.246,
+ "duration": 6.029
+ }
+ ]
+ }
+ },
+ "bypass": {
+ "id": "bypass",
+ "title": "The page contains a heading, skip link, or landmark region",
+ "description": "Adding ways to bypass repetitive content lets keyboard users navigate the page more efficiently. [Learn more](https://web.dev/bypass/).",
+ "score": 1,
+ "scoreDisplayMode": "binary",
+ "details": {
+ "items": [],
+ "headings": [],
+ "type": "table"
+ }
+ },
+ "image-size-responsive": {
+ "id": "image-size-responsive",
+ "title": "Serves images with low resolution",
+ "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/).",
+ "score": 0,
+ "scoreDisplayMode": "binary",
+ "details": {
+ "headings": [
+ {
+ "key": "url",
+ "itemType": "thumbnail"
+ },
+ {
+ "text": "URL",
+ "itemType": "url",
+ "key": "elidedUrl"
+ },
+ {
+ "text": "Displayed size",
+ "itemType": "text",
+ "key": "displayedSize"
+ },
+ {
+ "text": "Actual size",
+ "key": "actualSize",
+ "itemType": "text"
+ },
+ {
+ "text": "Expected size",
+ "key": "expectedSize",
+ "itemType": "text"
+ }
+ ],
+ "type": "table",
+ "items": [
+ {
+ "expectedPixels": 40260,
+ "actualPixels": 5800,
+ "expectedSize": "305 x 132",
+ "elidedUrl": "https://blencorp.com/assets/img/logo.png",
+ "displayedSize": "116 x 50",
+ "actualSize": "116 x 50",
+ "url": "https://blencorp.com/assets/img/logo.png"
+ }
+ ]
+ }
+ },
+ "uses-webp-images": {
+ "id": "uses-webp-images",
+ "title": "Serve images in next-gen formats",
+ "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://web.dev/uses-webp-images/).",
+ "score": 0.88,
+ "scoreDisplayMode": "numeric",
+ "displayValue": "Potential savings of 48 KiB",
+ "details": {
+ "overallSavingsMs": 140,
+ "overallSavingsBytes": 48831,
+ "items": [
+ {
+ "fromProtocol": true,
+ "wastedBytes": 18164,
+ "totalBytes": 34092,
+ "url": "https://blencorp.com/assets/img/banners/banner-abc7.png",
+ "isCrossOrigin": false
+ },
+ {
+ "fromProtocol": true,
+ "isCrossOrigin": false,
+ "url": "https://blencorp.com/assets/img/project/portfolio-eleat.png",
+ "wastedBytes": 16214,
+ "totalBytes": 25798
+ },
+ {
+ "url": "https://blencorp.com/assets/img/project/portfolio-cdcnpin.png",
+ "fromProtocol": true,
+ "totalBytes": 16243,
+ "isCrossOrigin": false,
+ "wastedBytes": 14453
+ }
+ ],
+ "headings": [
+ {
+ "valueType": "thumbnail",
+ "key": "url"
+ },
+ {
+ "label": "URL",
+ "valueType": "url",
+ "key": "url"
+ },
+ {
+ "label": "Resource Size",
+ "key": "totalBytes",
+ "valueType": "bytes"
+ },
+ {
+ "label": "Potential Savings",
+ "key": "wastedBytes",
+ "valueType": "bytes"
+ }
+ ],
+ "type": "opportunity"
+ },
+ "warnings": [],
+ "numericValue": 140
+ },
+ "apple-touch-icon": {
+ "id": "apple-touch-icon",
+ "title": "Does not provide a valid `apple-touch-icon`",
+ "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/).",
+ "score": 0,
+ "scoreDisplayMode": "binary",
+ "warnings": []
+ },
+ "first-contentful-paint": {
+ "id": "first-contentful-paint",
+ "title": "First Contentful Paint",
+ "description": "First Contentful Paint marks the time at which the first text or image is painted. [Learn more](https://web.dev/first-contentful-paint/).",
+ "score": 0.89,
+ "scoreDisplayMode": "numeric",
+ "displayValue": "2.4 s",
+ "numericValue": 2400
+ },
+ "object-alt": {
+ "id": "object-alt",
+ "title": "`