Rapid Response CSS

I have an idea to try and make my website load faster, but I want to know if it is actually going to help.

I have a website that is made with HTML, CSS, & JQuery. It runs great on desktop browsers, and is super dynamic. Unfortunately, it is pretty laggy on mobile browsers.

Here is my proposed model for the html layout.

Header Section Loads

• Bootstrap
• Fonts
• JQuery
• Rapid.css

Now the rapid.css file will have only 1/3rd of the css in it. Just the fonts, basic body settings, ect.

End Section Loads

• Javascript
• JQuery docs
• main.css

The main.css file will contain the other 2/3rds of my css in it. That way, the website does not have to load so much css within the first few seconds of loading the page.

My Questions

1. Will this idea actually make my page load faster, and if so, will it be enough to count.

2. Is this the best way to do this, or are there better models out there? How can I get this rapid loading to work?