On May 13, 2010 in News
http://www.organizedthemes.com/wp-content/uploads/2010/05/speed.jpgWe’ve already seen how I saved 37% of my page load time by editing and removing a few unnecessary plugins in this post. Now I’m going to share a few more methods I used to cut another 3 seconds off my page load time.
My site, like most WordPress sites uses the excellent jQuery javascript library to power many effects like my sign in box and the sliding features box on the theme detail pages. For several months I had been using the copy of jQuery that comes with WordPress, but I learned from digwp.com that a better method was to load jQuery directly from Google. Here’s how to do it. Open up your functions.php file and add this:
if( !is_admin()){
wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"), false, '1.4.2');
wp_enqueue_script('jquery');
}
Now you will need to specify where you’d like jQuery to be called in your theme by adding this to your header.php file:
<?php wp_enqueue_script('jquery'); ?>
You will want to do this before any jQuery plugins you use and before your <?php wp_head(); ?> as well.
I was skeptical this change would speed up the loading of my site, but I am a believer now. According to Pingdom Tools, all 70kb of jQuery from Google consistently loads in .2 seconds. It sometimes takes my 11.7kb logo .9 seconds to load. That’s fast! Plus it uses Google’s bandwidth which saves me money.
Typically if a WordPress site requires a script on one page, it loads them on all pages. I realized if I wanted to optimize my site, then I would only want to load scripts on the pages that needed them. On my theme detail posts for example, I use the excellent Nivo Slider, but I don’t need it in my blog or home page. So I use this code to load it only when the current post is in the “themes” category:
<?php if(in_category( 'themes' )) { ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.nivo.slider.pack.js">
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect:'fade',
animSpeed:500,
pauseTime:5000,
directionNav:false
});
});
</script>
<?php } else {
}
?>
The WordPress codex offers several conditional statements you can use in your site here. You can also use the Art Direction plugin to selectively load code on individual pages or posts.
Like most of us, I started out with a shared server. As I took on more clients and especially as Organized Themes grew I quickly changed to a virtual server from one of the big box hosting companies. In looking at my site’s load breakdown, I noticed that quite a bit of time was spent on the latency of my server. I began looking at the various “cloud” hosting sites to see if one of these solutions could help me with a faster server. I ened up giving VPS.net a try and I’ve been thrilled with the results. They moved my sites for me (a big plus). They charge the same as my previous host (also important). And last of all, the latency of my site has dropped significantly. Plus I can now add server resources as I need them and even remove excess ones when I don’t. Their customer service has been top notch as well. I can’t recommend them enough.
A good cache plugin can effectively cut your page load time, but which one should you choose? W3 Total Cache’s list of sites using it on WordPress.org convinced me to give it a try. Here’s the client list:
Trusted by many popular sites like: mashable.com, smashingmagazine.com, makeuseof.com, kiss925.com, lockergnome.com, tutsplus.com, johnchow.com, ilovetypography.com, webdesignerdepot.com, pearsonified.com, css-tricks.com, yoast.com and others
If a plugin is trusted by sites as high profile as these, then it’s a worth a look. W3 total cache provides several ways to speed up your site. First it offers database caching–it keeps a record of queries run by your database server and loads them instead of re-running the query again. This reduces load on your server and gives a speedier response. Secondly it can minify your site’s content. This involves removing line breaks, comments, while combining javascript and css files. By combining your files, load times are reduced. Removing line breaks from your html also makes it smaller and quicker loading (look at the source code of this site to see what I mean). The last addition is a Content Delivery Network (CDN) which is a way to serve static files from additional locations allowing browsers to load your pages more quickly. Lastly it offers page caching that can compress your pages as they are delivered making the amount of data transfered smaller and your site faster.
So here’s my experience with W3 Total Cache. I set up a CDN using Amazon’s S3 storage. I had wanted to set up a CDN for some time, but it seemed like a hassle before W3 Total Cache. This plugin handles the uploading of your files to S3 and changing your links to match. I used it to upload many of my theme files, the wp-includes folder as well as all my uploaded images. As I add new images, they are automatically added to S3 for me. Now when one of my pages is loaded, the images, stylesheet and much of the javascript comes from S3 instead of my server. This gives more servers for an individual browser to load from speeding up load time.
I did run into some problems with the minify settings and my membership plugin. Every time I enabled the javascript and css minify settings, my home page would say you had to be a member in order to view this site. Clearly that is not good for anyone. Some of the settings would not allow users to login, which was also not acceptable. The end result was I could use the HTML minify options, but not the ones for javascript and css. Your site may be different, so experiment and see what works for you.
Overal, using the CDN and various caches saved about a second on my page loading. What’s more remarkable is that when a visitor goes to a second page, the load time is even shorter. I’m gathering data now to see if quicker second pages will lead to more page views on average. Hopefully it will, but only time will tell.
The Drop in My Page Load So Far
So combining the techniques here with the plugin edits I detailed in this post, cut my page load time from around 8 seconds to just over 2 seconds. Now that Google is planning on using site load times in calculating their search rankings, we all have a larger responsibility to ensure our sites load faster than ever. I hope you found these techniques helpful and that your site will be faster as a result.
If you’re having success using certain techniques to speed up your site, share them with us in the comments.
2
On May 12, 2010 in News
http://www.organizedthemes.com/wp-content/uploads/2010/05/plugin-speed.jpgNo one likes a slow website. Have you ever wondered if the plugins you use in WordPress affect your site’s load time? Recently I began a quest to reduce my page load time significantly by making changes and checking the results with Google Webmaster Tools and Pingdom Tools. Here’s what I discovered about the plugins I used here at Organized Themes.
At first my page load time was way too long–averaging 8 seconds. According to Google, that put me in the bottom 20% of websites in terms of load time. Yikes! I didn’t realize that my site was loading that slowly, since my own visits were quick due to the browser’s cache of my site’s content. To get a better look at what was loading on my site, I used an online tool from Pingdom that measures how every element in your site loads. It’s similar to the developer’s tools in Chrome or Safari, but it doesn’t rely on your internet speed to determine the times (think improved consistency).
Pingdom Tools Chart
Pingdom Tools shows you a chart listing every element, its load time, plus its size. What I discovered shocked me. First of all, I use Download Monitor to keep track of the downloads of my themes and it works well for me. I noticed that it has a few graphics that are loaded via it’s css file–and they were taking around 2 seconds a piece to load! Also the javascript and images from Sexy Bookmarks social media links were also taking around 2 seconds to load. I removed the bookmarks plugin and edited out the graphics (that I wasn’t using anyway) from the Download Monitor and suddenly my site was loading in the 6 second range.
The next thing I noticed was the plugin that I use to properly display code snippets loaded a high number of javascript files to handle each possible type of code. While that added a lot of flexibility to the plugin, it slowed the loading of my site because a browser can only load two to four items from any one server at a time. Since I only needed to display XML, CSS and PHP, these other files were unnecessarily slowing me down. I edited the plugin and removed the extra code types and made my site faster again.
Know what your plugins load. I’m not saying you should avoid plugins, but you should be aware of what they are doing to your site. You can compare the results from Pingdom Tools to your plugin list to determine which ones are slowing you down. You can then decide to either edit the plugin, find a faster alternate, deactivate it, or leave it alone.
Deactivate unused or unnecessary plugins. Many plugins load files even if they are not being used at that moment. Did you at one time use a slideshow that you’re not using anymore? Deactivate it. It will not only make your site potentially load faser, it will free up server resources for the plugins you do need.
Consider integrating some functions into your theme. If you know your way around WordPress, you can include your plugins directly into your theme. One advantage of doing it this way is you can combine your CSS and javascript which will result in fewer server requests. This is what I’m ultimately going to do to replace Sexy Bookmarks on this site.
These are simply options for you to consider. The plugin functionality is one of the best features of WordPress. Just be aware of what effect the plugins you use have on your site. In my next post I’ll explain how changes I made to my theme and using a plugin decreased my page load time to under 2 seconds. If you’ve found a speed secret share it in the comments below.
2
On April 3, 2010 in News, Quick Tips
http://www.organizedthemes.com/wp-content/uploads/2010/04/door.jpgHere is a version of the sliding doors technique that doesn’t require php expressions. Just use this code in place of your theme’s current page menu.
<ul class="navigation">
<li class="">Home
<?php wp_list_pages('sort_column=menu_order&depth=1&title_li=&link_before=&link_after='); ?>
</ul>
All this does is give you the spans of “nav-left” and “nav-right” for you to use with your starting and ending images and code. The code above gives us the framework for the effect, but you’ll need to style it to fit your theme. Here is some CSS to get you started. This version of the technique uses a left, middle and right image with the middle image set to repeat.
#navigation a, #navigation a:visited {
display:block;
}
.current_page_item {
background-image: url(images/navigation-repeat.png);
position: relative;
}
#navigation a:hover {
background-image: url(images/navigation-repeat.png);
position: relative;
}
.current_page_item .nav-right {
position: absolute;
display: block;
right: 0;
background: url(images/navigation-hover-right.png) right;
}
.current_page_item .nav-left {
position: absolute;
display: block;
left: 0;
background-image: url(images/navigation-hover-left.png);
}
#navigation a:hover .nav-right {
position: absolute;
display: block;
right: 0;
background: url(images/navigation-hover-right.png) right;
}
#navigation a:hover .nav-left {
position: absolute;
display: block;
left: 0;
background-image: url(images/navigation-hover-left.png);
}
That’s it. You’ll want to use your own images and tweak the css to fit your theme, but now you can have some great navigation effects that will work in all browsers. I recently used this technique on a redesign of a2 Church that we have been developing. I could have created individual buttons, but this is so much more flexible, plus if we ever want to make a change, it will be a piece of cake.
2
On February 2, 2010 in News
I’ve been working with small groups for the last 10 years and one of the challenges has always been to provide good ways for people to sign up. Recently I started making online sign ups an option at a2 Church and thought some of you could benefit from our experience.
To start out I would make a new post for each small group. For the title of the post I would use the name of the small group. Then I would use custom fields for information that I would need on each group (childcare provided, leader’s name, location, day and time and so on). Custom fields may seem tricky at first, but they are really easy to use. You can find them on every page or post write screen, just below the main content box. Each one has a name and a value. The name is the type of information and the value is the specific information. For our example the name would be “leader” and the value would be “Bill Robbins.”
The first thing to do is to decide what information you’d like to display for every group. In my example, I use group leaders, day & time, location, group focus, and childcare. You may have others. Once you know the details you’d like to list for every group, here is the code you will need to call it.
<?php $recent = new WP_Query("cat=5&showposts="); while($recent->have_posts()) : $recent->the_post();?>
<?php endwhile; ?>
Here’s a quick explanation of the code. We are creating a query of all WordPress posts from a particular category, in this case category number 5 (that’s the category ID number where we place our groups). This will produce a list of all posts from that category. But it will be a specific list showing the Title (the name of the group in our case), the leader plus when and where the group will meet. This will all be outputted into a list that we can easily style with css if necessary. I generally place this after the loop so that I can introduce the list without having to hard code it. Now we’re not limited to just using “leader,” “when,” and “where.” We can use any bit of information we’d like. You just need to keep track of the custom field and you could easily add topics or whatever. Well this takes care of listing the groups, but now we need to make it possible for people to sign up easily.
When I first stated this, I used the cforms plugin from Delicious Days to create the sign ups. I would create a form for the first group, copy it and make one for the next group. Each new group got their own individual sign up form. While this worked, it was a bit tedious.
Last summer Gravity Forms was released and I immediately bought a copy and have used it for all my form related needs since. One of the features they’ve added recently was the ability to do email routing. Basically this means that you can email the completed form to different addresses based on how the form is filled out. So say someone signs up for the Tuesday Morning Men’s Bible Study, that leader gets an email with the registration directly from Gravity Forms. I don’t have to be the gate keeper for all the sign up information that comes through the web site.
All you have to do is create a form with check boxes for your groups. Once you’ve completed it, you will be presented with an opportunity to set up notifications. Select routing and then enter the group leaders email address to send the registration to when their group is selected. Then fill in the rest of the notification form and you’re set. This is actually so simple, when I receive sign ups at church, I actually enter them into the website as a way of maintaining a record of the registration and notifying the group leader. Some things claim to make administrative tasks easier, this actually does.
So this is how I go about creating dynamic small group sign ups at our church. It’s a great way to leverage WordPress technologies to lighten our administrative loads and leave more time for ministry.
If you’ve discovered a great way to do sign ups on your website share it with us in the comments.
2
On December 26, 2009 in News
http://www.organizedthemes.com/wp-content/uploads/2009/12/wordpress.jpgIn case you haven’t heard yet, a new update to WordPress was recently released (version 2.9). I’ve already updated all the demos to the new version. I’ve also updated two themes, New Church and Company Store, to work with the new version. There was an issue with the post template feature, but that has been fixed now (fixed the week of Christmas too). All of the other themes are good to go. Bottom line: all of my themes are compatible with WordPress 2.9.
Each year WordPress tries to have three updates to the software. Every time a new version goes to the beta testing stage, I test my themes to ensure compatibility. If there is ever an issue, I issue an update. All updates are included with the cost of an individual theme or theme package so there is no additional charges involved.
As for new features with WordPress 2.9 two you will most likely be excited about are an image editor and a WordPress trash can. The image editor allows you to make some basic edits like cropping and resizing.
The trash can works like it does on your computer. Now when you delete a post or page, it isn’t lost forever, you can recover it out of the trash. Rather handy if you accidentally delete the wrong thing.
What feature do you think WordPress needs to add next?
0
On December 22, 2009 in News, Quick Tips, Support
Several of my themes use a handy plugin called Single Post Templates which allows you to choose a template for any post just like you can for a page. It’s a great feature that I think WordPress should roll into the core. One thing I’ve noticed is that many people use the post templates on a category basis. On my site, I have post templates for blog entries, theme information pages and then general posts. Since the templates are based on categories I use the following code to make the post templates work instead of the plugin. Here’s how it works.
If your theme already has a single.php, rename it single-original.php and create a new file called single.php. Now into this empty file, paste the following code:
<?php $post = $wp_query->post;
if (in_category('9')) {
include(TEMPLATEPATH.'/single-9.php');
} elseif (in_category('4')) {
include(TEMPLATEPATH.'/single-4.php');
} else {
include(TEMPLATEPATH.'/single-original.php');
}
?>
<?php get_header(); ?>
<?php get_footer(); ?>
Here’s how it works. The code checks to see if what category you’re in (in this example the category id is 9). If the post is in that category it will display the single-9.php template for that post. After checking to see if it is in category 9, then it checks to see if the post is in category 4. If it is then it displays single-4.php. If not then it displays our original post template single-original.php.
The big advantage that the plugin provides is the ability to choose a template on a per post basis regardless of category. However using this snippet takes care of things automatically and that can be quite useful too.
6
On December 17, 2009 in News
http://www.organizedthemes.com/wp-content/uploads/2009/12/plugin.jpgVirtually every WordPress site out there uses at least 1 plugin with most of us using more than a dozen. Here are a few that I’ve uncovered recently that will help your site in form or function.
What other undiscovered plugins have you found recently that are useful to you?
3