Quels sont les bonnes pratiques pour un site web ?

28/01/2023 | Anaïs KB | Référencement naturel

Quelques conseils à appliquer lorsqu'on administre et alimente un site web afin de ne pas altérer les performances et le référencement de votre site.

Quelle taille d'image choisir pour un site internet ?

Il faut tout d'abord connaître la vraie taille de l'image. Pour cela, allez sur la page internet où se trouve l'image avec un navigateur tel que Chrome par exemple.

  1. cliquez droit sur l’image
  2. cliquez Inspecter
  3. pointez la souris sur le lien de l’image
  4. observez la taille intrinsèque (intrinsec size sur Chrome)

Cette taille est la taille réelle de l'image. Le navigateur vous donnera une autre indication, la taille du rendu de l'image (rendered size). Cette taille est celle qui est affichée au moment où vous regardez le site avec votre terminal, votre navigateur, votre taille de fenêtre.

Pour choisir la taille d'une image, il faut connaître son plus grand rendu sur le site. A cet égard, chargez l'image sur la page voulue et observez sa taille rendue de l'image sur 3 dimensions de fenêtre différente avec votre navigateur :

  • 767px (juste avant de passer en tablette)
  • 991px (juste avant de passer en desktop)
  • la plus grande taille que vous puissiez avoir sur votre écran

Pour ces 3 observations :

  1. allez sur la page du site où se trouve l'image
  2. cliquez droit sur l’image
  3. cliquez Inspecter
  4. redimensionnez la fenêtre à l'une des 3 tailles décrites précédemment (vous verrez le nombre de pixels en haut à droite sur Chrome)
  5. pointez le lien de l’image
  6. observez la taille du rendu de l’image en pixels (rendered size sur Chrome)

Sur ces 3 résultats, la plus grande taille de rendu est celle que votre image devrait avoir en taille réelle lorsque vous la chargez sur le site. Elle ne doit pas être plus grande puisqu'elle ne sera jamais vue au-delà de cette taille. Redimensionner l'image permettra de gagner du poids. Cela rend la page plus performante car il y a en général plusieurs images sur une page, mais cela peut être encore mieux optimisé.

Optimiser le poids des images pour le web

Les images mises sur le site doivent être optimisées pour le web. C’est-à-dire qu’elles doivent être les plus légères possibles sans compromettre le visuel, ainsi le site sera plus performant. Il faut par exemple penser qu’une image dans un menu se retrouve sur toutes les pages du site, son poids est compté dans chaque page de votre site.

Pour optimiser une image au maximum après l'avoir redimensionnée comme expliqué précédemment, il faut optimiser son poids avec des outils spéciaux comme TinyPNG. C'est le logiciel en ligne que j'utilise et il a une version gratuite limitée. TinyPNG existe aussi en module pour Prestashop pour optimiser automatiquement les images.

Cet outil va prendre votre image et la compresser au maximum tout en essayant de ne pas détériorer le visuel. Après ça son poids peut être réduit jusqu'à 90%, une sacré économie pour que votre site gagne en performance.

Comment nommer ses médias pour le web ?

Avant de charger des médias (images, pdfs, vidéos…) sur le site, il faut toujours les renommer de la manière suivante :

  • en minuscule,
  • sans accents,
  • avec des tirets – à la place des espaces,
  • sans caractères spéciaux à part le tiret

Une fois chargé sur un site internet, le nom de votre média devient une URL. Ne pas lui donner le bon format pourrait causer des soucis entre vos terminaux, mais aussi des problèmes pour le SEO puisque les mauvais caractères ne voudront rien signifier pour les moteurs de recherche.

Il faut aussi adopter cette norme pour nommer vos dossiers de médias parce qu'ils feront partis, eux aussi, de l'URL.

Voici ce que peut donner un nom d’image avec accent, caractères spéciaux et espaces, l'URL qui en résulte ne sera pas interprétée partout de la même manière. Le nom d'image Cimetière d’éléphants (1) 2023 01 30.png crée sur votre Windows devient sur votre Prestashop Cimetiere%20d’éléphants%20(1)%202023%2001%2030.png et il peut être interprété autrement sur d'autres plateformes.

Il aurait fallu nommer l'image cimetiere-d-elephants-1-2023-01-30.png pour que son URL ne soit pas altérée ou cimetiere-d-elephants.png pour qu'elle soit mieux qualifiée pour le référencement.

Les bonnes pratiques pour votre contenu textuel

Quel type de liens créer sur du texte ?

Lorsque vous devez mettre un lien sur un élément, il faut privilégier de mettre le lien relatif et non le lien absolu (si le gestionnaire de site vous le permet).

Voici la différence entre les deux types de liens :

Vous pouvez cliquer sur les deux liens précédents, ils vous amèneront au même endroit tant que je ne change pas le nom de domaine de mon site. C'est en ça que le lien relatif est très pratique. Il va vous permettre de changer d'environnement de production, préproduction ou de nom de domaine sans avoir à se soucier du changement des URLs. Celles-ci prendront le nom de domaine sur lequel elles sont mises.

Copier du contenu dans un WYSIWYG ou éditeur de texte

Il ne faut jamais copier du contenu d'un logiciel qui formate le texte vers l'éditeur de texte d'un site. Voici les conséquences que cela peut avoir sur le site :

  • il y aura du code inutile qui va alourdir la page et qui ne sera pas interprété en HTML ou CSS
  • ce code peut entraver les règles de formatage de ce qui existe sur le site
  • il sera difficile d'appliquer le css global ou spécifique du site à ce type de contenu, car le code copié primera

Deux solutions s'offrent à vous pour copier proprement son texte dans un WYSIWYG :

  • Cliquez droit et collez en tant que texte brut. Vous pourrez ensuite réappliquer les formats avec le WYSIWYG
  • Collez le contenu dans un éditeur de note (style Notepad++) puis recopiez-le dans le WYSIWYG

Ces petites règles semblent contraignantes, mais les respecter vous permettra de partir sur de bonnes bases pour construire votre site et l'alimenter.

La Zitounerie n'utilise pas de cookies tiers, il n'y a que des cookies fonctionnels. En savoir plus

Accepter Refuser