WordPress.org

Forums

CSS and JS slowing down WordPress- how to combine (17 posts)

  1. Tom
    Member
    Posted 3 years ago #

    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?

  2. Rev. Voodoo
    Volunteer Moderator
    Posted 3 years ago #

    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.....

  3. Tom
    Member
    Posted 3 years ago #

    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.

  4. Rev. Voodoo
    Volunteer Moderator
    Posted 3 years ago #

    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

  5. Tom
    Member
    Posted 3 years ago #

    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 :)

  6. Rev. Voodoo
    Volunteer Moderator
    Posted 3 years ago #

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

    My apologies if that's the case...

  7. Tom
    Member
    Posted 3 years ago #

    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.

  8. KatyDigg
    Member
    Posted 3 years ago #

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

  9. Rev. Voodoo
    Volunteer Moderator
    Posted 3 years ago #

    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.

  10. Tom
    Member
    Posted 3 years ago #

    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.

  11. genuwine4532
    Member
    Posted 3 years ago #

    This is the plugin that you want:

    It specifically combines CSS and JS

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

  12. Tom
    Member
    Posted 3 years ago #

    @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 :)

  13. valpocreative
    Member
    Posted 3 years ago #

    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

  14. Tom
    Member
    Posted 3 years ago #

    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

  15. Tom
    Member
    Posted 3 years ago #

    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 :)

  16. davidostrow
    Member
    Posted 3 years ago #

    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.

  17. davidostrow
    Member
    Posted 3 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic