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

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

---

---

---

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

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

---

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.

---

---

---

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.

---

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

---

---

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.

cbagscoach answers:

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

ihzurinsusa answers:

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

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/