Optimisation d'une page Web
par Warren Baker, traduit par La rédaction
Nous souhaitons tous avoir le site internet le plus attrayant, laissant le visiteur stupéfait. Habituellement, une conception extrêmement attrayante implique un bon nombre d'éléments graphiques, augmentant ainsi la taille globale du document, se traduisant par un chargement très lent dans les navigateurs. Cet article a pour but de vous conseiller sur la façon de concevoir une page attayante tout en optimisant son affichage.
Depuis l'arrivée de l'ADSL (entre autres), de plus en plus de webmasters se permettent de concevoir des pages complexes, chargées d'éléments graphiques lourds, pensant à tort que de toutes façons la majorité des internautes sont équipés en haut débit. Dans certains cas extrêmes, on peut trouver des sites web qui prennent plusieurs minutes à télécharger leur contenu dans votre navigateur.
N'oubliez jamais qu'un internaute n'attendra pas plus de 30 secondes en moyenne qu'une page s'affiche. Il passera alors au site suivant de ses résultats de recherche.
Alors pourquoi les webmasters persévèrent-ils dans cette voie ? Principalement en raison d'une méconnaissance des techniques simples d'optimisation graphique qui leur permettraient de concevoir un site internet attrayant tout en optimisant son affichage. Combien d'entre eux savent que l'on peut créer une boîte avec des coins arrondis simplement en utilisant du code CSS (feuilles de style). On peut traiter les erreurs les plus communes avec des solutions simples.
Concevez entièrement votre page dans PHOTOSHOP. Quand la réalisation est terminée et que vous êtes prêt à découper le document en petites images, c'est là que votre créativité se révèle car c'est à ce stade que vous affecterez toute la taille de la page web finale.
Le découpage efficace
- Ne faites pas de larges tranches qui contiennent un grand nombre de couleurs. Employez un nombre restreint de tranches où chacune d'elles contient un nombre limité de couleurs.
- Ne faites pas un grande tranche qui contient la même structure graphique. Découpez-la en petites portions et dupliquez-les dans votre code. C'est une erreur très commune que les concepteurs font en traitant les dégradés de couleurs.
- N'employez pas le format d'image JPEG sytématiquement. Dans certains cas, un format GIF sera nettement plus adéquat. Le principe de base est simple : une tranche avec un grand nombre de couleurs aura une taille plus petite en utilisant le format JPEG plutôt que GIF. L'inverse est également vrai. Vérifiez chaque option séparément. Chaque 1KB que vous réduisez aura une influence significative sur le poids total de votre page.
- Si votre texte est sur un fond de couleur pleine, ne découpez pas, vous pourrez gérer cela directement dans votre logiciel de conception de pages web. Employez le code pour générer le fond
Rappelez-vous que vous pouvez définir le modèle de police et la couleur du fond d'un secteur (entre autres) en utilisant le CSS.
Finalement, l'optimisation graphique d'un site internet est davantage une question d'optimisation intelligente d'images. Il y a quelques techniques avancées qui exigent un niveau élevé de programmation. Le CSS2 a beaucoup plus à offrir que le CSS. Bien que tous les navigateurs n'aient pas adoptés cette norme, vous devriez être prêts pour cette échéance lorsqu'elle se présentera. Le JavaScript vous donne également un ensemble d'options pour créer quelques effets originaux sans devoir surcharger votre page avec du FLASH. Mais il reste un outil limité comparé à une application avançée comme le Flash pour créer des effets visuels. Mais pensez avant tout aux résultats. Pour l'effort fourni grâce à ces quelques conseils, vous pourrez vous différencier des autres sites internet. Vous aurez un site professionnel attrayant tout en conservant un téléchargement de contenu rapide.
Gardez à l'esprit que la technologie avance et que déjà, aujourd'hui, on peut avoir accès à des sites internet sur son PDA, téléphone portable ou son mini -ordinateur portatif. Seuls ceux qui s'affichent extrêmement rapidement sont pris en charge.