Combining External JS and CSS

  • Resolved Thomas Griffin

    (@griffinjt)


    16 years, 3 months ago

    This is frustrating the mess out of me. When I run YSlow, it says I have 13 external JS and 4 external CSS that could be combined. I would love to combine them to make upload time faster, but I have no clue how to do it. I have tried every plugin imaginable and a whole of different combinations. No matter what plugin I use, they don’t work at combining my external scripts. I’m very new to all of this, and I don’t even know where to look to see exactly which external scripts are running. All I know is that I would like to combine them to make my website upload quicker. How would I go about combining my external JS and CSS?

    Right now I am using WP Super Cache and WP Minify on my site (http://foreversinging.com). Any suggestions?

Viewing 10 replies - 1 through 10 (of 10 total)
  • Thread Starter Thomas Griffin

    (@griffinjt)

    16 years, 3 months ago

    Ok, I got it down to 9 external JS and still 4 external CSS. I still need help on how to combine these into single JS and CSS files, minifying and compressing to speed up upload time. Also, I have 3 files that are not compressing:

    /wp-content/themes/halftone/style.css
    /wp-content/plugins/contact-form-7/styles.css?ver=2.1.1
    /wp-includes/js/jquery/jquery.js?ver=1.3.2

    None of these files are compressing..if they would compress, that almost 100k of space I could save. Can anybody help me with this? I’m still using WP Minify, and I’ve tried adding these specific files to the plugin, but it still will not compress them. I know there is a way to do this, but I just don’t know how. Your help is greatly appreciated!

    Thread Starter Thomas Griffin

    (@griffinjt)

    16 years, 3 months ago

    UPDATE:

    Figured out how to get Google’s Minify uploaded into my site and compressed my style.css sheet. Now I have an issue that is bugging the absolute fool out of me..maybe someone can help. I need to compress a .css and .js file to get my site to near optimal potential, which are:

    /wp-content/plugins/contact-form-7/styles.css?ver=2.1.1
    /wp-includes/js/jquery/jquery.js?ver=1.3.2

    However, I cannot find either of these files located in the <head> tag of my header.php file. But I know they are located in the <head> tag because when I view the source code for my home page, they are tucked away in the <head> tag. How do I go about about editing those things which I cannot see in my theme editor. My guess is they are located in some HTML thing that I cannot seem to access. Can anyone help me? It’s driving me nuts!

    Thread Starter Thomas Griffin

    (@griffinjt)

    16 years, 3 months ago

    UPDATE: Got it fixed up enough to get a low A/high B on Yslow.

    bensbury

    (@bensbury)

    16 years, 3 months ago

    That’s great, but do you think it would be helpful that when you do figure something out, you tell other people how you did it?

    Thanks.

    downfalladmin

    (@downfalladmin)

    16 years, 3 months ago

    LOL bensbury. I was just thinking the same thing…

    Thread Starter Thomas Griffin

    (@griffinjt)

    16 years, 3 months ago

    That’s great, but do you think it would be helpful that when you do figure something out, you tell other people how you did it?

    Thanks.

    Good idea. Sorry about not doing that. Here’s what I had to do.

    1) Since my server does not allow mod_deflate or mod_gzip, I had to compress the jsquery script with PHP. I created a file and placed it in my root directory called gzip.php. Within the file is this code:

    <?php
ob_start ("ob_gzhandler");
if( isset($_REQUEST['file']) ){
$file = $_REQUEST['file'];
if( goodfile($file) ){
$ext = end(explode(".", $file));
switch($ext){
case 'css':$contenttype = 'css';break;
case 'js':$contenttype = 'javascript';break;
default:die();break;
}
header('Content-type: text/'.$contenttype.'; charset: UTF-8');
header ("cache-control: must-revalidate");
$offset = 60 * 60;
$expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";
header ($expire);
$data = file_get_contents($file);
$data = compress($data);
echo $data;
}
}
exit;
function goodfile($file){
$invalidChars=array("\\","\"",";",">","<",".php");
$file=str_replace($invalidChars,"",$file);
if( file_exists($file) ) return true;
return false;
}
function compress($buffer) {
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
$buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
return $buffer;
}
?>

    I then added this to my .htaccess file:

    RewriteEngine on
RewriteRule ^(.*).js$ pathtoyourwebsite/gzip.php?file=$1.js [L]

    Now all my scripts are compressed. I still have not figured out how to combine the external scripts, but I am pleased with them all being compressed. Saves a lot of space. Hope this is helpful!

    Thomas

    bulli

    (@bulli)

    16 years, 1 month ago

    Hi griffinjt,

    Wouldn’t this method increase your server load?
    I mean they have disabled it for this reason, right?

    I use a different method I pre-gzip mu js and css files, this way it is ZERO server load for this one since the files are already gzipped, the only down side to this method is that you need to re-gzip the files if you make a change, but this is alright since I do not change them that often.

    Take care,
    Bulli

    ioloman

    (@ioloman)

    16 years, 1 month ago

    I recommend everybody to use wp minify, it will minify and move all js/css to the bottom instead the head. and improve your site’s load time.

    my blog pages were loadin’ in 13 sec, (i have tried whole ways that may speed up my blog, but was there no real effective manner) but once i met up this wonderful plugin and have installed it, i couldn’t believe the result, yeah pages in 2 sec based on yslow tests. (no cache)
    wp minify is so great !!

    Regards

    vickybiswas

    (@vickybiswas)

    16 years ago

    Guys did you try out
    http://www.halmatferello.com/lab/wp-css/
    and
    http://www.halmatferello.com/lab/wp-js/

    Vicky Biswas

    vickybiswas

    (@vickybiswas)

    15 years, 9 months ago

    A note for everyone.
    The most complete complete in its line is w3 total cache
    does everything required under one plugin.

    Regards,
    Vicky Biswas

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Combining External JS and CSS’ is closed to new replies.