Carnet de notes

Catégorie : Technique

  • Logen­tries

    Quand je regarde Logen­tries, leurs tarifs, je me dis qu’ils ont trouvé un filon.

    Et vous, vous utili­sez quoi pour analy­ser vos logs ?

  • Élabo­ra­toire sur la docu­men­ta­tion des perfor­mances web

    Il y a quelques temps j’ai relâ­ché publique­ment mon travail initial sur un livre en français dédié à la perfor­mance des sites web. Relâ­cher en public ne suffit pas et pour voir appa­raitre une docu­men­ta­tion utile qui devient pas obso­lète il faut créer une vraie dyna­mique de mise à jour et de comple­tion. Le besoin d’une vraie réfé­rence en français (et même en anglais) est là, et il n’y a pas besoin que d’ex­perts pour y arri­ver.

    Sudweb arrive et j’y anime­rai un élabo­ra­toire. Je vous propose d’y travailler ensemble à la docu­men­ta­tion des pratiques et des problé­ma­tiques de perfor­mance. L’objec­tif est de réamor­cer une dyna­mique qui permette d’ar­ri­ver à un contenu utile et mis à jour.

    Pour que la session soit effi­cace il faut prépa­rer un peu :

    En préa­lable il faut réus­sir à poin­ter un maxi­mum le contenu manquant ou à réécrire. Si vous avez peu de temps, choi­sis­sez un sujet qui vous semble perti­nent. Ce peut être une problé­ma­tique croi­sée récem­ment, un sujet abordé dans un billet de blog ou un point tech­nique plus géné­ral. Ce peut être un sujet bateau, une problé­ma­tique très poin­tue ou un point de détail (même très en détail, n’ayez pas peur). Peu importe en fait, si le contenu est manquant ou à mettre à jour : Créez un ticket sur github pour le signa­ler.

    C’est là que vous pouvez aider, et c’est ça qui peut nous permettre d’avoir un contenu de réfé­rence utile et perti­nent au sujet de la perfor­mance web. Je répète : *Vous* pouvez aider. Oui, *vous* aussi, même si vous ne venez pas (mais je vous encou­rage à venir).

    Tout le monde peut parti­ci­per et y inves­tir le temps qu’il peut, même 10 minutes, quel que soit le niveau tech­nique. Si vous ne savez pas par quoi commen­cer regar­der vos dix lectures précé­dentes côté perfor­mance web et véri­fiez que tout ce qui vous semble utile est présent dans le contenu actuel. Mieux : À partir de main­te­nant faites un tour à chaque fois que vous lisez quelque chose sur la perfor­mance pour véri­fier si c’est déjà dans le livre.

    En avril nous ferons un second travail de quali­fi­ca­tion et de regrou­pe­ment pour tenter de consti­tuer des groupes de tâches avec des objec­tifs précis et réali­sables pour Sudweb.

    Merci de votre aide et n’hé­si­tez pas à relayer ce billet.

  • Notmuch – indexa­tion des e-mail

    Pour mes propres archives : Quand on veut indexer un paquet d’e-mail, Notmuch semble plus qu’ef­fi­cace pour les recherches. À rete­nir un jour où je souhaite sortir de Gmail.

  • Comment renta­bi­li­ser la mauvaise qualité

    Que faire quand le réseau sature et qu’on livre un service de mauvaise qualité ? Les geeks irres­pon­sables diront qu’il faut inves­tir dans l’in­fra­struc­ture réseau. Les commer­ciaux de nos four­nis­seurs d’ac­cès sont bien plus astu­cieux : Il suffit de faire payer un accès prio­ri­taire à quelques heureux élus.

    La solu­tion est mira­cu­leuse : Au lieu de dépen­ser on gagne des sous. Pire, on peut affir­mer à ceux qui subissent la mauvaise qualité, que c’est fina­le­ment de leur faute – ils ne payent pas l’op­tion – et pas celle du four­nis­seur.

    C’est encore Free qui fait parler de lui en imagi­nant faire payer un accès prio­ri­taire au catch-up TV. Pour­tant il est clair que sur ce chapitre seul Free est respon­sable des éven­tuels ralen­tis­se­ments. Ce n’est pas une nouveauté, les diri­geants de Free ont très bien compris la stra­té­gie du pour­ris­se­ment et l’idée qu’une mauvaise qualité c’est une source de revenu. La seule diffé­rence avec l’his­toire de Youtube c’est qu’elle concer­nait l’autre côté du réseau (les four­nis­seurs et non les clients).

    Il serait peut être temps que nos régu­la­teurs mettent leur grain de sel pour défi­nir ce qui est le niveau de qualité attendu (ou au moins impo­ser une mesure de qualité publique pour que chacun fasse son choix en connais­sance de cause).

  • Paliers de respon­sive design

    Et si nous dépas­sions les posi­tions de prin­cipe ?

    Pour faire une mise en page web « respon­sive », des gens biens me décon­seillent de me servir des tailles des diffé­rents appa­reils pour imagi­ner les paliers sur lesquels modi­fier l’agen­ce­ment. L’idée est de travailler sur le contenu et d’ima­gi­ner ce qui est le plus perti­nent pour le contenu, indé­pen­dam­ment des appa­reils sur le marché, qui vont de toutes façons évoluer.

    Oui, ok, en théo­rie. Main­te­nant il est temps de travailler la pratique.

    Je peux faire une opti­mi­sa­tion ou un nouvel agen­ce­ment à chaque fois que l’es­pace dispo­nible me permet d’ap­por­ter un peu de valeur ajou­tée. Je fini­rai avec une multi­tude de paliers diffé­rents. Certains me deman­de­ront du temps, peut être beau­coup, alors qu’ils ne repré­sentent quasi­ment aucun visi­teur. Autant dire que j’au­rai perdu du temps.

    À l’in­verse, je peux prévoir unique­ment quelques paliers prin­ci­paux et lais­ser les marges ou tailles s’adap­ter parce que mon contenu le permet. Ce sera correct et lisible partout mais peut être que tel ou tel type d’ap­pa­reil repré­sente beau­coup de visi­teurs et qu’un palier ou qu’une opti­mi­sa­tion supplé­men­taire aurait apporté un retour sur inves­tis­se­ment signi­fi­ca­tif.

    Au final je vais devoir faire des choix de palier non seule­ment en fonc­tion de mon contenu, de l’er­go­no­mie visée et du temps dispo­nible, mais aussi en fonc­tion des visi­teurs et de leur maté­riel. C’est une clas­sique ques­tion de retour sur inves­tis­se­ment, de ratio entre la valeur ajou­tée et l’in­ves­tis­se­ment néces­saire : Je veux que ce soit correct partout, mais je veux concen­ter mes efforts supplé­men­taires là où c’est le plus utile et visible.

    Même sans toucher au nombre de paliers, l’er­go­no­mie et les conte­nus ne dictent pas toujours un palier très précis. Je peux fina­le­ment viser un peu plus tôt ou un peu plus tard sans que ça ne change grand chose, j’ap­por­te­rai juste une solu­tion légè­re­ment diffé­rente. Tel ou tel appa­reil risque de se retrou­ver proche d’un palier et avoir connais­sance de cette proxi­mité me permet un quick-win au niveau de la valeur ajou­tée qu’il serait dommage de rater.

    Bien évidem­ment c’est une réflexion qui dépend en partie des appa­reils, de la répar­ti­tion des utili­sa­teurs et des prévi­sions tels que nous en dispo­sons aujourd’­hui. Cela peut chan­ger, et cela chan­gera. Si je prends correc­te­ment en compte le design et l’er­go­no­mie alors le rendu restera correct. Peut être pas autant opti­misé qu’au départ, mais pas moins bon que si je ne prends pas du tout en compte les appa­reils et utili­sa­teurs au départ.

  • Quelques outils pour simpli­fier github

    Pour mes propres archives, et pour ceux qui ne connaissent pas encore, github met à dispo­si­tion deux outils pour simpli­fier les inter­ac­tions :

    Le premier c’est github pour mac, une inter­face graphique simpliste mais effi­cace pour gérer les dépôts, commit et branches. Ça ne fait pas le café mais ça fait la base utile pour ceux qui ont une utili­sa­tion naive. Le bonus ce sont les noti­fi­ca­tions d’ac­ti­vité qui passent alors dans le système d’alerte inté­gré d’OS X.

    Le second c’est hub, un rempla­ce­ment de la commande git pour les adeptes de la ligne de commande. On ajoute simple­ment quelques simpli­fi­ca­tions de commandes. Rien d’in­dis­pen­sable, mais de quoi éviter de réflé­chir quand on bosse avec github : utili­ser les couples utili­sa­teur/projet dans la ligne de commande, créer une branche à partir d’une pull request, initier un fork, lancer une pull request, etc.

    Côté alertes pour les diffé­rents commits d’un projet, il y a aussi Commit­ted (pour Mac OS X là aussi)

    Naho­lyr a aussi un petit script pour gérer les pull request, en surcouche à hub.

  • Joyeux effets javas­cript – file upload et Twit­ter boots­trap

    Les gens compé­tents se déchaînent et on voit main­te­nant appa­raitre des choses que nous aurions à peine imaginé du temps où j’étais inté­gra­teur web. Nous étions capable de créer tel ou tel compo­sant, mais en créant tout de zéro ou presque. Désor­mais des biblio­thèques pré-exis­tantes donnent un coup d’ac­cé­lé­ra­teur gigan­tesque.

    Aujourd’­hui je suis retombé sur le télé­char­ge­ment de fichiers, et les exemples du boots­trap proposé sont plus que convain­cants. Le menu à gauche pour gérer le posi­tion­ne­ment dans la page est lui aussi une très bonne idée bien implé­men­tée.

    Je ne peux cepen­dant pas m’em­pê­cher de me poser la ques­tion de la charge en terme de perfor­mance quand on utilise plusieurs compo­sants. Rien que baser tout ça sur jquery risque de faire mal côté mobile.

  • Les rayures de la webperf

    Jeudi confes­sion : Quand je vois un orateur français faire une inter­ven­tion publique au sujet de la perfor­mance web, j’ai encore parfois l’im­pres­sion qu’il usurpe ma place. Oh, je ne le pense pas, mais il y a parfois le petit pince­ment, un peu comme si le sujet était mon bébé.

    Je vous propose un petit jeu : Si vous inter­ve­nez sur un sujet perfor­mances des sites web, mettez un vête­ment à rayures (hori­zon­tales les rayures), publiez une photo dans le groupe flickr dédié et faites un lien dans les commen­taires ci-dessous avec le contexte. Confé­rences, ateliers, forma­tions, même avant-ventes si ça vous amuse : tout le monde peut jouer.

    Si vous croi­sez des inter­ve­nants qui ne jouent pas, tentez de les convaincre. Ceux qui ont d’an­ciennes photo qui corres­pondent peuvent jouer aussi.

  • Ignore the fold

    À contre-courant des habi­tudes des divi­sions de web marke­ting : Ignore the fold.

    Et si au lieu de bour­rer l’in­for­ma­tion de façon à ce que l’uti­li­sa­teur n’ait pas à faire défi­ler la page, il fallait l’aé­rer pour que l’ac­tion désor­mais natu­relle de défi­ler ne soit plus l’obs­tacle à des mises en pages effi­caces ?

    Je suis preneur de plus de ressources à ce sujet si vous en avez. Le lien donné corres­pond assez à mon expé­rience en tant qu’u­ti­li­sa­teur.

  • La fin des carrou­sels

    Oui, ils semblent une superbe idée pour four­nir plus de propo­si­tions à l’in­ter­naute, mais ajou­ter un carrou­sel est géné­ra­le­ment une mauvaise idée. Le carrou­sel tue le taux de conver­sion.

    D’autres ont détaillé la ques­tion bien mieux que moi alors si vous voulez suivre les études, les tests utili­sa­teurs ou les statis­tiques de conver­sion, suivez un des liens en bas du billet. Pour ceux qui veulent un résumé :

    1. Ça ressemble à un élément très graphique, qui bouge, souvent avec des promo­tions ou messages publi­ci­taires, c’est donc traité visuel­le­ment par l’in­ter­naute comme de la publi­cité, et ignoré incons­ciem­ment. Ce que vous mettez dans le carrou­sel est ce qui a le plus de chances de ne *pas* être suivi.
    2. Sans que ça ne soit contra­dic­toire avec le point précé­dent, l’oeil humain fonc­tionne par compa­rai­son. Ce qui bouge attire l’oeil et empêche de se concen­trer ailleurs. Le carrou­sel bouge et en plus de ne pas être effi­cace en lui-même, il empê­chera le reste de la page de l’être.
    3. Trop souvent mal fait il pose de problèmes de perfor­mance sur l’ap­pa­reil client, et des problèmes d’er­go­no­mie si jamais le client souhaite l’uti­li­ser.

    Au final il appa­rait que le carrou­sel est surtout une bonne idée pour l’édi­teur du site, ses équipes commer­ciales et marke­ting, de façon à ne pas choi­sir ce qui doit vrai­ment être mis en avant. Sa seule valeur ajou­tée c’est de conten­ter l’or­ga­ni­sa­tion interne.

    Bien entendu tout ceci est géné­ral, mais parce que c’est le cas géné­ral, il y a peu de chances que votre cas soit diffé­rent, malgré votre volonté d’y croire. Tout ceci n’est pas de l’opi­nion, il y a des vrais tests utili­sa­teurs et des chiffres de conver­sion derrière.

    Si vous souhai­tez tout de même un carrou­sel :

    • C’est pour une infor­ma­tion non secon­daire (une galle­rie d’illus­tra­tions par exemple)
    • Un carrou­sel = un seul type d’in­for­ma­tion
    • Il doit être navi­gable au clavier et en tactile, et les zones de navi­ga­tion clavier doivent être en dehors de la zone du carrou­sel
    • La posi­tion courante doit être expli­cite, et si possible utili­sez des minia­tures pour mieux iden­ti­fier les diffé­rents items du carrou­sel
    • Char­gez le code néces­saire à l’ani­ma­tion et les éléments non visibles en asyn­chrone, ne ralen­tis­sez pas l’ac­cès à la page

    Quelques liens :