5568 sujets

Sémantique web et HTML

Peut-on quand même utiliser le CSS ou le Javascript inline ?

Pages :
Bonjour à vous tous,

Je sais qu'il est déconseillé de coder directement le CSS et le Javascript dans la page HTML, notamment pour les raisons suivantes :
1 - Maintenance difficile : lorsqu'on utilise du CSS ou du JavaScript en ligne, le code est directement incorporé dans la page HTML, ce qui rend la maintenance du code beaucoup plus difficile, car toute modification nécessite de toucher à chaque page individuellement.
2 - Réutilisation du code : en codant directement du CSS et du JavaScript dans la page HTML, on ne peut pas réutiliser ce code sur d'autres pages du site web autrement que par le copier/coller.
3 - Performances : les navigateurs web stockent en cache les fichiers externes CSS et JavaScript, ce qui permet aux visiteurs de les charger plus rapidement lorsqu'ils naviguent sur différentes pages et ainsi accélérer le chargement des pages HTML. Avec le code inline, les pages web sont plus lourdes.
4 - Séparation des codes : ne pas séparer la structure (HTML), la présentation (CSS) et le comportement (JavaScript) ne respecte pas un principe en développement qui veut que les codes soient distincts et appelés individuellement lorsque nécessaire, ce qui peut rendre le code source plus difficile à comprendre et à maintenir.
5 - Lourdeur du code HTML : l'ajout de CSS et de JavaScript en ligne peut augmenter la taille du code HTML, ce qui peut affecter négativement les performances du site et ralentir le chargement des pages.
6 - Compatibilité : certains navigateurs peuvent ne pas gérer correctement le CSS ou le JavaScript en ligne, ce qui peut entraîner des problèmes d'affichage ou de fonctionnement sur certains navigateurs.

A ces six points, je me demande si en plus le codage du CSS et du Javascript inline ne pénaliserait pas directement le SEO, en reléguant en queue de peloton les résultats des recherches naturelles des internautes ? L'un d'entre vous saurait m'éclairer ?

Cordialement,
Modifié par ObiJuanKenobi (27 Oct 2023 - 16:03)
Modérateur
Bonjour,

C'est peu probable que mettre du css et ou du js internes pénalise le SEO.

Le SEO pourrait même se trouver amélioré dans certains cas (par exemple site avec peu de pages et des css et js courts), car ça peut rendre une page plus rapide au chargement en moyenne (moins de fichiers externes, d'où moins de temps de chargement). Et une page chargée plus rapidement a un score SEO meilleur qu'une page lente. Mais ce n'est pas une règle absolue (par exemple, pour un site avec beaucoup de pages et des gros css et js, les css et js externes ne seront téléchargés qu'une fois, alors que ceux internes seront téléchargés avec chaque page, car ils seront très probablement mis en cache par le navigateur).

Dans le cas général, c'est assez difficile de dire ce qui est le plus efficace entre des css et js externes et des css et js internes du point de vue de la vitesse de chargement de la page. Il vaut mieux ne pas se poser la question. Par contre, limiter le nombre de fichiers css ou js dans une page reste un facteur d'optimisation non négligeable.

Amicalement,
Salut,
quittant juste mon problème, je réponds rapidement. N'ayant rien à ajouter sur ce que dit parsimonhi, je vais juste remémorer la discussion qui a eu lieu ici il y a environ une ou deux semaines sur le CSP (La sécurité des sites). J'avais bien précisé que quand on engage le CSP sur un site, le code inline pose des problèmes. Les règles CSP ne font pas de cadeau et le "nettoie" sans coup férir. On peut l'éviter en utilisant unsafe inline, mais on diminue alors le niveau de sécurité en introduisant une porte que l'on avait soigneusement fermée avant !
C'est la seule raison pour ne pas utiliser du code inline. Sinon, c'est parfois bien pratique et s'il n'y en a pas des tonnes, aucune importance. Et je ne m'en prive pas.
Tu pourrais pas m'aider sur mon cas Smiley cligne
Modifié par Bongota (27 Oct 2023 - 17:14)
Modérateur
Salut,

J'avais lu que les bots analysent les 60 premières lignes d'un code HTML. Ceci dit, je n'en suis pas si sûr.

En ce qui concerne le JS dans la page, c'est régulièrement le cas de voir ça. Pourquoi ? Quand le JS attend une information du serveur. Il est évident que cette information peut être récupérée via une requête ajax. ¹ Mais oui mais non....
1. ça évite une requête ajax
2. ça évite d'instancier un objet JS.
3. de faire des pirouettes pour que l'objet JS instancié fonctionne correctement

Aussi, il faut penser que si l'objet js n'est que sur cette vue, pourquoi mutualliser le code dans d'autres vues ?

En ce qui concerne le CSS dans la page, il y a 2 notions à comprendre. Il est évident que le style inline est à proscrire suite aux indications que tu as décrites. Mais il n'est pas rare de voir un bloc <style> dans le <head>. Pourquoi ?

1. le css n'est utilisé que pour cette vue uniquement. Donc pourquoi mutalisé ce code css ?
2. Pour des raisons de webperf, il y a ce que l'on appelle le css critique. Ce css permet de rendre les premiers éléments de la vue/page et ainsi éviter les problème de webperf (TTF, FCP, CLS, LCP)

Pour répondre finalement à ta question, le css ou le js ne bloque pas en générale le SEO. Là où il faut mettre un point d'honneur, c'est la sémantique et l'accessibilité. L'accessibilité améliore un petit peu et la sémantique facilite. Je connais des sites où j'ai opéré dessus et les vues font pas loin de 30mio (pub). Ces vues sont très biens référencées.

@parsimonhi : +1
@Bongota: oui mais attention à la maintenance

¹ je parle d'un développement basique avec un moteur de template tel que Jinja/Twig/Smarty/JSP/etc. (pas de notion de micro-services - RESTfull/GraphQL/TRPC)
Modifié par niuxe (27 Oct 2023 - 18:31)
Salutation,

Je n'utilise pas de CSS inline (je n'aime pas ça). Cependant quelques affirmations posées ici mérites d'être infléchies :
ObiJuanKenobi a écrit :
1 - Maintenance difficile : lorsqu'on utilise du CSS ou du JavaScript en ligne, le code est directement incorporé dans la page HTML, ce qui rend la maintenance du code beaucoup plus difficile, car toute modification nécessite de toucher à chaque page individuellement.

2 - Réutilisation du code : en codant directement du CSS et du JavaScript dans la page HTML, on ne peut pas réutiliser ce code sur d'autres pages du site web autrement que par le copier/coller.

Dans l'absolu oui, mais en général les dev's qui font cela utilisent un compilateur côté front. Une seule et même base de code sera déployée sur toutes les pages configurées pour. Du coup zéro problème.

ObiJuanKenobi a écrit :
4 - Séparation des codes : ne pas séparer la structure (HTML), la présentation (CSS) et le comportement (JavaScript) ne respecte pas un principe en développement qui veut que les codes soient distincts et appelés individuellement lorsque nécessaire, ce qui peut rendre le code source plus difficile à comprendre et à maintenir.

Là encore, il faut comprendre que les dev's qui font cela ne s'amusent pas à faire des copier/coller pour leurs composants. Souvent ces dev's développent avec une approche composants (à l'inverse d'une approche document, les deux approches n'étant pas exclusives), ils utilisent un framework (par exemple React.JS) qui, au moment de la compilation, fusionne les données avec le CSS et le JS. Je parle bien ici de CSS inline (du CSS directement dans les tags HTML comme pour le framework Tailwind), non pas de CSS interne (avec des balises styles dans la page web.

ObiJuanKenobi a écrit :
6 - Compatibilité : certains navigateurs peuvent ne pas gérer correctement le CSS ou le JavaScript en ligne, ce qui peut entraîner des problèmes d'affichage ou de fonctionnement sur certains navigateurs.

Là, par contre, je ne vois pas...
salut
moi je place le css de ce qui est au dessus de la ligne de flottaison en inline dans la page html, le reste dans un fichier css séparé.
drphilgood a écrit :
salut
moi je place le css de ce qui est au dessus de la ligne de flottaison en inline dans la page html, le reste dans un fichier css séparé.
Je ne comprends pas ce que tu veux dire par là.

Pour les autres, merci pour vos réponses.
Modifié par ObiJuanKenobi (28 Oct 2023 - 07:31)
J'ai abordé ce sujet parce que j'ai été amené réaliser un exercice particulier où je devais montrer que j'étais à l'aise avec toutes les balises HTML des tableaux. J'ai choisi de faire un tableau contenant les 140 couleurs web différentes supportées par tous les navigateurs, comme dans cet exemple de page Wikipédia : https://fr.wikipedia.org/wiki/Couleur_du_Web

Mais voilà, quand j'ai commencé à remplir les cellules de chacune des couleurs, je me suis rendu vite compte que j'allais faire au moins 140 fois un aller/retour entre la page HTML et la page CSS (il y a 140 couleurs différentes). Mais j'ai trouvé un moyen simple et rapide, celui d'utiliser l'attribut "style" directement dans la balise <td>, contenant la déclaration de la couleur de fond en valeur hexadécimale, au lieu d'une classe .coul déclarée dans une feuille de styles CSS.

Voici un exemple de mon travail :
<table class="tableau_couleurs marge_bas" style="color: white;">
                    <tr style="vertical-align: bottom;">
                        <td style="background: #FF0000;" class="marge_haut_tableau">Red #FF0000</td>
                        <td style="background: #FFFFFF; font-size: 1rem;" class="marge_haut_tableau"><span style="color: black;">White #FFFFFF</span></td>
                    </tr>
                    <tr>
                        <td style="background: #00FFFF; font-size: 1rem;" class="marge_haut_tableau"><span style="color: black;">Cyan #00FFFF</span></td>
                        <td style="background: #C0C0C0; font-size: 1rem;" class="marge_haut_tableau"><span style="color: black;">Sylver #C0C0C0</span></td>
                    </tr>
                    <tr>
                        <td style="background: #0000FF; font-size: 1rem;" class="marge_haut_tableau">Blue #0000FF</td>
                        <td style="background: #808080; font-size: 1rem;" class="marge_haut_tableau">Gray #808080</td>
                    </tr>
                    <tr>
                        <td style="background: #0000A0; font-size: 1rem;" class="marge_haut_tableau">Navy #0000A0</td>
                        <td style="background: #000000; font-size: 1rem;" class="marge_haut_tableau">Black #000000</td>
                    </tr>
                    <tr>
                        <td style="background: LightBlue; font-size: 1rem;" class="marge_haut_tableau"><span style="color: black;">LightBlue #ADD8E6</span></td>
                        <td style="background: #FFA500; font-size: 1rem;" class="marge_haut_tableau">Orange #FFA500</td>
                    </tr>
                    <tr>
                        <td style="background: #800080; font-size: 1rem;" class="marge_haut_tableau">Purple #800080</td>
                        <td style="background: #A52A2A; font-size: 1rem;" class="marge_haut_tableau">Brown #A52A2A</td>
                    </tr>
                    <tr>
                        <td style="background: #FFFF00; font-size: 1rem;" class="marge_haut_tableau"><span style="color: black;">Yellow #FFFF00</span></td>
                        <td style="background: #800000; font-size: 1rem;" class="marge_haut_tableau">Maroon #800000</td>
                    </tr>
                    <tr>
                        <td style="background: #00FF00; font-size: 1rem;" class="marge_haut_tableau"><span style="color: black;">Lime #00FF00</span></td>
                        <td style="background: #008000; font-size: 1rem;" class="marge_haut_tableau">Green #008000</td>
                    </tr>
                    <tr>
                        <td style="background: #FF00FF; font-size: 1rem;" class="marge_haut_tableau"><span style="color: black;">Fuchsia #FF00FF</span></td>
                        <td style="background: #808000; font-size: 1rem;" class="marge_haut_tableau">Olive #808000</td>
                    </tr>
                </table>

Bien qu'il n'y ait aucune erreur dans le Validator HTML, je me demandais si cela était "catholique" de procéder de cette manière, sachant qu'il est déconseillé de coder du CSS directement dans la page HTML pour les raisons que j'ai évoquées en début de post. Et comme je suis toujours préoccupé par le SEO, je me demandais si le codage inline n'affectait pas également les résultats de recherches naturelles des internautes.
Modifié par ObiJuanKenobi (28 Oct 2023 - 07:52)
Jai trouvé cette source (en anglais) :
https://webmasters.stackexchange.com/questions/106360/is-a-huge-style-attribute-bad-for-seo#:~:text=Inline%20CSS%20and%20scripts%20are, makes%20rankings%20worse%20for%20it.
Elle dit que le CSS et le Javascript inline ne sont pas des facteurs de classement pour Google. La seule fois où le code est important pour le référencement, c'est s'il a un impact sur les performances. Pour le référencement, le code source de la page HTML doit être téléchargé complètement en 7 secondes. S'il est plus lent que celui de Googlebot, Google aggrave son classement.

J'ai aussi cet autre lien en anglais :
https://addmonte.co.uk/tips/why-not-to-use-inline-css#:~:text=Lack%20of%20Reusability%3A%20Inline%20styles, be%20duplicated%20on%20each%20page.
il confirme que le CSS et le Javascript inline n'affectent pas directement le SEO mais la lourdeur du code et le chargement long peut affecter leur classement et donc les résultats des recherches des internautes.

Cet autre lien (toujours en anglais) confirme que les robots d’indexation des moteurs de recherche peuvent mieux analyser et indexer le contenu lorsqu’il est séparé, ce qui permet d’améliorer l’optimisation des moteurs de recherche (SEO) et d’améliorer le classement dans les résultats de recherche.
https://reviewnprep.com/blog/the-benefits-of-separating-html-css-and-javascript-unleashing-the-power-of-web-development/

Encore un lien qui confirme que le code inline peut avoir un impact indirect sur le référencement s’il affecte les performances du site web ou l’expérience utilisateur :
https://www.quora.com/Do-inline-CSS-and-JavaScript-really-affect-a-site%E2%80%99s-SEO

Finalement, le CSS et le Javascript inline peuvent affecter le SEO !
Modifié par ObiJuanKenobi (28 Oct 2023 - 09:31)
Modérateur
Salut,

En lisant ton code HTML de ton tableau, mon commentaire est : peut mieux faire. ¹

Attention au piège de placer thead/tfoot/tbody aux bons endroits.


¹ au tableau ! (l'attribut sumary est obsolète lorsque tu utilises un doctype html 5)
Modifié par niuxe (28 Oct 2023 - 11:11)
ObiJuanKenobi a écrit :
Je ne comprends pas ce que tu veux dire par là.

Pour les autres, merci pour vos réponses.


le css qui concerne ce qui est au dessus de la ligne de flottaison est dans le head de la page html
le reste du css externe est servi plus tard et ne retade pas l'affichage
ObiJuanKenobi : La règle "font-size: 1rem;" peut être mutualisée dans un même fichier externe, ce serait mieux.

Dans la même idée, plutôt que d'utiliser une règle CSS, on peut utiliser plutôt une variable CSS qui fera le même boulot. Du coup notre HTML serait beaucoup plus propre et maintenable. Par exemple, cette portion de CSS inline extraite de ton code :
style="background: #00FFFF; font-size: 1rem;"

Deviendrait ceci :
style="--bg-color: #00ffff"

Et pour la feuille de style externe :
.tableau_couleurs marge_bas {
  font-size: 1rem; /* Pour cette règle, on évite de sur-spécifier inutilement en la ciblant sur un élément parent et commun à tous les td */
}

.tableau_couleurs marge_bas td {
  background-color: var(--bg-color, #000); /* On met une valeur par défaut pour la variable, sinon c'est le CSS inline qui prend le dessus */
}

Modifié par Olivier C (28 Oct 2023 - 21:36)
Merci Olivier C pour tes explications, je me doutais qu'on pouvait utiliser des variables dans les CSS mais je ne parviens pas à trouver dans MDN. Aurais-tu le lien à me donner pour que j'aille voir ?
drphilgood a écrit :


le css qui concerne ce qui est au dessus de la ligne de flottaison est dans le head de la page html
le reste du css externe est servi plus tard et ne retade pas l'affichage


Qu'est-ce que c'est que la ligne de flottaison ?
niuxe a écrit :
Salut,

Attention au piège de placer thead/tfoot/tbody aux bons endroits


Quel piège ?
Il faut les utiliser ?
Sont-ils optionnels ?
Modérateur
ObiJuanKenobi a écrit :


Qu'est-ce que c'est que la ligne de flottaison ?


la zone visible à l'écran lors du rendu de la page et de son chargement. (haut de la page jusqu'au bas de l'écran (pas du bas de page))

ObiJuanKenobi a écrit :

Quel piège ?

As tu lu l'article que je t'ai partagé ?
Le piège est l'ordre d'appel

ObiJuanKenobi a écrit :

Il faut les utiliser ?
Sont-ils optionnels ?

Sémantique html
Modifié par niuxe (28 Oct 2023 - 19:27)
ObiJuanKenobi a écrit :
A propos, est-ce qu'il existe un autre validateur HTML que celui du W3C ?

Enfin, il te suffit de taper "validateur html" dans n'importe quel moteur de recherche et tu en auras une pléthore. La première page de StartPage en affiche déjà 10. Celui du W3C étant je crois la référence. Smiley biggrin
c'est dans l'esprit du lazy download ou async, ne charger que ce qui est visible d'abord pour un rendu rapide

et puis le reste suit
Modifié par drphilgood (28 Oct 2023 - 19:08)
drphilgood a écrit :
c'est dans l'esprit du lazy download ou async, ne charger que ce qui est visible d'abord pour un rendu rapide

et puis le reste suit


OK, j'ai enfin compris ce que tu veux dire.
Prévenir un modérateur
Pages :
Répondre au sujet
Aller à