28172 sujets

CSS et mise en forme, CSS3

Bonjour.

J'ai une question un peu "particulière. Je la pose quand même ici dans l'espoir qu'un "sachant" soit dans les parages pour me répondre.

Avant, quand on voulait modifier dynamiquement le <body> on utilisait du JS pour positionner une classe sur celui-ci (p. ex : pour bloquer le scroll lors de l'affichage d'une pop-in avec un overflow: hidden;…). Le problème de cette méthode est qu'elle n'est pas terrible au niveau perfs : quand le navigateur reçoit la demande Javascript d'ajout de classe, il reparse tout le DOM pour vérifier les impacts éventuels sur chaque éléments individuellement…

Il y a (presque) aujourd'hui une autre solution : body:has() (je dis "presque" parce qu'il reste encore FF a trainer un peu la patte sur l'implémentation de :has(), mais cela devrait bientôt arriver…).

Ma question est donc : body:has() a-t-il un impacte au niveau perfs ? Et si oui, est-il supérieur, égal, ou inférieur à la méthode JS ?
Bonjour,

Justement j'en parlais récemment sur le forum : Firefox v.121+ supporte enfin le sélecteur CSS :has(). Donc ça arrive bientôt pour tout le monde et il faut savoir que, après beaucoup de tâtonnement, :has() se révèle excellent et ne pose pas de problème de perf' (ce qui était vraiment un problème auparavant et c'était la raison pour laquelle :has() a mis longtemps avant d'être implémenté par les navigateurs).

Après... une classe sur le body via JavaScript... je le fais couramment et il n'y a pas vraiment d'impact en JS non plus. Par exemple, sur ce site, si on réduit la taille de la fenêtre le menu est transformé en menu hamburger, et j'utilise alors une classe sur les tags <html> et <body> pour bloquer le scroll à l'ouverture du menu (avec overflow: clip) : y'a pas de problème. Je défie quiconque de percevoir quoi que ce soit comme latence au niveau de l'utilisateur final. Vous imaginez tous les sites codés avec React et Vue.JS ? Ils en manipulent autrement du DOM (et même pire : du DOM virtuel) !

On reste sur une présentation de documents web, les performances à ce niveau n'ont pas vraiment d'impacts significatifs.
Modifié par Olivier C (30 Nov 2023 - 15:47)
"On reste sur une présentation de documents web, les performances à ce niveau n'ont pas vraiment d'impacts significatifs. "

Pour les humains, oui, je suis bien d'accord !
Mais pas pour Google apparemment. La perf. web et le SEO ne sont pas vraiment dans mes compétences professionnelles (en tout cas pas mes spécialités) et je ne défendrais donc pas ce qui suit, mais d'après les experts de ces domaines dans la société pour laquelle je travaille (et pour qui le référencement et donc les perfs sont vitales), toutes dégradation, même infime de ces perfs est catastrophique. C'est pourquoi nous sommes (entre-autre) en train de passer ttes nos pop-ins "à l'ancienne" (<div> avec JS) à des <dialog> sans JS. J'ai réussi à tout reproduire sauf le no-scroll du body avec cette balise Pour le "no-scroll" j'ai pensé au body:has(), mais le spécialiste perf. me l'a très fortement déconseillé (pour ne pas dire interdit…). Je cherche donc des arguments dans un sens ou dans l'autre pour étayer mon avis.
Je ne comprends pas.

Que l'on s'attache à rechercher une performance pour le rendu des données (le HTML, du JSON-LD...), ceci afin d'exposer ces données le plus rapidement possible aux moteurs de recherche, là, ok, je comprends : il s'agit ici de générer la page le plus rapidement possible et dans ce cas, la rapidité du serveur, l'optimisation du poids des ressources de la page et quelques autres subtilités seront des critères importants pour le SEO (en plus de tout ce que l'on peut faire par ailleurs comme la sémantique du HTML et la structuration des données bien sûr).

Mais que vient faire l'apparence du site là-dedans ? Je parle ici de ce que voit l'utilisateur grâce au CSS, où via des manipulations JavaScript sur des données déjà existantes dans la page. Dans mon post précédent, lorsque je parlais de performance, je parlais du rendu de la mise en forme de la page, pas de la génération du rendu des données.

Alors oui, les moteurs les plus évolués commenceraient à lire un peu de JS... parait-il. J'entends ça depuis 10 ans. Ça reste à prouver car, pour l'instant, pour des applications full React, ne s'appuyant pas sur un framework backend (tel que Next.js, capable de fournir du contenu HTML pour chaque URL), ce n'est pas glorieux pour le SEO. Quand au CSS... j'entendais à une époque que, peut-être, le contenu caché en `display: none` n'était pas correctement référencé... Là encore on a des preuves ? Et si le contenu caché faisait parti d'un composant accordéon ou onglets ? Vous croyez que Google et consort n'y auraient pas pensé et auraient préférés s'embêter à déréférencer du contenu alors qu'ils ont d'autres chats à fouetter ? Ils faudrait déjà qu'ils arrivent enfin à correctement analyser du HTML de base***.

On en dit des choses dans le monde du web... Quand j'ai commencé en 2008/2009 on disait aussi que le sélecteur "*" n'était pas performants, les articles à ce sujet tournaient en boucle sur les blogs d'intégrateurs... 10 ans plus tard : nop.

__________________
*** deux points :

1/ Oui, je reconnais que je suis provoc' sur ce coup : en réalité le problème n'est pas tant que les moteurs n'arrivent pas à analyser correctement le HTML que le fait qu'ils soient obligés de tenir compte des (très) mauvaises pratiques de nombre de sites webs (sans doute statistiquement les plus nombreux). C'est un paramètre qui rentre forcément en compte dans la balance. Les GAFAM connaissent leurs intérêts : ce qu'ils veulent, c'est fournir du contenu de qualité à leurs utilisateurs. Alors bien sûr qu'ils poussent aux meilleures pratiques ils savent bien que, trop souvent, "contenu de qualité" ne rime pas forcément avec "contenu optimisé pour le SEO". Ils sont donc obligés de faire avec et ne pas trop déclasser un contenu de qualité mal référencé. Par contre leurs utilisateurs veulent du contenu qui s'affichent rapidement et là c'est une autre histoire.

2/ Et non, je ne suis pas tout à fait provoc' pour rien : en effet, il ne faut pas s'imaginer que les moteurs de recherche soient si au top que cela. Dix ans après l'introduction de HTML5 la balise <figure> n'était toujours pas prise en compte (Par exemple, le contenu d'un <figcaption> en dessous de son image était rattaché à l'image suivante, sans aucune prise en compte de la structure du HTML, comme du vulgaire texte qui aurait comme règle de devoir toujours précéder son image. Je ne sais pas où nous en sommes aujourd'hui, je n'ai pas refais de test).
À ce jour, en 2023, la balise <section> ne structure toujours pas la hiérarchie des titres de la page en cours (sauf pour les styles) : en clair, si on met une balise <h1> dans une section en se disant "je peux le faire, après tout je suis en HTML5 et c'est la norme"... et bien on a tout faux (et sur les blogs d'intégrateurs, qu'est-ce qu'on nous raconte ? Smiley cligne ).
On avait aussi des problèmes avec les contenus de details/summary, certains d'entre eux ont été réglés récement. J'en passe et des meilleures. Bref, pas terrible tout ça...
Modifié par Olivier C (30 Nov 2023 - 23:48)
J'avais dis que je ne défendrais pas le concept, parce que ce n'est pas le mien. Je peux toutefois l'expliquer, en partie.

"Mais que vient faire l'apparence du site là-dedans ? Je parle ici de ce que voit l'utilisateur grâce au CSS, où via des manipulations JavaScript sur des données déjà existantes dans la page."

Ce que voit l'utilisateur impacte les Core Web Vitals, et le JS qui change des choses via une interaction de l'utilisateur dans la page en impacte directement le FID. Enfin pour ce que j'en ai compris…
Oui, c'est vrais que je n'ai pas parlé du reflow (qui impacte le layout par exemple) et qui influe sur les perfs. Mais là on parle de l’interaction sur une page après le chargement initial, c'est pour cela que je ne vois pas où est le problème.

Je laisse la main à d'autres alsanautes pour voir ce qu'ils vont en dire. Je lirais leurs commentaires avec intérêt.

Amicalement.

PS : il y a un truc que j'aimerais bien connaître, c'est les outils que vous utilisez pour évaluer ces performances. À part Lighthouse je veux dire. Parce que suis curieux de savoir sur quoi les gens se fondent pour affirmer tel ou tel principe.
Modifié par Olivier C (03 Dec 2023 - 13:46)
" il y a un truc que j'aimerais bien connaître, c'est les outils que vous utilisez pour évaluer ces performances."

Chez mon client, ils font leur propres monitoring avec Graphana en utilisant les API de Google pour les CWV (https://pagespeed.web.dev) et de WebPageTest (https://www.webpagetest.org)
Modifié par Derwoed (01 Dec 2023 - 11:43)
Des outils assez classiques en sommes. Du coup, retour à la case départ pour comprendre en quoi tes collègues arrivent à savoir en quoi un :has() CSS ou un .classList.add() JS peuvent poser problème.
Modifié par Olivier C (03 Dec 2023 - 10:15)
C'est bien la question que je me pose (et que je pose ici indirectement). Cela ressemble plus à du "on ne sait jamais" qu'à du "c'est sûr". Mais je ne suis pas légitime pour remettre en question ce dogme… Après, il faut avouer que Google semble assez avare d'informations précises sur ce qui impacts vraiment les CWV et que le seul moyen d'avoir des réponses est de tester des trucs en Prod et voir ensuite comment évolue ces CWV sous les sondes dans les semaines / mois qui suivent…
Vu le travail que cela demande de refaire tous les composants, le temps et l'argent que ça représente pour l'entreprise, je trouve tout de même que ça vaut le coup d'interroger ce dogme.

Encore une fois : s'il s'agit d'interactions avec la page, donc après le chargement initial, je ne vois pas en quoi cela pose problème. En réalité je suis sûr de moi.

Je suis amateur, mais amateur passionné. Ça fait 15 ans que je fais du web sur mon temps libre et contrairement à beaucoup de dev's pros j'ai eu la chance d'avoir vu le web évoluer petit à petit et ai eu le temps d'assimiler à mon rythme les différentes strates nécessaires au fonctionnement d'un site web. Et au vu des questions posées sur les forums, je vois bien qu'il y a beaucoup de confusions chez les dev's entre ces différentes strates. Des gens qui parfois foncent tête baisés dans l'apprentissage de frameworks hyper-techs sans bien faire la distinction entre le front et le back et bien d'autres confusions du même ordre encore...

Je pense que le "dogme" précité entre dans ce type de confusion.
Modifié par Olivier C (05 Dec 2023 - 09:49)