Sites mo­biles : op­ti­mi­sez-les !

op­ti­mi­sez-les !

L'Informaticien - - SOMMAIRE - ÉMI­LIEN ERCOLANI

À me­sure que les connexions passent de plus en plus par les ap­pa­reils mo­biles, il de­vient cru­cial que l’uti­li­sa­teur ac­cède aux sites Web de ma­nière ra­pide. Et pour ce­la, il convient de soi­gner le FEO (Front End Op­ti­mi­za­tion). Mais il existe aus­si des so­lu­tions in­tel­li­gentes.

Chaque an­née, en été comme en hi­ver, c’est la même his­toire : tel ou tel site n’a pas te­nu la charge pen­dant les soldes. La faute à un pic de tra­fic qui est pour­tant pré­vi­sible. Et, bien sou­vent, les seules so­lu­tions trou­vées – du load ba­lan­cing aux CDN… – ne sont pas suf­fi­santes pour trai­ter l’af­flux de vi­si­teurs sur un site web. D’au­tant que de­puis ces der­nières an­nées, il faut comp­ter non plus uni­que­ment sur le tra­fic des sites dits « desk­top », mais éga­le­ment avec ce­lui des ap­pa­reils mo­biles, smart­phones et ta­blettes. Août 2013, aux États-Unis : le nombre d’uti­li­sa­teurs « mo­biles » a dé­pas­sé ce­lui des « fixes ». La ten­dance n’est évi­dem­ment pas consta­tée sur le seul ter­ri­toire amé­ri­cain : dans le monde, cette pas­sa­tion de pou­voir de­vrait avoir lieu au pre­mier se­mestre 2014, se­lon l’ins­ti­tut de son­dage comS­core. Ce qui a plu­sieurs consé­quences dont la plus im­por­tante : un site web mo­bile ne peut – ou ne doit ? – pas être pen­sé comme sa ver­sion desk­top. À ce­la plu­sieurs ré­ponses, et même plu­sieurs op­tions : comme à chaque phé­no­mène, les dé­ve­lop­peurs ont une flo­pée de so­lu­tions pour ré­soudre ce pro­blème avec en point d’orgue une seule et même pré­oc­cu­pa­tion : adap­ter le site le mieux pos­sible pour y ac­cé­der ra­pi­de­ment. Car cha­cun le sait : un site lent est mau­vais pour le bu­si­ness. De nom­breuses études montrent qu’un site ré­ac­tif per­met d’aug­men­ter les vi­sites et les taux de trans­for­ma­tion, de fi­dé­li­ser les vi­si­teurs et d’amé­lio­rer le SEO (Search Engine Op­ti­mi­za­tion). Le pre­mier conseil à res­pec­ter dans tous les cas est le sui­vant : pen­ser le FEO (Front End Op­ti­mi­za­tion) dès la concep­tion du site. Gar­dez en tête le sché­ma sui­vant :

Pen­ser l’op­ti­mi­sa­tion pour mo­biles

Un site mo­bile bien pen­sé pour une uti­li­sa­tion smart­phone et ta­blette se­ra donc plus lé­ger, plus adap­té au char­ge­ment de conte­nus en te­nant compte de la vi­gueur des ré­seaux. Mais, bien en­ten­du, le mé­tier se­rait trop simple s’il se li­mi­tait à cette seule as­ser­tion ! Il faut prendre en compte les na­vi­ga­teurs, leurs ver­sions, l’in­té­gra­tion du res­pon­sive web de­si­gn, etc. Cette der­nière pratique, bien connue des web­de­si­gners de­puis quelques an­nées, doit par ailleurs être uti­li­sée à bon es­cient. Dans cer­tains cas, des sites se re­trouvent avec l’ef­fet in­verse : une ver­sion mo­bile bien adap­tée à la taille de l’écran mais bien plus lourde que ce qu’elle de­vrait être. Bref, il faut soi­gner le FEO. Cette no­tion doit être prise en compte dès le dé­but d’un pro­jet et pour­rait être dé­fi­nie comme l’amé­lio­ra­tion des pro­cess de dé­li­vrance des res­sources du point de vue de l’in­ter­naute. Pre­mière ob­ser­va­tion : il est au­jourd’hui plus simple d’op­ti­mi­ser un site desk­top que mo­bile. D’autre part, une ten­dance se des­sine en termes de sites mo­biles : les ver­sions en m. (comme m.lin­for­ma­ti­cien.com par exemple) sont de moins en moins uti­li­sées, pour évi­ter que l’in­ter­naute pense avoir droit à une ver­sion ra­bo­tée du site vi­si­té. Une er­reur clas­sique qui est sou­vent com­mise est de pen­ser uni­que­ment à la créa­tion de tra­fic en pre­nant en compte les as­pects SEO/SEM, pu­bli­ci­té, tra­fic, etc., sans te­nir compte de l’in­fra­struc­ture. Cette « dé­faillance » est sou­vent com­blée avec l’uti­li­sa­tion d’un CDN (Content De­li­ve­ry Net­work) qui « ac­cé­lère » l’ache­mi­ne­ment vers un site mais « n’optimise » pas ce­lui-ci.

Avec Fas­te­rize, un site op­ti­mi­sé en quelques mi­nutes

Il existe heu­reu­se­ment (!) des so­lu­tions d’op­ti­mi­sa­tion que ce soit pour les sites mo­biles ou les sites desk­top. Elles sont donc prin­ci­pa­le­ment des­ti­nées aux sites web dont le FEO n’a pas été suf­fi­sam­ment bien pen­sé pour que l’op­ti­mi­sa­tion soit to­tale. Plu­sieurs grands ac­teurs pro­posent donc des so­lu­tions en ce sens, prin­ci­pa­le­ment des édi­teurs amé­ri­cains, à l’ins­tar d’Aka­mai no­tam­ment (via le ra­chat de Blaze), avec sa so­lu­tion Aqua Ion. Le géant, spé­cia­liste du CDN, pro­pose une offre com­plète de tech­no­lo­gies d’op­ti­mi­sa­tion, d’ac­cé­lé­ra­tion et de dif­fu­sion. D’autres, à l’ins­tar de Yot­taa ou CloudF­lare, se concentrent quant à eux sur l’op­ti­mi­sa­tion des conte­nus par di­vers pro­cé­dés tech­niques. Par­mi eux, le Fran­çais Fas­te­rize a re­te­nu notre at­ten­tion, grâce à un ou­til d’au­to­ma­ti­sa­tion de l’op­ti­mi­sa­tion web. La so­lu­tion est ins­tal­lable fa­ci­le­ment sans modification du code, mais avec une simple bas­cule des DNS vers Fas­te­rize. Pour un site ba­sique, une telle opé­ra­tion peut prendre quelques mi­nutes à peine ; une ving­taine de jours au maxi­mum pour des grands groupes à cause de la mise en place des pro­cess, de l’ac­com­pa­gne­ment, de la confi­gu­ra­tion, des tests, etc. Que fait exac­te­ment Fas­te­rize ? Ré­ponse : elle ap­plique toutes les « bonnes pra­tiques » du FEO, de ma­nière op­ti­mi­sée et au­to­ma­ti­sée. Via une in­ter­face, l’uti­li­sa­teur pi­lote et confi­gure lui­même les règles d’op­ti­mi­sa­tion. De plus, puis­qu’il n’y a au­cune modification du code, il est pos­sible « d’al­lu­mer et d’éteindre » l’ou­til de Fas­te­rize. Quant aux règles qu’il ap­plique à la vo­lée, elles sont les sui­vantes : com­pres­sion : HTML, CSS, Ja­vaS­cript et images conca­té­na­tion : ré­duc­tion du nombre de fi­chiers CSS et Ja­vaS­cript

mi­ni­fi­ca­tion : sup­pres­sion des ca­rac­tères in­utiles HTML, CSS et Ja­vaS­cript

In­li­ning : in­té­gra­tion de cer­taines images dans le HTML pour li­mi­ter le nombre de re­quêtes cache : mise en cache des élé­ments op­ti­mi­sés char­ge­ment dif­fé­ré : char­ge­ment des fi­chiers Ja­vaS­cript après la fin du ren­du de la page

CSS : pla­ce­ment ju­di­cieux – le plus haut pos­sible – des fi­chiers CSS

Pro­gres­sive JPG : trans­for­ma­tion des JPG en Pro­gres­sive JPG en fonc­tion de leur taille

pa­ral­lé­li­sa­tion : les ob­jets sta­tiques sont ser­vis sur plu­sieurs do­maines an­nexes sans co­okies

TCP : une seule connexion TCP pour l’en­voi/ ré­cep­tion de re­quêtes/ré­ponses HTTP

réseau : op­ti­mi­sa­tion TCP entre les ma­chines Fas­te­rize, vos ser­veurs et les in­ter­nautes

Ac­cé­lé­rer jus­qu’à 50 %

À no­ter que Fas­te­rize a en­core des tours dans son sac avec d’autres op­tions à ve­nir comme l’im­plé­men­ta­tion du pro­to­cole SPDY Proxy (Chrome, Fi­re­fox) ou le pre-ren­de­ring. « Fas­te­rize est aus­si un ou­til utile pour te­nir face à des pics de charge, comme les pé­riodes de soldes. C’est in­hé­rent à notre so­lu­tion puis­qu’un site “fas­te­ri­zé ”

au­ra moins d’élé­ments à char­ger par exemple » , ex­plique Sté­phane Rios, fon­da­teur et di­ri­geant de Fas­te­rize. Ef­fet pa­ral­lèle : les in­ves­tis­se­ments dans un réseau et des ser­veurs haute dis­po­ni­bi­li­té par exemple sont moins cri­tiques en uti­li­sant une telle so­lu­tion, qui per­met au fi­nal d’ac­cé­lé­rer le char­ge­ment d’un site jus­qu’à 50 %. Pour ter­mi­ner d’in­sis­ter sur l’im­por­tance du FEO à la ge­nèse d’un pro­jet, Sté­phane Rios pro­digue quelques conseils utiles concer­nant les sites mo­biles. En pre­mier lieu, « évi­ter les re­di­rec­tions ! » ,

Fas­te­rize est aus­si un ou­til utile pour te­nir face à des pics de charge Sté­phane Rios, fon­da­teur et di­ri­geant de Fas­te­rize.

as­sure-t-il d’em­blée. « C’est sou­vent le pire des cas : l’uti­li­sa­teur té­lé­charge toute la page et un Ja­vaS­cript lui in­dique après coup qu’il consulte le site clas­sique et qu’il va donc être re­di­ri­gé vers la ver­sion mo­bile. » Une opé­ra­tion qui né­ces­site donc une nou­velle connexion sur un autre nom de do­maine. « Plus sim­ple­ment, at­ten­tion au poids

des images mais aus­si au choix de l’hé­ber­geur » , conclut-il, ajou­tant que Fas­te­rize évo­lue en­core pour mieux s’adap­ter à l’op­ti­mi­sa­tion des sites mo­biles.

Fas­te­rize pro­pose une console de ges­tion unique pour l'op­ti­mi­sa­tion des sites web.

Newspapers in French

Newspapers from France

© PressReader. All rights reserved.