My CSS files are causing my page to render slowly, which is why I moved them to the footer. This, however creates a UX problem in that when a page loads, it's initially completely unstyled.
I've thought of two solutions to this problem and was wondering which is the best:
Move the CSS declarations for the navigation bar and page titles to a new CSS file which will be placed in the header. Although this will be a relatively small file, it has the downside of creating another HTTP request
Inline the CSS for the navigation and page titles in the header itself. Whilst this wouldn't create another HTTP request and would solve the problem, the CSS wouldn't be cached like it would if I put it in an external file.
What is the best solution to this problem? And are there good practice guidelines?
Yeah, the solution to this problem is to embed critical sections (or all) of your css directly into file like (index.html), because if you have more files, that's a new request for each of them and hence more time it takes to load the page :)