Optimisation du code HTML du site Web - nettoyage, compression, correction d'erreurs

Écoutez cet article

Technique optimisation du code HTML du site Web - le processus d'ajustement du code HTML du modèle de page du site. Modification (éd.) du code source du site et correction de sa structure et de sa taille. Dont le but explicite est une amélioration qualitative de la composition du code. Une réduction significative de son volume, améliorant la validité du code. Ce qui contribue à augmenter la vitesse de chargement des pages dans les navigateurs.

Le HTML est l'épine dorsale du Web. C'est le type de document qui construit la structure de base d'un site Web. Sans HTML, JavaScript ne fonctionnerait pas, CSS ne pourrait rien styliser et les images n'auraient nulle part où se charger. La force du HTML réside dans sa polyvalence, principalement parce qu'il peut charger d'autres fichiers, ce que signifie l'hypertexte, la première partie du HTML.

Lorsque le chargement, l'analyse et le chargement de fichiers HTML externes prennent beaucoup de temps, l'interface utilisateur peut en souffrir. Le temps de chargement de la page augmente, plus les utilisateurs ont tendance à abandonner la page, plus ils doivent attendre.

Le contenu de l'article :

• Optimisation technique du code HTML des pages du site
• Optimiser le code HTML source du site en réduisant la quantité de code
• Suppression des balises HTML inutiles et des fichiers de style
• Correction d'erreurs dans le code HTML du site
• Définir la priorité de la version mobile du site
• Utiliser activement la mise en cache Web
• CDN - grandes opportunités de notre temps
• Raccourcir les requêtes HTTP
• Optimiser le code HTML de votre site pour le référencement
• Optimisation technique du code HTML du site Web - plugins CMS WordPress populaires

Optimisation technique du code HTML des pages du site

Les activités visant à optimiser le code HTML sont opportunes pour augmenter la vitesse du site. Nettoyer et compresser le code HTML du site vous aidera à accélérer considérablement l'affichage des pages du site. En éliminant les erreurs visibles dans le code, vous améliorerez la validité de votre document HTML.

Le résultat final de l'optimisation du code HTML du site sera :

• Chargement instantané des pages du site Web dans les navigateurs populaires.
• Exploration rapide du contenu du site par les robots de recherche.
• Un code propre et valide est le site le plus prioritaire aux yeux des moteurs de recherche.
• Le classement et la visibilité du site dans les résultats de recherche des moteurs de recherche Google et Yandex augmenteront considérablement.

Optimisation du code HTML source du site - réduction de la quantité de code

L'action la plus importante est de réduire le code de la page. Le code source HTML ressemble à une longue toile. De nombreux styles CSS différents sont situés à différents endroits dans la structure du code. Le code contient des commentaires, des caractères, des espaces et des balises inutiles.

Au début, vous devez vous débarrasser des commentaires inutiles - il s'agit d'un ensemble de caractères supplémentaires et totalement inutiles. Pour le navigateur et les robots de recherche, les commentaires n'ont aucune signification sémantique. En les supprimant, vous réduisez considérablement le poids de la page. Ce qui dans un compartiment augmentera la vitesse de chargement d'un document.

Nettoyage des caractères inutiles, des espaces supplémentaires (doubles) et des sauts de ligne. Cela vous permettra de réduire drastiquement la structure finale du code du site. Ainsi, le poids principal de la page peut être réduit de 2,5 à 3 fois.

À la suite de : la compression des espaces et la combinaison des sauts de ligne, la structure du code html sera considérablement compactée.

Un exemple d'un petit segment d'une année optimisée :

a:hover .wpfm-icon-block, .wpfm-template-1 .wpfm-position-bottom-right ul li a:hover .wpfm-icon-block, .wpfm-template-1 .wpfm-position-top-left ul li.wpfm-title-hidden a:hover.

Comme vous pouvez le constater, tous les caractères, espaces et commentaires inutiles ont été supprimés du code. Cela contribue à l'étirement du code, comme s'il s'agissait d'une ligne continue. Grâce à cette structure, le poids de la page devient beaucoup moins important. Dans le même temps, les pages sont indexées et chargées par les bots le plus rapidement possible. Bien entendu, sous réserve de toutes les mesures d'optimisation du site.

Suppression des balises HTML inutiles et des fichiers de style

Le problème le plus courant d'un poids de code de page important peut être les fichiers stylistiques CSS inutilisés et les balises inutiles. Ces éléments de code sont également placés dans le modèle de page principal.

Par exemple: <b> ,<div>, <p>, <span> <style=”левые стилистические файлы CSS”</span>.

Ceci s'applique également aux balises non fermées. Ils ne portent aucune signification sémantique et prennent la place dont nous avons besoin. Les fichiers de style qui n'ont aucun rôle dans la présentation visuelle du site (inutiles ou cassés) sont également supprimés de la structure du code.

Pour accélérer le chargement des pages du site :

1. Vous devez déplacer les styles CSS et les scripts JS vers des fichiers externes ;
2. Disposez les principaux éléments du design du site dans des sprites, puis mettez-les dans des feuilles de style ;
3. Le code de la page doit être simple et lisible.

Correction d'erreurs dans le code HTML du site

Les moteurs de recherche (pas très volontiers) réagissent aux sites dans le code qui contiennent des erreurs. Cependant, de nombreuses ressources TRUST populaires, même avec de telles erreurs, sont clairement corrigées dans les résultats TOP. Même la page principale du populaire Yandex est vérifiée avec l'aide de validator.w3.org, même mon site est supérieur en erreurs.

Contient la liste d'erreurs de validité suivante :

Avertissement : En-tête HTTP Content-Security-Policy : Politique de sécurité de contenu incorrecte : la liste des sources contient l&#039;expression source en double &quot;https://passport.yandex.ru&quot;. Toutes les instances sauf la première seront ignorées. https://yandex.ru/ Erreur : le style d&#039;élément n&#039;est pas autorisé en tant qu&#039;enfant de l&#039;élément div dans ce contexte. (Suppression d&#039;autres erreurs de ce sous-arbre.) À partir de la ligne 33, colonne 17689 ; à la ligne 33, colonne 17695 dkov</div><style.docum>

Erreur : L&#039;élément div n&#039;est pas autorisé en tant qu&#039;enfant de l&#039;élément span dans ce contexte. (Suppression d&#039;autres erreurs de ce sous-arbre.) À partir de la ligne 33, colonne 18219 ; à la ligne 33, colonne 18260 pe_close&quot;&gt;div class=&quot;desk-notif-card__action-icon&quot;&gt;</div>

Il s'agit de l'ensemble minimum d'erreurs que contient la page principale du moteur de recherche Yandex (il y en a environ 47 au total).

Et voici à quoi ressemble la vérification validator.w3.org de mon site :

Erreur : Un élément de script avec un attribut src ne doit pas avoir d'attribut type dont la valeur est autre que la chaîne vide, un type JavaScript MIME ou un module. À partir de la ligne 6, colonne 1 ; à la ligne 6, colonne 192 /script>↩ ↩ ↩ style type="text/css"     

Error: Bad value pmdelayedscript for attribute type on element script: Subtype missing.


From line 123, column 1; to line 123, column 140

25.jpg' >↩<script type="pmdelayedscript" data-cfasync="false" data-no-optimize="1" data-no-defer="1" data-no-minify="1" data-rocketlazyloadscript="1"docume

Comme vous pouvez le voir, pas quelques))) - seulement 21 notifications d'erreurs et d'avertissements. Il y a quelque chose à travailler.

La validité du code est de la plus haute priorité dans la promotion du site Web. En corrigeant la plupart des erreurs et des avertissements du validateur W3C, vous pouvez réussir l'optimisation technique du site.

Définir la priorité de la version mobile du site

Traditionnellement, les sites Web de première génération étaient visualisés sur des ordinateurs de bureau à grand écran. Aujourd'hui, la plupart des gens visitent des sites Web à partir d'appareils mobiles tels que des smartphones, des tablettes et des ordinateurs portables. Par conséquent, votre site doit être adapté aux appareils mobiles. En outre, vous devez vous assurer que chaque aspect de votre site (recherche, panier et paiement) est aussi facile d'accès depuis un appareil mobile que depuis un ordinateur de bureau ou portable.

Utiliser activement la mise en cache Web

Les caches sont des zones de stockage temporaires où les navigateurs enregistrent des copies de fichiers statiques afin de charger plus rapidement les pages récemment consultées, plutôt que de demander constamment le même contenu via HTTP.

Les navigateurs peuvent être chargés de mettre en cache les éléments de la page Web qui ne seront pas modifiés fréquemment par les développeurs. Dans les en-têtes de réponse HTTP, le serveur hôte inclut des instructions de mise en cache. Ceux qui utilisent fréquemment certaines pages bénéficieront de temps de chargement plus rapides car le serveur envoie moins de données au navigateur.

CDN - grandes opportunités de notre temps

Les réseaux de diffusion de contenu (CDN) améliorent la vitesse de chargement du site Web en mettant en cache le contenu dans de nombreux endroits différents à travers le monde. Les serveurs de cache CDN sont généralement situés plus près des utilisateurs finaux que le serveur d'origine ou hôte.

Au lieu de se connecter directement à un serveur d'hébergement qui peut être à des centaines de kilomètres et connecté à de nombreux réseaux autonomes, les demandes de contenu sont envoyées via un serveur CDN. Les serveurs CDN peuvent grandement améliorer les performances des sites Web.

Raccourcir les requêtes HTTP

En règle générale, les navigateurs effectuent plusieurs requêtes HTTP pour accéder à diverses ressources de page telles que des images, des scripts et des fichiers CSS. Un seul site peut nécessiter des centaines de requêtes. Il existe un échange bidirectionnel entre le navigateur Web et le serveur hébergeant la ressource pour chaque requête, ce qui augmente le temps de chargement de la page.

De plus, la page Web peut ne pas se charger rapidement si l'un des hôtes tombe en panne. En raison de ces problèmes potentiels, chaque page doit avoir un nombre minimum de ressources chargées. Les tests de vitesse montreront également quelles requêtes HTTP prennent le plus de temps. Les développeurs peuvent rechercher une solution d'hébergement d'images plus rapide si les images ralentissent le chargement de la page.

Optimiser le code HTML de votre site pour le référencement

Optimisation du code HTML a un effet bénéfique sur la plupart des indicateurs du site dans son ensemble. Grâce à une structure épurée et optimisée, la vitesse d'indexation et de chargement du site est nettement améliorée. Aux yeux des moteurs de recherche, le site devient meilleur, et donc plus visible dans les résultats de recherche.
Les moteurs de recherche utilisent le code source pour comprendre de quoi parle votre site. Tout contenu d'une page Web doit être encodé en HTML afin que les moteurs de recherche puissent le comprendre. Les composants SEO dans le code source incluent la balise de titre, la méta description, la balise de titre H1, les liens internes, les textes d'ancrage, les liens nofollow, les balises d'image alt et les balises canoniques. Pour afficher le code source, ouvrez la page Web et appuyez sur "Ctrl + U". Voici quelques étapes que vous pouvez suivre pour optimiser le code source de votre site Web.

Optimisation des balises de titre

La balise de titre a un impact significatif sur le classement de votre site dans les moteurs de recherche. Cela aide Google à déterminer dans quelle mesure votre page Web ou votre blog correspond à une requête donnée. Une balise de titre bien écrite peut faire en sorte que votre site se démarque des autres et attire facilement le moteur de recherche.

• Assurez-vous que toutes vos pages Web ont des balises de titre uniques qui décrivent parfaitement les pages.
• Suivez la longueur optimale des balises de titre afin qu'elles ne soient pas coupées dans les résultats de recherche. 50-60 caractères fonctionnent assez bien.
• Assurez-vous de ne pas utiliser de mots clés dans les titres. Au lieu de cela, ajoutez un ou deux mots-clés significatifs.

Méta descriptions uniques

Une méta description est un élément HTML qui résume le contenu d'une page Web au profit des utilisateurs et des moteurs de recherche. Il apparaît sous forme d'extrait dans les résultats de recherche sous le titre. L'idée derrière les méta descriptions est de donner à vos lecteurs une idée précise de ce que propose votre page.

• Évitez les longues descriptions. La longueur idéale est une description contenant entre 130 et 156 caractères.
• Utilisez des mots clés pertinents dans la description.
• Si possible, incluez un appel à l'action.

Travailler avec des données structurées

Le but des données structurées est d'ajouter plus de détails à votre extrait pour en faire un extrait en vedette dans les résultats de recherche. Le code doit être correctement balisé pour augmenter vos chances de vous classer plus haut. Schema.org est le plus populaire en matière de formulaires de données structurés pour les moteurs de recherche.

• L'utilisation de "portée de l'élément" dans la balise div permet aux moteurs de recherche de savoir que toutes les informations présentées dans une section font référence au même sujet.
• Le terme type d'élément définit le sujet de chaque section.
• "item prop" rapporte des informations supplémentaires sur la section

Balise H1

La balise H1 est utilisée pour désigner un morceau de texte comme titre principal de votre page. Le contenu répertorié ici doit décrire brièvement le sujet des pages. Les balises H1 doivent être informatives et engageantes, encourageant l'utilisateur à continuer à lire votre contenu.

• Idéalement, il devrait contenir entre 20 et 70 caractères.
• Tenir compte de l'intention de l'utilisateur
• Incluez votre mot-clé principal, de préférence des mots-clés de longue traîne, pour améliorer les performances de recherche et le trafic Web.

Vous pouvez également ajouter des sous-titres commençant de H2 à H6. Pour améliorer la lisibilité, assurez-vous que le texte qui suit le sous-titre n'est pas trop long, de préférence entre 250 et 300 mots.

Texte alternatif pour les images

Pour le commerce électronique ainsi que pour d'autres sites Web, la balise alt est une balise HTML importante. Il indique au moteur de recherche de quoi parle l'image. Si le fichier image ne peut pas être chargé, le texte alternatif sera affiché à la place de l'image. De bonnes images avec un texte alternatif approprié rendent les pages attrayantes pour les robots ainsi que pour les utilisateurs et améliorent l'expérience utilisateur (UX).

• Assurez-vous que la description est courte et précise.
• Utilisez des mots-clés, mais ne les bourrez pas
• Marquez les images liées à votre marque, et non les images utilisées à des fins décoratives.

Balise d'URL canonique

Il s'agit d'un outil puissant pour identifier le contenu dupliqué. Les balises URL canoniques sont principalement utilisées pour les sites de commerce électronique, car vous devrez peut-être créer différentes pages pour vos produits.

L'ajout de ces balises à chaque variante de page aidera les moteurs de recherche à reconnaître la page principale/d'origine à partir d'un groupe de pages avec des URL similaires.

Principales conclusions

• Efforcez-vous de garder les choses simples et efficaces. Un site Web ne doit pas être rempli de trop d'éléments fantaisistes. Il doit juste être pertinent et efficace pour la vision de votre marque et de vos clients. Vous pouvez y parvenir en vous concentrant simplement sur les fonctionnalités Web requises.
• Explorez des stratégies d'optimisation pour divers éléments Web. Différents éléments Web nécessiteront différentes stratégies d'optimisation. Assurez-vous d'inclure ces modifications dans tous les éléments afin que les fonctionnalités de votre site Web fonctionnent efficacement.

Optimisation technique du code HTML du site Web - plugins CMS WordPress populaires

Jetons un coup d'œil à quelques plugins WordPress. Ce qui vous aidera à nettoyer et à compresser le code HTML sur le CMS WordPress. Grâce à ces plugins, vous pouvez augmenter considérablement la vitesse du site, ainsi que nettoyer tout ce qui n'est pas nécessaire dans le code du site.

Optimisation automatique du plugin :

• Optimisation et compression du code HTML du site (suppression des espaces et des commentaires).
• Optimisation CSS et JS - vous permet de combiner des styles dans un seul fichier et de les placer dans bas de page site, ainsi que des scripts js.
• Dispose d'options d'optimisation supplémentaires.

Plug-in Clearfy :

• Combine les fonctionnalités de nombreux plugins et se compose de modules qui peuvent être désactivés.
• Idéal pour augmenter la vitesse du site Web.
• Désactive certains scripts et fonctionnalités inutiles dans WordPress.
• Il dispose d'une large gamme d'outils pour travailler avec le code HTML, les fichiers CSS et JS de votre CMS.

En combinant ces plugins, vous obtiendrez une excellente optimisation du site WordPress. Assurez-vous de les utiliser, je suis sûr qu'ils vous seront très utiles.

Lire cet article :

• Fichier Htaccess - comment créer une instruction de fichier .htaccess pour les débutants
• Compression Gzip accélération de site js / css / html - comment activer dans .htaccess

Merci d'avoir lu : SEO HELPER | NICOLA.TOP