450 332-1693
info@marcantoinecarrier.net
Facebook  Linkedin  Twitter 
Ouvrir le menu

Techniques d'optimisation 101

Salut à tous.

Suite à une discussion avec Robert Limoge (un ancien collègue), on m’a demandé d’écrire un petit article sur l’optimisation de site et des images à partir d’une maquette produite en Photoshop. Pourquoi me demanderez-vous? Et bien, il est vrai que les connections internet haute vitesse (64Kb/sec et plus) connaissent une forte croissance en Amérique du nord (7 388 879 d’usagers au Canada et aux États-Unis réunis). Ce chiffre semble important mais, pourtant, ça ne représente qu’environ 22% de la population branchée. Ce qui veut dire que 78% des usagers d’internet utilise toujours la bonne vieille connexion modem 56k et, malheureusement, les développeurs ont tendance à les oublier. C’est surtout pour eux qu’il est important d’optimiser nos sites si nous désirons en assurer le succès.

Le succès d’un site web consiste à conserver un visiteur le plus longtemps possible sur ce même site. Si le chargement d’une page prend plus de 30 secondes, il y a de fortes chances pour que l’on perde ce visiteur et qu’il ne revienne jamais. Ce fait est d’autant plus vrai pour les gens qui possèdent des connexions lentes.

Alors voilà quelques astuces que je met en pratique autant que possible, lorsque vient le temps de découper mes images, pour alléger mon intégration :

1) Diminuer la quantité d’images sur une même page et réduire au minimum le poids des documents;

Quand vient le temps de découper une maquette, j’essaie de conserver à l’esprit nos pauvres internautes habitant les coins les plus reculés et où la haute vitesse ne se rend pas encore. Pour ça, j’essaie de mettre en pratique une règle personnelle, celle des 40k : Le poids total des images sur une seule et même page ne doit pas dépasser 40Kb. Sur un modem 56Kb, ca prendra environ 10 à 15 secondes pour les télécharger. Pour ce faire, j’optimise mes documents avec Photoshop. Le secret : le meilleur compromis entre conserver une image nette et un poids décent.

2) Du texte doit rester du texte;

Supposons que nous ayons le titre suivant :

Techniques d’intégration 101

Transformé en JPG 271×19 px à 100% de qualité, cette image fait à elle seule 10Kb. Supposons 3 titres semblables dans la même page, nous en sommes déjà à 30Kb. Le même titre en format texte ne fait que 28 bites! En d’autres mots, du texte, ça ne pèse rien. Vous pourrez ajouter à votre site une page entière d’information pertinente avant d’arriver au poids d’une seule image.

« Oui, mais le designer veut une police de caractère qui n’est pas standard ou qui possède un dégradé. » Je sais que ça n’est pas toujours évidant de dévier des artistes de leur vision d’ensemble mais, généralement, ils sont en mesure de comprendre et d’en venir à un compromis. Suggérez-lui d’utiliser l’une des polices trouvées ici : http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Dans le cas d’un esprit réticent, offrez-lui l’argument suivant : le texte compris dans une image n’est nullement référençable. Il aura un beau site mais personne ne le visitera car les principaux titres sont des images et les engins de recherche ne pourront pas les saisir.


Un commentaire à propos de “Techniques d’optimisation 101

  1. Marc-Antoine Carrier le :

    Suivant cet article, certaines techniques sont maintenant disponibles, entre-autre l’inclusion de polices de caractères au site, plus connu sous le nom Font-Face.

    Vous pouvez consulter les sites http://www.google.com/fonts et http://www.fontsquirrel.com/ pour en apprendre plus. Il n’en reste pas moins qu’il faut être prudent lors de l’ajout de Font-face puisqu’il peut en résulter une baisse notable de performance d’un site.

WordPress » Erreur

Il y a eu une erreur critique sur ce site.

En apprendre plus sur le débogage de WordPress.