Optimize CSS & JS for Goliath theme

[benlk]

• [ ] In the goliath theme, separate div#particles and the related JS and CSS out into a file that can be loaded via a feature flag or switch. Default that switch to "off". Document the switch in case they want us to put the floaters back.

[benlk]

a.back-to-top has a weird bug where, after any scroll, the inline opacity: style is repeatedly set to a number that fluctuates wildly between 0 and 1, and continues fluctuating after the page is scrolled. Can we patch that JS or remove it?

[benlk]

Installing https://wordpress.org/plugins/autoptimize/ to concatenate the CSS into a single network request, and to enable lazy-loading of images, and to aggregate JS files, got my local site from a 39 to 65 on Chrome's devtools Lighthouse audit on mobile:

[benlk]

Particle background has a checkbox at Customizer > Background > Enable active particle background, which can be disabled. The JS is already built to check for that. The CSS is five lines; not worth the effort to spin off into its own stylesheet.

[benlk]

Plugin installed on staging, with the following changes to the default configuration, in Settings > Autoptimize:

• JS: yes aggregate JS, no aggregate inline JS
• CSS: yes aggregate CSS, yes aggregate CSS files, no aggregate inline CSS
• Misc Options: no minify
• Images: no optimize or lazy-load, since in #4 @joshdarby installed Smush and we don't want those plugins fighting
• Extra: No changes, though we might consider disabling WP Emoji
• Optimize More!: ugh, ads
• Critical CSS: ugh, an ad

Particle background disabled.

[joshdarby]

It's probably worth noting that they have a plugin installed and activated named WP Minify which supposedly minifies css and js. I'd say we can probably remove it since we're going with Autoptimize.

[benlk]

That plugin didn't seem to be doing anything, which is what led me to Autoptimize. I've disabled WP Minify on staging.