WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Combining External JS and CSS (11 posts)

  1. Thomas Griffin
    Member
    Posted 4 years 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?

  2. Thomas Griffin
    Member
    Posted 4 years 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!

  3. Thomas Griffin
    Member
    Posted 4 years 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!

  4. Thomas Griffin
    Member
    Posted 4 years ago #

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

  5. bensbury
    Member
    Posted 4 years 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.

  6. downfalladmin
    Member
    Posted 4 years ago #

    LOL bensbury. I was just thinking the same thing...

  7. Thomas Griffin
    Member
    Posted 4 years 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

  8. Bulli
    Member
    Posted 4 years 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

  9. ioloman
    Member
    Posted 4 years 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

  10. vickybiswas
    Member
    Posted 4 years ago #

  11. vickybiswas
    Member
    Posted 3 years 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

Topic Closed

This topic has been closed to new replies.

About this Topic