Forum de test

Bienvenue, vous n'êtes pas connecté. ( Se connecter - S'enregistrer )

Forum de test > Forum de test > Groupe de sujets de test > [Guide] Économiser sa bande passante et son espace disque

RSS >  [Guide] Économiser sa bande passante et son espace disque
Admin #1 26/01/2010 - 07h35

Groupe : Administrateur
Messages : 12
Enregistré le : 13/02/2009

Hors ligne

Avec la venue de la nouvelle politique de Servhome, je crée ce guide afin de renseigner les utilisateurs de l'offre gratuite et de l'offre payante limitée sur les moyens dont ils disposent pour économiser la bande passante de leur site.

Sommaire
  • [*]Une cure minceur pour vos pages !
    • [*]Le code
    • [*]Les images

  • [*]Utiliser les services tiers
  • [*]Protéger ses images contre le hotlink



Une cure minceur pour vos pages !

Vous êtes-vous déjà questionné sur le poids de vos pages ? Si non, je vais vous sensibiliser à l'importance du poids des pages avec un exemple :

Supposons que vous avez une page qui, avec le code, les images, les scripts et les éléments Flash, fait 1 Mo.  Vous utilisez l'offre gratuite qui limite votre bande passante à 250 Mo par mois.  Dans ce cas, si votre page est vue 250 fois, votre limite est dépassée.

Admettons que maintenant, vous faites une cure minceur à cette page et qu'elle fait maintenant 100 Ko qui est le maximum recommandé.  Vous aurez alors droit à 2500 pages vues avant d'atteindre la limite ce qui est 10 fois plus qu'avant la cure minceur.

Vous voyez maintenant la différence ?

Et si je peux continuer avec un deuxième argument : Il n'y a pas que la consommation de la bande passante qui en sera améliorée, mais aussi la patience de votre visiteur, puisqu'il reste encore des régions dans l'Union européenne et en Amérique du Nord qui ne peuvent toujours pas avoir le haut débit, ce qui est particulièrement vrai en région rurale.  Et plus une page sera lourde, plus elle sera longue à charger, et on estime que ça prend entre 12 et 15 secondes avant qu'un visiteur ne se lasse et quitte votre page pour ne plus revenir.  Certains utilisateurs du 56k un peu plus habitués à l'informatique vont même aller jusqu'à désactiver les éléments graphiques et les animations lourdes pour naviguer aisément.

Jusqu'ici, je dois avoir sûrement vous avoir convaincu de l'importance.  Maintenant, vous vous demandez sûrement comment connaître le poids de vos pages et comment les faire "maigrir" ?

Pour connaître le poids de vos pages, vous avez deux méthodes :
  • [*] Installer l'extension Web Developer pour Firefox.  Une fois la barre d'outils installée et active, passer par le menu "Informations" > "Poids de la page".  Ceci est utilisable autant pour les sites locaux que les sites hébergés sur le Web.
  • [*] Aller sur http://www.graphitoo.com/poids_page.php et entrer l'adresse internet de votre page.  Cet outil livre un bilan plus détaillé, mais il requiert que la page soit hébergée sur Internet ou que votre serveur local soit ouvert au Web.


Une fois que vous savez le poids de vos pages, voici maintenant le temps de savoir comment les faire maigrir.

Au niveau du code

Un site bien codé sera léger à charger.  Malheureusement, on voit régulièrement des sites qui ont un code si lourd et si chargé que cela prend une éternité pour le navigateur de le lire.

C'est souvent le cas des sites générés avec des outils dits "WYSIWYG" comme Frontpage ou Webcreator, ou bien des sites qui, même s'ils sont codés à la main, ils l'ont été avec des habitudes de codage complètement dépassées, ce qui fait que ces pages peuvent facilement atteindre le méga-octet par chargement.

Quant aux sites générés avec un système de gestion de contenu (j'inclus ici les moteurs de forums et moteurs de blogs), ceux-ci sont en général plutôt légers, du moment qu'ils suivent les normes W3C et des pratiques de codage moderne.

Ce qui va suivre va surtout s'adresser à ceux qui n'utilisent pas de CMS, sauf si vous avez créé vous-même la charte graphique que vous utilisez pour votre CMS.

  • [*]Séparer la présentation du contenu : Les balises et attributs de présentation (<font>, <b>, <i>, <u>, <s>, <center>, align, valign, width, height, vlink, alink, hlink, color, bordercolor, background, bgcolor, ...) doivent être remplacés par leurs équivalents en CSS qui, eux, doivent être mis dans un fichier séparé que vous lierez à votre page en utilisant cette balise à placer entre <head> et </head>

    <link href="style.css" title="style du site" rel="stylesheet", media="screen" />

    Pourquoi un fichier externe et non à même la page ?  L'avantage principale de la feuille externe, c'est qu'elle peut être mis en cache par le navigateur et donc, le chargement du style des pages ultérieures s'en trouve accéléré et moins de ressources sont consommées.  Il y a aussi un autre avantage : La feuille peut être liée à plusieurs pages, contrairement à un style interne qui doit être réécrit dans chaque page.  Puis un dernier avantage : Vous n'aurez qu'un seul fichier à modifier pour modifier le style de toutes vos pages utilisant la même feuille !

    Donc, la feuille externe, en plus de permettre la mise en cache pour un chargement plus rapide, est économe en bande passante et en espace disque !

    Pour en apprendre plus sur le CSS : http://www.siteduzero.com et http://www.alsacreations.com

  • [*]Utiliser le Javascript intelligemment : Beaucoup pensent encore que cela prend absolument Javascript pour faire les effets de "rollover" dans le menu et le centrage du site, alors que ceux-ci peuvent très bien être fait avec le CSS.  N'hésitez pas à lire les articles d'Alsacréations pour en savoir plus sur les possibilités du CSS.

    Réfléchissez bien sur ce que vous voulez coder ou insérer.  Vous pouvez très bien utiliser de l'AJAX pour quelques trucs en temps réel (chatbox, aperçu d'un message) ou du JS pour des boutons BBCode ou pour dérouler un module déroulable/contractable comme une réponse rapide, mais évitez les trucs superflus comme une image qui suit la souris ou une pluie d'images : ça n'apporte rien à votre site, sinon un chargement plus long et une bande passante plus grande.

    Pour tout script en Javascript faisant un grand nombre de lignes, mettez-les dans des fichiers séparés que vous lierez à vos pages.  De cette façon, vous aurez les mêmes avantages que pour la feuille CSS externe, soit la mise en cache du fichier et le fait de n'utiliser qu'un fichier pour toutes les pages.

  • [*]Réduire les tableaux au minimum : Sans aller dans le tout-tableless, l'utilisation des tableaux est déconseillée pour la mise en page, et l'imbrication de deux tableaux ou plus est carrément à proscrire.  Réservez leur utilisation à ce pour quoi ils ont été conçus : les données tabulaires ou "classées", comme un classement d'équipes sportives avec leurs statistiques, un tableau comparatif ou une liste de forums ou de sujets.

    Adoptez la structuration à base d'éléments <div> et de balises appropriées au type de contenu comme les <h1> à <h6> pour les titres, les <p> pour les paragraphes et les <ul>, <ol>, <li> pour les listes et menus.  En couplant cette méthode de structuration avec la séparation de la présentation du contenu, vous aurez un code léger et donc, économe en bande passante.

  • [*]Définir ses images décoratives comme images de fond : Si votre site utilise beaucoup d'éléments graphiques, la séparation de la présentation du contenu s'impose pour économiser l'espace disque et réduire le temps de chargement !

    En plus de centraliser le style dans une feuille externe, je vous recommande aussi de définir toutes vos images décoratives comme images de fond, en utilisant cette même feuille externe et en stockant les images à côté de cette feuille.  Vous aurez donc une page plus légère à charger puisque votre contenu n'aura pas besoin d'attendre après le style pour se charger, en plus que ça fait des documents HTML plus légers.

  • [*]Les includes, c'est pratique : Puisque Servhome supporte PHP, vous avez la possibilité d'utiliser la fonction include() pour n'avoir qu'un fichier pour le haut, un fichier pour le menu et un fichier pour le bas, que vous pourrez inclure dans toutes vos pages.  Cette méthode est surtout économe en espace disque, mais c'est tellement pratique quand on n'a qu'un fichier à éditer pour ajouter un lien dans le menu !

    Pour en savoir plus sur cette fonction : Inclure des portions de page

    Mais par contre, vous aurez besoin d'installer WAMP (Windows), MAMP (Mac), XAMPP ou LAMP (Linux) pour tester vos includes.  Plus d'infos

  • [*] Pour les sites codés maison qui gèrent certaines pages avec une base de données, l'utilisation d'un système de cache permet d'économiser en requêtes SQL et donc, en ressources serveur.  Ce tutoriel, vous permet d'apprendre les bases d'un système de cache simple qui stocke les données à afficher dans des fichiers .html localisés dans un dossier dédié au cache.


Au niveau des images

  • [*]Se libérer des GIFs animés : Certains peuvent peut-être triper là-dessus, mais truffer sa page de gifs animée est loin d'être économe en bande passante et en espace disque en plus d'agresser le visiteur qui se retrouve tout le temps distrait par les animations en essayant de lire le contenu.

    Les images animées étant plus lourdes que les images statiques, l'espace disque et la bande passante peut grimper très vite si ces GIFs comportent beaucoup d'images dans leur animation et si les dimensions sont conséquentes.

    Pour cette raison, utilisez-les avec beaucoup de parcimonie.  N'utilisez que des animations discrètes et de petite taille, par exemple pour marquer un nouveau message.

  • [*]Bien choisir son format d'image : Tout de suite en partant, s'il y a un format qui est absolument à proscrire, c'est le format .BMP !  Ce format est extrêmement lourd, et juste pour vous donner un exemple, un fond d'écran en BMP de 1024*768 peut facilement atteindre les 2 Mo !

    Privilégiez donc les trois formats qui sont plus adaptés au Web, soit le JPEG, le GIF et le PNG, et choisissez selon le type d'image.  Choisissez le JPEG pour les photos, le GIF ou le PNG indexé (256 couleurs) pour les images avec peu de couleurs, et le PNG 24 bits pour les images avec transparence progressive et les éléments graphiques risquant d'être détériorés par le passage au GIF ou au PNG indexé, afin d'optimiser autant que possible vos images.

    Pour les PNG, vous pouvez utiliser des outils tels que PNGOptimizer (Windows) ou OptiPNG (Linux) pour les optimiser.  Pour les PNG24, les économies peuvent être considérables, puisque par exemple pour une capture d'une page complète, l'économie peut aller entre 40 Ko et 200 Ko selon l'image.

  • [*]Éviter le redimensionnement arbitraire : Lorsque vous voulez faire des miniatures cliquables, éviter le redimensionnement arbitraire à coups de height="" width="" ou de style="height:XXpx; width:XXpx;" pour redimensionner une photo ou une capture.  Même si l'image apparaît petite, elle est aussi lourde à charger que si elle était à sa pleine grandeur !

    Optez plutôt pour la création d'une copie redimensionnée de chacune de vos images, que ce soit de façon manuelle avec un éditeur d'image (Paint, Gimp, Photofiltre) ou de façon automatisée avec l'utilisation de la librairie GD de PHP, qui est disponible sur Servhome.  De cette façon, le chargement s'en trouvera énormément allégée, puisque ce sont ces petites images qui se chargeront, pour la fraction du poids de l'image pleine-grandeur, et ce ne sera que si le visiteur veut voir l'image en pleine grandeur que celle-ci sera chargée.  Pour une page affichant plusieurs miniatures, l'économie en bande passante en sera substantielle, et encore plus si vos images sont très grandes !

  • [*]Un peu de modestie avec la bannière : Inutile d'avoir un super-placard comme bannière pour votre site !  Des dimensions de 1000px par 130px doit être le maximum pour une bannière qui ne soit pas trop lourde ni trop grande.  Les "placards" sont inutilement lourdes en plus de gêner la navigation par le fait de soit obliger un scrolling horizontal par une largeur trop grande, ou soit scroller pour voir le contenu par une hauteur trop grande.

  • [*]Optimisez vos éléments graphiques qui se répètent : Si vous utilisez des dégradés qui se répètent verticalement ou horizontalement dans votre charte graphique, rien ne sert de les avoir à plusieurs centaines de pixels de longueur, puisque quelle que soit sa longueur, le raccord ne sera pas visible.  Réduisez-donc leur longueur au strict minimum, entre 1 et 10 pixels.  Vous sauverez en espace disque en faisant ça.



Si jamais vous n'êtes pas en mesure de pouvoir effectuer cette cure minceur vous-même par manque de compétence et de temps, vous pouvez faire appel à un webdesigner pour refaire votre site dans les règles de l'art.


Utiliser les services-tiers

Vous écrivez des tutos abondamment illustrées de captures ?  Vous voulez insérer une vidéo ou une animation Flash faite par vous-même ?  Vous voulez publier des fichiers qui n'ont aucun rapport à votre site ?

Afin d'éviter d'encombrer inutilement votre espace disque et de péter votre bande passante, optez pour l'hébergement-tiers pour vos fichiers.

En voici quelques uns :
  • [*] Photobucket : Hébergeur anglophone d'images et de vidéos.  L'inscription est obligatoire, mais vous pourrez retracer tous vos fichiers envoyés et les garder indéfiniment.  L'offre gratuite vous permet d'héberger jusqu'à 1 Go d'images, animations Flash et vidéos, ainsi qu'une bande passante mensuelle de 10 Go.  C'est d'ailleurs ce que j'utilise pour les captures de mes tutoriels que je publie sur mon site.  Par contre, il assombrit les PNGs sous Internet Explorer, donc je ne le recommande plus pour les éléments graphiques en PNG.  Le serveur semble très stable.

  • [*] Archive-Host : Hébergeur francophone de fichiers en tous genres.  L'inscription est obligatoire, mais vous pourrez retracer tous vos fichiers et les garder indéfiniment.  L'offre gratuite vous permet 150 Mo d'espace disque et aucun plafond pour la bande passante.  Les PNGs ne sont pas assombris sous Internet Explorer et j'y héberge donc les éléments graphiques de mes thèmes forumactif.  Le serveur semble très stable.


Pour ceux qui envoient rarement des images ou qui préfèrent l'hébergement anonyme, il en existe de nombreux, comme ImageShack, Tinypic et Casimages, mais il me sera dur d'en conseiller un parce que je ne les utilise plus.  Leurs points faibles sont la durée limitée de conservation des images hébergées, ainsi que la traçabilité plus difficile de ces images en cas de nécessité de les supprimer.


Protéger ses images contre le hotlink

Que vos images soient librement distribuables ou non, il existe malheureusement du monde qui ne prennent pas la peine de réhéberger les images prises à partir de votre site pour les poster sur un forum ou les intégrer dans une charte graphique.  Ceci s'appelle du vol de bande passante

Pour vous expliquer : Admettons qu'un internaute prend 500 Ko d'images de votre site sans les réhéberger pour les mettre sur son forum.  À chaque chargement de la page, cela fait donc 500 Ko d'envolés !  Alors si la page est chargée 10 fois, ça fait 5 Mo de bande passante, et si la page est chargée 100 fois, ça fait 50 Mo, soit le 5e de la bande passante allouée par l'offre gratuite !  Et si la page est chargée 500 fois au cours du mois, votre bande passante est pétée !

Afin de prévenir ce désagrément, il existe un moyen pour forcer les internautes à réhéberger les images : l'utilisation d'un fichier .htaccess !

Tout ce que vous avez besoin, c'est d'un éditeur de texte, donc le bloc-notes de Windows peut faire l'affaire si vous n'avez pas installé d'éditeur plus avancé comme Notepad++.

Créez donc un document vierge et collez-y ce code :
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://site1.servhome.org/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://site1.servhome.org$ [NC]
RewriteRule .*\.(jpg|jpeg|gif|png)$ http://monsite.servhome.org/hotlink.png [R,NC]


Vous remplacez les liens "site1.servhome.org" par un site que vous voulez autoriser à afficher les images.

Si vous voulez autoriser plusieurs sites, ajoutez un
RewriteCond %{HTTP_REFERER} !^http://site1.servhome.org/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://site2.servhome.org$ [NC]


avant la dernière ligne pour chaque site que vous voulez autoriser.

Ensuite, vous devez disposer d'une image de remplacement qui contiendra un message du genre "Hotlink interdit" ou "Arrête de siphonner ma bande passante !!".  Cette image devra être placée hors du répertoire à protéger, sinon elle ne s'affichera pas sur les sites non autorisés.  Indiquez ensuite le lien absolu de l'endroit où l'image sera placée, dans la dernière ligne du code

Afin de vous donner un exemple de .htaccess rempli, voici le contenu du mien :
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://ishimaru-design.servhome.org/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://ishimaru-design.servhome.org$ [NC]
RewriteCond %{HTTP_REFERER} !^http://ishimaru-portfolio.servhome.org/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://ishimaru-portfolio.servhome.org$ [NC]
RewriteCond %{HTTP_REFERER} !^http://testbatmat86.forumactif.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://testbatmat86.forumactif.com$ [NC]
RewriteCond %{HTTP_REFERER} !^http://youwontfindme.editboard.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://youwontfindme.editboard.com$ [NC]
RewriteRule .*\.(jpg|jpeg|gif|png)$ http://ishimaru-portfolio.servhome.org/fa/hotlink.png [R,NC]



Vous avez terminé ?  Si vous utilisez le bloc-notes de Windows, enregistrez sous le nom .htaccess en l'entourant de guillemets, ou bien enregistrez-le sous le nom htaccess.txt que vous pourrez renommer en .htaccess une fois le fichier envoyé.



Si vous avez d'autres suggestions d'astuces, n'hésitez pas à les soumettre pour qu'ils soient ajoutés au guide.
Ce message a été édité par Admin le 10/02/2010 à 05h24.

 >  Réponse rapide

Composez votre message

Forum de test > Forum de test > Groupe de sujets de test > [Guide] Économiser sa bande passante et son espace disque

 >  Informations du forum

1 personne(s) présente(s) durant une période de 10 minutes (0 membre(s) et 1 invité(s)).