Improve page speed performance

FormidableLabs / victory-docs

Documentation for Victory: A collection of composable React components for building interactive data visualizations

http://formidable.com/open-source/victory

30 stars 65 forks source link

Improve page speed performance #686

Closed NgoKnows closed 4 years ago

NgoKnows commented 4 years ago

This PR makes some page speed performance improvements.

All Pages

Update styled-components to v5
Remove unused google fonts
Update victory

Home Page

Lazy render guide charts
Use date-fns in place of moment
Remove extra calculation in hero chart
Lighthouse Score Change

Mobile: 24 → 45

Desktop: 87 → 94

Gallery Page*

*Switching to this page is noticeably faster

Lazy render gallery examples
Lighthouse Score Change

Mobile: 12 → 41

Desktop: 66 → 81

About Page

Lazy load images
Decrease size (dimensions) of images
Lighthouse Score Change

Mobile: 58 → 66

Desktop: 82 → 92

boygirl commented 4 years ago

@NgoKnows I think the node version in the travis config needs to be updated to at least 10 to work with some deps you intorduced with these changes.

boygirl commented 4 years ago

@NgoKnows it looks like there's a style regression for playgrounds. I think it may be related to the styled-components upgrade, since switching back to master maintains the version I see on this branch until I do a fresh yarn install

on master with a fresh yarn install:

on this branch with a fresh yarn install:

boygirl commented 4 years ago

@NgoKnows Awesome improvements! Thank you so much! I left a few comments, but this otherwise is looking great

NgoKnows commented 4 years ago

Good catch! I've fixed that issue up, and this should be good to go! @boygirl

boygirl commented 4 years ago

@NgoKnows Thanks! I'll get this merged and deployed.