Lighthouse Web App Audit

Contribute Site feedback

AI-generated summary

Lighthouse Web App Audit Summary

riking ran a Lighthouse audit on Discourse and highlighted several issues. Key findings include:

  • Performance:
    • First meaningful paint time is 4,510 ms, a known issue on an empty cache.
    • Render-blocking stylesheets and lack of text compression cause delays.
    • JavaScript boot-up time is too high, with a significant delay in PreloadStore evaluation.
  • Accessibility:
    • Color contrast issues persist, particularly with “thread started a long time ago” tags and pinned topic excerpts.
    • Disabling zooming on Android devices is problematic for users with low vision.
  • Other:
    • A blocking scrolling listener is added by ember_jquery.js, which can be improved by flagging it as passive.
    • A medium-severity vulnerability is present in jQuery 2.2.0.

codinghorror notes that disabling mobile zooming is impossible on iOS. sam and eviltrout agree on the need to upgrade to the latest stable jQuery version and perform a full JS audit in the 2.0 release cycle.

1

I saw that the Lighthouse audits had been updated, so I ran them again on Discourse. It’s probably a good idea to revisit these every few months!

I’m going to highlight the problems reported.

  • Metrics: First meaningful paint: 4,510 ms
    This is a well-known problem for Discourse on an empty cache.

  • Opportunity: Reduce render-blocking stylesheets: 350ms
    External stylesheets are blocking the first paint of your page. Consider delivering critical CSS via <style> tags and deferring non-critical styles.

     350ms, 252KB /stylesheets/mobile_060ac2f….css?__ws=meta.discourse.org
 325ms, 0.71KB /stylesheets/mobile_theme_28_02452c4….css?__ws=meta.discourse.org

  • Enable text compression: 170ms / 201KB
    Text-based responses should be served with compression (gzip, deflate or brotli) to minimize total network bytes.

    Original: 251 KB  GZIP Savings: 201 KB (80%)
  /stylesheets/mobile_060ac2f….css?__ws=meta.discourse.org

    This seems like an oversight in CDN configuration!

  • Serve images in next-gen formats: 82KB
    A couple avatars got detected as being pictures, and more suited to JPG than PNG.

  • Diagnostics: JavaScript boot-up time is too high: 3,550 ms
    Includes a nice breakdown of the JS costs! 191ms in the PreloadStore evaluation seems like a lot.

URL Script Evaluation Script Parsing & Compile
/assets/application-8a24d8e….br.js 156 ms 282 ms
/assets/ember_jquery-a8dcbd3….br.js 272 ms 20 ms
/ 191 ms 49 ms
/assets/vendor-5a5945e….br.js 82 ms 58 ms
/js/contentscript.js 129 ms 10 ms
/content.js 66 ms 9 ms
…locales/en-b144a97….br.js 49 ms 22 ms
/content.js 59 ms 5 ms
/assets/plugin-a65ebde….br.js 9 ms 46 ms
/page.js 31 ms 15 ms
/scripts/description.js 36 ms 1 ms
/assets/pretty-text-bundle-55bf606….br.js 9 ms 13 ms
/assets/plugin-third-party-a6c7ec5….br.js 1 ms 18 ms
  • Main thread work breakdown: 3,800 ms
    Cut this down to just the big ones.
Category Work Time spent
Parsing HTML & CSS Parse HTML 1,771 ms
Script Evaluation Evaluate Script 1,052 ms
Script Parsing & Compile Compile Script 561 ms

Accessibility

  • Color contrast issues, again. Mostly complaining about the “thread started a long time ago” tags and the excerpt from pinned topics.
  • Meta tags used properly
    :x: [user-scalable=“no”] is used in the element or the [maximum-scale] attribute is less than 5.
    Disabling zooming is problematic for users with low vision who rely on screen magnification to properly see the contents of a web page. Learn more.
  • 7 passed audits, plus extra manual checks which I believe we’ve gone over before and improved.

Other

  • :x: Blocking scrolling listener - ember_jquery.js is adding a blocking scrolling listener, flag the listener as passive to improve performance
  • Known vulnerability (Medium) in jQuery 2.2.0
  • Complaints about small font size - it says 64% legible (>16px), and the goal is 75%.
8개의 좋아요
2

FYI it is impossible to disable mobile zooming on iOS so that’s really an Android criticism at this point.

@sam was already aware that custom stylesheets aren’t compressed.

I don’t really see anything that we didn’t already know here?

3개의 좋아요
3

Ah, I wasn’t sure so I posted it anyways.

4개의 좋아요
4

One thing for sure @eviltrout is that we want to upgrade to jQuery latest stable first thing in the 2.0 release cycle, in fact we should probably do a full JS audit and upgrade all the outdated libs.

10개의 좋아요
5

Yes that’s a good idea. There’s also been some new Ember releases that are probably worth doing too.

2개의 좋아요
6

I assume this is what you’re talking about?