WEB-d Développement Web

Tester la vitesse d'un site avec Pingdom Full Page Test

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.

Accélérer encore l'affichage grâce au prerendering de Chrome

HTML5 avait introduit le concept du prefetching. Google va encore plus loin, et introduit dans Chrome le prerendering:

<link rel="prerender" href="http://www.mon-site.be/page2.html">

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.

Accélérateur web Varnish

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:


curl http://repo.varnish-cache.org/debian/GPG-key.txt > key.txt
sudo apt-key add key.txt


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:


DAEMON_OPTS="-a :80 \
             -T localhost:6082 \
             -f /etc/varnish/default.vcl \
             -S /etc/varnish/secret \
             -s malloc,256m"


• -a est le port sur lequel Varnish doit écouter
• -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:


backend default {
      .host = "127.0.0.1";
      .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:


sudo /etc/init.d/apache restart
sudo /etc/init.d/varnish start


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):

varnishtop -i txurl

Autoriser la mise en cache de contenu dynamique PHP

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

• Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
• Pragma: no-cache
• Une date d'expiration (Expires) dans le passé.

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");
 

Centrer verticalement une image

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:


<div style="
 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:


<div style="
 background: url(image.jpg) center center no-repeat;
 background-size: contain;">
</div>