Performance Improvements with Reducing Javascript Payload

I spend the last few weeks cleaning up Javascript within CaptainCore for some much needed performance improvements. One of the items on my long to-do list was to reduce the amount of data sent to the browser. I was able to reduce my main WordPress REST API request from 809KB down to just 61.9KB. This is a massive reduction which resulted in some pretty fantastic speed improvements for the initial page load.

Staging site with CaptainCore v0.13.0
Production site with CaptainCore v0.14.0

Only load what’s necessary to draw the initial screens then fill in the rest later.

Part of my strategy was to simply remove the amount of information served. That’s easier said than done. Having lots of data in the browser makes is really easy to do some pretty powerful things, like complex filtering of items based on a really large subset of data. In my case I could filter any WordPress site based on any plugin on any version or any status. That works out well for a few hundred sites with maybe 25 different themes and plugins each. However with over 1000 sites the amount of data needed starts to be a bit much and would be better offloaded to the server side.

Filtering sites within CaptainCore

In order to get the site filters working I ended up created a number of new REST endpoints to handle these filter requests. So a large portion of Javascript was offloaded to the server and handled with PHP code.

/captaincore/v1/filters/<filters>/versions/ – Returns Javascript used to populate versions dropdown box.

/captaincore/v1/filters/<filters>/statuses/ – Returns Javascript used to populate statuses dropdown box.

/captaincore/v1/filters/<filters>/sites/versions=<versions>/statuses=<statuses> – Returns list of sites included in filters.