jQuery.gaTracker.js adds 2 features to standard Google Analytics script :
- Asynchronous Tracking ( tracking start once page load is complete )
- Allow to track dynamic pages on full ajax websites

Implementation
Load the last version of jQuery.

To init your UA-ID and track the current page, you can use it like this :
[sourcecode]

jQuery(document).ready(function($) {
$.gaTracker.init("YOUR-UA-ID");
}) ;
[/sourcecode]

Firstly, this will init the goggle analytics tracker with your Google Analytics Account ID.
Secondly, it will track the current page after ga.js load.

Track with jQuery binds
If you use dynamic navigation in Ajax, you normally already bind clicks on links in order to override standard navigator implementations.
To track those clicks with analytics, simply call $.gaTracker, passing the url in parameter, like this :
[sourcecode]jQuery(document).ready(function($) {
$('a').bind('click', function(e) {
e.preventDefault() ;
$.gaTracker.track($(this).attr('href')) ;
}) ;
}) ;[/sourcecode]

Download
Download jQuery.gatracker.js v1.0 : source code & minified version

Suite à l'article de Korben : GTmetrix vous aide à optimiser le temps de chargement de vos pages, je me suis dit que je pouvais améliorer significativement les temps de chargement de mes sites en améliorant les dates d'expiration des fichiers statiques (images, css et js), en retirant les ETags et en hébergeant les images sur Amazon S3.

On pourrait se dire que la première étape est inutile puisque les fichiers concernés devraient être sur Amazon, mais dans la pratique, on a toujours 2-3 images, issues d'un plugin wordpress par exemple, qui seront toujours appelées de votre serveur.


Expires : configuration de .htaccess + apache2
Il faut tout d'abord activer les extensions 'expires.load' et 'headers.load' ci ce n'est pas déjà fait.
Pour ce faire, on vérifie que l'action n'est pas activée :

ls /etc/apache2/mods-enabled/expires.load
ls /etc/apache2/mods-enabled/headers.load

Si vous avez : "ls: ne peut accèder /etc/apache2/mods-enabled/expires.load: Aucun fichier ou répertoire de ce type", c'est que l'extension n'est pas activée.

Pour l'activer :
ln -s /etc/apache2/mods-available/expires.load /etc/apache2/mods-enabled/expires.load
ln -s /etc/apache2/mods-available/headers.load /etc/apache2/mods-enabled/headers.load

Ensuite, on vérifie la config d'apache et on reload :
apache2ctl configtest
=> Syntax OK
/etc/init.d/apache2 reload
=> Reloading web server config: apache2.

Dans votre fichier .htaccess, il faut ajouter les lignes suivantes :
# BEGIN Expires + ETag remove

Header unset ETag
FileETag None

ExpiresActive On
ExpiresDefault A0
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/ico A2592000
ExpiresByType text/css A2592000
ExpiresByType text/javascript A2592000

# END Expires + ETag remove

La date d'expiration par défaut est donc à 0s et pour les gif, jpeg, css, js... on passe la date à 30j ( 2 592 000 secondes).

Pour en savoir plus sur le pourquoi du comment il faut retirer les ETag, je vous invite à lire cet article : Best Practices for Speeding Up Your Web Site

Amazon Single Storage Service
Maintenant, on va mettre les fichiers statiques (images, css et js) sur Amazon S3.

Il vous faut tout d'abord vous rendre sur http://aws.amazon.com/s3/, créer un compte développeur si vous n'en avez pas, liez votre CB à ce compte et suivre les étapes pour activer votre compte.

Ensuite, il vous faut un client pour créer et mettre à jour vos instances, nommées buckets, une pour chaque site. Différents outils en ligne de commande ou libs sont également dispos pour scripter tout ça.
Personnellement, j'utilise cyberduck pour mac et voici la config :


Server : s3.amazonaws.com
Port : 443
Username : Access Key ID ( http://aws-portal.amazon.com/gp/aws/developer/account/index.html?action=access-key)
Password : The secret Access key

Maintenant, les répertoires à la racine sont les 'buckets', on va donc en créer un pour chaque site et ensuite, tout se comporte comme un FTP standard.

Intégration des fichiers statiques
Une fois tous vos fichiers copiés sur S3, il ne vous reste plus qu'à modifier les chemins des fichiers statiques dans vos templates.
L'url de base utilisée sera :
http://the_bucket_name.s3.amazon.com/repertoire/fichier.extension

Coût de l'opération
J'ai en fait trouvé les tarifs très cheap car on est à 0.15$ du Giga uploadé. Ca me convient, maintenant faut voir si ça contient à tout le monde ^^.
Ca me permet en tout cas, avec un pti serveur comme un kimsufi, d'héberger plusieurs sites et donc finalement de réduire les coûts, étant donné que je réduis significativement la charge du serveur.

Conclusion
Après ces ajustements effectués et d'après GTmetrix, je suis passé d'un score de 67% à 75% sous YSlow et de 72 à 86% pour Google Page Speed !
Yeah !

Si vous avez des questions, je suis là ^

Perhaps you already know smushit, the Yahoo! service that compress your png files without alterate them.

First in the domain, the service has some inconvenients as multiple images upload.

With PunyPNG, no problem : you can upload up to 50 files and download a zip archive containing all optimized images.

And it's not all : fully supports for PNG, .GIF, .JPG, no problem of transparency.

The icing on the cake : once registered, you can use punyPNG's API.
For example, if you want to optimize a single image (in a batch for example), simply call :
[sourcecode]
http://www.gracepointafterfive.com/punypng/api/optimize?img=http://www.conradchu.com/images/portfolio/targets.gif&key=fe79db612343cbc781d4faddd22990d282e24e75c
[/sourcecode]

Will return in JSON :
[sourcecode]
{"savings_bytes": 7149, "original_url": "http://www.conradchu.com/images/portfolio/targets.gif", "original_size": 35071, "optimized_url": "http://www.gracepointafterfive.com/punypng/attachments/eb1955a35625ea97e107132cbd49b65840d35532/targets.gif.png", "group_id": "", "savings_percent": 21, "optimized_size": 27922}
[/sourcecode]

Web2ajaX images are optimized with PunyPNG, and I find no degradation, adopted ?

Click on 'Visit Link' to have more infos.

jQuery Lazy Load Ad is a jQuery plugin that takes advantage of Lazy Load delaying ads loading.
- Highly improve general page load (Ads are displayed after the page load and only inside the viewport)
- Compatibility with AdSense and many other advertisers
– Cross Browser support (IE5.5+, Firefox, Opera, Chrome, Safari)

A new version of this post and of the jQuery Lazyload Ad plugin is available here

Gains on my blog : 65% for the page load, and 52% for page weight
-> Without lazy Load Ad : Page loaded in 8.88s (371.98kb)
-> With : page loaded and accessible in 3.17s (179.18kb)


Big thanks to Mika Tuupola for the Lazy load part
-> http://www.appelsiini.net/projects/lazyload

Another big thanks to FrankT and his document.write overload code
-> http://blog.phpbuero.de/?p=26

To View Demo, simply look at all the ads on web2ajax, they are loaded by Lazy Load Ad.
You can either view the full page Demo by clickinh on 'Demo' Button just below to know how to use it on your own website.


INSERT AD CODE

First, insert placements into your HTML code.
For that, you can use a 'div' tag.
Apply a specified class, only used for lazyLoad Ad uses, as example 'lazyLoadAd_places'
So you have this :
[sourcecode]<div class="lazyLoadAd_places"></div>[/sourcecode]

Now, call the ad publisher code and put it into the div attributes, named as 'original'.

For example with original BlogBang code :
[sourcecode]<div>
<script src="http://www.blogbang.com/d.php?id=a16a937291&n=1&p=L&o=SLW&w=300" type="text/javascript"></script>
</div>[/sourcecode]

Becomes :
[sourcecode]<div class="lazyLoadAd_places" original='http://www.blogbang.com/d.php?id=a16a937291&n=1&p=L&o=SLW&w=300'></div>[/sourcecode]

To finish you can put 'code' tags into the div, code will be evaluated as javascript, just before calling publisher script (look to adsense example).
You can put either HTML code, like tags or image mobile replacements. Degraded content will be replaced by document.write when called.


EXAMPLES

In your HTML code for adSense:
[sourcecode]<div class="lazyLoadAd_places" original='http://pagead2.googlesyndication.com/pagead/show_ads.js'>
<code><!--
google_ad_client = 'YOUR_AD_CLIENT_ID';
google_ad_slot = 'YOUR_AD_SLOT';
google_ad_width = 300;
google_ad_height = 250;
//-->
</code>
</div>
[/sourcecode]


In your HTML code for eBuzzing:
[sourcecode]<div class="lazyLoadAd_places" original='http://www.ebuzzing.com/player_blog/player.php?parametre=115660'></div>
[/sourcecode]


In your HTML code for BlogBang :
[sourcecode]<div class="lazyLoadAd_places" original='http://www.blogbang.com/d.php?id=a16a937291&n=1&p=L&o=SLW&w=300&c=2222222&bg=121212'>
<a href="http://www.blogbang.com/" target="_blank"><img src="http://www.blogbang.com/s.php" border="0" alt="BlogBang"></a>
</div>[/sourcecode]


HOW TO CALL LAZY LOAD AD

Insert the script declarations just before the 'body' endtag.

After loading the last jQuery version and document is ready, lazyLoad the Ads
[sourcecode] ...

<script type="text/javascript" src="/assets/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/assets/js/jquery.lazyLoadAd.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {

// Load LazyLoad Ad on each dom with classname 'lazyLoadAd_places'
$(".lazyLoadAd_places").lazyLoadAd({
threshold: 200,
onComplete: function() {
// -- Pub is displayed !
}
}) ;
}) ;
</script>

...
</body>
</html>
[/sourcecode]