Ask your WordPress questions! Pay money and get answers fast! (more info)

Need to combine external JS and CSS files into one file.

I am using the Karma theme from to create a new website in Wordpress. I have the look and layout the way I want, but the site is loading way too slow, even after installing W3 Total Cache, and WP Minify and WP Widget Cache. When I run YSlow it tells me the following:

"Grade F on Make fewer HTTP requests

This page has 9 external Javascript scripts. Try combining them into one.
This page has 5 external stylesheets. Try combining them into one.
This page has 19 external background images. Try combining them with CSS sprites."

I have no idea how to do this, and when I tried to have WP Minify move CSS files to the footer it totally messed up the site and I had to reinstall the WP theme.

I think this combing of the CSS an JS files might be easy enough for a programmer, but I am not a programmer and don't want to risk ruining my site's functionality. Can anyone help?

the site is currently being built on a subdomain: http://test.progressivepitching.com

Thanks

Answers (10)

2012-07-06

Luis Abarca answers:

CSS and JS can't be mixed, but you can use CDN or join many css files into one.

You may also combine icons and little images into one image file and then use it with CSS like this.


background: url(sprites.png) 10px 20px no-repeat;


try this plugin [[LINK href="http://wordpress.org/extend/plugins/bwp-minify/"]]http://wordpress.org/extend/plugins/bwp-minify/[[/LINK]]

or this one

[[LINK href="http://wordpress.org/extend/plugins/wp-minify/"]]http://wordpress.org/extend/plugins/wp-minify/[[/LINK]]

--

I can't add more answers, shows as empty answers


prosengren comments:

Thanks, I'm not sure I understand how to combine the image files into one, but if it's possible then I would like to do that. I dont want to use a CDN if I can avoid it. But if its possible to combine the CSS files into one I would like to do that.

Can you combine the external JS files into one?

I have no idea how to do all of this. If you are able to do it all and it would speed up my site that would be great.


Luis Abarca comments:


Luis Abarca comments:

2012-07-06

Arnav Joy answers:

As "Luis Abarca" said you can not combine css and js , but you combine css to one file .

you can also use sprite images in most of the places of your site.

you can have some knowledge about it from following url's

http://sixrevisions.com/css/css-sprites-site-speed/

http://www.cssgirl.com/resources/2008/05/28/css-sprites-easily-use-css-to-replace-images/

http://www.w3schools.com/css/css_image_sprites.asp

2012-07-06

Hardeep Singh answers:

ok, so you want to reduce the number of network calls.

As answered by two, minify the css & js to reduce the network LOAD.

Idea of combining the js files is good and css files is good too.
This can be combined in the same order as added. (you can identify the order by looking into HTML source code in the browser)

This will reduce the number of network calls.

Now further, if you want to combine both css & js files, you can include them in the respective tags in head section of your header.php



echo "<script type='text/javascript'>";
include_once "all_js.php"; // to include the all_js.php that contains js code of the site
echo "</script>";

echo "<style type='text/css'>";
include_once "all_css.php"; // to include the all_css.php that contains css code of the site
echo "</style>";



What will happen with this: It will reduce your network calls to ONE for content + CSS + JS


Hardeep Singh comments:

2012-07-06

Jatin Soni answers:

I got only 1MB connection and your site loads faster and taking few seconds. May be there is problem exists but I got working faster than you saying.. Is there any firewall setup done at your side?

Combining js and css can conflict each other and not good idea to do as sometimes intentionally made separately. However my suggestion is try to optimize graphics instead.

For e.g the blue header have two 1300 x 150 and 3 x 139 graphics another found in tag line and size is 1 x 8000 these types of graphics take time to load. These all graphics are simple gradient and you can easily convert in to css gradient which will reduce loading time.

There is also possibility with other plugin that makes site slower but need to check.. To cross check just disable all plugins and check the speed. If you can find some difference in loading by disabling the plugin than you can identify and can manage all.

If still need help to diagnose it than give me some access where I can have a look in depth.


prosengren comments:

thanks I think some changes i made with wp minify settings may have helped. But still takes about 5 seconds to load the first time i try it. would like to get it down to 2 or 3 seconds if possible. do you think its worth trying to combine those graphics into one file or would that make it tougher to make changes to my site in the future?


Jatin Soni comments:


Jatin Soni comments:

2012-07-06

Albert Shala answers:

You can minify the css and js, i don't see what any major reason to create sprites as you don't have that many images, most of which you will add and remove dynamically. I would look at using conditional statements to call your jQuery, which is being called on all pages weather it's being utilized or not.


Albert Shala comments:

2012-07-06

Daniel Yoen answers:


you can try this great tools :

http://code.google.com/p/minify/ | js,css minify
http://csssprites.com/ | image sprites

or you can try this script :


<script type="text/javascript">
function downloadJSAtOnload()
{
var element = document.createElement("script");
element.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js";
document.body.appendChild(element);

var element = document.createElement("script");
element.src = "<?php echo get_template_directory_uri(); ?>/yourscript1.js";
document.body.appendChild(element);

var element = document.createElement("script");
element.src = "<?php echo get_template_directory_uri(); ?>/yourscript2.js";
document.body.appendChild(element);

<?php if(is_singular()) { ?>
var element = document.createElement("script");
element.src = "<?php bloginfo('url'); ?>/wp-includes/js/comment-reply.js";
document.body.appendChild(element);
<?php } ?>
}

if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>



this script will load all javascript only after your page fully loaded


Daniel Yoen comments:


prosengren comments:

so if you look at the way its currently set up on my site, would you be able to make the changes, combining css files into one file, and combining all js into one file? im just afraid if i itry it i will mess up my site or the WP theme itself.

i did install w3 total cache and wp minify and the recent settings seem to help some, but still takes about 5 seconds to load the first time i try it. would like to get it down to 2 or 3 seconds if possible.

2012-07-06

Jarret Minkler answers:

Simply install Wordpress Total Cache. It will combine them, and fix all the other errors PageSpeed plugin or YSlow is telling you.

2012-07-06

cbagscoach answers:

The tracksuit chiffon straps sexy Lingerie Japanese cute herfair - $23.00 :

2012-07-06

ihzurinsusa answers:

The Korean version of the manual of the bride Qi wedding fashion - $83.00 :

2012-07-06

Francisco Javier Carazo Gil answers:

Hi,

You can use Minify is easy to install and it's the best software to combine CSS and JS: http://code.google.com/p/minify/