Posts from Christopher from Lightvox

Blogging, Code, Plugins, Strategy, Web Tools, Wordpress

Wordpress Speed Hacks – Go Top Gun

Posted by Christopher on Dec 31, 2008

top_gun

This is the 2nd Guest Post by the one and only @Side3Media, or Christopher Doherty. It’s been a personal pleasure of getting to know him better, especially since it appears he’s a “little” smarter than me in a number (a lot) of areas.

He also gets points for the wickedly good photoshop skills… If you want to read his other post, go here.

So you have made the jump to self-hosted Wordpress.

Let’s get you ready for Top-Gun School.

Moving to a self-hosted WordPress install can be both rewarding and stressful.  Now that you are on your own, you can add those features to your blog, change up your theme in dramatic ways and enjoy the added flexibility of your own space on the internet.  Unfortunately, you also lose out the deal because you no longer have the full arsenal of servers of Wordpress.com keeping your site running smoothly.

Not a problem….

Once you have selected your hosting provider (preferably one that has the flexibility to grow with you) you need to tweak your install for Top-Gun performance. You see you never know when a blog post is going to be popular, very quickly. So you need to be ready for that digg, that twitter, that word of mouth to check it out that could bring your site to a screeching halt.

Some of the blogs that I read have had these problems recently, so I decided to follow up with a post started on Human3rror (ChurchCrunch founder John’s superhero alter-ego), John gives us some quick tips on how to improve self-hosted Wordpress performance with some quick database tweaks.

You can find the post here at Epic Wordpress Speed Hacks .

Done?

Okay….now the engine that runs the behind the scenes of your site has a some ninja like Top-Gun skills to battle the traffic, we can take a look at the front end.

I did want to give a quick warning, these tips range from the beginner to a little more advanced level. Some of these involve editing your wordpress theme files manually.

1. If you are not comfortable making these changes, you probably want to have someone help.
2. If you are doing this on your live server, first make sure you have copies of your theme pages in case you miss something.
3. If you change your theme often you will have to make these changes each time you switch.
4. I added this line because I felt it looked more important if I had 4 points in my list instead of 3. Thanks.

Now that that’s out of the way we can begin…

Images:

Images are some of the biggest thieves of your page load times. As internet readers have short attention spans, you have the potential of losing your audience with slow load times. There are a number of tools out there to help so it will be a personal preference on what you use. If you don’t already have a program, I found this really slick app called Shrink-O-Matic that could be just what you are looking for. Shrink-O-Matic is a drag and drop image editor built on Adobe Air. It’s a lightweight application that won’t impact your desktop performance and Shrink-O-Matic is a niche application, it does one job and does it well.


Screencaps from Christopher at Lightvox on Vimeo.

Editing image sizes will have a huge impact in your page performance. If you want to use Hi-Res photos, you can always put a link to a photo stored on Flickr or Photobucket and save yourself some bandwidth.

The next section gets into a bit more advanced editing. If you are familiar with editing HTML you will do just fine. Again, make a backup and you can always overwrite your changes if you make a mistake.

Wordpress Queries:

Wordpress stores your information in a database and recalls the information it needs to present it in a web browser. You don’t create a new page for each post, just an entry in the database and Wordpress pulls it together through templates and queries. In this section we talk about data that pretty much stays the same throughout the life of your blog. So, why does Wordpress need to check a database to know where to find files it has to load every time you load a page?

1. Header.php

Your blog is your blog and unless you decide to change the url for some reason it’s pretty much going to stay that way.

In looking at the header we find:

<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="
<?php bloginfo('html_type'); ?>;
charset=<?php bloginfo('charset'); ?>" />

This is the standard HTML for a webpage so it can be replaced with:

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

If you are settled on a theme and your blog feed things like:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />

can be changed to static links like:

<link rel="stylesheet" href="http://PATH TO YOUR STYLE SHEET/style.css" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="YOUR BLOG NAME" href="http://YOUR BLOG URL/feed" />
<link rel="pingback" href="http://YOUR BLOG URL/xmlrpc.php" />
<meta name="generator" content="WHATEVER VERSION OF WP YOU ARE USING" />

Take a look at your Header.php in the Wordpress Dashboard and open your blog in a web browser if you are not sure about the absolute paths. If you view the source all the paths will be viewable there.

Just these quick changes took 8 queries out of your page.

2. Navigation

The majority of bloggers have tons of posts and only a few pages. You have your standard pages like; about me, archives, contact, categories, etc. and chances are you are not adding new pages every day, so why bother having wordpress check to see your pages and load them from a database. Change the dynamic links to static ones.

Take a look at this nav section

<div id="main-nav">
<ul>
<?php wp_list_pages('title_li=&sort_column=menu_order&depth=1'); ?>
</ul>
</div>

This code tells WP to get the page names from the database and present them as a “li” but if you look at the source code for your page in a browser you can get the HTML code for the pages and just copy and paste that into the section of your theme files that load the navigation. Like this:

<div id="main-nav">
<ul>
<li><a href="http://YOURSITE/PAGE-LINK">Home</a></li>
<li><a href="http://YOURSITE/PAGE-LINK">About</a>
<li><a href="http://YOURSITE/PAGE-LINK">Advertise</a></li>
<li><a href="http://YOURSITE/PAGE-LINK">Contact Us</a></li>
<li><a href="http://YOURSITE/PAGE-LINK">Privacy Policy</a></li>
</ul>
</div>

9 queries down let’s see what else we can do.

3. Categories.

Check your categories. Come up with a few categories that all of your posts can fit into and change the query to load your category list to static HTML. If you have to add categories later you can drop it in manually.

4. Includes

Some Wordpress themes use includes. This tells the page to load other pages and add them as part of the current page. Check the pages of your templates for includes they look like this:

<?php include (TEMPLATEPATH . "/searchform.php"); ?>

Changing the TEMPLATEPATH to static HTML (view your source code in a browser for the path) since it is unlikely that your pages are going to move around without you knowing.

This could remove 1 or 2 more queries depending on your theme.

5. Footer.php

A lot of themes have tons of queries in the footer.php. Check the footer for items as well that you can replace or remove.
As an example:

<div id="credits">
<p id="site-information">
<strong>Content &copy; <?php bloginfo('name'); ?></strong>
Proudly powered by <a href="http://wordpress.org/">WordPress</a><br/>
</p>
<p id="rss-feeds">
<a class="rss-entries" href="<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a><br/>
<a class="rss-comments" href="<?php bloginfo('comments_rss2_url'); ?>">Comments (RSS)</a>
</p>
<p id="site-run-stats">
<?php echo get_num_queries(); ?> queries.<br/>
<?php timer_stop(1); ?> seconds.
</p>
<span class="clearer"></span>
</div>

All these queries can be removed or replaced with static info. If your theme footer contains a timer as shown in the above example, you can remove that section completely.

By fixing just those pieces, we have removed about 18 queries from your pages. If 100 people visit one page on your site that’s 1800 queries removed, 1000 people hit your site thats 18,000. If they look at two pages 36,000, and so on. I think you get my thought process here.

Extraneous Content :

This section is more from a personal observation of web surfer behavior and areas where you can optimize your  page. In other words my personal ranting section.

1. Archives

If you have been blogging since Jan 1903 congratulations, but honestly I don’t think anyone going to your site says “Oh I wonder what he/she wrote about in Sep. 1927″. If you are going to have a listed archive on your page you really should limit it. Have 6-12 months listed and have your full archive on a separate page.

2. Tag clouds

Check your stats. Is anyone really clicking on them? I am sure that you will find if you have concise navigation and well thought out categories there is no need for a tag cloud. At this point it’s gimmicky and overdone. That widget you are using to load the cloud is wasting server resources. Not to mention diverting search engine bots down never ending loops of posts and tags. With that said, make sure you put tags on your full posts. If people want to click they will and it does enhance the relevance of your page.

3. Repeated info.

Got, top comments by, most recent comments and most commented posts, most popular posts, etc. widgets? Are they all on the same page? It fills that space quite nicely but does it really have value, think about how much of that information is the same or close to the others. Pick one or two and drop the other widgets, valuable page weight and database resources are being used.

4. Plugins

Before you install another plugin. Ask yourself if the ones you have now are really necessary. Try to limit the number of plugins to those you really need. Things like twitter status can be displayed on your blog with a few lines of code instead of a full plugin and widget.

Like this:
<!--twitter -->
<div id="twitter">
<ul id="twitter_update_list">
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/YOURUSERNAMEHERE.json?callback=twitterCallback2&count=3"></script>
</ul>
</div>
<!--twitter end -->

With a good hosting provider, the database tips from Human3rror and these tips here you are well on your way to Top-Gun blog status.

If you have any other great tips, or questions leave a comment below.

Google, Web Tools

Be A Road Warrior

Posted by Christopher on Nov 20, 2008

This is ChurchCrunch’s 2nd guest post and I, on a personal level, love these types of posts because they are simply uber-pragmatic and mega-useful.

Christopher Doherty blogs over at LightVox, a premier location for ministry music news and his blog looks wickedly cool. You can also follow him on Twitter here.

There is no question that technology is making us more accessible.

While some may say this is a bad thing; for those who are away from their home base and on the road, new technologies help us stay productive.

I am one of those people.

When I tell people I do graphic design and websites, people think that it must be a cool job. “You get paid to make pictures and play on the internet?”

Yes I do.

What people don’t realize is that the deadlines are quite tough at times and it is a very competitive field.

If you have ever had a job sitting at a printer with hundreds of thousands of copies getting ready to print and someone realizes that you did not set one line of text as overprint, you know what I mean. You have now held up printers, packagers, shippers, as well as the client. It doesn’t matter where you are, you need to fix the problem ASAP.

So while this list is not necessarily ministry specific, I do know a number of ministry road warriors who do require these types of tools so I thought I would put my list out and hopefully people can adapt them to their own situations and will add to the list as well.

Here is my list of mobile productivity tools. They work on both PC and Mac and are available anywhere you have access to the internet.

GoogleDocs – need a fully functioning office suite on the road. On my iMac and Macbook I use OpenOffice for composing something quickly. When I am working on a proposal, blog posts and my novel (I started it a while back I think I am up to page 2) I use GoogleDocs. This gives me access to my works in progress anywhere that I can get an internet connection. In addition, I can connect with others and collaborate online in realtime.

John and I actually did this when I was pitching this article.

[Editor's Note: Yes, Google Docs ROCK and is the quickest and easiest way to pitch a guest post... good thinking!]

YouSendit – This is a free service if you need to send large files (100MB) via email. Just upload the file and away it goes. The recipient has 7 days to download and then poof- it’s gone. Keeps you from cluttering your own or someone else’s mailbox. Just make sure you tell people 7 days, otherwise they forget and call you 7 days later asking you to send it again.

MobileMe – Yes, this is an Apple product and yes, it costs $99 a year, but it is an integral part of my mobile office. Firstly, it integrates well with my hardware to sync calendars, contacts and other settings across multiple devices. Secondly, with the online file storage, I can put documents and photos into the MobileMe cloud. I use this for projects currently in process, so if I get that dreaded call about a typo or skewed image I can grab it and modify it and send it on it’s way. As an added plus, the PC control panel adds shared calendar functionality with my wife’s XP machine so she can add items to her calendar and sync with mine.

Evernote – I use this to clip items of interest that I want to look at later or notes to myself. Really easy to use, and it’s free. I have to admit when I first set it up I thought it really had no use. Who knew I would end up using it daily?

Dropbox – Dropbox is the newest tool in my arsenal, another 2GB of online storage for free? Why thank you, yes, I will have some. Easy and free; see the overview on Churchcrunch here.

Photoshop.com – More online storage with some neat tools to edit photos as well. Plus, you can link your photos from other accounts like flickr, picasa, etc. and pull them in to photoshop.com for a quick edit.

Freshbooks – Online accounting software for freelancers. Full access to my invoicing and time management tools from anywhere.

YouVersion – This is a must have on the road. I use both the web and mobile application, because sometimes when you are out there on the road you need a friend.

With all these tools, while I am running all over the place, I can still provide a level of service to my clients as easily as if I was sitting at my desk.

I’m sure there are more programs out there, both free and paid applications, that can accomplish these same tasks and others. Leave a comment below and let me know what you are using these days. I am always looking for ways to improve my workflow both in my freelance and personal projects.

Page 1 of 15812345»...Last »