Fastest loading BP theme, faster than BP Corporate.

Hi,

I'm using the BP-Corporate child theme and having a performace problem. The site provided me with the server loading usinge something called Pingdom.

So I can tell I could shave loa time by cutting down on some of the images, but I may not get to where I need to be with just these changes.

So, is there a BP Theme that loads faster than the Coprorate theme?

Thanks,
Larry

  • Tammie

    @lwmcmahon in my experience speed is a combination of the following factors and sometimes others also:

    1. Hosting and / or net connection - user and hosting related
    2. Plugins - almost I'd say the number one cause of issues
    3. Widgets - again on a par with Plugins for issues
    4. Javascript errors or other errors - again a huge impact often
    5. External adverts / images / linking to social network badges such as facebook widgets
    6. Large images / unoptimised code
    7. Theme

    Usually also in that order I'd say the theme is the very last problem. Without a link it's rather hard to say what is your problem and certainly unless you've looked at 1-6 the theme shouldn't be your first port of call.

  • tishimself

    Hi,

    Granted, the theme may not be the cause of the performance issue.

    How do I go about quantifying the performace issues?

    It will be difficult for me to move the site to different hosting services to test. How can I tell if my Psek hosting is a problem? What can I compare to? measure? Maybe I could compare the image load times for the them demo to mine....Hmm. I will check into that.

    In your experience, how did you measure the impacts? How did you quanify the impact of for example the plugins?

    I do have a fair amount of images, but the difference between loading the bp-corporate theme and the child theme with the new images can be measured.... I will check that.

    Regards,
    Larry

  • drmike

    WPMU is, as you may know, the previous polite name for WPMS.

    Fixed. :slight_smile:

    A lot of images would be an issue as well. If they're a lot of theme images, try to get them loaded via CSS. That way they only pull down from the server once and should be served by the browser.

    Thumbnails too when possible. I know I visit a lot of sites with meg+ images now a days. Lots of fun. Folks don't realize that even though they may resize it within the code, the whole image is going to download.

    There's other stuff too that you can do if you want to get fancy. We strip out all of the CSS added in by plugins, combine them into a single static file and load that on every page. Cuts down on the garbage within the head too, especially with plugins that add their css to the head instead of loading it via a file. Makes it easier to point folks to if you use an enduser css editor.

    Combining javascripts too but that's rather detailed and highly prone to screwing up something.

    Trying to think of other things that would be helpful....

  • tishimself

    Hi,

    Great tips. Based on the WebsiteOptimizer, I have cut the image dowloads at 56Kp from 11.24 to 2.66 seconds. They are all listed as html images. I think CSS loaded images look like this, yes?

    #cssloadedimage {
    background-image:url(http://www.amplesite.com/image.jpg);
    height:100px;
    width:100px;
    }

    The only code that did not validate is not mine and seems there were only two items.

    The main issue now seems to be with javascripts 176KB at 36.57 sec at 56K download speed.
    These three seem to be the main ones, no idea how to compress them.
    72194 bytes SCRIPT my-woodcraft.com ... s/js/jquery/jquery.js?... Header size = 227 bytes
    Up to 47646 bytes could have been saved through compression.

    54075 bytes SCRIPT my-woodcraft.com ... inc/js/dropmenu.jquery.js Header size = 226 bytes
    Up to 38231 bytes could have been saved through compression.

    46005 bytes SCRIPT my-woodcraft.com ... porate/_inc/global.js?... Header size = 226 bytes
    Up to 34232 bytes could have been saved through compression.

    Will the SuperCache plugin help with them? I have not installed this plugin yet. A bit nervous about it.

    Regards,
    Larry

  • tishimself

    Hi,

    It seems that the Javascript is already compressed.

    So I decided to run the BP-Corporate Demo thru the Website Optimizer for comparison sake.

    Demo vs My child theme site

    HTML images: 502K vs 53K
    CSS images: 0 vs 22k
    Total Images: 524K vs 55k
    JS: 151K vs 176K

    There seem to be a number of image Slides fo rthe demo....

    However, I don't see the /wp-content/themes/bp-corporate/_inc/js/dropmenu.jquery.js
    which is 54K in size.

    Odd that I'm showing no CSS images

    Regards,
    Larry

  • C3MDigital

    Hi lwmcmahon,

    Your site seems to be loading pretty quick for me but I did notice a few issues with your W3 Total Cache setup.

    It looks like you have the minify turned on but it is not set up. I wrote a very detailed tutorial on how to set up and configure W3 Total Cache for shared hosting environments, Reduce Page Loading Time With W3 Total Cache on Shared Hosting.

    You will have some problems because all the CSS in the bp-corporate theme is called via @import from the main stylesheet and W3 will not be able to recognize and include them in the minified CSS so you will have to manually add them in the same order they are called in style.css

    @import url( ../bp-corporate/_inc/css/base.css );
    @import url( ../bp-corporate/_inc/css/global.css );
    @import url( ../bp-corporate/_inc/css/default.css );
    @import url( ../bp-corporate/_inc/css/bp-css.css );
    @import url( ../bp-corporate/_inc/css/custom.css );

    @import url(_inc/css/adminbar.css );

    @import url(_inc/css/child-style.css);

    You add each one in order and must enter either the full url or you can use:

    /wp-content/themes/bp-corporate/_inc/css/base.css

    When you start adding all the js files I suggest pulling up your site and doing a view source then copy and paste all the files in the same order they are in the source.

    Make sure jquery is the first one and choose blocking head for the location. It's a pretty big performance gain to put your js at the very bottom of the page but because of the way your theme and most WordPress plugins add inline scripts to the page it wont't work.

    Also if your on a shared host I would turn off the database object caching to disk because this can actually cause some slow downs.

  • C3MDigital

    I also noticed the theme is pulling 2 different versions of jQuery. 1.2.6 and 2.4.2 (WordPress default jQuery). I guess 1.2.6 is for backwards compatibility to make the drop menus work which is really silly if you ask me.

    Also you have a css file between 2 js files which will cause blocking. All your CSS needs to come before any js.

    Here is how your scripts are being included.
    jQuery 1.2.6??

    <script type="text/javascript" src="http://my-woodcraft.com/wp-content/themes/bp-corporate/_inc/js/dropmenu.jquery.js"></script><br />
    <script type="text/javascript" src="http://my-woodcraft.com/wp-content/themes/bp-corporate/_inc/js/dropmenu.js"></script>

    A CSS file followed by the correct jQuery file:

    <link rel='stylesheet' id='wp_greet_box_style-css'  href='http://my-woodcraft.com/wp-content/plugins/wp-greet-box/css/style.css?ver=3.0.4' type='text/css' media='all' /><br />
    <script type='text/javascript' src='http://my-woodcraft.com/wp-includes/js/jquery/jquery.js?ver=1.4.2'></script>
  • tishimself

    Hi,

    Many thanks, I appreciate the detailed help. I'm struggling a bit with the complexity. :slight_smile:

    After reviewing your detailed tutorial, I made the suggested changes.

    When I added the CSS files to the CSS File mangement section in the Minify settings, the effect was negative(2.66 sec vs 27.24 sec) so I backed off this change. When I look at the websiteOptimization tool I see:
    CSS Images: 74184 24.58 10.19
    Total Images: 86507 27.24 10.46

    I removed the CSS files and I see:
    HTML Images: 12323 2.66 0.27
    CSS Images: 0 0.00 0.00
    Total Images: 12323 2.66 0.27

    I don't know where to make the change so that "All your CSS needs to come before any js."

    Down Side: I would use my source listing to see what CSS is being used where. Now when I look at the source it is compressed and almost useless for this purpose.

    Yeah, I noticed that the BP-Corporate Demo site does not load both jquery.js files. I'm thining that I have something wrong here that is the source of my biggest loading delay. I may try to locate the Script references and use just the latest via my Child theme.

    Kind Regards,
    Larry

  • Tammie

    Hi there, unfortunately Richie (the theme designer for this theme) is away at the moment. However, the way I usually treat jquery is to just use an enqueue to get the one WordPress is using. You can try this method by removing / uncommenting any link to jquery in header.php and just in functions.php have this call:

    if( $bp_existed == 'false' ) {
    	wp_enqueue_script("jquery");
    }

    Not sure what live support you were in there are 2 and I manned the one on wednesday but lets see if that can help you.

    As said it's the way I do in all the themes I work on.

  • tishimself

    Hi,

    Thanks for the response. I'm not quite sure what you meant by:

    You can try this method by removing / uncommenting any link to jquery in header.php and just in functions.php have this call:
    if( $bp_existed == 'false' ) {
    wp_enqueue_script("jquery");

    I found no reference to jquery in header.php.

    The only reference in functions.php is

    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/_inc/js/jquery.js"></script>

    I copied functions.php into my child theme folder and repapced that line with your suggested code. These two references still seem to be loaded.
    72K: /wp-includes/js/jquery/jquery.js?ver1.4.2
    54K: /wp-content/themes/bp-corporate/_inc/js/dropmenu.jquery.js

    Again, I'm not sure I interpreted correctly what you wanted me to try, but the script size being loaded have not been reduced by what I did.

    (Cleary, I was not commenting on live support sessions that were staffed. :slight_smile: I tried again on Sunday, but no one was on the call midway into the session.)

    Kind regards,
    Larry

  • tishimself

    Hi,

    In the header.php file the older BP_Corporate theme invoked a 1K script:
    _inc/js/dropmenu.jquery.js

    <script src="<?php bloginfo('template_directory'); ?>/_inc/custom-js/drop_down.js" type="text/javascript"></script>

    whereas the new one invokes 53K:

    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/_inc/js/dropmenu.jquery.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/_inc/js/dropmenu.js"></script>

    I suppose going back will mess something up.

    Larry