Boostez les perfs de vos sites avec un cdn « media server »

Boostez les perfs de vos sites avec un cdn « media server »

Publié le par dans Développement, Outils | 8 commentaires »

Les "media servers" ont depuis longtemps été adoptés par les géants du web comme Amazon, Google ou Yahoo. Concrètement, ces derniers permettent de stocker l'ensemble des contenus statiques (images et/ou vidéos) sur un serveur différent de celui qui héberge les pages, scripts et tous les services qui vont va avec. Les conséquences d'une telle séparation sont nombreuses, mais surtout très intéressantes sur plusieurs plans :

  • Diminution de la charge (processeur, mémoire, processus Apache...) du serveur principal, qui est ainsi plus réactif pour afficher les pages ;
  • Diminution du temps de chargement des pages grâce au téléchargement en parallèle sur plusieurs urls, à l'utilisation d'un domaine "cookie-free" et à l'appel d'un serveur à proximité (principe de base du Content Delivery Network, ou cdn) ;
  • Gain de poids sur vos pages html grâce au choix d'une url courte (comme msda.fr/ au lieu de www.monsitedactu.fr/images/) ;
  • Simplification de la gestion des images et vidéos sur votre serveur.

Créer un domaine dédié aux médias sur votre serveur

Dans l'idéal et en imaginant que vous ayez beaucoup d'argent, il faudrait 2 serveurs. Le principal vous servirait à faire tourner Apache et MySQL afin d'afficher les pages de votre site en php tandis que le second n'hébergerait que vos contenus statiques, et n'aurait donc pas besoin de grand chose pour tourner. Oui mais voilà, avoir 2 serveurs n'est pas donné à tout le monde, et complique la gestion d'une bibliothèque d'images et de vidéos.

C'est pourquoi je vous propose une approche différente, basée sur l'association de votre domaine secondaire avec un répertoire de votre serveur. Concrètement, il s'agira d'accéder aux contenus de www.monsitedactu.fr/images/ via l'url msda.fr/. Sur un serveur tournant sous Linux, il vous suffira de créer un VirtualHost dans le fichier de configuration d'Apache httpd.conf (chemin : /etc/apache/httpd.conf). Voici à quoi ressemblent les quelques lignes à ajouter :

<VirtualHost IP.IP.IP.IP:80 >
ServerName msda.fr
ServerAlias www.msda.fr
ServerAdmin webmaster@monsitedactu.fr
DocumentRoot /home/user/domains/monsitedactu.fr/public_html/images/
SuexecUserGroup user user
</VirtualHost>

Comme vous le voyez, nous faisons simplement pointer le nom de domaine msda.fr vers notre répertoire d'images. Pour éviter que vos images et vidéos ne soient accessibles via différentes urls, il ne faut pas oublier de mettre en place une redirection 301 de l'url de base vers le nouveau nom de domaine. Cela se fait via le fichier .htaccess qui se trouve à la racine de votre site, dans lequel on va mettre en place une règle d'url rewriting (réécriture d'url) assez basique :

RewriteEngine on
RewriteRule ^/?images/(.*)$ http://msda.fr/$1 [R=301,L]

Choisir un nom de domaine pertinent

Le nom de domaine de votre media server doit être le plus court possible, et ne jamais avoir été utilisé pour héberger un site. C'est la garantie que lorsque vos visiteurs afficheront un contenu via cette url, leur navigateur n'enverra aucun cookie inutile. Essayez de trouver un nom qui reprenne les initiales ou le nom partiel de votre site, et n'hésitez pas à y ajouter des chiffres si vous ne trouvez pas de domaine disponible.

Après avoir réservé votre nouveau nom de domaine chez votre registrar (environ 6€ par an) et configuré un dns secondaire, faites-le pointer vers les dns de votre serveur. Notez que sur les noms de domaines en .fr, il faut patienter quelques heures pour que le changement de dns soit possible.

Optimiser les performances votre Media serveur

Avant toute chose, il est important de s'assurer que les images et vidéos accessibles sur msda.fr ne le soient que d'une façon. Pour ce faire, nous allons créer un fichier .htaccess à la racine du dossier /images/, dans lequel nous vérifierons que l'accès se fait correctement (sans les www notamment). Ce fichier va également nous servir à indiquer au navigateur que nous souhaitons qu'il conserve les contenus en cache un maximum de temps :

# Gestion du cache
Header unset Pragma
FileETag None
Header unset ETag
<FilesMatch "\.*$">
Header set Cache-Control "max-age=60000000, public"
Header unset Cookie
RequestHeader unset Cookie
</FilesMatch>
# Sans les www
RewriteEngine on
RewriteBase /
RewriteCond %{HTTP_HOST} !^msda.fr$
RewriteRule (.*) http://msda.fr/$1 [R=301,L]

Et enfin, mettre en place un véritable cdn

Avant de passer à cette dernière étape, il est primordial de vérifier que ce qui a été fait avant fonctionne correctement. Et pour cela, il faut bien sur que vous ayez remplacé tous les appels de vos images et vidéos avec la nouvelle url msda.fr. On ne doit plus trouver de lien vers www.monsitedactu.fr/images/ dans vos pages. N'hésitez pas à effectuer une recherche dans votre base de données via phpMyAdmin, et à effectuer des REPLACE en masse (à manier avec précaution).

Pour créer notre cdn, nous allons utiliser le service proposé par CloudFlare, disponible en version payante mais aussi gratuite. Cette dernière suffira d'ailleurs largement pour l'utilisation que nous allons en faire. Pour créer un profil, commencez par renseigner l'url de votre media serveur, puis suivez les étapes jusqu'à ce qu'on vous demande de changer les dns de votre nom de domaine par ceux de CloudFlare. N'ayez crainte, cela fait partie de la procédure...

Ceci étant fait, il va se passer entre quelques minutes et quelques heures pour que le basculement soit effectif. Quand ce sera le cas, il faudra vous rendre dans les options "CloudFlare Settings" pour y effectuer quelques changements. Notre cdn n'hébergeant que des images et vidéos, vous allez désactiver toutes les options, et baisser le niveau de sécurité au minimum. Et... c'est tout ! Vous n'aurez plus qu'à profiter des joies de votre nouveau media server ;)

Des résultats sans appel et des perfs en hausse

J'ai créé ce guide après avoir mis en place ce système sur mon site Scooter System. J'ai donc pu mesurer concrètement la différence entre l'hypothèse de départ et celle de l'utilisation d'un media server. Plutôt que de vous bourrer le crâne avec des chiffres, je vous propose 3 graphiques (obtenus avec l'outil Munin) illustrant les statistiques du serveur. On voit une nette évolution le 22, alors que la fréquentation est restée la même...


Nombre de process Apache qui passe de 85 à 55 aux heures de pointe.


Cela se ressent sur le nombre de process total.


Trafic réseau en chute libre, les images étant chargées depuis le cdn.

Le gain en termes de réactivité se fait sentir sur les pages où sont présentes des images et vidéos, mais également sur toutes les autres. Car la diminution du nombre de process Apache soulage le processeur et la mémoire, qui sont plus disponibles pour générer les pages en php et effectuer les requêtes dans la base de données. Pour terminer sur les graphiques, voilà ce que cela donne du côté de CloudFlare après 24 heures...


Une petite économie côté requêtes http et bande passante ;)



8 commentaires sur “Boostez les perfs de vos sites avec un cdn « media server »”

  1. 1 Paul A

    Le gain en perf est sans appel !

    Et je ne comprends pas comment CloudFlare gagne quelque chose avec l’offre gratuite.
    Simplement en rapatriant des clients vers des offres payantes ?

  2. 2

    Pour CloudFlare l’offre gratuite est un moyen de se faire connaître. Je pense qu’ensuite ils proposeront encore plus de fonctionnalités payantes.

  3. 3

    Il est possible aussi d’avoir sur un même serveur NGinX qui gère le static et Apache le dynamique. Ainsi toutes les images, css, etc… sont traitées par par NGinX et le reste sont gérés par Apache.
    Pour les images il reste à faire pointer un truc du genre http://mesimages.monsite.com qui n’est configuré que pour NginX

  4. 4

    En effet Mrbinr, à défaut de pouvoir mettre en place un cdn, le sous-domaine géré par NGinX reste la meilleure solution pour créer une sorte de « media server ».

    Les résultats en termes de gain de réactivité seront déjà très bons.

  5. 5

    Très bon à savoir !

    Comment faire ça avec site qui tourne sur WordPress ?

  6. 6

    Cela peut se faire simplement en faisant pointer le domaine sur le répertoire wp-content.

    Ensuite tu pourras utiliser ton domaine en direct pour accéder à tes répertoires les plus importants, comme suit :

    ndd.fr/wp-template/
    ndd.fr/wp-uploads/

    La mise en place reste exactement la même, il y a juste une étape supplémentaire qui consistera à indiquer à WordPress que l’accès en lecture à ces 2 répertoires doit se faire via un ndd spécifique.

  7. 7

    Bonjour

    Faut-il obligatoirement 2 serveurs différents ?
    Est ce que l’on peut mettre en place cette technique sur un serveur mutualisé ou faut il un serveur dédié obligatoirement ?

    Merci coop

  8. 8

    Il ne faut qu’un serveur au contraire ! Et ça peut être un mutualisé ou virtualisé, du moment qu’il reste possible de modifier le fichier d’Apache pour créer un Virtualhost…

Publiez un commentaire