Est-ce qu'un attribut de style énorme est mauvais pour le référencement?
Je travaille sur un site web en utilisant wordpress. Lors de l'ouverture de la console de Chrome (Ctrl + Maj + I), je ne pouvais m'empêcher de remarquer un attribut de style ÉNORME et des tonnes de scripts directement écrits dans le document HTML.
Selon les bonnes pratiques de Google, il ne s'agit pas d'une chose à faire. Cependant, lorsqu'ils ont discuté avec le service clients du Theme, ils ont fait valoir que cela n'avait AUCUNE influence sur le référencement, car il s'agit d'un document généré par PHP.
Je sais que cela ressemble à une question de débutant, mais est-ce vrai?
Les détails techniques sur la manière dont le code d'une page est fourni n'ont pratiquement aucun impact sur le référencement. Google classe les pages sur des facteurs que les utilisateurs verront, et non sur la beauté de leur développement. Les CSS et scripts en ligne ne sont pas des facteurs de classement pour Google.
Le seul moment où le code compte pour le référencement serait celui qui aurait un impact sur les performances. Pour le référencement, le code source de votre page doit être téléchargé complètement en 7 secondes. S'il est plus lent que celui de Googlebot, Google aggrave les classements. Il permet également de télécharger et de rendre complètement les utilisateurs dans les 3 secondes. S'il est plus lent que cela, les utilisateurs cessent de l'utiliser autant. Google remarque ce comportement des utilisateurs et aggrave les classements.
Le CSS en ligne signifie qu'il ne peut pas être mis en cache entre les chargements de page. Cela signifie que la première page vue peut être rendue plus rapidement, mais les pages suivantes vont être plus lentes.
Il existe de bonnes raisons de développer vos styles pour vous garder en dehors de leurs attributs:
- Le code dans les attributs de style n'affecte qu'une seule balise. Si ce même style doit être appliqué à plusieurs balises, le code CSS doit être dupliqué. Cela violerait la bonne pratique de développement consistant à "ne vous répétez pas" (DRY).
- Conserver tous les fichiers CSS dans les fichiers
.csssignifie que ces fichiers sont faciles à trouver. Quelqu'un examinant votre base de code pour la première fois va commencer à chercher des styles et ne voudra plus avoir à ouvrir PHP et des fichiers HTML pour trouver du CSS. - Conserver tous les fichiers CSS dans les fichiers
.csspermet de séparer le code sur lequel différents développeurs travailleront probablement. Cette "séparation des préoccupations" signifie que le concepteur frontal et le codeur final sont moins susceptibles de se marcher sur les pieds, et moins susceptibles d’apporter des modifications de code en conflit.
oui et non. Ce n'est pas recommandé, mais pas pour la raison à laquelle vous pourriez penser.
Google et les visiteurs aiment les sites Web rapides. Si vous avez beaucoup de CSS, cela signifie que votre téléchargement est plus lent, ce qui ralentit votre site Web, ce qui rend l'expérience de votre site un peu moins fluide.
En outre, plus vous utilisez de sélecteurs, plus votre css est complexe, plus le navigateur passe de temps à analyser le CSS pour créer la page Web -> plus lentement -> une expérience moins fluide.
Oui, c'est un problème lorsque vous êtes négligé avec vos CSS et que vous utilisez des sélecteurs inefficaces.
No, le fait d'utiliser la feuille de style de manière normale, comme prévu, n'est pas un problème. Parfois, vous avez simplement besoin de beaucoup de style.
Comment améliorer votre css?
Optimiser pour vos visiteurs, pas pour les bots. Tenez-vous en à cela, et votre plan à long terme sera parfait.
Essayez de réutiliser autant que possible. C'est pourquoi les systèmes de grille sont populaires, vous pouvez réutiliser les largeurs de ces colonnes. Fiez-vous au C de Css, en cascade.
Ne pas utiliser de style inline, car un navigateur peut télécharger et analyser le fichier css qu’il traverse dans votre DOM. Les blocs de style en ligne inversent cela. En outre, le style en ligne ne peut pas être mis en cache, ce que vous souhaitez.
Améliorez vos sélecteurs, par ex. en utilisant #idForAnUniqueElement au lieu de .classForItemYouUseOnce. Si cela n’est pas possible, essayez de le limiter, par exemple si devez utiliser p{}, essayez #paragrapWrapElement p{} comme sélecteur.
Divisez votre css en deux. Fournissez une feuille de style dans la tête avec CSS requis au chargement (par exemple, vos éléments de navigation racine) afin qu'il puisse créer une page rapidement. La deuxième feuille de style située près de l'extrémité de votre corps permet de compléter le reste (par exemple, la sous-navigation, car elle devient visible en survol de manière à pouvoir analyser plus tard).
Si de très grands scripts ou styles sont intégrés dans votre code HTML, le téléchargement et l'exécution de la page seront plus lents. Les scripts et les styles en ligne ne seront pas mis en cache par le navigateur. Une page plus lente a un impact négatif sur le référencement, mais probablement pas très forte, à moins que la page soit très lente.
il n’a AUCUNE influence sur le référencement que c’est un document généré par PHP.
C'est complètement faux. Peu importe ce qui génère le code HTML. Mauvais html est tout aussi mauvais s'il est généré par php, nodejs, c ++ ou écrit complètement manuellement.
La langue utilisée pour la page générée côté serveur ne change rien, tant que la page est générée assez rapidement.