Lighthouse Web App Audit

Site feedback
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 Likes
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 Likes
3

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

4 Likes
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 Likes
5

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

2 Likes
6

I assume this is what you’re talking about?