Améliorer les performances... Comment?
Il existe des milliers si pas des millions de sites web sur la toile. Cependant, la majorité d'entre eux n'exploitent pas tout leur potentiel surtout lors de lourdes charges de trafic. Combien de fois êtes vous arrivé sur un site ou la page met plus de 5, 10, 15, 20 ou 30+ secondes à charger? Combien de fois avez-vous abandonné la connexion à un site car le temps d'affichage des images est trop long? Ce que je vais vous proposer dans cet article, ce sont quelques conseils qui vous permettront d'alléger considérablement le temps de chargement de votre page sans en modifier l'aspect visuel...
Les conseils
1) Optimisez les images en terme de qualité, poids, taille
Pour chaque article que vous publiez sur votre site web ou votre blog, n'oubliez jamais de penser au confort du visiteur. Optez toujours pour des images travaillées pour le web aussi légères que possible et non des images non compressées directement tirées de votre appareil photo numérique. Le format conseillé pour vos images est le JPEG ou JPG avec une compression de 60% afin que l'image garde tout de même une qualité optimale pour le web.
2) Utilisez des sprites pour vos images
Un sprite c'est quoi? la combinaison de plusieurs images en une seule pour gérer l'habillage d'un site complet, de certaines parties du site, ou d'une animation (état passif, état de survol, état actif, etc.)
Quel est l'intérêt? Pouvoir limiter le nombre de requêtes HTTP pour le chargement des images et donc gagner en performance.
Voyez plutôt l'exemple:
Cette image permet d'animer la vignette qui mène vers la page CMS de notre site. Au lieu d'utiliser 2 images différentes et donc faire 2 requêtes distinctes, nous utilisons ici une seule et unique image afin de diminuer le nombre de requêtes et donc de gagner en rapidité de temps de chargement du site.
Vous pourriez par exemple concevoir votre site web avec une seule et unique image ;)
Oui c'est très bien mais en pratique comment peut-on animer tout ça?
Avec du CSS bien sûr!
Voici le code CSS utilisé pour la vignette de page d'accueil (exemple ci-dessus):
#icon-cms{background: url('images/ico-cms.jpg') no-repeat;}
#icon-cms:hover{background-position:0px -145px;}
#icon-cms a{display:block; width:200px; height:145px}
Ceci n'est bien sûr pas l'objet de ce post, mais sachez qu'avec la technique "sprite" vous pouvez améliorer considérablement le temps de chargement de vos pages!
3) Placez vos javascript en bas de page plutôt que dans le header!
Si vous le pouvez, placez toujours vos javascripts en bas de page avant la fin de la balise "</body>" plutôt que dans l'habituel "<head></head>". Vous permettrez ainsi à votre page de s'afficher plus vite ou partiellement plus vite car si vous avez plusieurs JS volumineux, le temps de chargement de votre page sera beaucoup plus long!
Par contre, si vous les placez avant la fin de la balise fermante "</body>", votre site chargera déjà de nombreux éléments et votre visiteur ne restera pas devant une belle page blanche pour les cas les plus extrêmes!
4) Centraliser vos fichiers JS en un seul
Même principe que pour les sprites, essayez de fusionner vos fichiers JS en un seul afin de limiter le nombre de requêtes HTTP. Gain de temps de chargement et donc meilleur confort de navigation pour vos visiteurs.
5) Centralisez vos feuilles de styles (CSS) en une seule
Même chose que le point précédent et la technique des sprites, le but du jeu est toujours de limiter le nombre de requêtes HTTP.
6) Evitez les requêtes SQL, utilisez un cache
Pour un site dynamique, un gros portail, un CMS ou autre, il arrive bien souvent que le nombre de requêtes SQL soit trop élevé. Un nombre de requête élevé peut demander de nombreuses ressources serveur. Si vous n'avez que quelques visiteurs en simultané, ce n'est pas trop grâve, c'est juste légèrement ralenti mais si par contre vous avez un bon trafic, il sera intéressant de penser à utiliser un système de cache!
En effet, un système de cache vous permettrait d'enregistrer dans un fichier sur le filesystem le rendu complet de votre page web, de quelques portions de page, etc.
Prenons l'exemple, j'ai une page présentant un article, un visiteur affiche cette page (= requêtes SQL vers la base de données), un autre visiteur affiche cette page (= requêtes SQL identique vers la base de données), un troisième visiteur affiche la page (= requêtes SQL identique vers la base de données), et ainsi de suite!
A chaque fois votre site web consomme des ressources du serveur SQL pour afficher la même page à chaque visiteur!
Si vous avez un nombre de visites élevé, votre serveur SQL risque de saturer et de ralentir les performances de votre site web. Dans ce genre de cas, le cache peut s'avérer un moyen très utile et très performant!
8) Choisissez un hébergement professionnel
Bien souvent nous cherchons à choisir le moins cher afin d'effectuer quelques économies! Cependant, si votre site Internet représente votre business, il est conseillé de choisir une solution d'hébergement à la hauteur de vos attentes. Les offres du genre: "votre hébergement + nom de domaine pour 19€ TTC par an!" ne vous apporterons pas les performances hardware ou bande passante nécessaire pour subvenir au besoin de votre site web.
Le choix d'un bon hébergeur est primordial pour votre business!
9) Pour vos vidéos? Utilisez le streaming externe!
Mettre de la vidéo sur son site web n'est vraiment pas compliqué, un player flash, un fichier swf uploadé sur le serveur et c'est parti! Cependant, sachez qu'une vidéo web, même compressée, peut devenir très vite volumineuse et demande parfois au visiteur de faire transiter de votre serveur à sa machine, un nombre conséquent de Mégas (Mo).
Si votre site attire beaucoup de visiteurs, vous pourriez à la fin du mois avoir de mauvaises surprises vis à vis de votre hébergeur... Ou voir carrément votre hébergement coupé au bout de quelques jours ...
Pourquoi? Parce que si votre hébergeur ne vous fourni pas une bande passante illimitée ou conséquente, avec la vidéo, vous arriverez très vite au terme de votre
10) Evitez les appels à des fichiers distants
Par contrainte publicitaire ou par fénéantise du développeur, il peut arriver qu'un ou plusieurs fichiers soit chargé dans la page en faisant un appel à l'extérieur. Par exemple pour une librairie javascript, il n'est pas rare de voir dans un site web un appel à cette librairie via un lien externe dans le javascript.
Exemple:
<script type="text/javascript" src="http://www.monsitedistant.com/js/une-librairie.js"></script>
Ce code à pour effet de charger le fichier depuis le serveur distant et donc si celui-ci ne répond plus ou si ses performances sont réduites, le temps de chargement de votre page en subira les conséquences... Il est donc important d'éviter au maximum le chargement externe en enregistrant le fichier sur votre propre serveur. La différence est parfois étonnante!
11) Optimisez vos requêtes SQL
Un aspect bien souvent négligé par les développeurs est l'optimisation des requêtes SQL. En effet, bien construire ses tables et ajouter des INDEX sur les champs qui reviennent souvent lors de requêtes fréquement utilisées.
Optimisez également votre requête en ne faisant appel par exemple qu'aux champs utilisés, etc.
Voici un article complémentaire sur l'optimisation des requêtes SQL qui pourra certainement vous aider! ;)
Conclusion
Il existe un de noubreuses astuces pour optimiser les performances de votre site web afin de le rendre plus rapide et donc d'éviter qu'un grand nombre de visiteurs quitte votre site car votre page ne se charge pas assez rapidement. Rien qu'en travaillant vos images, en utilisant des sprites et en diminuant grandement vos requêtes HTTP, vous devriez voir largement la différence!
Pensez toujours à développer votre site en vous préoccupant du confort de votre visiteur, à son confort, etc. Imaginez-vous à la place de votre visiteur... Est-ce que le temps de chargement de cette page est suffisamment court? Est-ce que les images sont de bonnes qualités tout en étant légère? Est-ce que le moteur de recherche me retourne rapidement un résultat de ma base de données SQL? Etc. Ce genre de petites questions pourra vous apportez de nouveaux visiteurs, du moins, empêcher un certain nombre de lâcher trop vite la connexion à votre site web.
Faites cependant attention à toujours garder une copie de vos données au cas où vous effecturiez une mauvaise opération. Ce genre de chose arrive encore trop souvent et même pour les plus expérimentés.
Commentaires
People deserve good life time and mortgage loans or bank loan will make it better. Just because people's freedom depends on money state.
Your website is very the most interesting. I liked your website a lot. Thank you.
payday loans calgary payday loans canada
payday loans edmonton canada payday loans
http://www.findpaydayloan.com/cash-advance.shtml http://www.findpaydayloan.com
Ajouter un commentaire