Sous Firefox, c’est très simple. Il suffit d’utiliser la balise suivante pour que le navigateur précharge les contenus indiqués.
Les contenus sont préchargés en arrière-plan une fois que la page courante est chargée intégralement.

 [html]
<link rel="prefetch" href="/images/nextimage.jpg" />

Sauf que pour le moment seul Firefox supporte cette fonctionnalité.
Note : un ticket est ouvert sur le sujet pour le projet Chromium.

Pour les autres navigateurs que Firefox, il faut utiliser du Javascript déclenché à l’événement window.onload :

 [javascript]
<script type="text/javascript">
window.onload = function() {
    // pour les images
    var im = new Image();
    im.src = '/images/nextimage.jpg';
    // et pour les autres contenus
    var req = new XMLHttpRequest();
    req.open('GET', 'nextpage.php', false);
    req.send(null);
};
</script>

Attention aux en-têtes HTTP de cache envoyés par le serveur vers le navigateur.
Pour un préchargement efficace de page PHP, il faudra que votre script envoie un en-tête Expires.

header('Expires: '.gmdate('D, d M Y H:i:s \G\M\T', time() + 3600));

Enfin, pour une détection simple du navigateur depuis le script PHP :

<?php if (strpos($_SERVER['HTTP_USER_AGENT'], 'Firefox') !== false) { ?>
<link rel="prefetch" href="nextpage.php" />

<?php } else { ?>
<script type="text/javascript">
window.onload = function() {
    var req = new XMLHttpRequest();
    req.open('GET', 'nextpage.php', false);
    req.send(null);
};
</script>
<?php } ?>

Liens :

• https://developer.mozilla.org/en/Link_prefetching_FAQ
• http://www.4thkingdom.com/wp-content/uploads/dotclearold/computers/789073-web-site-speed-prefetching-images-css/view-post.html (en jQuery)
• http://orip.org/2009/03/prefetching-javascript-or-anything-with.html (en jQuery)
• commit sur Bizou

Il est aussi possible de faire des bookmarklets qui vous authentifient automatiquement sur un site utilisant un formulaire de connexion. Ceci en stockant votre login et mot de passe dans le code javascript d’un bookmarklet.

Exemble de bookmarklet de connexion

Le code du bookmarklet décortiqué sur plusieurs lignes :

javascript:
document.body.appendChild(document.createElement('div')).innerHTML='
<form name="BletForm" method="POST action="http://www.woozweb.com/loginctrl">
<input type="hidden" name="login" value="MONLOGIN" />
<input type="hidden" name="pass" value="MONPASS" />
</form>';
document.forms['BletForm'].submit();

Ce code permet de générer une requête HTTP POST à deux paramètres, depuis vos favoris. Écrire ce genre de code est à la portée des développeurs Web, mais pas de madame michu.

J’ai donc écrit un bookmarklet permettant de générer facilement des bookmarklets de formulaires de connexion.

C’est très simple :

Le générateur fonctionne même avec l’écran d’authentification de mon compte bancaire. Bien entendu, je rappelle que vos informations de connexion sont stockées en clair dans le marque-page, ce qui n’est pas très sécuritaire…

Notes :

• Testé uniquement sous Firefox. Reste à le rendre compatible avec Safari et IE.
• Trouver un moyen d’utiliser le stockage de mot de passe de Firefox pour récupérer le mot de passe.
• Si le bookmarklet ne fonctionne pas chez vous, n’hésitez pas à me laisser un petit commentaire.

Liens :

• Le bookmarklet sous forme de .js propre : blet.js
• Un bon manuel sur les bookmarklets : http://subsimple.com/bookmarklets/
• Un répertoire de bookmarklets : http://www.marklets.com

Maintenant, nous désirons ajouter un lien sur mobile.monsite.com qui permette d’accéder au site en mode normal (www.monsite.com).

Problème : la redirection est en place, et dès que le mobile retournera sur www.monsite.com, il sera redirigé de nouveau.

Solution : en se basant sur l’en-tête HTTP Referer, on ne redirige pas les mobiles quand l’utilisateur vient du domaine *.monsite.com

Réalisé de la manière suivante dans la configuration Squid :

###################################
# on redirige les telephones vers mobile.monsite.com
url_rewrite_program /etc/squid/redirect_mobile.sh

acl symbian browser Symbian
acl iphone browser iP(hone|od)
acl android browser Android
acl mobile_url dstdomain mobile.monsite.com
acl from_monsite referer_regex ^http\://[^/]+\.monsite\.com   # on teste si l'utilisateur vient de *.monsite.com

url_rewrite_access deny mobile_url
url_rewrite_access deny from_monsite   # on ne redirige pas quand c'est le cas
url_rewrite_access allow symbian
url_rewrite_access allow iphone
url_rewrite_access allow android
url_rewrite_access deny all

De cette manière, si le mobile vient de l’extérieur (d’un moteur de recherche ou autre site, ou qu’il tape directement l’URL dans la barre d’adresse), il sera redirigé. En revanche, s’il a cliqué sur un lien « www.monsite.com en mode normal » depuis mobile.monsite.com, il ne sera pas redirigé.

Note :
Cette solution est aisément transposable en règles de réécriture apache.

Exemple : redirection pour les téléphones mobiles.
Nous voulons rediriger tous les téléphones mobiles de http://www.monsite.com vers http://mobile.monsite.com

L’identification du client se fait avec l’en-tête HTTP User-Agent envoyée par le navigateur. Le problème est que Squid va mettre en cache une seule version de la requête vers http://www.monsite.com. La réponse mise en cache sera probablement la page d’accueil, et non la redirection 301.

Il est aussi possible de configurer le serveur HTTP pour ajouter l’en-tête Vary: User-Agent pour indiquer au Squid de stocker une version par navigateur, mais cela aura pour effet de diviser le cache en autant de navigateurs, ce qui diminuera grandement l’efficacité du cache.

Voici donc la solution :

###################################
# on redirige les telephones vers mobile.monsite.com
url_rewrite_program /etc/squid/redirect_mobile.sh

acl symbian browser Symbian
acl iphone browser iP(hone|od)
acl mobile_url dstdomain mobile.monsite.com

url_rewrite_access deny mobile_url
url_rewrite_access allow symbian
url_rewrite_access allow iphone
url_rewrite_access deny all

Et le script /etc/squid/redirect_mobile.sh contient simplement:

#!/bin/sh
while read line
do
        echo "301:http://mobile.monsite.com"
done

Notes :

• La méthode de détection des téléphone est loin d’être exhaustive. Si vous connaissez une méthode simple qui couvre 95% des téléphones, je suis preneur !
• Sous des version plus récentes de Squid (3, 2.HEAD), il est possible d’utiliser une méthode plus élégante à base de redirecteurs internes.

Liens :

• http://www.squid-cache.org/Versions/v2/2.6/cfgman/
• http://wiki.squid-cache.org/Features/Redirectors
• http://wiki.squid-cache.org/Features/InternalRedirectors
• http://wiki.squid-cache.org/ConfigExamples/PhpRedirectors
• http://www1.za.squid-cache.org/mail-archive/squid-users/200507/0247.html