Sites mobiles : optimisez-les !
optimisez-les !
À mesure que les connexions passent de plus en plus par les appareils mobiles, il devient crucial que l’utilisateur accède aux sites Web de manière rapide. Et pour cela, il convient de soigner le FEO (Front End Optimization). Mais il existe aussi des solutions intelligentes.
Chaque année, en été comme en hiver, c’est la même histoire : tel ou tel site n’a pas tenu la charge pendant les soldes. La faute à un pic de trafic qui est pourtant prévisible. Et, bien souvent, les seules solutions trouvées – du load balancing aux CDN… – ne sont pas suffisantes pour traiter l’afflux de visiteurs sur un site web. D’autant que depuis ces dernières années, il faut compter non plus uniquement sur le trafic des sites dits « desktop », mais également avec celui des appareils mobiles, smartphones et tablettes. Août 2013, aux États-Unis : le nombre d’utilisateurs « mobiles » a dépassé celui des « fixes ». La tendance n’est évidemment pas constatée sur le seul territoire américain : dans le monde, cette passation de pouvoir devrait avoir lieu au premier semestre 2014, selon l’institut de sondage comScore. Ce qui a plusieurs conséquences dont la plus importante : un site web mobile ne peut – ou ne doit ? – pas être pensé comme sa version desktop. À cela plusieurs réponses, et même plusieurs options : comme à chaque phénomène, les développeurs ont une flopée de solutions pour résoudre ce problème avec en point d’orgue une seule et même préoccupation : adapter le site le mieux possible pour y accéder rapidement. Car chacun le sait : un site lent est mauvais pour le business. De nombreuses études montrent qu’un site réactif permet d’augmenter les visites et les taux de transformation, de fidéliser les visiteurs et d’améliorer le SEO (Search Engine Optimization). Le premier conseil à respecter dans tous les cas est le suivant : penser le FEO (Front End Optimization) dès la conception du site. Gardez en tête le schéma suivant :
Penser l’optimisation pour mobiles
Un site mobile bien pensé pour une utilisation smartphone et tablette sera donc plus léger, plus adapté au chargement de contenus en tenant compte de la vigueur des réseaux. Mais, bien entendu, le métier serait trop simple s’il se limitait à cette seule assertion ! Il faut prendre en compte les navigateurs, leurs versions, l’intégration du responsive web design, etc. Cette dernière pratique, bien connue des webdesigners depuis quelques années, doit par ailleurs être utilisée à bon escient. Dans certains cas, des sites se retrouvent avec l’effet inverse : une version mobile bien adaptée à la taille de l’écran mais bien plus lourde que ce qu’elle devrait être. Bref, il faut soigner le FEO. Cette notion doit être prise en compte dès le début d’un projet et pourrait être définie comme l’amélioration des process de délivrance des ressources du point de vue de l’internaute. Première observation : il est aujourd’hui plus simple d’optimiser un site desktop que mobile. D’autre part, une tendance se dessine en termes de sites mobiles : les versions en m. (comme m.linformaticien.com par exemple) sont de moins en moins utilisées, pour éviter que l’internaute pense avoir droit à une version rabotée du site visité. Une erreur classique qui est souvent commise est de penser uniquement à la création de trafic en prenant en compte les aspects SEO/SEM, publicité, trafic, etc., sans tenir compte de l’infrastructure. Cette « défaillance » est souvent comblée avec l’utilisation d’un CDN (Content Delivery Network) qui « accélère » l’acheminement vers un site mais « n’optimise » pas celui-ci.
Avec Fasterize, un site optimisé en quelques minutes
Il existe heureusement (!) des solutions d’optimisation que ce soit pour les sites mobiles ou les sites desktop. Elles sont donc principalement destinées aux sites web dont le FEO n’a pas été suffisamment bien pensé pour que l’optimisation soit totale. Plusieurs grands acteurs proposent donc des solutions en ce sens, principalement des éditeurs américains, à l’instar d’Akamai notamment (via le rachat de Blaze), avec sa solution Aqua Ion. Le géant, spécialiste du CDN, propose une offre complète de technologies d’optimisation, d’accélération et de diffusion. D’autres, à l’instar de Yottaa ou CloudFlare, se concentrent quant à eux sur l’optimisation des contenus par divers procédés techniques. Parmi eux, le Français Fasterize a retenu notre attention, grâce à un outil d’automatisation de l’optimisation web. La solution est installable facilement sans modification du code, mais avec une simple bascule des DNS vers Fasterize. Pour un site basique, une telle opération peut prendre quelques minutes à peine ; une vingtaine de jours au maximum pour des grands groupes à cause de la mise en place des process, de l’accompagnement, de la configuration, des tests, etc. Que fait exactement Fasterize ? Réponse : elle applique toutes les « bonnes pratiques » du FEO, de manière optimisée et automatisée. Via une interface, l’utilisateur pilote et configure luimême les règles d’optimisation. De plus, puisqu’il n’y a aucune modification du code, il est possible « d’allumer et d’éteindre » l’outil de Fasterize. Quant aux règles qu’il applique à la volée, elles sont les suivantes : compression : HTML, CSS, JavaScript et images concaténation : réduction du nombre de fichiers CSS et JavaScript
minification : suppression des caractères inutiles HTML, CSS et JavaScript
Inlining : intégration de certaines images dans le HTML pour limiter le nombre de requêtes cache : mise en cache des éléments optimisés chargement différé : chargement des fichiers JavaScript après la fin du rendu de la page
CSS : placement judicieux – le plus haut possible – des fichiers CSS
Progressive JPG : transformation des JPG en Progressive JPG en fonction de leur taille
parallélisation : les objets statiques sont servis sur plusieurs domaines annexes sans cookies
TCP : une seule connexion TCP pour l’envoi/ réception de requêtes/réponses HTTP
réseau : optimisation TCP entre les machines Fasterize, vos serveurs et les internautes
Accélérer jusqu’à 50 %
À noter que Fasterize a encore des tours dans son sac avec d’autres options à venir comme l’implémentation du protocole SPDY Proxy (Chrome, Firefox) ou le pre-rendering. « Fasterize est aussi un outil utile pour tenir face à des pics de charge, comme les périodes de soldes. C’est inhérent à notre solution puisqu’un site “fasterizé ”
aura moins d’éléments à charger par exemple » , explique Stéphane Rios, fondateur et dirigeant de Fasterize. Effet parallèle : les investissements dans un réseau et des serveurs haute disponibilité par exemple sont moins critiques en utilisant une telle solution, qui permet au final d’accélérer le chargement d’un site jusqu’à 50 %. Pour terminer d’insister sur l’importance du FEO à la genèse d’un projet, Stéphane Rios prodigue quelques conseils utiles concernant les sites mobiles. En premier lieu, « éviter les redirections ! » ,
Fasterize est aussi un outil utile pour tenir face à des pics de charge Stéphane Rios, fondateur et dirigeant de Fasterize.
assure-t-il d’emblée. « C’est souvent le pire des cas : l’utilisateur télécharge toute la page et un JavaScript lui indique après coup qu’il consulte le site classique et qu’il va donc être redirigé vers la version mobile. » Une opération qui nécessite donc une nouvelle connexion sur un autre nom de domaine. « Plus simplement, attention au poids
des images mais aussi au choix de l’hébergeur » , conclut-il, ajoutant que Fasterize évolue encore pour mieux s’adapter à l’optimisation des sites mobiles.