Comment rendre un site plus rapide?

 La principale qualité d’un site web (hors son contenu) est sa vitesse de chargement dans le navigateur du client . La vitesse de chargement de celui-ci dépend de plusieurs facteur dont notamment la taille des pages web et de ses composants. Comme vous le savez sans doute ou peut être pas, Google prend en considération, depuis un certains temps maintenant, la rapidité d'affichage d'un site (pages) comme un des multiples «critères» de classement de son index. Nous allons "voir" dans ce petit tutoriel comment optimiser la rapidité d'affichage d'un site afin de réduire la taille globale téléchargée par l’utilisateur finale .

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 :

Si votre site est construit sur la base d'un ou plusieurs tableaux, il va falloir revoir l'intégralité de celui-ci et vous initier au langage CSS car l'emploi de tableaux implique généralement d'utiliser beaucoup de balises pour peu de contenu. D'autre part, la balise TABLE est conçue au point de départ 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="120px" height="90px" alt="titre de mon image" 
src
="mon-dossier/mon-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('mon-dossier/mon-image.jpg') no-repeat; 
width: 120px;
height: 90px;
}
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 quasiment tous 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: 12px;">Mon texte</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-rouge{ 
text-align: center; 
color: red; 
font-weight: bold; 
size: 12px;
}
<p class="paragraphe-rouge">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 40 champs dont nous avons besoins de récupérer seulement les données id, titre et description :

Mauvais exemple :
$query = mysql_query("SELECT * FROM ma_table ORDER BY id ASC");
Résultat : 0.0040 sec

Bon exemple :
$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
}
?>
Vous trouverez plus d'informations sur ce script en suivant le lien ci-dessous :
Script mise en cache des pages PHP
Voir/déposer un commentaire (2) | Signaler un problème