Installation & configuration de sitespeed.io

Installation & configuration complète de sitespeed.io en mode headless.

Besoin d’un outil de gestion de vos performances web disponible simplement, en quelques instants ? Testez gratuitement Dareboost.

Cette installationde de sitespeed.io a les particularités suivantes:

  • Une installation complète avec un navigateur pour récupérer les données Navigation Timing.
  • Une installation en mode «headless» pour ne pas avoir à installer un environnement graphique complet sur le serveur.
  • Installation réalisée sur Ubuntu 12.04 LTS 64bits.

Avant d’installer sitespeed.io, il faut installer NodeJS et PhantomJS.

Installation de Sitespeed.io

Une fois nodeJS et PhantomJS installé, ne reste plus qu’à installer les dépendances système nécessaires et à cloner le dépôt de sitespeed.io.

sudo apt-get install openjdk-7-jre-headless curl
cd $HOME
git clone https://github.com/sitespeedio/sitespeed.io.git

Vérifier l’installation avec

$HOME/sitespeed.io/bin/sitespeed.io -h

Installation de Chrome en mode headless

Pour pouvoir récupérer les données Navigation Timing avec sitespeed.io, il faut avoir au moins un navigateur installé.

Chrome

Nous allons procéder à l’installation en mode «headless» de Chrome. Cela permet de se passer d’un environnement graphique complet de bureau comme Gnome ou autres. Le paquet à installer pour ce faire s’appelle xvfb «X virtual framebuffer».

sudo apt-get install libxss1 xvfb
wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
sudo dpkg -i google-chrome*.deb

Pour connecter sitespeed.io et Google Chrome, il faut installer Chromedriver

Chromedriver

sudo apt-get install libgconf2-4 libxi6
wget http://chromedriver.storage.googleapis.com/2.16/chromedriver_linux64.zip
unzip wget http://chromedriver.storage.googleapis.com/2.16/chromedriver_linux64.zip

Nous avons maintenant une installation complète de sitespeed.io. Regardons un peu les options de configuration possibles.

Configuration de sitespeed.io

Toute la configuration de sitepseed.io se fait en passant des options à la ligne de commande.

xvfb-run -e /dev/stdout  --server-args='-screen 0 1280x800x24' $HOME/sitespeed.io/bin/sitespeed.io -u https://checkmy.ws -c chrome -z 3 -n 'www.checkmy.ws' -r $HOME/www/sitespeed.io/ -l sitespeed.io-desktop  -m 512 -k true -d 0

La commande commence par l’invocation de xvfb-run qui permet de lancer Chrome en mode «headless».

Sont passés à xvfb-run les options suivantes:

  • Utilisation de la sortie console avec -e /dev/stdout.
  • Numéro d’écran à 0 et taille à 1280x800 en millions de couleurs 24.

Et côté sitespeed.io, les options passées sont les suivantes:

  • -u http://… pour l’adresse du site à analyser.
  • -c chrome pour collecter les données Navigation Timing avec Chrome.
  • -z 3 pour répéter la connexion trois fois. Cela permet de déterminer max, min et moyenne pour chaque métrique.
  • -n 'www.checkmy.ws' pour nommer le rapport www.checkmy.ws.
  • -r $HOME/www/sitespeed.io/ pour déterminer l’emplacement de stockage du rapport.
  • -l sitespeed.io-desktop pour appliquer les règles PC bureau ou -l sitespeed.io-mobile pour appliquer les règles mobiles.
  • -m 512 pour fixer la taille mémoire de la machine virtuelle Java.
  • -k true pour prendre une capture d’écran de la page analysée.
  • -d 0 pour ne pas analyser d’autres pages sur le site. Normalement, sitespeed.io suit les liens présents sur la page et analyse les pages en relation.

Pour comparer plusieurs sites, il est possible d’utiliser sitespeed.io-sites.

xvfb-run -e /dev/stdout --server-args='-screen 0 1280x800x24' $HOME/sitespeed.io/bin/sitespeed.io-sites -i $HOME/hosting-fr.txt -c chrome -z 3 -n 'Comparatif hébergeurs' -r $HOME/www/sitespeed.io/ -l sitespeed.io-desktop  -m 512 -k true -d 0

La seule option qui diffère, en dehors de l’appel d’une ligne de commande distincte sitespeed.io-sites est l’option -i $HOME/hosting-fr.txt qui permet de lire un fichier où sont stockés les sites à analyser, un par ligne.