Webmaster ⇒ SEO référencement facebook twitter youtube

Rendre un site plus rapide | Rendre un site plus rapide


La vitesse de chargement de celui-ci dépend de plusieurs facteur  la taille des pages web et de ses composants.  Google prend en considération,  la rapidité d'affichage d'un site (pages) comme un des multiples «critères» de classement de son index. Nous allons "voir" comment optimiser la rapidité d'affichage d'un site afin de réduire la taille globale téléchargée par l’utilisateur

Il existe un certain nombre de techniques permettant d'améliorer la vitesse de chargement d'un site et tout commence par la structure du site et notamment la partie XHTML/CSS.

Les tableaux :

La balise TABLE est conçue pour afficher des données dit  tabulaires  (base de donnée, statistique,etc..) et non pour faire la présentation et mise en page d'un site. Le principe consiste donc à remplacer les tableaux par ses équivalents en CSS.

Les images :

Beaucoup de sites utilises des images pour la partie graphique et c'est normal. Malheureusement, une grande partie des webmasters utilisent «cet ornement» directement dans leurs documents XHTML et le plus souvent associé à des tableaux...

Exemple :

<img width="200px" height="120px" alt="titre de mon image" 
src="img/image.jpg"/>

En procédant de cette façon, vous alourdissez le poids de vos pages par l'inclusion de code XHTML répété visant à afficher les dites images. Multipliez par X nombres de fois que vous possédez d'images, ça devient vite très lourd! Ajoutez à cela le poids des images, les tableaux...bref, vous avez comprit.

Solution CSS :

.mon-image{ 
background-image : url('img/image.jpg') no-repeat; 
width: 200px;
height: 120px;
}

Il faut retenir qu'une image dédier à la décoration d'un site (design) doit être affiché via une feuille de style pour ne pas encombrer inutilement la page web.

Les styles :

Nous utilisons des styles que nous appliquons directement aux balises XHTML pour plus de simplicité ou par fainéantise d'incorporation à la feuille de styles.

Exemple :

<p style="text-align: center; color: red; font-weight: bold; size: 14px;">Mon texte ici </p>

Parfois, même très souvent, ces styles sont utilisés plusieurs fois dans une même page et alourdissent encore un peut plus le poids du document. Le plus simple est d'utilisé une fois de plus la feuille de styles pour alléger la page web.

Solution CSS :

.paragraphe-a1{ 
text-align: center; 
color: red; 
font-weight: bold; 
size: 12px;
}
<p class="paragraphe-a1">Mon texte</p>

Il faut bien comprendre que plus une page est légère par son contenu (codes, textes, images, etc..) plus elle sera rapide. Il faut donc dissocier au maximum le contenu (XHTML, textes) de la mise en page (images,couleurs,etc..) par l'intermédiaire d'une feuille de styles (CSS).

Requête SQL :

Tout les sites dit "dynamique" utilisent de nombreuses requêtes sql permettant de rechercher et d'afficher un contenu précis pour une page donnée. Par pure fainéantise, la plupart des webmestres effectuent des requêtes visant à sélectionner plusieurs champs d'une table même si ce n'est pas utile plutôt que de sélectionner des champs bien précis. De ce fait, MYSQL travail plus mais pas plus vite pour autant.
Supposons un instant une table nommé (ma_table) composé de 50 champs dont nous avons besoins de récupérer seulement les données id, titre et description :

Mauvais exemple no:

$query = mysql_query("SELECT * FROM ma_table ORDER BY id ASC");

Résultat : 0.0040 sec

Bon exemple yes:

$query = mysql_query("SELECT id, titre, description FROM ma_table ORDER BY id ASC");

Résultat : 0.0012 sec

Il faut donc optimiser au maximum les requêtes SQL pour grappiller encore quelques micro secondes.

Compression gzip :

Note : testes effectués sur un serveur mutualisé de 1&1 et notamment le Pack Perso Initial.


La compression gzip est un mécanisme permettant de compresser les pages web à la volée pour les navigateurs. Cette compression est accessible sur la plupart des sites possédant un "vrai" hébergement, j'entends par là un site possédant un nom de domaine (fr, com, net, etc..). Afin de savoir si votre serveur possède gzip, il suffit d'envoyer à la racine de votre site un document PHP contenant la ligne ci-dessous :

<?php phpinfo();?>

Dans les infos. données, cherchez la partie « Zlib ». Si vous avez la ligne "zlib.output_compression" sur » "on", c'est que votre serveur possède le module gzip.
Dans un fichier.htaccess, ajoutez les lignes suivantes :

AddType x-mapp-php5 .php .php3 .php4 .htm .html
AddHandler x-mapp-php5 .php .php3 .php4 .htm .html

Créer ensuite un fichier nommé "php.ini" et ajoutez y le code suivant :

<?php
zlib.output_compression = true
?>

Envoyez le tout à la racine de votre site. Ces quelques lignes doivent vous renvoyez dans l'entête HTTP de votre page la ligne suivante :

Content-Encoding: gzip

Vous pouvez tester la compréssion de vos pages en utilisant le plugins Firebug pour le navigateur Firefox ou par l'intermédiaire du site http://www.whatsmyip.org/http_compression/ .

Cache et headers :

Le code suivant à insérer dans un fichier ".htaccess" permet d'indiquer que certains types de fichiers peuvent rester en cache dans le navigateur du visiteur pendant une durée déterminée, sans que le navigateur n'ait besoin de faire des requêtes pour vérifier la validité du cache. L’intérêt de ce code est d'économiser de la bande passante et de rendre l'affichage du site beaucoup plus rapide pour les personnes revenant plusieurs fois par mois sur le site.

<FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf|css|js)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>
max-age=2592000 = 60 secondes*60 minutes*24 heures*30 jours = 2592000 secondes soit 30 jours

Mise en cache côté serveur :

Une autre technique pour accélérer la vitesse de chargement d'un site dynamique, consiste à mettre en cache l'intégralité de vos pages sur votre propre serveur. L’intérêt de cette méthode réside dans le faite qu'une fois la page appelé, elle est copier intégralement dans un dossier et re servit à chaque appel. Par ce procédé, vous supprimez donc l'intégralité des requêtes SQL permettant l'affichage du contenu de la dite page et accélérer sa vitesse de chargement.

//ici code php que vous ne voulez pas mettre en cache
<?PHP
//on lit l'adresse de la page
$urldemandee=$_SERVER['REQUEST_URI']; 
// on tranforme l'adresse en nom de fichier
$urldemandee=ereg_replace('/','-',$urldemandee); 
// si l'adresse est la racine du site, on ajoute index.html
if($urldemandee=="-") $urldemandee="-index.html";
// on construit le chemin du fichier cache de la page
$fichierCache="cache/cache".$urldemandee; 
//si la page n'existe pas dans le cache ou si elle a expiré
if (@filemtime($fichierCache)<time()-(3600*24*360)) { 
//on démarre la bufferisation de la page: rien de ce qui suit n'est envoyé au navigateur
   ob_start(); 
?>
//Votre page PHP ici
<?php
   $contenuCache = ob_get_contents(); // on recuperre le contenu du buffer
   ob_end_flush();// on termine la bufferisation
   $fd = fopen("$fichierCache", "w"); // on ouvre le fichier cache
   if ($fd) {
      fwrite($fd,$contenuCache); // on ecrit le contenu du buffer dans le fichier cache
      fclose($fd);
     }
} else { // le fichier cache existe déjà
  include ($fichierCache); // on le copie ici
}
?>

Plus d'informations sur ce script

 

Code:

//ici code php que vous ne voulez pas mettre en cache

<?PHP
$urldemandee=$_SERVER['REQUEST_URI']; //on lit l'adresse de la page
$urldemandee=ereg_replace('/','-',$urldemandee); // on tranforme l'adresse en nom de fichier
if($urldemandee=="-") $urldemandee="-index.html"; // si l'adresse est la racine du site, on ajoute index.html
$fichierCache="cache/cache".$urldemandee; // on construit le chemin du fichier cache de la page
if (@filemtime($fichierCache)<time()-(3600*24*360)) { //si la page n'existe pas dans le cache ou si elle a expiré
   ob_start(); // on démarre la bufferisation de la page: rien de ce qui suit n'est envoyé au navigateur
?>

//Votre page PHP ici 

<?php
   $contenuCache = ob_get_contents(); // on recuperre le contenu du buffer
   ob_end_flush();// on termine la bufferisation
   $fd = fopen("$fichierCache", "w"); // on ouvre le fichier cache
   if ($fd) {
      fwrite($fd,$contenuCache); // on ecrit le contenu du buffer dans le fichier cache
      fclose($fd);
     }
} else { // le fichier cache existe déjà
  include ($fichierCache); // on le copie ici
}
?>



Le script:

  1.  il recupere l'url de la page
  2.  transforme cet url en un nom de fichier sans /
  3.  teste l'existance de ce fichier dans le répertoire /cache/
  4.  si le fichier n'existe pas, génére la page, puis la stoque dans le repertoire cache
  5.  si le fichier existe, l'ouvre en tant que page html

La page html est générée lors de la premiere requete. Avce ce système, il faut gerer le cache lors des mises à jour (effacer la page du cache correspondante).

Je gere un site de + de 80 000 pages avec ce système sans problème notoire!





>
Changer le fond
Oregionale Skin
7astuces
Sélectionnez un Fond (11)
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces
Fond de contenu
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces