WordPress.org

Support

Support » How-To and Troubleshooting » CSS and JS slowing down WordPress- how to combine

CSS and JS slowing down WordPress- how to combine

  • Tom
    Participant

    @jeffreeeeey

    Hi,

    Below is the contents between the HEAD tags on my website:

    <head profile="http://gmpg.org/xfn/11">
    <title>website name</title> 
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="http://mywebsitename.co.uk/web/wp-content/themes/sitename/style.css" media="screen" /> 
    
    <!--[if lt IE 7]>
    <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
    <![endif]--> 
    
    <link rel='stylesheet' id='seo-style-css'  href='http://mywebsitename.co.uk/wp-content/plugins/seo-pressor/templates/css/styles.css?ver=3.1' type='text/css' media='all' />
    <link rel='stylesheet' id='shadowbox-css-css'  href='http://mywebsitename.co.uk/wp-content/plugins/shadowbox-js/shadowbox/shadowbox.css?ver=3.0.3' type='text/css' media='screen' />
    <link rel='stylesheet' id='shadowbox-extras-css'  href='http://mywebsitename.co.uk/wp-content/plugins/shadowbox-js/css/extras.css?ver=3.0.3' type='text/css' media='screen' />
    <link rel='stylesheet' id='contact-form-7-css'  href='http://mywebsitename.co.uk/wp-content/plugins/contact-form-7/styles.css?ver=2.4.4' type='text/css' media='all' />
    <link rel='stylesheet' id='wp_sidebarlogin_css_styles-css'  href='http://mywebsitename.co.uk/wp-content/plugins/sidebar-login/style.css?ver=3.1' type='text/css' media='all' />
    <script type='text/javascript' src='http://mywebsitename.co.uk/wp-includes/js/l10n.js?ver=20101110'></script>
    <script type='text/javascript' src='http://mywebsitename.co.uk/wp-includes/js/jquery/jquery.js?ver=1.4.4'></script>
    <script type='text/javascript' src='http://mywebsitename.co.uk/wp-content/plugins/sharebar/js/sharebar.js?ver=3.1'></script>
    <script type='text/javascript' src='http://mywebsitename.co.uk/wp-content/plugins/stray-quotes/inc/stray_ajax.js?ver=3.1'></script>
    <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://mywebsitename.co.uk/web/xmlrpc.php?rsd" />
    <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://mywebsitename.co.uk/web/wp-includes/wlwmanifest.xml" />
    <link rel='index' title='mywebsitename' href='http://mywebsitename.co.uk/' />
    <meta name="generator" content="WordPress 3.1" />
    <link rel='shortlink' href='http://wp.me/blah' /> 
    
    <!-- All in One SEO Pack 1.6.13.2 by Michael Torbert of Semper Fi Web Design[206,277] -->
    <meta name="description" content="blah, blah, blah />
    <meta name="keywords" content="blah, blah, blah" />
    <link rel="canonical" href="http://mywebsitename.co.uk/" />
    <!-- /all in one seo pack -->
    <link rel="stylesheet" type="text/css" href="http://mywebsitename.co.uk/wp-content/plugins/collision-testimonials/i/css/styles.css" media="all" /><script type="text/javascript">
    //<![CDATA[
    var _wpcf7 = { cached: 1 };
    //]]>
    </script>
    <link href="http://mywebsitename.co.uk/wp-content/themes/mysitename/styles/brown.css" rel="stylesheet" type="text/css" /> 
    
    <script type="text/javascript" src="http://mywebsitename.co.uk/wp-content/themes/mysitename/includes/js/stepcarousel.js"></script>
    <script type="text/javascript" src="http://mywebsitename.co.uk/wp-content/themes/mysitename/includes/js/stepcarousel-setup.js"></script> 
    
    <link rel="pingback" href="http://mywebsitename.co.uk/xmlrpc.php" />
    </head>

    …this explains why WordPress is very slow to load pages.

    Now, I’m no expert, but it looks like it’s all the CSS and JS files that are slowing down the site.

    So my question is- how do I stop those files from loading automatically, and is it possible to combine all those stylesheets into one?

Viewing 15 replies - 1 through 15 (of 16 total)
  • do you use any sort of cache plugin? its very helpful

    This one in particular:
    http://wordpress.org/extend/plugins/w3-total-cache/

    combines/miminizes js and css I believe…..

    Tom
    Participant

    @jeffreeeeey

    Hi,

    Yes, that’s the very caching plugin I’m using, but it doesn’t seem to be combining js and css, as per what I’ve posted above, taken from my source code.

    Ah, you hadn’t mentioned that you were using that plugin… I do see it in your code now

    Have you posted in the plugins section with the appropriate tags? Usually the dev of that plugin is pretty good at responding if the post is properly marked to catch his attention

    Tom
    Participant

    @jeffreeeeey

    I haven’t no, because although I’m using that plugin, I never actually knew it combines CSS and JS. In fact, I still don’t see in the plugin description where it states that? Maybe I’m being blind 🙂

    Hmm… I may be remembering poorly, I haven’t used the plugin in a long time…

    My apologies if that’s the case…

    Tom
    Participant

    @jeffreeeeey

    Yes, it seems to minify, but not combine. I think the only way to do this is to do it manually, but would like a second opinion and some advice f anyone can offer it.

    I now use Quick Cache plugin … the difference was, is, amazing.

    Quick cache is great, I also use it.

    But it’s not at all what the OP is looking for, as he is already running a cache.

    Tom
    Participant

    @jeffreeeeey

    Yeh, I’ve tried numerous cache plugins but W3TC seems to be the best one so far. However it doesn’t do what I require here, which is: combine CSS and JS to a single file. Or even, to combine those files to just a couple.. rather than lots, like I currently have. See here my YSlow results.

    genuwine4532
    Member

    @genuwine4532

    This is the plugin that you want:

    It specifically combines CSS and JS

    http://wordpress.org/extend/plugins/wp-minify/

    Tom
    Participant

    @jeffreeeeey

    @Genu also tried this previously. From what I gather, plugins like this combine the files “on the fly”. Perhaps I’m wrong, but I think that doing things “on the fly” are not going to give me as good a result as I’m looking for.

    A bit of manual work never hurt anyone 🙂

    valpocreative
    Member

    @valpocreative

    WP Minify does work very well however it is kind of a pain to setup given the nature of the plugin, following the install you will have to go & exclude .js files & CSS files one by one, then you will find it does a great job.. THE ISSUE IS every plugin developer putting .js/jquery files in their plugins causing your server to make multiple & multiple requests to jquery who has already been loaded multiple times.. The solution is to combine .js files, if you google “How to speed up my WP site” you will find tons of posts talking about combining CSS & JS.. However they all forgot about actually telling you how to do it, specifically combining .js files..

    As far as CSS files, it’s fairly simple: here are the steps:
    Go to your plugins, “EDIT” search for this code in your plugins file, “wp_enqueue_style” & find the handler that is calling upon this plugin..

    The handler code looks like this = wp_enqueue_style( ‘dcjqsocialtabs-css’, dc_jqsocialtabs::get_p —-

    The handler here is = ‘dcjqsocialtabs-css’

    Ok, now go to your functions.php file, click edit & paste the following code.
    ————————————–
    add_action( ‘wp_print_styles’, ‘my_deregister_styles’, 100 );

    function my_deregister_styles() {
    wp_deregister_style( ‘dcjqsocialtabs-css’ );
    // deregister as many stylesheets as you need…
    }
    —————————————-

    Open the ‘dcjqsocialtabs-css’ file & paste it to your theme style.css

    The steps above, deregisted the plugins css file & will now be handles in your themes css file, meaning your server will now use your themes.css instead of having to request the file from the plugin folder.

    To add multiple, say you want to deregisted 3 more css files from plugin’s.
    Find handler, copy the code to your theme’s CSS &

    ————————————–
    add_action( ‘wp_print_styles’, ‘my_deregister_styles’, 100 );

    function my_deregister_styles() {
    wp_deregister_style( ‘dcjqsocialtabs-css’ );
    wp_deregister_style( ‘1otherplugin-css’ );
    wp_deregister_style( ‘2otherplugin-css’ );
    wp_deregister_style( ‘3otherplugin-css’ );
    }
    —————————————-

    For javascript you search for: “wp_enqueue_script” & same process to deregister, some of these can be deregister & your plugin will still work fine. However, they do need to be combined so they can all be de-registered without having to worry about the effects of disabling them.. Hopefully someone will now post below or elsewhere teaching us how to do it.

    ————————————————–
    function my_deregister_javascript() {
    wp_deregister_script( ‘quicktags’ );
    wp_deregister_script( ‘gsc_dialog’ );

    }
    —————————————
    You can reach me here:
    http://www.valpocreative.com/web-designer

    Tom
    Participant

    @jeffreeeeey

    I had an email notification at 02:06 this morning (GMT) letting me know of a reply to this thread. However upon coming here, I see the post has been deleted. I’m unaware WHY it was deleted as it looks to be exactly the kind of information I need to resolve my issue.

    So, for everyone elses benefit, here’s what the poster had wrote (pasted from my email):

    valpocreative wrote:

    WP Minify does work very well however it is kind of a pain to setup given the nature of the plugin, following the install you will have to go & exclude .js files & CSS files one by one, then you will find it does a great job.. THE ISSUE IS every plugin developer putting .js/jquery files in their plugins causing your server to make multiple & multiple requests to jquery who has already been loaded multiple times.. The solution is to combine .js files, if you google “How to speed up my WP site” you will find tons of posts talking about combining CSS & JS.. However they all forgot about actually telling you how to do it, specifically combining .js files..
    As far as CSS files, it’s fairly simple: here are the steps:
    Go to your plugins, “EDIT” search for this code in your plugins file, “wp_enqueue_style” & find the handler that is calling upon this plugin..
    The handler code looks like this = wp_enqueue_style( ‘dcjqsocialtabs-css’, dc_jqsocialtabs::get_p —- The handler here is = ‘dcjqsocialtabs-css’
    Ok, now go to your functions.php file, click edit & paste the following code.
    ————————————–

    add_action( 'wp_print_styles', 'my_deregister_styles', 100 ); function my_deregister_styles() {
    	wp_deregister_style( 'dcjqsocialtabs-css' );
           // deregister as many stylesheets as you need...
    }

    —————————————-
    Open the ‘dcjqsocialtabs-css’ file & paste it to your theme style.css The steps above, deregisted the plugins css file & will now be handles in your themes css file, meaning your server will now use your themes.css instead of having to request the file from the plugin folder.
    To add multiple, say you want to deregisted 3 more css files from plugin’s.
    Find handler, copy the code to your theme’s CSS &
    ————————————–

    add_action( 'wp_print_styles', 'my_deregister_styles', 100 ); function my_deregister_styles() {
    	wp_deregister_style( 'dcjqsocialtabs-css' );
    	wp_deregister_style( '1otherplugin-css' );
    	wp_deregister_style( '2otherplugin-css' );
    	wp_deregister_style( '3otherplugin-css' ); }

    —————————————-
    For javascript you search for: “wp_enqueue_script” & same process to deregister, some of these can be deregister & your plugin will still work fine. However, they do need to be combined so they can all be de-registered without having to worry about the effects of disabling them.. Hopefully someone will now post below or elsewhere teaching us how to do it.
    ————————————————–

    function my_deregister_javascript() {
    	wp_deregister_script( 'quicktags' );
    	wp_deregister_script( 'gsc_dialog' );
    }

    —————————————

    Lastly- to whoever it was that posted this solution – thank you very much for taking the time to help me (and I’m sure others too) out.

    Tom

    Tom
    Participant

    @jeffreeeeey

    Oddly, the original comment’s now appeared above mine… Strange, but anyway…

    Thanks very much valpocreative for this info. I’ve not put it to good use yet, but will do soon 🙂

    davidostrow
    Participant

    @davidostrow

    I love this idea of stripping the css file and making one. I have pasted the code into Functions.php in the wp-includes folder. I put in the correct css… in this case nggallery.css, and get an error that the call is invalid, and my site does not load. All i did was paste the code snippet, and replace the css with the nggallery.css.

    Is there a particular place in functions.php for that code. I can send you what I did if that will help:

    add_action( ‘wp_print_styles’, ‘my_deregister_styles’, 100 );

    function my_deregister_styles() {
    wp_deregister_style( ‘nggallery.css’ );
    // deregister as many stylesheets as you need…
    }

    Is what I put in Functions.php

    Please advise…

    Thanks.

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘CSS and JS slowing down WordPress- how to combine’ is closed to new replies.