Increase Lighthouse Score

gothinkster / ember-realworld

Ember.js RealWorld Implementation

https://ember-realworld.netlify.com/

183 stars 51 forks source link

Increase Lighthouse Score #93

Open Alonski opened 4 years ago

Alonski commented 4 years ago

Currently, our Lighthouse score is quite low: 61 in Incognito.

According to this blog post some of the RealWorld examples have a score of 99: https://www.freecodecamp.org/news/a-realworld-comparison-of-front-end-frameworks-with-benchmarks-2019-update-4be0d3c78075/

We should work to improve our score. I am sure that there are low hanging tasks that we can do to increase this.

Here is the full report that I generated: Lighthouse Report.pdf

GCheung55 commented 4 years ago

@Alonski can you generate a report from another project to use as a comparison/baseline?

Alonski commented 4 years ago

@GCheung55 It seems that my laptop is quite unperformant 😅 Maybe someone with a better computer can do it? Do you have a strong computer?

mansona commented 4 years ago

I did a comparison with the main frameworks and here are my results:

						Median	Mode
React Redux	78	78	78	72	78	78	78
Angular	84	88	84	84	86	84	84
Vue Vuex	90	90	91	90	90	90	90
Ember	70	79	77	79	77	77	79

Essentially Vue is the one to aim for but we could make some tweaks and pass Angular if we wanted to 👍

GCheung55 commented 4 years ago

Running the pages via https://web.dev/measure/ might provide more consistent results than our own computers. It'll generate reports we can download too.

GCheung55 commented 4 years ago

Possible changes we can make:

[ ] Update dependencies.
[ ] Combine app.js and vendor.js.
[ ] Combine or disable app.css and vendor.css since they are empty.
[ ] Add lang to <html>.
[ ] Add ember-hbs-minifier and/or ember-cli-htmlbars-minifier
[ ] Minify index.html

mansona commented 4 years ago

I guess it's probably worth defining what we mean by "Lighthouse Score" in this context 🤔 I would assume that we're only focusing on Performance (because that's what comparison blogs focus on) but I guess it makes sense to also fix any low hanging fruit on other audits 🤔

Also, I'm not entirely sure how much of an impact any of these things would have. Especially considering that the main things that are blocking high performance are third party resources (external CSS). How do other apps get around this?

Alonski commented 4 years ago

Maybe we could load the external CSS lazily :)