Repository: GoogleChrome/lighthouse (js)

Issue:
Lazyload images
Hi
web.dev report that images must be lazyloaded but images are allways in the viewport and don´t need to be lazyloaded. With LH in Chrome these images are not reported.
Url to test: https://intersindicalrm.org/
Reported images:
https://intersindicalrm.org/wp-content/uploads/2016/01/xHeaderinter.png.pagespeed.ic.xgDv2cQfEw.webp
https://intersindicalrm.org/wp-content/uploads/2018/10/xVCongreso1.jpg.pagespeed.ic.Yea4QqDleN.webp



Pull request description:
core: always run axe last
**Summary**
I broke offscreen images when I moved the image-elements gatherer down below accessibility in https://github.com/GoogleChrome/lighthouse/pull/7030.

This PR adds a smoketest to capture this and moves axe to the bottom with a comment.

**Related Issues/PRs**
broken in #7030
fixes #8211 


Patch:
diff --git a/lighthouse-core/config/default-config.js b/lighthouse-core/config/default-config.js
index 2efd553d2..82b346a19 100644
--- a/lighthouse-core/config/default-config.js
+++ b/lighthouse-core/config/default-config.js
@@ -102,7 +102,6 @@ const defaultConfig = {
       'viewport-dimensions',
       'runtime-exceptions',
       'chrome-console-messages',
-      'accessibility',
       'anchor-elements',
       'image-elements',
       'link-elements',
@@ -119,6 +118,8 @@ const defaultConfig = {
       'seo/embedded-content',
       'seo/robots-txt',
       'seo/tap-targets',
+      // Always run axe last because it scrolls the page down to the bottom
+      'accessibility',
     ],
   },
   {
diff --git a/lighthouse-core/report/html/report-template.html b/lighthouse-core/report/html/report-template.html
index 52373acd4..491925c6b 100644
--- a/lighthouse-core/report/html/report-template.html
+++ b/lighthouse-core/report/html/report-template.html
@@ -36,7 +36,7 @@ limitations under the License.
   </script>
   <script>window.__LIGHTHOUSE_JSON__ = %%LIGHTHOUSE_JSON%%;</script>
   <script>
-    window.addEventListener('DOMContentLoaded', _ => {
+    function __initLighthouseReport__() {
       const dom = new DOM(document);
       const renderer = new ReportRenderer(dom);
 
@@ -47,7 +47,8 @@ limitations under the License.
       // is in the document.
       const features = new ReportUIFeatures(dom);
       features.initFeatures(window.__LIGHTHOUSE_JSON__);
-    });
+    }
+    window.addEventListener('DOMContentLoaded', __initLighthouseReport__);
 
     document.addEventListener('lh-analytics', e => {
       if (window.ga) {


Test patch:
diff --git a/lighthouse-cli/test/cli/__snapshots__/index-test.js.snap b/lighthouse-cli/test/cli/__snapshots__/index-test.js.snap
index c9b115485..ac884fe74 100644
--- a/lighthouse-cli/test/cli/__snapshots__/index-test.js.snap
+++ b/lighthouse-cli/test/cli/__snapshots__/index-test.js.snap
@@ -1081,9 +1081,6 @@ Object {
         Object {
           "path": "chrome-console-messages",
         },
-        Object {
-          "path": "accessibility",
-        },
         Object {
           "path": "anchor-elements",
         },
@@ -1132,6 +1129,9 @@ Object {
         Object {
           "path": "seo/tap-targets",
         },
+        Object {
+          "path": "accessibility",
+        },
       ],
       "networkQuietThresholdMs": 1000,
       "passName": "defaultPass",
diff --git a/lighthouse-cli/test/fixtures/byte-efficiency/tester.html b/lighthouse-cli/test/fixtures/byte-efficiency/tester.html
index 4b617c90b..17e1372dc 100644
--- a/lighthouse-cli/test/fixtures/byte-efficiency/tester.html
+++ b/lighthouse-cli/test/fixtures/byte-efficiency/tester.html
@@ -144,6 +144,7 @@ setTimeout(() => {
   <div class="onscreen" style="width: 30px; height: 30px; background: 25% 50% url(lighthouse-480x320.jpg?sprite);"></div>
   <div class="onscreen" style="width: 30px; height: 30px; background: 50% 50% url(lighthouse-480x320.jpg?sprite);"></div>
   <div class="onscreen" style="width: 30px; height: 30px; background: 75% 50% url(lighthouse-480x320.jpg?sprite);"></div>
+  <p style="background: blue;">Add some text here so axe will scroll to the bottom</p>
 </div>
 
 <template id="lazily-loaded-image">
diff --git a/lighthouse-cli/test/smokehouse/byte-config.js b/lighthouse-cli/test/smokehouse/byte-config.js
index cb901fa93..d3b2977e4 100644
--- a/lighthouse-cli/test/smokehouse/byte-config.js
+++ b/lighthouse-cli/test/smokehouse/byte-config.js
@@ -12,6 +12,7 @@ module.exports = {
   extends: 'lighthouse:full',
   settings: {
     onlyAudits: [
+      'accesskeys', // run axe on the page since we've had problems with interactions
       'network-requests',
       'offscreen-images',
       'uses-webp-images',