Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme »

DUK's Performance Tuning Guide for Atahualpa


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
 
Prev Previous Post   Next Post Next
  #1  
Old Feb 3, 2012, 06:02 PM
Duk
 
2 posts · Feb 2012
Lightbulb DUK's Performance Tuning Guide for Atahualpa

Hi folks!

First of all I'd like to give a big CONGRATULATIONS and THANK YOU to the creators of this theme. I'm really happy with it. My intention with this post is to increase the performance of Atahualpa not to criticise it at all. I can't imagine how hard is to maintain a big theme like this.

I'm going to create a guideline to increase the performance for Atahualpa and Wordpress (loading time, cpu usage, bandwidth reduction, minimise HTTP requests, cache, etc..). I'll be adding here any tweak of yours if you want to contribute.

This is purely based on my experience (so I could be wrong in some concepts). I've been using Atahualpa for a while, and after creating a couple of blogs with this fantastic theme I've realised that a simple page, with almost no pictures and text was taking too much time to load (close to 2 secs). After many hours spent reading and tuning I can tell you that the performance can be increased A LOT with a few adjustments, I've managed to reduce at least half time loading time on my blogs, much less CPU and server requests.

Enough with the talking, let's go to work.

As date of this post I'm using Atahualpa 3.7.3 and Wordpress 3.3.1 on an Apache 2.2.3 with PHP 5.5.3

NOTE: This guide is better to apply it after you are done with the major designs of your site. Otherwise you'll have to repeat some of the steps again and again.


0st Step - BACKUP BACKUP BACKUP!!!

Create a FULL BACKUP of your site, just in case you mess with something you shouldn't.
This means all of your files and SQL Databases.


1st Step - Install Firebug

This is a very good plugin for Firefox to check the performance of a website.
Install it so you can understand some concepts I'm going to explain in the following steps, as well you can measure how long it takes to load your website right now, even better take a screenshot so you can compare the results after doing all this tweaks. Don't forget to post your results!!
https://addons.mozilla.org/en-US/fir...rch/?q=firebug


2nd Step - Get rid of ?bfa_ata_file=css and ?bfa_ata_file=js

This only applies if in ATO -> Configure CSS & JS you are using EXTERNAL for CSS or JAVASCRIPT.
If you're using Inline this requests should not appear. (I recommend to use External for SEO matters and personal preferences).

If you check with Firebug, you can see that there are always two requests that are repeated in all of your pages.
http://www.yoursite.com/?bfa_ata_file=css
http://www.yoursite.com/?bfa_ata_file=js

This two requests are simply the Javascript and CSS files Atahualpa creates as result of your configuration in any ATO options.

There are two main problems for each of this requests:
- First it creates extra HTTP requests, and we want to minimise them at maximum to increase page load speed.
- Second is a dynamic request, it means that everytime you switch page, this JS or CSS gets parsed through PHP and gets created again, this creates A LOT of waiting time and takes HUGE CPU resources.

We will minimise the HTTP requests at the end of the Guide, for now we're going to offload some CPU resources creating a static JS file and a CSS file, so it doesn't need to be created everytime an user clicks in any of your links.

2.1 step

Go to:
http://www.yoursite.com/?bfa_ata_file=css
copy all the contents, create a new file named mystyles.css and paste the contents.

Go to:
http://www.yoursite.com/?bfa_ata_file=js
copy all the contents, create a new file named myjscript.js and paste the contents.

2.2 step

Modify functions.php, in the line 235 aprox. you'll find the following code:

function add_js_link() {
global $bfa_ata, $homeURL;
if ( $bfa_ata['javascript_external'] == "External" ) { ?>
<script type="text/javascript" src="<?php echo $homeURL; ?>/?bfa_ata_file=js"></script>
<?php }
}
add_action('wp_head', 'add_js_link');



You can delete it or comment it with /* at the beginning and */ at the end of the code.

2.3 step

Modify header.php, in line 40 aprox, delete or comment the following:

<?php if ( $bfa_ata['css_external'] == "External" ) { ?><link rel="stylesheet" href="<?php echo $homeURL; ?>/?bfa_ata_file=css" type="text/css" media="all" /><?php } ?>

2.4 step

Upload the two files you created before (mystyles.css and myjscript.js) to the root folder of your site (the same folder where wp-config.php is).

2.5 step

Go to ATO -> Add HTML/CSS Inserts.
In HTML Inserts add this two lines:

<link rel="stylesheet" href="http://www.yoursite.com/mystyles.css" type="text/css" media="all" />
<script type='text/javascript' src='http://www.yoursite.com/myjscript.js'></script>


2 END

Done! Check Firebug and be surprised how quicker is loading your site now.
NOTE: Every time you make a design change in ATO, you'll have to create a new mystyles.css from the link on step 2.1 and upload/overwrite your current styles.css


3st Step - Let's get rid of comment-reply.js

----------------------------------------
see PATCH 373-05: Enhancement - only load 'comment-reply.js' on pages where it is needed - Juggledad
----------------------------------------


If you check Yslow, you'll see another JS that's being loaded in every single page of your site: that is comment-reply.js

This JS it comes with WP, and as you can guess it allows you to leave a comment on your blog/site.

There is two main reasons to get rid of comment-reply.js:
- If you are using WP+ATA to create static sites like me, this JS is totally unnecessary as I don't use the comment system at all.
- Save bandwidth and HTTP requests, calling ONLY this JS where is needed. There are many blogs where is not possible to comment on the main landing page, so why do we need to load this JS there?

We are going to modify header.php and functions.php to create a dynamic call, so we'll load this Javascript only when there are comments allowed on the page.

3.1 step

Modify header.php, in line 40 aprox, delete or comment the following code:

<?php if ( function_exists('wp_list_comments') AND is_singular() ) { wp_enqueue_script( 'comment-reply' ); } ?>

3.2 step

Modify functions.php, and add the following code:

<?php // Don't add the wp-includes/js/comment-reply.js?ver=20090102 script to single post pages unless threaded comments are enabled/
function theme_queue_js(){
if (!is_admin()){
if (is_singular() && (get_option('thread_comments') == 1) && comments_open() && have_comments()) wp_enqueue_script('comment-reply');
}
}
add_action('wp_print_scripts', 'theme_queue_js');
?>


3 END
If you followed the steps correctly, now you'll have 1 less HTTP request for comment-reply.js on the pages that comments are not needed, saving us bandwidth and increasing loading speed!


4st Step - A couple less database queries

There is not a lot of saving with the tweaks of this particular section, but as I'm a tuning paranoid I really want to get rid of unnecessary queries and loads. We're going to get rid of two lines on the header that are created dynamically every single time and they never change, so we're going to change the PHP query with a static line.

4.1 step

Go to your site with the navigator and open the source code of the page.

Look and note downthe 3rd and 5th lines aprox, you will have something similar like this (varies depending some local parameters):

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-EN">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


4.2 step

Modify header.php, on line 3 aprox. change this code:

<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

With the first one you copied from the source code.

4.3 step

Modify header.php, on line 5 aprox. change this code:

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

With the second one you copied from the source code.

4 END
With this tweak we just saved two queries to be being parsed on and on everytime someone visits any of your pages/posts.
Some of you may think it doesn't make such a performance difference, I partially agree on this, but this is the DUK's PERFORMANCE GUIDE FOR ATAHUALPA, and every bit and resource saved counts!

To be continued

Last edited by juggledad; Mar 2, 2012 at 06:09 AM.
 

Bookmarks

Tags
cache, loading time, performance, speed, tuning

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Atahualpa performance optimization using w3 cache and CDN networks everyman Plugins & Atahualpa 6 Oct 28, 2012 12:50 AM
[SOLVED] Atahualpa performance versus Thesis, with Yslow, is Atahualpa too &quot;heavy&quot;? everyman Header configuration & styling 8 Apr 21, 2011 06:41 AM
qTranslate performance problems DSmidgy Atahualpa 3 Wordpress theme 8 Apr 5, 2010 04:33 PM
[SOLVED] Help fine tuning my Page Menu Bar &amp; Header Hidden Driveways Customization, Design, Programming... 4 Feb 10, 2010 09:02 PM


All times are GMT -6. The time now is 10:02 PM.


Powered by vBulletin® Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.