Our company site is undergoing some SEO analysis, and the big ticket item is trying to speed up page load time. And biggest culprits are our massive main.css and main.js - both of which are being minified and compiled via grunt.js.

What I would like to do is divide up the load and include only portion-specific styles and scripts for specific sections of out ecommerce website (home.css/home.js for the home page, search.css/search.js for all search pages, etc.)

I am struggling to find any tutorial or script that will allow me to compile different SCSS files into different combinations so that I can minimize the amount of unused styles and scripts a page will have to load.

Can anyone point me in the right direction of a tool or tutorial that may help?

Thank you in advance.