|
Pages longue à charger = Visiteur qui se barre
!
|
Je vais vous faire part de mes
réflexions concernant le poids des pages, la taille des dossiers
html, ainsi que des largeurs de bande et vitesse utilisées.
J’espère que cette réflexion vous aidera en gain de temps de
chargement et en utilisation optimale de largeur de bande pour
une meilleur organisation de votre site. Voila donc quelques
astuces qui vous permettront de rétrécir la taille de vos fichiers
html.
LARGEUR DE BANDE
Vous ne devez pas vous dire que la taille d’un fichier html
n est pas d’une importance capital. Disons que vous avez une
page principal contenant des liens avec 20 pages différentes,
vous avez aussi 25 images sur la page, un script de rotation
et un script compteur. Votre page est donc sensé avoir un poids
conséquent. Voici quelques conseils : Considérons un fichier
html de 40k. Votre page reçoit un roulement de 200 visiteurs
par jours. Le chargement du fichier par les 200 visiteurs prendra
8 méga de largeur de bande par jour.
Maintenant prenez ce nombre et multipliez le par 30 (1 mois).
BOOM. Vous avez utilisé 240 méga de largeur de bande pour une
seule page. Maintenant considérons chacune de vos pages ayant
à peu près la même taille, avec un total de 10 pages. 10x240
méga=2.4 gig de largeur de bande utilisé. Chez certains serveurs
cela représente la limite pour obtenir une largeur de bande
gratuite mais comme il n'y a rien de gratuit dans la vie.
Et nous n’avons toujours pas inclus les images. La comparaison
est claire avec un document html qui ne pèse plus que 10k de
taille par fichier. 10x200 pages par jours x 30 jours = 60méga
par mois. Beaucoup moins de temps de chargement par page. 240
méga x 10 pages = 1.4 giga versus 60 méga x 10 pages = 600 méga.
P.S. Utilisation de largeur de bande fortement amoindrie pour
cet exemple.
NOMS DES IMAGES
Quand vous créez une image, essayez de lui trouver le nom le
plus bref qui soit. Imaginons que vous avez une super interface
sur votre site et que 25 images différentes composent cette
petite interface ; si les noms sont longs, la taille du fichier
sera plus élevée. Disons que chaque image est nommée menutop_a.gif,
menumiddle_a.gif, menubottom_a.gif, etc. Essayez ceci :
Pour les images du haut : mla.gif,mlb.gif,mlc.gif Etc.
Pour les images du milieu : m2a.gif,m2b.gif,m2c.gif Etc.
Pour les images du bas : m3a.gif,m3b.gif,m3c.gif Etc.
1-3 défini le rang dans lequel se trouve la photo : (1) en haut,
(2) au milieu, (3) en bas ;)
alors qu’a-c définie la colonne dans laquelle se trouve la photo.
Si nous avons, par exemple, 25 images : en enlevant 5 lettres
par noms de fichier, on sauve 200 octets.
Pour les noms d’images, je vous conseille de procéder comme
ceci :
Header.gif = H.gif, head.gif,
hd.gif
Background.gif = bg.gif
Banner01.gif = ban01.gif
Spacer.gif = sp.gif
La taille de vos fichiers est très importante.
C'est un exemple de mots anglais mais vous comprenez mon
point !?!
VITESSE
Plus vos fichiers html sont petits, plus la commande d’exécution
sera rapide, ce qui bien évidement augmente considérablement
la vitesse de chargement du contenu de la page. J'ai traité
des documents html de 100k et c’est très lent comparé
à des fichiers de 10 a 20k. Le fait est que la plupart
de vos visiteurs n’attendront pas après des temps de chargement
qui n’en finissent plus.
La vitesse est moins importante si vos utilisateurs sont
sous DSL, TI ou modem câble. Dans ce cas, tous vos fichiers
html se chargeront de façon instantanée. Mais pour ceux
qui marchent sous modem 28k, 33k ou même 56k et il y en
a encore beaucoup, la vitesse de chargement est alors
à considérer.
LIENS & COMMENTAIRES
Un ajustement sur les caractères URL des liens peut aussi
vous aider à économiser la taille de vos fichiers. Par
exemple : "http://www.tonsite.com /images/hard/index.html"
est un URL absolu qui contient le nom du serveur.
On peut aussi le faire avec un URL relatif : "images/hard/index.html"
qui renvoie à la base du serveur et inclue toutes les
directives. Si vous avez 20 hyperliens sur votre page
et que vous réduisez l’url : vous économisez alors 500
octets ;)
Plus c’est court, mieux c’est. C'est ce qui s'adapte ici
! Mais faites attention car bien que le diminutif soit
plus plaisant, il est toujours positif d’inclure des commentaires.
Il n’y a rien de plus pénible que de devoir retourner
éditer un fichier html sans savoir qui est quoi, alors
mieux vaut utiliser des commentaires comme : [!-- Top
navigation --] |
 |
ATTRIBUTS
Il arrive des fois qu’un alt ne soit pas nécessaire pour une
balise donnée. Considérons le fait d’insérer une image dans
une page sans que cette image ne constitue un lien. Exemple
: IMG SRC = "emma.jpg" HAUTEUR = 150 Largeur = 100 BORDURE =
0 ALIGN = gauche ALT = "Emma Thompson" BORDURE = 0 n’est pas
nécessaire parce qu'il n'y a pas de lien donc pas de bordure.
Dans la plupart des cas ALT = n’est pas nécessaire non plus.
Autres astuces pour réduire les fichiers html.
Utilisez [B] au lieu de [STRONG] pour créer un caractère gras.
Utilisez [I] au lieu de [EM] pour créer un italique.
Utilisez [CENTER] au lieu de [DIV ALIGN=CENTER] pour centrer
un élément.
Utilisez [BIG] au lieu de [FONT SIZE= "+1"] pour augmenter le
texte d’un cran.
Utilisez [SMALL] au lieu de [FONT SIZE= "-1"] pour réduire le
texte d’un cran.
Utilisez [TT] au lieu de [CODE] ou [SAMP] pour mettre le texte
en non proportionnel at ainsi de suite ....
Des petites choses comme ca qui nous aide à couper la bande
passante
et alléger le temps de chargement ainsi que la facture de bande
passante à la fin du mois.
Moins de factures à payer = Plus d'$$ dans vos poches ! |
|
|
Article réalisé en
collaboration avec Pdp²
Nous avons le savoir-faire,
à vous de le faire savoir !
Confiez votre trafic à une équipe expérimentée,
souvent imitée mais jamais égalée
:)
|
|
|
|
Articles 
