levimcg
commented
5 years ago Before we start on this, I'd like to do capture some metrics around the how the site currently performs. We can post those to this issue thread once we get started on this.
Some things I'd like to capture so we can compare the difference after:
- main JS Bundle size -
rivet-docs.js - total amount (Kb) of JavaScript we're currently sending down
- size of the
site-index.jsonwe're currently using for search - How all of these things affect the time to interactive metric - right now it's very slow ☹️
- any other relevant data related to the current use of JavaScript on the site
It might be good to start with a Lighthouse audit and go from there.
illusivesunrae
I like to move toward removing Vue from the Rivet docs site. We are only using it in a few places and it is adding a considerable amount of size (KBs) and processing time to our main JS bundle for not a lot of pay-off.
The problem
Really it's not so much the bundle size, although it is too large for a mostly static site at 156Kb compressed, it's more the time it takes for the page to become interactive. To demonstrate this you can click on one of the links in the sidebar in the components section.
The page content loads quite fast, but if you hover another link in the list after the new page has loaded, you'll notice that it takes about three seconds or so before the
:hoverunderline will show up. I suspect this is being caused by the time it takes the browser to parse the JS bundle on each new page load. If we were going full-boat on Vue e.g. rendering all our content with JS, using a router, etc. this wouldn't be noticeable, but since we are the docs are mostly static HTML the browser is caching the JS bundle, but still has to parse the code again when you navigate to a new document. So it's not a network request thing, it's a CPU thing. This article has some good insights on how JS is the most expensive asset for the browser to process:https://speedcurve.com/blog/your-javascript-hurts/
Challenges
We're using Vue to render the search bar, notifications menu, and the changelog so this will require a decent amount of development time to replace this set of functionality with another solution.
I'm interested to explore other smaller UI libraries with a smaller footprint like Preact, or hyperHTML, but I also think that we could looks at a vanilla JS implementation of most of these features.