Référencement, ergonomie et performances web... à Nantes !

Si vous suivez le développement de la librairie jQuery, certainement avez-vous entendu parler de sa prochaine évolution majeure. En l'occurrence, l'équipe en charge du développement a choisi de travailler sur une V2 qui abandonne le support des navigateurs "oldIE" (versions 6, 7 et 8 d'Internet Explorer). Ils sont en effet responsables d'une partie du poids (conséquent) du fichier javascript, car ils nécessitent l'utilisation de fonctions spécifiques pour émuler ce qu'ils ne sont pas capables de gérer nativement.

jQuery 2.0 s'affranchit de ces contraintes et gagne en poids (environ 15%) et en rapidité d'exécution (moins de fonctions appelées pour un même résultat). Il reste 100% compatible avec tout ce qui fonctionne avec la branche 1.9 : scripts, plugins, jQuery UI, jQuery Mobile... Oui mais voilà, il met de côté un pourcentage de visiteurs (variable selon les pays et secteurs) qui continue à utiliser les vieux IE. La solution idéale est donc de charger les librairies selon le navigateur utilisé, et en asynchrone !

Je vous propose ci-dessous le fruit de mes réflexions et recherches. Ce script fait appel à head.js, que j'affectionne pour son loader asynchrone, mais qui nous sert ici également à détecter le navigateur et sa version. La "prise de poids" liée à l'utilisation de head.js (3.4 ko gzippé) est largement compensée par ses avantages : gain de 3 ko gzippé sur le fichier jQuery et chargement en asynchrone de la librairie et éventuellement ses plug-ins (consultez la documentation pour l'utiliser selon vos besoins).

<script src="https://github.com/headjs/headjs/raw/v0.99/dist/head.min.js"></script>
<script>
var jq_file=(head.browser.ie&&head.browser.version<9)?'jquery-1.9.1.min.js':'jquery-2.0.0b1.min.js';
head.js("http://code.jquery.com/"+jq_file, "http://www.votresite.com/js/vos_plugins.js");
</script>

Notez que nous chargeons les fichiers javascript depuis les sites ou cdn de leurs auteurs, dans leur version minifiée, et que jQuery 2.0.0 est toujours en version bêta 1. À vous d'adapter le code selon les besoins de votre site et l'existant. Vous pouvez voir ce code en fonctionnement sur Scooter System, qui tire largement profit des possibilités offertes par head.js. Vous pouvez tester son fonctionnement en utilisant le panneau développeur d'Internet Explorer 9 et son outil de compatibilité. Et ça marche ;)

Dans le cadre du SEOCamp de Nantes 2012, j'ai été invité à intervenir sur le thème de "html5 et le SEO". J'y ai abordé plusieurs sujets relatifs au référencement dit "On-page" :

• La syntaxe allégée de html5 ;
• La rigueur syntaxique moindre avec 3 exemples précis ;
• Le balisage sémantique et ses conséquences sur la structure des pages et le linking ;
• Les attributs de liens rel=, notamment pour les "publisher" et "author" ;
• Les rôles WAI-ARIA et l'accessibilité ;
• Les microdonnées structurées et schema.org.

J'ai élargi en abordant les évolutions de l'algorithme de Google, avec la montée en puissance des nouvelles formes de recherche : localisée, personnalisée, en temps réel et sémantique. La conclusion est que, non content d'offrir un gain de visibilité immédiat dans les SERP, html5 permet d'anticiper les évolutions futures du SEO.

Je vous propose de retrouver le diaporama qui m'a servi de support, dans lequel vous trouverez les exemples, chiffres et liens présentés durant ma conférence. N'hésitez pas à laisser un commentaire ci-dessous pour compléter ou apporter votre point de vue sur la question, j'y répondrai avec plaisir ;)

Merci à l'association SEOCamp pour cette belle journée, à l'école Epitech pour les locaux et à tous ceux avec qui j'ai pu échanger !

Chers lecteurs, je reprends la plume sur mon blog après plusieurs mois de silence radio. Cette absence ne signifie pas que je n'ai pas eu l'occasion de travailler sur de nouveaux scripts ou techniques de référencement, mais plutôt que j'ai été très occupé. En effet, mes activités autour des véhicules électriques légers et de la trottinette électrique réclament de plus en plus d'investissement.

Ma boutique en ligne Elec'store rencontre un grand succès, grâce notamment à la vente de l'Egret One. Avec mon partenaire Vincent Bourdeau, nous avons pour mission de faire connaître le produit en France afin d'en développer les ventes. Un objectif que nous avons atteint grâce à un travail intense sur la toile : communiqués de presse, prêts aux blogueurs influents, reportages...

De mon côté, j'ai profité de la popularité de Scooter System pour publier un essai de l'Egret One, au sein duquel je livre en toute objectivité mes impressions sur la trottinette électrique. Au fil de mes découvertes et rencontres, je me suis pris de passion pour cette catégorie de véhicules. Pour aider à les populariser, j'ai même créé un guide du transporteur personnel électrique sur Scooter System.

Non content de traiter de l'actualité du scooter de toutes les cylindrées, le site présente désormais également les nouveautés en matière de véhicules électriques urbains. Parmi les des derniers modèles présentés figurent 2 transporteurs gyroscopiques (comme le Segway) : le Ryno PT II et le Solowheel. Ce dernier ayant attiré mon attention, j'en ai commandé un dans le but de le tester ! Verdict à venir.

Pour concrétiser cette nouvelle passion, je me suis rapproché des associations les plus actives au niveau national et européen. J'ai ainsi adhéré à l'Avere France et à l'EME (Espace Mobilités Électriques) afin de participer aux salons, colloques et réunions auxquelles elles sont affiliées. Cela offre de nouvelles opportunités pour faire connaître et valoriser les véhicules électriques légers.

Grâce à ces associations et à de nouvelles rencontres, Elec'store participera en 2012 et 2013 à plusieurs événements. Dès septembre prochain, dans le cadre de l'opération Bougez malin, les parisiens pourront essayer l'Egret One sur le parvis de la Mairie ou sur les voies sur Berge. Puis, dans le cadre de Nantes capitale verte 2013, nous animerons la rubrique transports du site...

Autant dire que le projets sont nombreux ! Et encore, je ne vous ai pas parlé des rollers électriques SpnKix que je teste actuellement ou des futures trottinettes électriques à venir... en voilà un milieu en pleine effervescence !

Je vous propose de nous intéresser aujourd'hui à un thème qui a gagné en popularité avec la montée en puissance du trio html 5 / CSS3 / jQuery : les performances web. Je vais partager avec vous un ensemble de bonnes pratiques et de recommandations qui sont le fruit de mes lectures et expériences, la plupart ayant été testées puis mises en place sur la nouvelle version de mon site d'actualité Scooter System (lancée hier). Cet article est particulier dans le sens où j'ai opté pour une approche transversale, en traitant de plusieurs technologies et langages. De même, le gain de "performances" vendu à travers le titre de l'article peut être vérifié dans différents domaines : temps de chargement réduit, meilleure interactivité, optimisation pour le SEO... On y va ?

1. Réduisez la taille du DOM (Document Object Model). J'entends par là la quantité de code html de vos pages, notamment entre les balises <body> et </body>. Évitez d'imbriquer un trop grand nombre d'éléments les uns dans les autres afin de conserver une profondeur moyenne inférieure à 8. C'est l'assurance d'un chargement rapide (pour le téléchargement puis les calculs de rendu), y compris sous les navigateurs anciens et les ordinateurs les moins puissants. C'est également un atout si vous utilisez des scripts manipulant le DOM avec des insertions (de type .append()) ou appels en Ajax. Testez vos pages avec des bookmarklets comme DOM Monster ou DOM Ninja.
2. Limitez l'utilisation d'identifiants et classes sur vos balises. Utilisez des id pour les principales zones de votre page (#header, #main, #sidebar et #footer), puis des classes pour les sous-éléments (.search, .menu, .breadcrumb, .partenaires). Il n'est pas nécessaire d'attribuer de classes à des éléments qui se répètent. Dans le cadre d'un menu par exemple, mieux vaut qualifier le conteneur (<ul class="menu">) puis styler les enfants grâce au sélecteur descendant ou enfant (.menu>li). Cette méthode est un peu moins performante au niveau du temps de rendu (quoi qu'insignifiant), mais permet d'alléger le code source... et donc d'augmenter le poids des contenus (comme le 1er point). Or, il s'agit d'une bonne pratique en matière de SEO (moins de duplicate content lié aux parties "fixes" de la page).
3. Réduisez la taille de votre fichier CSS à moins de 50 ko (non gzippé). Si c'est impossible, n'hésitez pas à "découper" votre fichier et à appeler certaines parties uniquement lorsque c'est nécessaire (mais en limitant le nombre de fichiers CSS à 2 maximum). Tirez profit de l'héritage CSS (dit "en cascade"), utilisez des sélecteurs courts, regroupez les éléments qui partagent plusieurs caractéristiques communes, évitez l'utilisation d'éléments encodés en base64, limitez l'utilisation des nouvelles structures CSS3 longues avec 5 préfixes différents (-moz, -webkit, -ms...) et en bout de course, utilisez un outil comme CleanCSS.
4. Utilisez des sélecteurs CSS performants. Il faut privilégier les identifiants (#header), puis les classes (.menu), puis les tags (a), et enfin recourir aux sélecteurs composés. Pour ces derniers, l'idée est d'éviter les critères trop génériques à droite, car les moteurs de rendu CSS commencent leurs calculs par la fin. On aura ainsi tendance à préférer #header>.menu à #header>ul. Pour cibler un enfant, on essaiera d'utiliser dès que possible le sélecteur de descendance directe (#header>.menu) plutôt que celui de descendance générale (#header .menu). On évitera en outre l'utilisation du critère universel (*) et autres a:link ou input[type="text"]. Enfin, on n'associera pas de tag à un sélecteur d'identifiant ou de classe (pas de ul.menu, .menu suffit). Voici un bon article sur le sujet.
5. Faites appel aux sprites CSS. Cela consiste à regrouper l'ensemble des images de votre charte graphique en une seule et même image, puis à cibler ses différentes zones en utilisant la propriété CSS background-position. Il existe des outils simples et bien pensés pour vous mâcher le travail, comme SpriteGen. Pour gagner en poids dans votre fichier CSS, vous pouvez faire un 1er appel à cette image pour l'ensemble des éléments concernés, puis cibler ensuite chaque espace à l'aide d'un background-position:0 -100px. Cette pratique est très appréciée par Google Page Speed et YSlow.
6. Activez l'accélération matérielle sur les zones dynamiques faisant appel aux transitions, défilements et autres apparitions ou disparitions. Et cela qu'elles soient gérées en CSS3 ou en javascript. Cela permet de soulager le processeur en utilisant le GPU (l'unité graphique), et de faire disparaître d'éventuelles saccades ou lags sur les terminaux les moins puissants. L'activation se fait très simplement, en ajoutant la propriété transform:translateZ(0) à l'élément concerné dans votre fichier CSS.
7. Appelez vos CSS en début d'entête. Pour être performants, vos fichiers CSS doivent être appelés le plus tôt possible, avant tout autre élément du <header>. Il ne faut surtout pas les appeler après un script ou, pire, dans le corps de la page. De même, il est impératif d'utiliser la structure <link rel="stylesheet" href="style.css" />, et surtout pas @import. Le rendu de la page pourra ainsi débuter dès que possible et sans "reflows" (recalcul du rendu d'une partie ou de la totalité de la page), pour une expérience utilisateur de qualité.
8. Chargez vos javascript en asynchrone. Ce conseil est autant valable pour la librairie jQuery et ses plugins que pour les outils de recommandation sociale (Facebook, Twitter, Google+), votre Google Analytics et même vos publicités AdSense ou DFP (grâce à la nouvelle api Google Publisher Tag). Pour harmoniser et hiérarchiser le chargement de ces scripts, vous pouvez utiliser un loader asynchrone comme head.js. J'y ai systématiquement recours, et sa simplicité de mise en oeuvre n'a d'égal que sa stabilité et son universalité. Je vous invite à regarder le code source de Scooter System pour l'admirer à l'oeuvre, ou à (re)lire l'un de mes articles sur le sujet.
9. Optimisez le fonctionnement de vos scripts, qu'ils utilisent jQuery, Prototype, Mootools ou du js pur. Privilégiez le lancement de vos scripts d'interaction après le chargement complet de la page ($(window).load(function()) plutôt qu'après celui du DOM ($(function()), sauf bien entendu pour vos menus. Tirez profit des fonctions les plus efficaces (de nombreux tests sont publiés sur jsPerf.com), utilisez des sélecteurs performants et spécifiez un contexte ($(".menu","#header")).
10. Compressez tout ce qui peut l'être. C'est vrai pour le CSS et des outils comme CleanCSS le font très bien, mais ça l'est aussi pour le javascript (avec l'excellent  Javascript Compressor) et votre code html. Même si ce dernier est gzippé par votre serveur avant envoi (à configurer via le .htaccess si ce n'est pas le cas), à quoi bon charger des centaines d'espaces et de tabulations, qui seront inutiles pour vos visiteurs ? Prenez le temps de nettoyer le code de votre template et n'hésitez pas à utiliser php pour alléger des contenus stockés en base de données : str_replace("\t",'',str_replace("\n",'',$contenu));

En mettant en oeuvre l'ensemble de ces conseils (et quelques autres prodigués par les outils Page Speed et YSlow), vous obtiendrez un site rapide et performant sur toutes les plateformes fixes et mobiles, récentes ou plus anciennes. L'étape suivante dans la course à la performance peut être la mise en place d'un cdn de type media server, pour améliorer le temps de chargement des images... ;)

La version 1.7 de jQuery inaugure une nouvelle gestion des événements, que l'on peut désormais déclarer grâce à la fonction on(). Cette nouvelle structure est utilisable de façon classique de la même façon que bind(), ou bien avec un argument supplémentaire à la façon de delegate(). Son atout est sa polyvalence et sa simplicité de mise en place, mais pas seulement : elle permet d'accélérer considérablement la vitesse d'exécution de vos scripts (jusqu'à 100 fois). Un atout de taille pour offrir une expérience utilisateur de qualité au survol de vos menus et autres zones dynamiques !

Pour faire simple, l'event delegation avec on() permet de d'associer un événement à un élément parent de l'arborescence dom au lieu de l'associer individuellement à chacun des éléments concernés. Pour une liste, l'événement sera ainsi associé à la balise <ul>, et fonctionnera pour les <li> enfants. Le gros avantage de cette solution est qu'elle permet d'associer des événements à les éléments insérés dynamiquement dans le dom à l'aide de fonctions comme append() ou via des appels en Ajax. Je vous propose en exemple une version actualisée de mon astuce "Étendre la portée d’un lien avec Jquery" :

<script>
$(function(){
$("#liste_ul_contenante").on("mouseover","li",function(){
$(this).css("cursor","pointer").find("a").css("text-decoration","underline");
}).on("mouseout","li",function(){
$(this).find("a").css("text-decoration","none");
}).on("click","li",function(e){
document.location.href = $(this).find("a").attr("href");
e.preventDefault();
});
});
</script>

Utilisant personnellement ce type de fonctions dans mes développements, j'ai constaté un net gain en termes de fluidité lors du passage à cette nouvelle structure. Voilà un beau cadeau de la part des équipes de développement de jQuery ;)

Google Analytics est l'outil d'Analytics le plus répandu dans la sphère des webmasters, quel que soit leur niveau. L'outil permet en effet de multiples approches, depuis la simple consultation des données de fréquentation jusqu'à la création d'entonnoirs de conversion extrêmement détaillés. Aujourd'hui, je vous propose de découvrir une fonctionnalité peu connue mais très intéressante de cet outil incontournable : le suivi des événements.

Grâce à cette "brique" de Google Analytics, vous allez être en mesure de réaliser un tracking des clics effectués sur les liens sortants de votre site. Ces données pourront ensuite être croisées avec d'autres, ce qui vous permettra par exemple de savoir quelles sources ou quelles requêtes de recherche génèrent le plus de clics sortants... Ces données peuvent s'avérer très précieuses, pour les sites d'affiliation notamment.

Pour réaliser le tracking des clics de façon transparente et sans bloquer ou ralentir le chargement des pages, je vous propose de réutiliser des techniques déjà expliquées sur mon blog précédemment, à savoir un mélange du loader head.js et de Jquery. Voici le code complet à insérer dans le header de votre page pour activer cette fonctionnalité, ce dernier étant à faire évoluer selon les besoins de votre propre site :

<script type="text/javascript" src="https://github.com/headjs/headjs/raw/v0.96/dist/head.load.min.js"></script>
<script type="text/javascript">
head.js("http://www.google-analytics.com/ga.js");
head.js("https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js");
head.ready(function(){
$("a[target="_blank"]").click(function(e){
_gaq.push(['_trackEvent','Clics sortants',this.href]);});
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount','UA-XXXXXX-X']);
_gaq.push(['_trackPageview']);
</script>

Nous commençons par appeler le loader head.js, auquel nous demandons ensuite de charger Google Analytics et Jquery en asynchrone. Une fois les 2 scripts chargés, nous activons le tracking sur les liens dont la cible est _blank (nouvelle fenêtre). Rien ne vous empêche d'activer le tracking sur une classe particulière, voire sur tous les liens de vos pages si vous voulez être certain de ne rien laisser passer... mais cela prendra également en compte vos lien internes.

La dernière portion de code est liée à Google Analytics, et doit être personnalisée avec votre propre identifiant (UA-XXXXXX-X). Maintenant, un clic sur un lien sortant de vos pages sera détecté automatiquement par l'outil, de façon totalement transparente. Pour consulter ces données dans l'interface de Google Analytics, rien de plus simple : ça se passe dans Contenu > Événements > Principaux événements.

Vous y retrouverez un tableau avec une ligne "Clics sortants", qui correspond au libellé donné dans notre exemple, et une courbe de suivi au jour le jour. Vous avez également la possibilité d'aller plus loin en créant des tableaux personnalisés sur votre tableau de bord. Dans notre cas, nous avons par exemple croisé les requêtes de recherche avec le nombre de clics, ce qui nous permet d'orienter notre référencement vers les termes les plus rémunérateurs.

Analytics offrant des possibilités quasiment illimitées, sachez qu'il est également possible d'attribuer une valeur à chaque événement en ajoutant un argument supplémentaire à l'appel du _trackEvent. En indiquant le CPC ou la rémunération au formulaire dans un attribut de vos liens (ex : value=“1.25”), il est possible de le retourner à l'outil pour effectuer un suivi encore plus pointu de vos transformations. Ca vous a plu ? Faites tourner svp ;)

En tant qu'éditeur de Scooter System, cela fait plus de 10 ans que je m'intéresse au monde du deux-roues, avec un intérêt plus poussé pour l'univers du 50cm3. Durant ces nombreuses années, j'ai toujours beaucoup apprécié les découvertes de concept-scooters et autres prototypes, qui apportent un éclairage différent sur les problématiques de mobilité en ville. C'est d'ailleurs ce qui m'a poussé à créer un guide du scooter électrique, avant d'organiser 3 années de suite des Journées du Scooter Électrique dans le cadre de la Semaine du développement durable.

Il y a 2 mois, je me suis retrouvé dans une situation qui a nécessité que je repense totalement ma façon de me déplacer en ville. De nouvelles contraintes d'emploi du temps ont fait que j'ai du choisir entre les transports en communs, souvent bondés et en retard ou l'automobile, avec le risque de me retrouver bloqué dans les embouteillages aux heures de pointe. Après une réflexion intense qui m'a conduit à envisager le scooter, le vélo, les rollers et même la marche à pieds (sur 5 kilomètres tout de même), j'ai finalement trouvé une solution : la trottinette électrique.

Ce petit engin, léger mais autonome et rapide, est apparu comme la seule réponse pertinente au puzzle face auquel je me trouvais. Je me suis donc décidé à en acheter une, débutant une phase de recherche intense sur Internet. Voulant ce qu'il se fait de mieux en la matière, je me suis lancé dans la consultation de forums et blogs à la recherche de la perle rare. Au terme de cette phase de documentation de quelques jours, on m'a dirigé vers un modèle de 500 Watts vendu 550€, que l'on retrouve sur certains sites de vente en ligne et sur eBay sous différentes marques.

Tous ces modèles proviennent d'une même usine chinoise, qui produit en masse une dizaine de modèles de 500W à 1200W, avec plusieurs types de châssis. À la réception de la trottinette électrique, quelle ne fut pas ma déception en découvrant que j'étais tombé dans le panneau en achetant de la basse qualité... Les matériaux, la finition et le soin apporté à la fixation des accessoires m'ont rappelé les scooters chinois que l'on croise par centaines sur les salons professionnels, et qui ne méritent même pas qu'on s'y intéresse...

Après quelques jours d'utilisation, ma première impression s'est confirmée avec une dégradation rapide de la peinture, des parties métalliques qui rouillent à la moindre goutte d'eau et des faux-contacts récurrents au niveau du faisceau électrique. Autant dire que ce n'est pas ce à quoi je m'attendais. C'est en contactant le vendeur par téléphone que j'ai finalement découvert ce que je cherchais : "tout le monde n'est pas prêt à mettre 1500€ dans des Go-ped" m'a t-elle dit. "Peut-être", ai-je pensé, mais "merci pour le tuyau, je vais me renseigner sur cette marque".

C'est ce que je me suis empressé de faire ! En découvrant la gamme de trottinettes électriques de la Patmont Motor Werks, j'ai immédiatement constaté le fossé qualitatif qui la sépare de mon premier achat. Certes, ces modèles sont 2 à 5 fois plus coûteux, mais je sais par expérience qu'il est toujours plus intéressant d'investir dans du matériel de qualité, surtout quand on cherche la fiabilité. Ne souhaitant pas rester sur un échec, je me suis lancé à la recherche d'un revendeur Go-Ped sérieux, mais cela ne s'est pas avéré facile.

S'il existe en effet des sites commercialisant les trottinettes électriques ESR et I-Ped de la marque, la plupart sont avant tout tournés vers les modèles thermiques, et n'ont aucune expertise particulière vis-à-vis de cette technologie. C'est là que je me suis entré dans une nouvelle phase de réflexion, en me disant que d'autres citadins devaient certainement, comme moi, chercher des véhicules électriques légers pour circuler en ville et que, comme moi, ils avaient des chances d'être mal aiguillés. Après de nouvelles recherches, j'ai compris qu'il y avait quelque chose à faire.

Mes compétence en développement de sites, mes connaissances dans le marché du deux-roues et mon intérêt pour les technologies propres aidant, je me suis décidé à lancer une boutique en ligne spécialisée dans la vente de véhicules électriques légers pour adultes. C'est ainsi qu'est né Elec'store. Aujourd'hui, la boutique est fonctionnelle et permet d'acheter les trottinettes électriques Go-Ped et MyWay, qui offrent toutes une expérience de qualité pour se déplacer en milieu urbain. Je propose également des pièces détachées et équipements afin d'être vraiment complet.

En me lançant dans l'aventure Go-Ped, j'ai finalement fait l'acquisition de la trottinette de mes rêves, que j'utilise au quotidien pour mes déplacements, et dont je ne me passerai plus, même en hiver. J'ai investi dans une belle veste moto et une paire de gants chauds, qui me permettent de braver la pluie et le froid. J'utilise également les phares de vélo et le casque Limar 635 que je vends sur Elec'store pour sécuriser mes trajets. J'ai publié un essai de mon ESR 1000 Hoverboard sur Scooter System, et aborderai régulièrement le sujet dans les semaines et mois à venir ;)

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

Longtemps réservé aux images, fichiers javascript et autres css, le préchargement, ou "prefetching" en anglais, est maintenant disponible pour des pages complètes. Cette avancée, on la doit à html5 qui, grâce à une simple balise meta, ordonne au navigateur de charger une page à l'avance. Là où c'est formidable, c'est que ce dernier ne se contente pas de télécharger les éléments de la page, mais en réalise un pré-rendu. Du coup, lorsqu'un visiteur clique sur un lien vers cette page, l'affichage est instantané.

Si le prefetching offre une expérience utilisateur incomparable, il est important de choisir avec précaution les pages que vous allez pré-charger. Il convient d'en limiter le nombre (à 2-3 selon moi) pour ne pas surcharger votre serveur avec des requêtes http inutiles. J'ai énormément réfléchi à la meilleure façon d'utiliser cet outil, et l'ai finalement implémenté sur Scooter System dans 3 cas de figures :

• sur la page d'accueil du site, vers la dernière actualité publiée ;
• sur les principales rubriques du site, vers les pages de destination les plus populaires (liste récupérée dans Google Analytics) ;
• sur toutes les pages lorsqu'un visiteur arrive sur le site (détection du referer en php), vers la page d'accueil.

function prefetch($l){
if(false!==strpos($_SERVER['HTTP_USER_AGENT'],'Chrome/')){
return "\n".'<link rel="prerender" href="'.$l.'">';
} elseif(false!==strpos($_SERVER['HTTP_USER_AGENT'],'Firefox/')){
return "\n".'<link rel="prefetch" href="'.$l.'">';
}
}

Il suffit ensuite d'appeler votre fonction prefetch() dans le header de votre site ou blog autant de fois qu'il y a de pages à précharger, et elle renverra le code qui va bien. Notez qu'Internet Explorer, Opera et Safari ne gèrent pour le moment pas le pré-chargement, mais que cela viendra prochainement. Il vous suffira alors de modifer la fonction pour prendre en compte les évolutions. Voilà donc pour cette introduction à une nouveauté html5 pleine de promesses ! N'hésitez pas à publier un petit commentaire ci-dessous si cet article vous a intéressé !