[Discussion] Optimiser son site web ?

Bonjour à tous,

beaucoup de webmaster amateurs se posent la question, je vais essayer d'y répondre avec les arguments que j'ai pu récolter au fur et à mesure de ma vie de webmaster, mais le sujet reste très ouvert et n'importe qui a le droit et le devoir d'ajouter ou modifier certaines informations si il n'est pas d'accord.

Règle n° 1 : Passer au XHTML / CSS
En effet en séparant totalement le contenu de la mise en page ( pas de <td width=50px> etc... ), la mise en page reste en mémoire et est chargée beaucoup plus rapidement car seul le contenu change.

Règle n° 2 : Optimiser son code et le contenu
Supprimer toutes les balises inutiles, bien structurer le document ( éviter les <br><br><br><br> pour sauter des lignes ).
Faites aussi attention au format des images, comparez toujours le poids de l'image en jpeg, png et gif, pour voir lequel est le plus approprié.

Règle n° 3 : Utiliser les "pseudo frames"
Ce système est simple et est à mon goût le meilleur moyen d'optimiser un site web. Il suffit d'identifier les parties d'un site web qui sont présentes sur toutes les pages.

Par exemple sur ce forum, on peut distinguer le header qui contient le menu, le contenu de la page et le footer.

Afin d'éviter de recharger le menu et le footer à chaque page visitée, on les place dans des fichiers séparés.

La page d'index se présenter alors sous la forme suivante :

Code:

<?php require_once("header.php"); // Le once signifie qu'on ne le chargera qu'une fois Ici le contenu de la page require_once("footer.php"); ?>

Ainsi les deux éléments ne seront chargés qu'une fois. C'est ce qu'on appelle un système de templates.

Pour changer le contenu de la page, il y a des multitudes de façon de faire, je vais vous en présenter une qui n'est sûrement pas la meilleure, maise elle est assez efficace.

Votre page principale sera index.php. Imaginons que vous souhaitez avoir une page appelée contact.php.

Alors le lien vers cette page peut se présenter sous la forme

Code:

<a href="index.php?page=contact">Contact</a>

Pourquoi le "?" ? Cet élément permettra de rendre vos pages dynamiques en changeant le contenu en fonction de l'URL.

Mais comment ma page index pourra deviner qu'il faut inclure la page contact.php à la place du contenu ?

C'est maintenant que ça devient intéressant. Regardez le code suivant, et remplacez dans la page index.php le contenu par ce code :

Code:

<?php if(isset($_GET['page'])) {    if(is_file('pages/'.$_GET['page'].'.php')) {       include('pages/'.$_GET['page'].'.php');    } else {       include('pages/erreur.php');    } } else {    include('accueil.php'); } ?>

Le code est facile à expliquer. L'URL est index.php?page=contact. La variable page existe, alors il va chercher si un fichier contact.php existe dans le répertoire pages. Si le fichier n'existe pas, on renvoit une page d'erreur. Si la variable page n'est pas définie, on renvoit la page d'accueil.

C'est la base d'un site web dynamique ( qui peut être amélioré en se servant d'une base de données par exemple ).

Règle n° 4 : Compresser le site
J'ai découvert ça assez récemment, mais en mettant tout en haut de votre page index.php ( avant le premier require_once ) cette commande :

Code:

ob_start("ob_gzhandler");

Votre page sera compressée avant d'être envoyée au navigateur web, ce qui permet de gagner environ 80% du poids de la page !

Vous pouvez tester ici le poids de votre page compressée et non compressée pour voir la différence :

http://www.whatsmyip.org/mod_gzip_test/


Voilà pour l'instant c'est tout, je complèterai peutêtre le topic par la suite si certains cherchent à approfondir le sujet

Je ne pense pas que ces optimisations visent à apporter au site un meilleur référencement.

AMHA c'est vraiment pour optimiser les données et éviter de faire télécharger aux internautes du contenu inutile, parceque le débit est limité, et plus le site est optimisé, plus il peut y avoir d'internautes.

Je lancerai un nouveau sujet à propos de l'optimisation pour le référencement quand j'aurai moins de boulot

Citation de: killian le le 24-05-2007 à 17:11:08

Je ne pense pas que ces optimisations visent à apporter au site un meilleur référencement.

Et pourtant ...

La règle numéro 1 favorise la prise en considération de la sémantique. L'utilisation des balises <hx> pour les titres, <q> pour les citations, <hr /> pour une séparation, <em> pour mettre en évidence, ne pas abuser des <div> mais utiliser des <p>, etc.. Ceci favorise la prise en compte de la sémantique des pages et du sens des mots et paragraphes.

De plus les normes XHTML invitent l'utilisation des attributs alt et title.

La règle numéro 2 épure les pages. Il faut savoir que les fichiers trop lourds ne sont pas analysés intégralement par les moteurs de recherche, seuls les 100 premiers ko le sont. De plus, des pages épurées sont mieux indexées car toutes les fioritures sont éliminées et seul le réel contenu est présent.

Il y a donc un impact au niveau du référencement ... minime mais existant.

Un truc beaucoup plus basique mais que je vois sur presque tous les sites de p'tits jeunes : la taille des images. On voit très souvent des images beaucoup trop lourdes, insuffisamment compressées mais aussi (horreur !) des images re-dimensionnées directement par la balise img, style :

img src="images/toto.jpg" alt="toto" width="x" height="y"

x et y doivent toujours correspondre aux vraies dimensions de l'image et non être utilisés pour transformer les images en vignettes, sous peine d'alourdir énormément la page. En outre, les problèmes d'arrondis entrainent un affichage pas du tout joli.

Je vois çà partout en ce moment, y compris sur le site d'un de nos grands quotidiens nationaux ...

Merci beaucoup pour toutes ces astuces. Et j'en ai aussi une à vous faire parvenir :

N'utilisez pas les frames ! En effet, j'ai découvert il n'y pas si longtemps que avec une faille de sécurité elles peuvent dévoiler notre IP 

Citation de: lefou le le 12-11-2007 à 17:41:14

S'il s'agit d'optimisation pour un code propre dans ce cas je rajouterais : Rendez chaque page du site valide en XHTML strict

Strict 1.0
Transitional

?

1 MO c'est trop gros ... Je t'écris d mon lieu de travail (je sais je ferais mieux de bosser que d'être sur ce forum !). Ici la liaison est un peu lente et je constate que pour moi aussi certaines de tes images n'apparaissent pas.