refactor(plugin-lighthouse): format audit value #794

hanna-skryl · 2024-08-14T15:56:54Z

Closes #774

Update value and displayValue formatting and test the change
Refactor toAuditOutputs by extracting base audit output formatting and details processing into functions

packages/plugin-lighthouse/src/lib/runner/utils.ts

github-actions · 2024-08-14T16:02:19Z

Code PushUp

🤨 Code PushUp report has both improvements and regressions – compared target commit 605d384 with source commit da41f18.

🕵️ See full comparison in Code PushUp portal 🔍

🏷️ Categories

🏷️ Category	⭐ Previous score	⭐ Current score	🔄 Score change
Performance	🟡 51	🟡 54
Code coverage	🟡 90	🟡 90
Custom checks	🟡 67	🟡 67	–
Security	🟢 100	🟢 100	–
Updates	🟡 78	🟡 78	–
Accessibility	🟢 91	🟢 91	–
Best Practices	🟢 100	🟢 100	–
SEO	🟡 61	🟡 61	–
Bug prevention	🟢 100	🟢 100	–
Code style	🟢 99	🟢 99	–

🗃️ Groups

👍 2 groups improved

🔌 Plugin	🗃️ Group	⭐ Previous score	⭐ Current score	🔄 Score change
Lighthouse	Performance	🟡 51	🟡 54
Code coverage	Code coverage metrics	🟡 90	🟡 90

18 other groups are unchanged.

🛡️ Audits

👍 6 audits improved, 👎 2 audits regressed, 79 audits changed without impacting score

🔌 Plugin	🛡️ Audit	📏 Previous value	📏 Current value
Lighthouse	Speed Index	🟥 8.5 s	🟥 6.3 s
Lighthouse	First Contentful Paint	🟨 2.8 s	🟨 2.9 s
Lighthouse	First Meaningful Paint	🟨 2.8 s	🟨 2.9 s
Lighthouse	Largest Contentful Paint	🟨 3.1 s	🟨 2.9 s
Lighthouse	Time to Interactive	🟥 16.4 s	🟥 15.6 s
Code coverage	Branch coverage	🟨 84.4 %	🟨 84.4 %
Code coverage	Function coverage	🟩 92.1 %	🟩 92.1 %
Code coverage	Line coverage	🟩 91.6 %	🟩 91.6 %
Lighthouse	Minimizes main-thread work	🟥 23.4 s	🟥 18.9 s
Lighthouse	Total Blocking Time	🟥 8,820 ms	🟥 6,400 ms
Lighthouse	Avoids enormous network payloads	🟩 Total size was 1,806 KiB	🟩 Total size was 1,807 KiB
Lighthouse	JavaScript execution time	🟥 9.2 s	🟥 8.5 s
Lighthouse	Metrics	🟩 16353	🟩 100%
Lighthouse	Eliminate render-blocking resources	🟥 Potential savings of 360 ms	🟥 Potential savings of 1,040 ms
Lighthouse	Server Backend Latencies	🟩 120 ms	🟩 770 ms
Lighthouse	Uses efficient cache policy on static assets	🟨 28 resources found	🟨 28 resources found
Lighthouse	Max Potential First Input Delay	🟥 2,810 ms	🟥 2,580 ms
Lighthouse	Initial server response time was short	🟩 Root document took 370 ms	🟩 Root document took 450 ms
Lighthouse	Network Round Trip Times	🟩 10 ms	🟩 70 ms
Lighthouse	Reduce unused CSS	🟥 Potential savings of 105 KiB	🟥 Potential savings of 105 KiB
Lighthouse	Uses HTTPS	🟩 0	🟩 passed
Lighthouse	Has a `<meta name="viewport">` tag with `width` or `initial-scale`	🟩 0	🟩 100%
Lighthouse	Screenshot Thumbnails	🟩 0	🟩 100%
Lighthouse	Final Screenshot	🟩 0	🟩 100%
Lighthouse	No browser errors logged to the console	🟩 0	🟩 passed
Lighthouse	Avoid chaining critical requests	🟩 10 chains found	🟩 10 chains found
Lighthouse	Displays images with correct aspect ratio	🟩 0	🟩 passed
Lighthouse	Serves images with appropriate resolution	🟩 0	🟩 passed
Lighthouse	Avoids deprecated APIs	🟩 0	🟩 passed
Lighthouse	Avoids third-party cookies	🟩 0	🟩 passed
Lighthouse	Preconnect to required origins	🟩 0	🟩 100%
Lighthouse	All text remains visible during webfont loads	🟩 0	🟩 100%
Lighthouse	Diagnostics	🟩 0	🟩 100%
Lighthouse	Network Requests	🟩 0	🟩 100%
Lighthouse	Tasks	🟩 0	🟩 100%
Lighthouse	Resources Summary	🟩 0	🟩 100%
Lighthouse	Avoid long main-thread tasks	🟩 20 long tasks found	🟩 20 long tasks found
Lighthouse	Page has valid source maps	🟩 0	🟩 passed
Lighthouse	Ensure CSP is effective against XSS attacks	🟩 0	🟩 100%
Lighthouse	Script Treemap Data	🟩 0	🟩 100%
Lighthouse	`[aria-*]` attributes match their roles	🟩 0	🟩 passed
Lighthouse	Values assigned to `role=""` are valid ARIA roles.	🟩 0	🟩 passed
Lighthouse	ARIA attributes are used as specified for the element's role	🟩 0	🟩 passed
Lighthouse	Deprecated ARIA roles were not used	🟩 0	🟩 passed
Lighthouse	`[aria-hidden="true"]` is not present on the document `<body>`	🟩 0	🟩 passed
Lighthouse	`[aria-hidden="true"]` elements do not contain focusable descendents	🟩 0	🟩 passed
Lighthouse	`[role]`s have all required `[aria-*]` attributes	🟩 0	🟩 passed
Lighthouse	Elements with an ARIA `[role]` that require children to contain a specific `[role]` have all required children.	🟩 0	🟩 passed
Lighthouse	`[role]` values are valid	🟩 0	🟩 passed
Lighthouse	ARIA `tooltip` elements have accessible names	🟩 0	🟩 passed
Lighthouse	`[aria-*]` attributes have valid values	🟩 0	🟩 passed
Lighthouse	`[aria-*]` attributes are valid and not misspelled	🟩 0	🟩 passed
Lighthouse	Buttons have an accessible name	🟩 0	🟩 passed
Lighthouse	Document has a `<title>` element	🟩 0	🟩 passed
Lighthouse	Heading elements appear in a sequentially-descending order	🟩 0	🟩 passed
Lighthouse	`<html>` element has a `[lang]` attribute	🟩 0	🟩 passed
Lighthouse	`<html>` element has a valid value for its `[lang]` attribute	🟩 0	🟩 passed
Lighthouse	Identical links have the same purpose.	🟩 0	🟩 100%
Lighthouse	Image elements do not have `[alt]` attributes that are redundant text.	🟩 0	🟩 passed
Lighthouse	Links are distinguishable without relying on color.	🟩 0	🟩 passed
Lighthouse	Lists contain only `<li>` elements and script supporting elements (`<script>` and `<template>`).	🟩 0	🟩 passed
Lighthouse	List items (`<li>`) are contained within `<ul>`, `<ol>` or `<menu>` parent elements	🟩 0	🟩 passed
Lighthouse	`[user-scalable="no"]` is not used in the `<meta name="viewport">` element and the `[maximum-scale]` attribute is not less than 5.	🟩 0	🟩 passed
Lighthouse	No element has a `[tabindex]` value greater than 0	🟩 0	🟩 passed
Lighthouse	Tables have different content in the summary attribute and `<caption>`.	🟩 0	🟩 passed
Lighthouse	Tables use `<caption>` instead of cells with the `[colspan]` attribute to indicate a caption.	🟩 0	🟩 passed
Lighthouse	`<td>` elements in a large `<table>` have one or more table headers.	🟩 0	🟩 passed
Lighthouse	Cells in a `<table>` element that use the `[headers]` attribute refer to table cells within the same table.	🟩 0	🟩 passed
Lighthouse	`<th>` elements and elements with `[role="columnheader"/"rowheader"]` have data cells they describe.	🟩 0	🟩 100%
Lighthouse	Page has the HTML doctype	🟩 0	🟩 passed
Lighthouse	Properly defines charset	🟩 0	🟩 passed
Lighthouse	Avoids requesting the geolocation permission on page load	🟩 0	🟩 passed
Lighthouse	No issues in the `Issues` panel in Chrome Devtools	🟩 0	🟩 passed
Lighthouse	Avoids `document.write()`	🟩 0	🟩 100%
Lighthouse	Detected JavaScript libraries	🟩 0	🟩 100%
Lighthouse	Avoids requesting the notification permission on page load	🟩 0	🟩 passed
Lighthouse	Allows users to paste into input fields	🟩 0	🟩 passed
Lighthouse	Uses passive listeners to improve scrolling performance	🟩 0	🟩 100%
Lighthouse	Document has a meta description	🟩 0	🟩 passed
Lighthouse	Page has successful HTTP status code	🟩 0	🟩 passed
Lighthouse	Document uses legible font sizes	🟩 99.65% legible text	🟩 99.65% legible text
Lighthouse	Links have descriptive text	🟩 0	🟩 passed
Lighthouse	Links are crawlable	🟩 0	🟩 passed
Lighthouse	robots.txt is valid	🟩 0	🟩 passed
Lighthouse	Document has a valid `hreflang`	🟩 0	🟩 passed
Lighthouse	Document has a valid `rel=canonical`	🟩 0	🟩 passed
Lighthouse	Image elements have explicit `width` and `height`	🟨 0	🟨 50%