ember-realworld
ember-realworld copied to clipboard
gothinkster
Increase Lighthouse Score
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
@Alonski can you generate a report from another project to use as a comparison/baseline?
@GCheung55 It seems that my laptop is quite unperformant 😅 Maybe someone with a better computer can do it? Do you have a strong computer?
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 👍
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.
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
langto<html>. - [ ] Add ember-hbs-minifier and/or ember-cli-htmlbars-minifier
- [ ] Minify
index.html
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?