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.

Sign up for GitHub

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

Jump to bottom

Improve performance on production by reducing JS payloads #1024

Open
julianguyen opened this issue Oct 1, 2018 · 4 comments
Open

Improve performance on production by reducing JS payloads #1024

julianguyen opened this issue Oct 1, 2018 · 4 comments
Labels
hacktoberfest performance

Comments

@julianguyen
Copy link
Member

julianguyen commented Oct 1, 2018 •
edited
Loading

Description

We've already done some significant work to improve performance (please note on production) including

  • Code splitting in Webpack 4
  • Inline rendering of CSS and Rails JS assets
  • Deferring JS assets from React
  • Using async on third party JS scripts
  • Gzipping
  • Minifying CSS in both Rails and React
  • Caching

The Audit tool in Google developer console is super rad (you should check it out if you haven't already). Our performance score went from ~3 to ~40 on mobile and ~0 to ~36 on desktop on the signed in home page (Simulated Fast 3G, 4x CPU slowdown).

There is still significant work we can do with cutting down on reducing JS payloads. See screenshots below for more details.

Screenshots

Mobile

screen shot 2018-09-26 at 6 46 10 pm

Desktop

screen shot 2018-09-26 at 6 56 30 pm

Payload Stats

image

image

Please assign yourself (via the Assignees dropdown), if you do want to work on this issue. Can't find yourself? You need to join our organization.

Check out our Picking Up Issues guide if you haven't already!
@geppy geppy self-assigned this Oct 3, 2018
@julianguyen
Copy link
Member Author

@geppy Just checking in, how is this going? :)

@geppy
Copy link
Contributor

geppy commented Nov 23, 2018 •
edited by Tera15
Loading

I worked out where our JavaScript bytes are coming from, then planned out some straightforward changes that'd make a huge difference.

My day job's been too pointlessly dramatic for me to want to work on projects when I get home, but it should start calming down temporarily. And I took off the rest of this week.

I'll try to work on this in PR-sized chunks, in this order:

  • rewrite Header component
    • only user-visible change should be improved performance
    • taking out react-render-html might save 200 kB (10% of the app's entire JavaScript payload)
  • change how localizations are loaded
    • modularizing locale-specific data could save 500 kB (30-40% of the app's entire JavaScript payload)
  • load polyfills only when necessary
    • would often save another 100 kB
  • adjust charts (load less of chart.js, or render charts another way)
    • might save another 100 kB

I can start on the header component, but could we chat about the others?

@julianguyen
Copy link
Member Author

Thanks for following up @geppy!I"m sorry to hear your day job is a source of drama :/ I'm glad you took time off, and I hope it was a good break.

No worries for not working on this immediately and not pressure either. I totally understand.

Good idea on breaking out this PR into chunks 🙌 I think starting off with the header component makes sense!

Let's chat about the others too, we can schedule a time on Slack! An existing issue was created for modularizing locale data if that's helpful.

@geppy geppy mentioned this issue Feb 18, 2019
Merged
@Ishpreet01
Copy link

Hi, Can I also help with this issue? I am new to open source and would like to work on this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
hacktoberfest performance
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@geppy @julianguyen @Ishpreet01