I am planning to write a series of posts on my insight into WordPress including performance, using custom functions, search engine optimization, themes, plugins, caching, usability, etc.
In this post, I am going to talk about performance customizations you can do with your WordPress theme.
Replace Common WordPress Functions with Constants
WordPress has its own inbuilt caching system, so using functions like get_option(), update_option(), bloginfo(), get_settings() and so on will be faster than writing SQL. [reference] You may need to define define(ENABLE_CACHE, true); in the wp-config.php in order to use this object caching.
And if you still want to avoid using those functions in your theme, you can hard code values directly. Instead of hardcoding in the theme, I suggest you define and use CONSTANTS.
For example, I defined the following CONSTANTS at the top of header.php in your theme ( or wp-config.php in the WordPress root). These constant strings will be available in all other theme pages, because this will be included first in all template pages. You can simply echo them, just like any output string variable. You may define more constants if you need any.
//Defined by Sree Pillai – Begin
define(‘CUSTOM_BLOG_URL’, ‘http://teck.in’);
define(‘CUSTOM_BLOG_NAME’, ‘TECK.IN – Technology Tips, Tricks and News’);
define(‘CUSTOM_DESCRIPTION’, ‘Your Blog Description Goes Here’);
define(‘CUSTOM_TEMPLATE_URL’, ‘http://teck.in/wp-content/themes/sky’);
//Defined by Sree Pillai – End
Even better solution which avoid hardcoding is to define constants in the header file by calling the get_option() or bloginfo() functions once, and use these constants across all you theme files.
<?php
//Defined by Sree Pillai – Begin
define(‘CUSTOM_BLOG_URL’, get_option(‘home’));
define(‘CUSTOM_BLOG_NAME’, bloginfo(‘name’));
define(‘CUSTOM_DESCRIPTION’, bloginfo(‘description’));
define(‘CUSTOM_TEMPLATE_URL’, bloginfo(‘template_url’));
//Defined by Sree Pillai – End
?>
In your theme, instead of the WordPress defined functions, use echo of the constant string.
Instead of <?php bloginfo(‘name’); ?>, use < ?php echo CUSTOM_BLOG_NAME; ?>
Instead of <?php bloginfo(‘description’); ?>, use < ?php echo CUSTOM_DESCRIPTION; ?>
Instead of <?php bloginfo(‘home’); ?>, use < ?php echo CUSTOM_BLOG_URL; ?>
Instead of <?php bloginfo(‘template_directory’); ?>, use < ?php echo CUSTOM_TEMPLATE_URL; ?>
You can hardcode the html_type, charset and pingback_url in the theme. In most cases, you can hardcode the navigation menu as well, instead of calling WP functions like wp_list_pages or wp_list_categories.
Check Number of Queries Executed
Add the following lines of code in your footer.php to find out how many queries have executed and how much time is taken. Try this before and after the optimization tips are applied.
<!–
<?php echo $wpdb->num_queries; ?> <?php _e(‘queries’); ?>. <?php timer_stop(1); ?> <?php _e(‘seconds’); ?>
–>
At TECK.IN, the homepage executes around 16 queries, post single pages around 36 queries, and archives around 17 queries. This includes all the plugins in the single page. I found that, the above tips has reduced the database queries a lot. This is really useful as my host has now set a ceiling for the total number of MySQL queries per hour that is permitted.
Use External Stylesheet and JavaScript Files
A blog is also a website, so all website optimization techniques apply to blogs too. The most important of such optimization is using external stylesheet and JavaScript files.
Optimizing your pages to use external CSS and JavaScript files by moving common styles and scrtipts in to the files. Never use inline style or JavaScript. Save the files in your theme folder and Include them in your theme.
The stylesheet (.css) and JavaScript (.js) file will be downloaded only once in a browser session or until the page expires or the files are changed. That means, the second time the page is loaded, the .css and .js files are not downloaded from the server, which saves bandwidth, connection limits and download time.
You can also write common components used in all the posts / pages using a JavaScript and call the JavaScript function from the page instead of embedding the HTML in all pages.
For example, I have the customized code for FeedBurner Email subscription box, Google custom search engine, social networking profile links and Google translate functions written in the javascript file. In effect the .js file abstracts approximately 5KB from each of my pages.
This helps me in making any changes to these functions by directly editing the JavaScript file, and it effects in all pages.
Do not use this technique for your links such as popular posts or pages, because search engines won’t recognize these links in the JavaScript and will not provide the interlinking PR advantage.
I just call the functions in sidebar like:
<li><script type=”text/javascript” language=”JavaScript”>fnEmailSub();</script>
</li>
<li>
<script type=”text/javascript” language=”JavaScript”>fnGoogleCSE();</script>
</li>
I know, this level of customization is possible only if you are teck tech savvy. You may also check out the script.js file used in this blog theme to understand more.
Design the Theme with Less DIVs
Do not use too many DIVs for positioning the theme elements. Define the layout and style accordingly to keep the minimalistic approach. The less the positioning elements, the faster DOM is understood and rendered by the browser.
Optimal Use of Optimized Graphics
Avoid unnecessary graphics in the theme design. While graphics give an aesthetics to the design, too much graphics degrades performance. Use text wherever possible. Text reduce size and helps automatic translation functions like Google to translate your page into some other language too. You may optimize the images for web use using tools like Adobe Photoshop, or the online tools such as smushit.com.
Validate the Theme XHTML 1.0 Transitional and CSS 2.1
Make sure your blog validates as XHTML 1.0 Transitional and CSS Level 2.1. Errors may prevent a browser or search engine from moving through the blog successfully. validator.w3.org is the best XHTML/CSS validation service.
The simple Sky Theme at TECK.IN validates as valid XHTML and CSS. There could be some posts exported from blogger or old WordPress, which may have a few errors in the content.
Now WordPress have improved a lot and generates XHTML from the content. You need to be careful if you use the HTML mode editor. Otherwise rest is assured with the visual editor, provided your theme uses valid XHTML elements.
I haven’t seen many WordPress blogs that confirm to the standards of XHTML. Hope everyone will soon be following the same standard as we move towards the latest HTML5 standard.