PDA

View Full Version : How to reduce the number of js and css files that are loaded?


Skylark
05-14-2013, 05:22 PM
Can anyone help me implement the following advice?

When visitors move from my homepage to any other page of my site they experience a brief blank white screen. It doesn't happen again after that initial move. I've been told that the problem is that:You're trying to load 5 js files and 3 css files. You should be able to easily reduce the number of files loaded, since you're loading at least two different jquery files.
The site is at http://www.davidcade.net

I'm a complete booby when it comes to the inner-workings of Dreamweaver, so I haven't the vaguest idea how to "reduce the number of files loaded".

Can anyone baby-talk me through what I need to do, please?

Thanks.

m1a2x3x7
05-14-2013, 09:44 PM
To reduce files you basically take the code from each JS file and put it into one file. Same thing with the CSS.

Your JS code should be at the bottom of your page before the body close tag.

Depending on how much knowledge you have with your server you should look at turning gzip on to compress your files.

Here is a good tool to install on your browser: http://developer.yahoo.com/yslow/

And last, you might want to look at http://www.imageoptimizer.net/Pages/Home.aspx to compress the file size of your images. Your home page has 13 decent size images around 50k each which isn't bad individually but x that by 13 and it starts to make a difference.

Hope this helps.

-M

Skylark
05-15-2013, 03:36 PM
Thanks, Chris!

Re. taking the code from each JS file and putting it into one file, and the same thing for CSS files, I'm nervous, but up to giving it ago.

I have fewer CSS files than JS files, so I'll start with them.

I see that in my website's CSS folder there are four css files (flexslider.css, ie.css, prettyPhoto.css, & style.css).

So, is it just a matter of:

1. copying ALL of the contents of flexslider.css, ie.css, & prettyPhoto.css, and just pasting them in, one after the other, at the BOTTOM of the current style.css file?

and then

2. searching through each of my html pages for all references to "*.css" and changing them to "style.css"?

Is it as simple as this?

Thanks,
David.