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

Note: in step 2.1 Becareful with the name of teh file. There is a style.css file and you are creating a styles.css

DO NOT NAME IT style.css and put it in the theme folder replacing the one that is there. If you do, you will BREAK the theme and at best, revert to Twenty-ten or Twenty-eleven - at worst your site may not work.

A better idea is to create a new folder in the 'wp-contents' folder - call it 'ata-manual-style' - and put the new files there. (technically, you can put it in the Atahualpa folder, but only if you copy the comment lines at the begining of the original file to the begining of your new styles.css file)

Note for the creators of Atahualpa: I've read in the some posts that in the next big release you're going to add an option to automatice this steps, can you confirm it please? If so, for which month is the next release more or less? I'm asking this because I could make a script to do this, but if the next release is coming soon I don't think that is necessary to do it.

The post you are refering to was only made two days ago. This is not a planned addition, but I thought it was a good idea and will pass it onto the delevloper as an enhancement request.

In a quick test, here are the stats I found - before each test I cleared FireFox's cache and cookies - this was done on my local machine (MAC mini - 2.5 GHz Intel Core i5 - 8 GB ram - Lion 10.7.2 - with MAMP install)

with 10 post on home page
css first load next load
---------------------------------------------
internal 2.63s 949ms
external 3.1s 1020ms
hack 2.5s 928ms

not that much of a gain but your milage may vary

Hi Juggledad,

Thanks for your time commenting, testing and posting the results!

I've noted your comment about the confusion that can lead the name style.css, so I've modified the guide and now we're going to name it mystyles.css and myjscript.js and put it in the root of the webserver, not in the atahualpa folder. That's of course a personal preference, those files can be anywhere.

I think as well that it could be a great feature to perform this actions inside ATO instead of manually doing them, so thank you again for letting know the developer about this enhancement.

About the quick test we can agree that maybe there is not much of a gain (for various reasons) but absolutely there is a gain.
On my non-stressed at all VPS server I could see a huge difference before and after the tweaks on this section, those two request were always the ones being with more "waiting" status on Yslow, because of the PHP parsing.
Please note that the tests you're doing are locally and you could see some gain, imagine in a shared hosting how much % can be scaled this gain.
As well, as I'll explain later in this guide, those two external .css and .js files now can be combined in a single file with any other JS or CSS file you're using on the site + caching (that was not possible to do with the PHP parsing) so this will lead to less HTTP requests, and gaining load page speed.

The suggestions given here will make the theme run faster, however you must remember that not everything is controlled by the theme. Many plugins add there own CSS or jscripts into a generated page.

Each plugin you add, causes a longer execution path which takes more time.
The size of an image can effect load time - the bigger the file size of the image, the longer the load time
The number of post on a page will effect load time
If you are using an Adsense plugin, the speed the ad is server from the Adsense server will effect load time.
If you grab an image from another site, that will effect load time
The number of other sites on the server you are using, how active those sites are, your Internet connection speed, the load on your ISP, the speed of your computer, how much memory the server has, how much memory your computer has, how many other programs you have running on your computer.

All of those items (and probably more) will effect the performance

So you can do some things to speed up the theme, just remember it is just one piece of the picture