Loading multiple css files

Question

I am noticing a sudden INCREDIBLY slow load time on my site. Unfortunately my developer is unreachable at the moment and I was wondering if anyone had recommendations on how to solve this problem. I have probably pulled the CSS and jQuery into the site in the worst way possible. How do I call all the CSS files in just a single stylesheet and then call that into the header? Because that's what I tried to do, but it didn't seem to be working. Also, what is the best way to call multiple jQuery scripts? Should I set up a separate file and how would I call that file?

Any help is GREATLY appreciated. Also, I can give you the web address in a comment if you need it.

Using multiple `@import` in a single CSS file vs. multiple `` won't help. — hungerstar, Jul 25 '13 at 17:38

feitla · Accepted Answer · 2013-07-25T17:46:46.247

0

Since there isn't much to go off on here are some helpful hints and tactics:

If you can, add the scripts at the bottom of the pages before the closing <body> tag... so that your site will seem to "render" faster also allowing the scripts to load after the CSS has already loaded. This can speed up or make it seem like your site is loading faster.

     <!-- <scripts> -->
   </body>
</html>

Regarding the CSS, load them in the header after the meta tags but before the closing </header> tag. You can combine them into one with @import but I would not recommend this approach as this can greatly affect load time if the CSS is lengthy. If that is what you did when you say you tried combining your CSS files and then call it "into the header" then you need to undo that and remove the @imports

EDIT

So on top of these suggestions-- which you should at least consider moving the scripts to the end of the pages/templates. You also have several console errors that need to be addressed...

enter image description here

edited Jul 25 '13 at 17:46

answered Jul 25 '13 at 17:33

feitla

1,334
1
7
12

Use `@import` is a cause of long loading delays, not a solution. – Blazemonger Jul 25 '13 at 17:37
Which is why I said I don't recommend this approach. – feitla Jul 25 '13 at 17:41
Okay, thanks, I was making edits, but I think I got rid of those errors. I thought the width-device-width was the correct format for mobile viewing – user2469399 Jul 25 '13 at 17:50
You still have a couple errors including the view port, try `` – feitla Jul 25 '13 at 17:52
Wow thanks, that really seemed to speed things up immensely! – user2469399 Jul 25 '13 at 17:57
Hmm okay unfortunately it still seems super slow again :'( – user2469399 Jul 25 '13 at 18:07
Do I need to move my jQuery/javascript to an external file? – user2469399 Jul 25 '13 at 18:07
Did you move them right above the closing `
` tag? You have many many issues with how you are referencing. It needs a lot of clean up. 1. restructure your header A) ` ` info, ``'s, `
`'s `` content etc etc `` ` – feitla Jul 25 '13 at 18:13

Loading multiple css files

1 Answers1