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

Mon, 4 Oct 2010 2:56:57

Tammie
- WordPress Wizard
- 462 pts: Hero points 4,392 pts: Rep. points LEVEL 21
@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
- Syntax Hero
- 134 pts: Hero points 1,052 pts: Rep. points LEVEL 8
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
- DEV MAN’s Mascot
- 466 pts: Hero points 6,133 pts: Rep. points LEVEL 24
Start here and see what they tell you: http://www.websiteoptimization.com/services/analyze/

Also make sure that the site validates: http://validator.w3.org/ Errors slow down your browser.

Also check your webservers error logs to see if anything is getting dropped into there. Every time an error occurs, it’s slowing things down.
Qlof
- The Crimson Coder
- 72 pts: Hero points 733 pts: Rep. points LEVEL 6
Hello.

There is a good article on this subject on wpmu.org. WPMU is, as you may know, the previous name for WPMS.

Read the article here:

https://wpmudev.com/blog/11-ways-to-make-your-wordpress-site-faster-and-leaner/
drmike
- DEV MAN’s Mascot
- 466 pts: Hero points 6,133 pts: Rep. points LEVEL 24
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
- Syntax Hero
- 134 pts: Hero points 1,052 pts: Rep. points LEVEL 8
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
- Syntax Hero
- 134 pts: Hero points 1,052 pts: Rep. points LEVEL 8
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
tishimself
- Syntax Hero
- 134 pts: Hero points 1,052 pts: Rep. points LEVEL 8
Hi,

I’ve installed WP Super Cache and WP minify. I’m not sure how to measure any improvements.

Regards,

Larry
drmike
- DEV MAN’s Mascot
- 466 pts: Hero points 6,133 pts: Rep. points LEVEL 24
Larry, as requested up above, can we get a link please? Without one, all we are doing is making basic suggestions. I see a couple different urls mentioned up above. I;m sure we’re talking about my-woodcraft.com but it would be a plus to make sure.

As to the super-cache, take a look at your outputted html in your browser. You should see some numbers at the bottom near the closing html tag.
tishimself
- Syntax Hero
- 134 pts: Hero points 1,052 pts: Rep. points LEVEL 8
Hi,

I see this……so that looks good.

<!– Dynamic page generated in 0.415 seconds. –>

<!– Cached page generated by WP-Super-Cache on 2011-01-25 22:24:07 –>

<!– super cache –>

Here is a link to the site:

my-woodcraft.com

Regards.

Larry
tishimself
- Syntax Hero
- 134 pts: Hero points 1,052 pts: Rep. points LEVEL 8
Hi,

Ulrich recommended to use Total Cache.

Untitled Link

How do I decide which cache plugin to use? It is not clear to me that Total Cache will address the script loading issue better than the other cache plugins, but there is a lot of doc to digest.

Rergsrds,

Larry
tishimself
- Syntax Hero
- 134 pts: Hero points 1,052 pts: Rep. points LEVEL 8
Hi,

I installed W3 Total Cache w/o the CDN enabled. It may be a bit faster, but I have no good measurement to quantify it. It loads fine for me, but my broadband connection speed is pertty fast.

These 3 very large javascript files seem to be the problem.

Any further suggestions?

Kind Regards,

Larry
C3MDigital
- Flash Drive
- 136 pts: Hero points 27 pts: Rep. points LEVEL 2
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

Flash Drive

136 pts: Hero points 27 pts: Rep. points LEVEL 2

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
- Syntax Hero
- 134 pts: Hero points 1,052 pts: Rep. points LEVEL 8
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
tishimself
- Syntax Hero
- 134 pts: Hero points 1,052 pts: Rep. points LEVEL 8
Hi,

There is a /dcouments/my-woodcraft–Blog Source.mht that references these two scripts. Not sure how this file gets built.

Larry
drmike
- DEV MAN’s Mascot
- 466 pts: Hero points 6,133 pts: Rep. points LEVEL 24
Something’s weird as a *.mht file is a saved html page (page as in images and everything else, not just the specific html) for Firefox.

I’ll take a look at this if someone will bump this in a bit. Need to go to bloodwork.
tishimself
- Syntax Hero
- 134 pts: Hero points 1,052 pts: Rep. points LEVEL 8
Hi,

I just copied it down for safekeeping and deleted it. It has not been recreated.

Mostly, I’m trying to find out if there is some way I can load only one of these so my site will load faster:

72K: /wp-includes/js/jquery/jquery.js?ver1.4.2

54K: /wp-content/themes/bp-corporate/_inc/js/dropmenu.jquery.js

Regards,

Larry
tishimself
- Syntax Hero
- 134 pts: Hero points 1,052 pts: Rep. points LEVEL 8
Hi,

I’ve been trying to ask this question at a Live support session, but have been unable to find get some one online to ask. :slight_frown:

Kind Regards,

Larry
Tammie
- WordPress Wizard
- 462 pts: Hero points 4,392 pts: Rep. points LEVEL 21
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
- Syntax Hero
- 134 pts: Hero points 1,052 pts: Rep. points LEVEL 8
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”:wink:;

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’:wink:; ?>/_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
- Syntax Hero
- 134 pts: Hero points 1,052 pts: Rep. points LEVEL 8
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’:wink:; ?>/_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’:wink:; ?>/_inc/js/dropmenu.jquery.js”></script>

<script type=”text/javascript” src=”<?php bloginfo(‘template_directory’:wink:; ?>/_inc/js/dropmenu.js”></script>

I suppose going back will mess something up.

Larry
tishimself
- Syntax Hero
- 134 pts: Hero points 1,052 pts: Rep. points LEVEL 8
Hi,

In today’s online plugin support session Aaron sugested that it would be OK to remove the call to dropmenu.jquery.js completely.

I copied header.php to my Child theme folder and removed the loading of that script. Testing….

Thanks Aaron!

Kind Regards,

Larry

Need help fast?

Fastest loading BP theme, faster than BP Corporate.

Ready to get started?

Need help fast?

Ready to get started?

How do you rate me?

Thank you for rating your experience!