Accueil > Webperf > Atelier

Atelier de travail sur les bonnes pratiques Webperf

Flux de commentaires
Date Contributeur Commentaire
11/06/2018 08:52 Elie Sloïm Critère N°108 - Level 1 - Seule la prévisualisation d'une vidéo est pré-chargée au chargement de la page.
23/01/2016 21:45 Nedelonov Critère N°20 - Level 1 - L'indication de mise en cache des ressources statiques est d'au moins un mois.

test

10/10/2012 20:16 Matthieu Larcher Critère N°114 - Level 2 - Un commentaire conditionnel vide précède l'élément racine si les commentaires conditionnels sont utilisés.
Il y a une solution à ce noeud gordien basée sur les précompileurs css (cf ce post: http://nicolasgallagher.com/mobile-first-css-sass-and-ie/ )

Mais perso j'ajoute généralement des règles spécifiques pour ie basées sur les classes du tag html (mises grâce aux cc). C'est généralement dérisoire en terme de poids et tellement plus simple que n'importe quelle autre solution...
10/10/2012 20:05 Nicolas Hoizey Critère N°114 - Level 2 - Un commentaire conditionnel vide précède l'élément racine si les commentaires conditionnels sont utilisés.
Cela veut dire que tu envoies à 95% des utilisateurs des bouts de CSS dont ils n'ont pas besoin, donc tu dégrades (souvent de façon dérisoire, certes) leurs perfs à eux.
10/10/2012 16:27 Fabrice Bonny Critère N°114 - Level 2 - Un commentaire conditionnel vide précède l'élément racine si les commentaires conditionnels sont utilisés.
Rien n'empêche de mettre les règles dans des CSS propres à chaque version d'IE et à les concaténer. Il suffira de virer la CSS ie6.css de la concaténation et le CC dans le HTML pour arrêter le support, par exemple.

C'est tout aussi souple, tout en accélérant les navigateurs qui en ont le plus besoin, non ?
10/10/2012 13:19 Laurent Denis Critère N°114 - Level 2 - Un commentaire conditionnel vide précède l'élément racine si les commentaires conditionnels sont utilisés.
En l'état d'avancement de la checklist, nous devons ramener cette BP en proposition. N'hésitez pas à poursuivre ;-)
10/10/2012 12:49 Nicolas Hoizey Critère N°114 - Level 2 - Un commentaire conditionnel vide précède l'élément racine si les commentaires conditionnels sont utilisés.
Non, les CC sont justement utilisés pour mettre les classes dont on parle sur la balise <html>.

Par contre, je ne suis pas aussi catégorique que la formulation de Fabrice, mettre des CC pour une CSS qui ne sert qu'aux vieux IE, ça évite d'envoyer parfois pas mal d'instructions inutiles aux autres navigateurs… Certes ça pénalise un peu ces vieux IE avec un download en plus, mais c'est un pari (gagnant à coup sûr) sur l'avenir où on pourra virer complètement cette CSS.
10/10/2012 12:42 Laurent Denis Critère N°114 - Level 2 - Un commentaire conditionnel vide précède l'élément racine si les commentaires conditionnels sont utilisés.
Donc, il ne faut pas utiliser les CC, tout court ? (charger des CSS spécifiques est leur seul intérêt, non ?) Je me dit qu'il serait plus raisonnable de supprimer simplement cette BP de la version Webperf V1 et de poursuivre plus tranquillement la discussion et la réflexion sur le sujet, pour la suite. Donc à renvoyer en proposition et à poursuivre.
10/10/2012 12:05 Jean-Pierre Vincent Critère N°34 - Level 2 - Les ressources statiques sont hébergées sur un autre domaine.
donc on garde la formulation mais dans la doc on suggère qu'on peut aussi faire avec des sous-domaines si on fait bien attention, c'est ça ?
10/10/2012 12:00 Jean-Pierre Vincent Critère N°114 - Level 2 - Un commentaire conditionnel vide précède l'élément racine si les commentaires conditionnels sont utilisés.
ça me va car on fait deux coups en un :
  • on recommande de ne pas utiliser de requête supplémentaire pour les vieux navigateurs
  • si le dev le fait quand même, on lui donne la technique pour limiter la casse

10/10/2012 10:09 Fabrice Bonny Critère N°114 - Level 2 - Un commentaire conditionnel vide précède l'élément racine si les commentaires conditionnels sont utilisés.
Je propose de garder la BP en la transformant en {Les commentaires conditionnels ne sont pas utilisés pour charger des feuilles de style spécifiques}. Et on met l'explication des classes sur la balise <html> dans la fiche.
10/10/2012 09:23 Laurent Denis Critère N°34 - Level 2 - Les ressources statiques sont hébergées sur un autre domaine.
A ce stade de l'élaboration de la version 1 de la checklist, il me semble que cette question gagnera à être traitée en aval, c'est à dire dire dans la documentation technique de la bonne pratique.
10/10/2012 08:40 Laurent Denis Critère N°8 - Level 1 - Toutes les balises HTML sont fermées
La bonne pratique est en fait volontairement indifférente aux doctypes : elle demande la fermeture systématique des balises même en cas de DTD HTML (qui autorise par exemple les P ou les LI non fermés).

En effet, l'idée est que la fermeture systématique n'est pas un point bloquant aujourd'hui pour les CMS et autres outils d'éditions ou frameworks. Et qu'elle constitue une approche résolument plus simple, qui épargne d'avoir à se demander si telle balise doit être obligatoirement fermée ou non.

On pose donc une exigence un peu plus forte que celle de certains doctypes, mais cela revient en fait à simplifier les choses ;-)
09/10/2012 08:15 Nicolas Hoffmann Critère N°107 - Level 1 - Les ressources vidéo sont compressées dans la limite d'une qualité visuelle acceptable.
Ce n'est pas discriminant, mais à mon "avi", ça fait totalement doublon avec la BP de départ : "Les ressources vidéo sont compressées dans la limite d'une qualité visuelle acceptable."

C'est plus large : même si elle est compressée plusieurs fois, le critère est la qualité finale, pas le nombre de "compressions".
08/10/2012 16:54 Jérémie Patonnier Critère N°109 - Level 1 - Sauf besoin spécifique (impression), les PDF sont proposés en basse résolution.
Sur la formulation initial de cette BP, je pense que la proposition de Elie (BP 29 : https://checklists.opquast.com/webperf/workshops/criterion/19919) est plus intéressante et dans ce cas, là, oui, on peut laisser mourir celle-ci.

Par contre, je suis toujours convaincu que ma proposition de reformulation sur le premier commentaire peu être valable.
08/10/2012 16:38 Jérémie Patonnier Critère N°105 - Level 1 - Les images ne comportent que les méta-données nécessaires à la prévisualisation.
Tu as bien compris l'idée (^_^)

Sinon, après, je voie la discussion... perso, là on parle de perf, j'aurai tranché dans le vif et clairement dis "a mort les meta-données" on veux que ça aille vite oui ou non ? Après, si on veux garder des meta données pour x ou y raison, pas de problème, mais dans ce cas, cette BP sera invalidé sciemment. Ce qui n'a jamais été un problème vu que ce qui est important dans une BP, ce n'est pas qu'elle soit validé mais qu'elle soit mesuré avec toutes les décision qui vont bien en pleine connaissance de cause.

Personnellement, ça ne me choque pas du tout que des BP de différents référentiels soient en oppositions frontal.
08/10/2012 16:32 Jérémie Patonnier Critère N°103 - Level 3 - Le stockage local est utilisé quand les cookies ne sont pas nécessaires.
Je pense qu'on pourra dans la fiche de la BP faire des suggestion de mise en oeuvre technique. Par contre, sur le BP elle-même, j'aurai tendance à être un peu dure car je rencontre encore trop souvent des cookies qui sont utilisé à la place d'un localStorage "parce-qu'on-faisait-comme-ça-avant-et-que-ça-marche-partout" sans plus de réflexion sur les alternative existante qui elle aussi marche partout.

En ce qui me concerne, je me suis convertie depuis très, très longtemps à la religion "Les cookies, pour les ID de session uniquement tu utilisera"... les impies étant bien sur châtiés par le feu.
08/10/2012 16:27 Jérémie Patonnier Critère N°102 - Level 1 - Les événements sont portés par un élément parent plutôt que par de multiples enfants.
Globalement, comme sur beaucoup d'autre BP, on entre dans une logique d'audit "profond", compliqué et couteux... bref c'est sans doute possible mais je pense que la difficulté de la mesure va décourager beaucoup de monde et rendre la BP finalement assez inefficace.

Peut-être ne faudrait-il n'en faire qu'une simple recommandation
08/10/2012 16:21 Jérémie Patonnier Critère N°29 - Level 2 - L'URL d'une ressource statique est unique dans chaque page.
Oui, c'est la BP 37 : https://checklists.opquast.com/webperf/workshops/criterion/21004 :)
08/10/2012 16:19 Jérémie Patonnier Critère N°810 - Level 1 - Seules les animations visibles sont actives.
Moi je pense que non, ce n'est pas possible du tout à vérifier sinon, indirectement. Tu prend une page avec une animation CSS qui n'est pas visible dans le viewport et tu mesure la charge CPU. Tu prend maintenant la même page sans l'animation du tout et là aussi tu mesure la charge CPU.

Le problème de ce genre de méthode c'est que si dans certains cas c'est simple, dans d'autre cas, ça peut être assez rock'n'roll d'isoler l'animation. En outre, il n'y a rien à faire, tu ne mesure pas la même chose. Bref... la mesure est très complexe à obtenir (automatiquement ou manuellement) et le résultat est d'une fiabilité douteuse (parce qu'on à mesuré 2 choses différentes et qu'on ne connais donc pas tous les effet de bord lié à la modification : par exemple, qu'elle est l'impact de la suppression de tous les nœud DOM d'une animation SVG sur la charge CPU par rapport à celle de l'animation, en particulier si l'animation est très complexe... ce qui serait une erreur de mesure car il est possible de désactivé l'animation sans supprimer les nœud DOM).

Bref... quand je disais que c'était une BP quantique, ce n'était pas une blague.
08/10/2012 16:18 Matthieu Larcher Critère N°29 - Level 2 - L'URL d'une ressource statique est unique dans chaque page.
Ce serait génial, comme ça les URL permettraient de localiser des ressources de façon uniforme (et les URI de les identifier) ;)

Pour répondre à la question de tout à l'heure, le problème se pose surtout pour les images à cause des CDN, mais l'aspect RESTful d'une amnière générale est intéressant.

En tous cas je "plussoie" sur cette nouvelle formulation.
J'aurais bien envie de supprimer la fin ('dans une page') mais je crois que ça fait l'objet d'une autre BP de niveau différent.
08/10/2012 16:10 Boris Schapira Critère N°29 - Level 2 - L'URL d'une ressource statique est unique dans chaque page.
+1
08/10/2012 16:10 Jérémie Patonnier Critère N°29 - Level 2 - L'URL d'une ressource statique est unique dans chaque page.
Exactement :)
08/10/2012 16:09 Jérémie Patonnier Critère N°29 - Level 2 - L'URL d'une ressource statique est unique dans chaque page.
Ben le truc, c'est que de nos jours, la réalité c'est qu'on ne sait pas ce qui se cache derrière une URL (en tout cas, il est impossible de dire avec sont seul navigateur se qu'a fait le serveur)

Je propose donc la reformulation suivante : {Une ressource est toujours appelée avec la même URL dans une page}
08/10/2012 16:09 Boris Schapira Critère N°29 - Level 2 - L'URL d'une ressource statique est unique dans chaque page.
Même en dehors d'images. Suppose que tu affiches une liste d'éléments, et que pour chaque élément, tu ailles cherche des infos en AJAX sur une route /infos/{id de la liste}/{n° de l'élément dans la liste}/
Alors si ta liste contient 10 fois le même élément, tu feras 10 GET HTTP vers 10 URL différente, pourtant la réponse sera toujours la même, et tu aurais pu profiter du cache si tu avais appelé 10 fois la même URL (on est d'accord que tu peux aussi penser ton site un peu mieux, mais tu vois l'idée).

Jérémie, c'est bien à ça que tu pensais ?
08/10/2012 16:05 Jean-Pierre Vincent Critère N°29 - Level 2 - L'URL d'une ressource statique est unique dans chaque page.
d'où le U de URL d'ailleurs :)
j'imagine qu'on ciblait les statiques parce que c'est plus fréquent que d'inclure des images qui se généreraient en live par exemple ?
08/10/2012 16:05 Boris Schapira Critère N°29 - Level 2 - L'URL d'une ressource statique est unique dans chaque page.
Je comprends ce que tu veux dire, je n'y avais pas pensé. En effet, le "statique" n'a pas forcément lieu d'être ici. L'objectif est "1 résultat donné provient d'1 URL donnée, pas davantage", que le résultat soit issu d'une requête vers une ressource statique ou dynamique.
08/10/2012 16:03 Laurent Denis Critère N°11 - Level 2 - Les dimensions déclarées d'une image sont ses dimensions réelles.
Elle sera non applicable, pas non conforme ;-)
08/10/2012 16:00 Jérémie Patonnier Critère N°29 - Level 2 - L'URL d'une ressource statique est unique dans chaque page.
Je me posais la question : Pourquoi seulement les ressources statiques ? Finalement, quand on y réfléchie, les ressources générées coté serveur (aka dynamique) aussi devrait toujours répondre sur la même URL.
08/10/2012 15:57 Jérémie Patonnier Critère N°107 - Level 1 - Les ressources vidéo sont compressées dans la limite d'une qualité visuelle acceptable.
J'avais crue comprendre que l'automatisation de la vérification n'est pas un point discriminant ? Si c'est vérifiable manuellement, alors c'est une BP qui peut rentrer en considération. Non ?
08/10/2012 15:55 Jérémie Patonnier Critère N°801 - Level 1 - Les scripts manipulent les styles en ligne par blocs plutôt qu'un par un.
Je ne sais pas.

La question c'est plutôt de ce dire: Comment on vérifie ?
A mon sens, c'est verifiable, mais uniquement par une personne car il y a largement matière à interprétation. Par exemple, il va falloir faire une introspection dans jQuery pour vérifier qu'une instruction comme : $element.top('5px').left('5px'); rentre bien dans ce cas car le framework pourrait faire des optimisation pour "attendre" avant de faire les modification. C'est d’ailleurs typiquement le genre d'optimisation que font déjà les navigateurs pour lutter contre les dev qui déconne à ce niveau là.

Bref... faire un audit de code complet, certes, c'est faisable, mais la réalité du cout d'un tel audit fait que cette BP ne sera, à mon avis, jamais appliqué.

On est plus dans une sorte de BP pour les developpeur de framework que pour leur utilisateurs il me semble... mais je me trompe peut-être complètement.
08/10/2012 14:59 Jean-Pierre Vincent Critère N°11 - Level 2 - Les dimensions déclarées d'une image sont ses dimensions réelles.
Donc on en revient à la première remarque de Mathieu : sur un site "responsive", cette reco sera constamment à FAIL 
08/10/2012 14:57 Jean-Pierre Vincent Critère N°34 - Level 2 - Les ressources statiques sont hébergées sur un autre domaine.
Les BP essayent de prendre en compte la facilité de mise en œuvre, j'aurais donc tendance à dire que celle ci est justifiée car plus facile à maintenir qu'une solution avec juste un sous-domaine.
Et honnêtement, lorsque ton site utilise légitimement des sous-domaines il vaut mieux partir directement sur cette reco là plutôt que sur une double reco : sous-domaine + maîtrise absolue des cookies
08/10/2012 14:57 Laurent Denis Critère N°11 - Level 2 - Les dimensions déclarées d'une image sont ses dimensions réelles.
Quelques éléments qui a priori étaient prévus pour les sections "évaluation" et "mise en oeuvre" de la fiche de la BP :

Les "dimensions déclarées" sont les dimensions déclarées via HTML (attributs height et width de img). Pas les dimensions appliquées ensuite via CSS (du type img#foo{width: XXXpx; heigth: auto}.

Les dispositifs CSS de responsive design seront précisés comme hors champ d'application de cette BP.
08/10/2012 14:54 Matthieu Larcher Critère N°11 - Level 2 - Les dimensions déclarées d'une image sont ses dimensions réelles.
Perso je trouve que c'est assez valorisant pour les developpeurs/intégrateurs de faire des sites valides. Ça aide la cause.
Si on a des critères inatteignables, on risque de se retrouver confronté à une mentalité de type "de toutes façons ça ne sert à rien, on ne peut pas être valide avec leur critères"...
Du coup, tolérer un certain pourcentage d'écart entre la taille supposée et la taille réelle me semble plus productif.
08/10/2012 14:47 Matthieu Larcher Critère N°34 - Level 2 - Les ressources statiques sont hébergées sur un autre domaine.
Toutes ces raisons sont évitables lorsqu'on fait les choses dans le respect des bonnes pratiques. N'est-ce pas le but ?
Je ne sais plus si c'est yslow, google page speed ou le w3c, mais la reco de rendre les cookies spécifiques au sous-domaine concerné existe déjà.

Pour ce qui concerne la BP en titre ici, il s'agit simplement de préciser la contrainte (nul besoin d'héberger les ressources statiques sur un autre domaine à proprement parler, un autre sous-domaine suffit).
08/10/2012 14:46 Jean-Pierre Vincent Critère N°11 - Level 2 - Les dimensions déclarées d'une image sont ses dimensions réelles.
Vrai
Est ce que ça veut dire qu'on peut inclure une marge de manœuvre dans la BP (et combien ?) ou qu'on la laisse telle quelle en se disant bien qu'une BP est un idéal avec lequel on peut transiger ?
Perso je laisserais tel quel
08/10/2012 14:39 Matthieu Larcher Critère N°114 - Level 2 - Un commentaire conditionnel vide précède l'élément racine si les commentaires conditionnels sont utilisés.
A vrai dire je n'ai jamais vu un site utiliser un commentaire conditionnel vide, alors que les classes sur le tag html font parties du html5boilerplate qui est très largement utilisé.
Mais c'est un faut débat car la BP devrait se concentrer sur l'évitement du problème, pas sur la solution retenue.
Par exemple : {L'utilisation de commentaires conditionnels ne bloque pas le chargement de la page}
08/10/2012 14:35 Matthieu Larcher Critère N°11 - Level 2 - Les dimensions déclarées d'une image sont ses dimensions réelles.
Tout à fait d'accord pour dire qu'une image doit être adaptée aux dimensions de l'écran et le plus légère possible.
Mais on a besoin d'une certaine marge de manœuvre : il n'est pas réaliste de faire une image spécifique pour chaque dimension d'écran de mobile possible. Donc on a forcément des cas où les dimensions déclarées ne sont pas les dimensions réelles.
08/10/2012 14:30 Nicolas Hoizey Critère N°813 - Level 2 - Le nombre de CSS internes chargés en même temps que le HTML est limité à 3.
+1
08/10/2012 14:23 Jean-Pierre Vincent Critère N°112 - Level 3 - Le serveur envoie la section head de la page dès qu'elle est disponible.
Si les technos majeures ne suivent pas, tant pis pour elles, le but c'est aussi de faire bouger tout le monde non ?

Cela dit, les gros sites avec du CDN ou du cache serveur devant vont avoir à peu près le même problème : selon la manière dont on vérifie l'envoi du <head>, on peut avoir des faux positifs
08/10/2012 14:23 Laurent Denis Critère N°3 - Level 1 - Les tableaux utilisent le mode de rendu CSS fixe.
Pour préciser le contexte : la BP provient des recommandations Microsoft. Le niveau est lié à sa facilité de déploiement. 

Après, on peut effectivement réévaluer l'impact. 
08/10/2012 14:20 Jean-Pierre Vincent Critère N°111 - Level 1 - Le nombre de cookies est limité à 20 par domaine
Question : est ce que les bonnes pratiques doivent inclure des limites très hautes (20/domaine, 4ko) qui provoquent probablement des erreurs fonctionnelles, ou est ce qu'il faut trouver un compromis qui ne serait pas adapté à toutes les situations ?

Si on répond oui à la première question, il faudra rajouter des règles avec "pas plus de 32 feuilles de styles par page" ou "pas plus de 4096 règles par page" (bugs IE < 10)
08/10/2012 14:19 Laurent Denis Critère N°12 - Level 3 - Les images nécessaires à une interaction font l'objet d'un préchargement
Elle ne l'est pas. C'est l'une des raisons du niveau 3 attribué à cette BP. L'automatisation n'est pas une obligation (des BP peuvent être auto, semi-auto c'est à dire assistables ou bien entièrement manuelles).

08/10/2012 14:16 Jean-Pierre Vincent Critère N°109 - Level 1 - Sauf besoin spécifique (impression), les PDF sont proposés en basse résolution.
pas vérifiable, on laisse mourir ?
08/10/2012 14:15 Jean-Pierre Vincent Critère N°108 - Level 1 - Seule la prévisualisation d'une vidéo est pré-chargée au chargement de la page.
Pour FF et Chrome, JS ne bloque plus les autres téléchargements, mais uniquement le rendu.
En fait j'ai un peu de mal avec cette proposition qui concerne uniquement la vidéo :
- sur des pages où le but est de lire la vidéo, c'est normal de commencer à charger et jouer la vidéo ASAP
- sur les autres pages, ça n'est effectivement pas souhaitable de prendre toute la bande passante pour pré-charger une vidéo qui ne sera potentiellement pas jouée

à partir de là, l'intention de la page n'étant pas vérifiable, autant faire sauter cette propale non ?
08/10/2012 14:08 Jean-Pierre Vincent Critère N°105 - Level 1 - Les images ne comportent que les méta-données nécessaires à la prévisualisation.
Au final, ni une liste noire (trop longue), ni une liste blanche (certaines meta peuvent correspondre à un besoin du produit) de metadonnées ne semblent convenir.
Si j'ai bien compris l'idée, lorsqu'une BP n'est pas vérifiable, elle dégage ?
08/10/2012 14:06 Laurent Denis Critère N°29 - Level 2 - L'URL d'une ressource statique est unique dans chaque page.
Oui. Cela a été fait fait via la BP n° 37 {L'URL d'une ressource statique est unique sur le site}. 





08/10/2012 14:03 Jean-Pierre Vincent Critère N°104 - Level 1 - Les images sont proposées dans des formats appropriés
Pour une règle plus globale : {Le format d'image et son niveau de compression est adaptée au type de l'image} ?
08/10/2012 14:01 Jean-Pierre Vincent Critère N°103 - Level 3 - Le stockage local est utilisé quand les cookies ne sont pas nécessaires.
J'aime bien cette reformulation, mais est ce qu'il ne vaut pas mieux faire une proposition qui contient une suggestion telle que localStorage (et ses équivalents IE6-8)