En plus de l'extension PageSpeed pour Chrome, il existe d'autres outils pour tester la vitesse d'un site. Il s'agit par exemple de Pingdom Full Page Test.
Comme PageSpeed, Pingdom fournit des conseils pour optimiser le site.
Il enregistre également les résultats précédents, ce qui permet d'évaluer l'impact des différentes optimisations.
Lorsque le navigateur rencontre un lien "prerender", il télécharge non seulement la page indiquée, mais également tous les éléments nécessaires à son affichage correct: feuilles CSS, fichiers Javascript, images...
Cette fonctionnalité est déjà utilisée par le moteur de recherche Google, et l'effet est montré dans la vidéo ci-dessous...
Il y a naturellement certaines limitations, notamment:
Il ne peut y avoir qu'un seul lien "prerender" par page;
L'utilisateur peut désactiver le prerendering;
Chrome ne peut faire qu'un seul prerendering à la fois;
Le prerendering est désactivé en mode "incognito";
Le prerendering est automatiquement annulé dans certaines situations (si la page demandée lance le téléchargement d'un fichier, si elle est trop lente, si elle demande une authentification HTTP...)
Pour vérifier si votre site utilise le prerendering, il suffit d'ouvrir le lien suivant dans Chrome: chrome://net-internals/#prerender.
Varnish Cache est un accélérateur de site web (web application accelerator), aussi appelé "caching reverse proxy". Il s'installe devant un ou plusieurs serveurs web afin d'intercepter les requêtes HTTP et, si possible, fournir une réponse directement depuis son cache, sans devoir interroger les serveurs web.
Installation
Pour l'installer sur Ubuntu, il faut d'abord ajouter la clé du repository:
Il faut ensuite modifier le fichier /etc/apt/sources.list, et ajouter la ligne suivante:
deb http://repo.varnish-cache.org/ubuntu/ lucid varnish-3.0
Et finalement l'installer de manière classique:
sudo apt-get update
sudo apt-get install varnish
Configuration
Pour la configuration ci-dessous, Varnish est installé sur la même machine que le serveur web Apache. Varnish écoute sur le port 80, et Apache sur le port 8080.
Pour modifier les options de démarrage de Varnish, il faut modifier le fichier /etc/default/varnish:
-s indique le mécanisme à utiliser pour le cache, ainsi que sa taille (256MB dans l'exemple)
Il faut ensuite, dans le fichier /etc/varnish/default.vcl, indiquer à Varnish où se trouvent le ou les serveurs web. Dans ce cas-ci, il se trouve sur la même machine (127.0.0.1) et sur le port 8080:
Par défaut, Varnish utilise une politique de mise en cache très prudente. Il ne met pas le contenu en cache si le browser envoie un cookie dans sa requête. Comme la plupart des sites utilisent les sessions et que le numéro de session est généralement stocké dans un cookie, le browser enverra le numéro de session pour chaque requête, donc également pour télécharger les images, fichiers vidéos, javascript, css,... ce qui empêche la mise en cache.
Comme règle de base, il faut autoriser Varnish à mettre en cache toutes les photos, les fichiers CSS et Javascript etc. malgré la présence d'un éventuel cookie dans la requête. Toujours dans le fichier /etc/varnish/default.vcl, il faut ajouter:
# Si l'url se termine par jpg/png/... regarder d'abord dans le cache
sub vcl_recv {
if (req.http.Cache-Control ~ "private") {
return(pass);
}
if (req.url ~ "\.(png|gif|jpg|swf|css|js)$") {
return(lookup);
}
}
# Lorsqu'on a reçu la réponse du serveur, supprimer les cookies
# éventuels avant d'enregistrer dans le cache
sub vcl_fetch {
if (beresp.http.Cache-Control ~ "private") {
return(hit_for_pass);
}
if (req.url ~ "\.(png|gif|jpg|swf|css|js)$") {
unset beresp.http.set-cookie;
}
}
Configurer Apache
Pour que Apache écoute sur le port 8080 au lieu du classique port 80, il faut d'abord modifier le fichier /etc/apache2/ports.conf:
NameVirtualHost *:8080
Listen 8080
Il faut ensuite modifier tous les virtual-hosts (tous les fichiers /etc/apache2/sites-enabled/...):
<VirtualHost *:8080>
...
Démarrage et test
On peut enfin redémarrer Apache, et démarrer Varnish:
Pour vérifier que Apache fonctionne correctement, il suffit d'ajouter :8080 dans l'url, par exemple http://mon.serveur.com:8080/ma/page.html
Varnish possède également plusieurs utilitaires pour tester son fonctionnement. Par exemple, pour savoir quelles URLs sont demandées par les clients au serveur Varnish:
varnishtop -i rxurl
Pour savoir quelles requêtes sont transmises par Varnish au serveur web (Apache):
Lorsque vous utilisez PHP pour créer du contenu dynamique, que ce soit du code HTML, CSS ou Javascript, ou une image, PHP envoie par défaut au navigateur les headers
Ces headres demandent au navigateur de l'utilisateur, ainsi qu'aux éventuels proxys, de ne pas mettre ce contenu en cache, et de chaque fois le télécharger depuis le serveur. Ceci va naturellement ralentir le site web, et peut également surcharger le serveur.
Pour demander la mise en cache du contenu, il faut utiliser les headers suivants:
$delais= 60 * 60 * 24 *7;// Une semaine header("Pragma: public"); header("Cache-Control: maxage=".$delais); header("Expires: ".gmdate('D, d M Y H:i:s',time()+$delais)." GMT");
Il existe plusieurs techniques, plus ou moins efficaces, pour centrer verticalement une image dans un div (ou autre). L'une des plus efficaces consiste à utiliser l'attribut CSS background:
<divstyle=" background: url(image.jpg) center center no-repeat;"> </div>
Il est même possible, grâce à CSS3, de redimensionner automatiquement l'image à la taille du div:
<divstyle=" background: url(image.jpg) center center no-repeat; background-size: contain;"> </div>