Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improves performance and more #48

Merged
merged 14 commits into from
Apr 21, 2020
Merged

Improves performance and more #48

merged 14 commits into from
Apr 21, 2020

Conversation

Berkmann18
Copy link
Collaborator

@Berkmann18 Berkmann18 commented Apr 10, 2020

This PR initially started as a performance-focused improvement plan.
I also got around to improving (at least according to the local LightHouse evaluations I did) the app in a11y (accessibility), best practices, SEO and progressiveness.
There's still room for improvement in performance, best practise and in progressiveness/offline-friendliness tho, I listed some ideas at the bottom of this PR.

The LH score here (as well as the one on handsdown.dev will possibly be a bit different in terms of results) were:
Given the following format: Performance / A11y / BestPractices / SEO / (PWA: Fast&Reliable, Installable, PWA Optimised) = AverageScore % where all but the PWA metrics are in % and the PWA ones are respectively out of 3, 3 and 7 (this is just to simplify the results).

  • Before: 13 / 94 / 86 / 75 / (0 / 0 / 2) = ~42.37% (as of 2653c53)
  • Now: 27 / 100 / 86 / 100 / (0 / 1 / 6) = 61.72% (as of 4f5184d)

Re #7

Some other ways to improve the performance include:

  • Boot-up / loading:
    • Bundling (@amirhmk is working on this afaik).
    • File minification (currently only the vendor CSS and 3rd party JS code are).
    • Eliminating dead code.
  • Post-FMP / Post-Boot-up:
    • DOM
      • Using either a Shadow or Virtual DOM approach (either in-house or via a library/framework like Mithril/Snabbdom/Pureact/Preact+HTM/MaquetteJS/Stage0/Cycle.js/O!/...).
      • Reducing the amount of DOM manipulation (can be dealt with using a VDOM).
      • Using DocumentFragment where possible.
      • Using DOM creation utilities like crel.
    • Computations.
      • Dealing with only as many frames as needed (@misterpeddy mentioned that it instead of dealing with 60fps, the model could only deal with 20-25fps).
      • Short-circuiting whenever possible (Improves extrapolation #49 helps with that).

Edit: The LHCI score change is as follows:

Routes Perf A11y BP SEO PWA Average (in %)
index@master 58 94 79 60 1 / 0 / 1 48.37
index 83 100 79 100 1 / 1 / 6 73.48
+25 +6 0 +40 0 / +1 / +5 +25.11
dev@master 36 100 79 60 1 / 0 / 2 48.13
dev 79 98 79 100 1 / 1 / 6 72.63
+43 -2 0 +40 0 / +1 / +5 +24.5

public/index.html Outdated Show resolved Hide resolved
@Berkmann18 Berkmann18 merged commit a836a6b into master Apr 21, 2020
@Berkmann18 Berkmann18 deleted the lighter-perf branch April 21, 2020 15:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants