1620354 - about:welcome Google Lighthouse audit

Status: RESOLVED WORKSFORME

(Firefox :: Messaging System, enhancement, P1)

Description

[Peter deHaan [:pdehaan]]

Less interesting, but I also copy/pasted the source into a standalone HTML file, served it up locally on localhost, opened the page in Chrome, and ran it through Google's Lighthouse auditor and got a few other curious warnings/suggestions:

Performance: 99
Accessibility: 100
Best Practices: 79
SEO: 67

The "Best Practices" is misleading at best, since this is a huge hack job on my part. It punished us for not using HTTPS (doesn't apply), or not using HTTP/2 (again, what-ev-er), and something about Browser errors being logged in the console (mostly due to the resource:// and chrome:// protocols, which would 404 outside of the Firefox context, but also one confusing one about refusal to run inline scripts due to CSP violations:
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src resource: chrome:". Either the 'unsafe-inline' keyword, a hash ('sha256-ThhI8UaSFEbbl6cISiZpnJ4Z44uNSq2tPKgyRTD3LyU='), or a nonce ('nonce-...') is required to enable inline execution.
Not sure what that is about, and it doesn't give me much context or links. It might be due to some Chrome plugin trying to inject something into the DOM, so maybe I need to try w/ a fresh/incognito profile.

As for the low "SEO" score, I'd ignore those on principal since we don't care about SEO on the about:welcome pseudo-page, but for sake of completeness, here goes...

• Does not have a <meta name="viewport"> tag.
• Document does not have a meta description.
• robots.txt is not valid (HA!)

I could fix all those issues locally on my little webserver and rerun audits, but again, not sure SEO is a thing for this page.

aXe doesnt show anything overly interesting, just two issues reported:

• Document must have one main landmark
• All page content must be contained by landmarks

I tried replacing the top level <div id="root" class="welcome-container" role="presentation"> with a <main> tag and it gave me another error (presumably not liking <main> with role="presentation"). Putting all the HTML body content in a <main> tag fixed the two issues, but not 100% sure that is correct.

Comment 1

[Emily McMinn :emcminn]

Hi folks, after some conversation we've pretty much decided that no changes are needed here (yay!). Performance and accessibility are implemented fully, SEO isn't really applicable to about:welcome, and the CSP issues are expected - they're happening because of script restriction we have about-welcome.html, so if we are going to try loading script outside of chrome:// or resource:// urls we can expect to see these violations.

Just to make sure, Peter, would you mind double-checking the accessibility in Nightly, and giving some steps to reproduce the CSP violations? Especially if you were able to duplicate them with a clean/incognito profile. Thanks!

Comment 2

[Peter deHaan [:pdehaan]]

Everything looks fine to me. I just checked the about:welcome page on today's Nightly and manually copied the generated code into a new index.html file I can open in Chrome in order to use the Lighthouse auditing and the results looked fine. Agree that SEO and Best Practices results aren't really relevant here since this is a pretty hacked solution. Also ran this through my aXe a11y linter and it reported zero issues.

:+1:

Comment 3

[Punam Dahiya [:pdahiya]]

Thanks Peter! Resolving bug as working expected in nightly.