mozilla

Comparaison de révisions

Astuces de création de pages HTML à affichage rapide

Change Revisions

Révision 267226 :

Révision 267226 par Shz le

Révision 267227 :

Révision 267227 par shgz le

Titre :
Astuces de création de pages HTML à affichage rapide
Astuces de création de pages HTML à affichage rapide
Identifiant d'URL :
Astuces_de_création_de_pages_HTML_à_affichage_rapide
Astuces_de_création_de_pages_HTML_à_affichage_rapide
Étiquettes :
HTML, "HTML lent"
HTML, "HTML lent"
Contenu :

Revision 267226
Revision 267227
n9      &nbsp;<br>n9      C'est connu, les internautes sont de grands impatients, ils
 > veulent des résultats immédiats, avec des gros titres et des rép
 >onses courtes et efficaces.&nbsp;<br>
10      Découvrez des bons conseils pour créer des pages HTML qui s10      Une page web optimisé prévoit non seulement un site plus ré
>e chargent rapidement et plus agréable pour l'utilisateur. Ces co>actif, mais aussi de réduire la charge sur vos serveurs Web et vo
>nseils sont basés sur le savoir-faire et l'expérience. Si vous av>tre connexion Internet. Cela peut être crucial pour les gros site
>ez des iddées supplémentaires pour aider les autres à améliorer l>s ou des sites qui ont un pic de trafic dans des circonstances ex
>es performances de chargement de leurs pages web, merci de faire >ceptionnelles (telles que les Unes des journaux fracassantes). De
>vos suggestions à la page de <a href="/Template:ListeDeDiscussion> plus, Google en tient compte pour son classement.<br>
>" title="Template:ListeDeDiscussion">discussion de cet article</a 
>>.<br> 
11      <br>
12      Une page web optimisé prévoit non seulement un site plus ré
>actif pour vos visiteurs, mais aussi de réduire la charge sur vos 
> serveurs Web et votre connexion Internet. Cela peut être crucial 
> pour les sites à volume élevé ou des sites qui ont un pic de tra 
>fic dans des circonstances exceptionnelles telles que les Unes de 
>s journaux fracassantes.<br> 
13      <br>
14      L'optimisation du chargement des pages n'est pas utilise qu
>e pour contenu qui sera perçu par les visiteurs avec un modem 56k 
>/s. Il est tout aussi important pour le contenu à large bande et  
>peut conduire à des améliorations spectaculaires, même pour les v 
>isiteurs avec les connexions les plus rapides. 
n20      <br>n
21      <br>
22      Le poid de la page est de loin le facteur le plus important16      Le poid de la page est de loin le facteur le plus important
> dans les performances de chargement de votre page. Pour améliore> dans les performances de chargement de votre page. Pour les amél
>r les performances de téléchargement de page, on peut procéder de>iorer, on peut procéder de diverses manières:
> diverses manières:<br> 
23      -Eliminer les espaces et les commentaires inutile,<br>
24      -Déplacer le script intégré (ou "inline scripts") et le cod
>e CSS dans des fichiers externes.<br> 
25      <br>
26      Des outils tels que <a class=" external" href="http://tidy.
>sourceforge.net/" title="http://tidy.sourceforge.net/">HTML Tidy< 
>/a> peuvent automatiquement enlever les espaces de trop et les li 
>gnes vides à partir d'une source HTML valide. D'autres outils peu 
>vent "compresser" JavaScript comme le libre <a class=" external"  
>href="http://yuilibrary.com/projects/yuicompressor/" title="http: 
>//yuilibrary.com/projects/yuicompressor/">YUIcompressor</a>. 
nn18    <ul>
19      <li>Eliminer les espaces et les commentaires inutile.
20      </li>
21      <li>
22        <div>
23          Déplacer le script intégré (ou "inline scripts") et le 
 >code CSS dans des fichiers externes (un pour javascript, un pour 
 >ccs,...).&nbsp;Des outils tels que <a class=" external" href="htt
 >p://tidy.sourceforge.net/" title="http://tidy.sourceforge.net/">H
 >TML Tidy</a> peuvent automatiquement enlever les espaces de trop 
 >et les lignes vides à partir d'une source HTML valide. D'autres o
 >utils peuvent "compresser" JavaScript comme le libre <a class=" e
 >xternal" href="http://yuilibrary.com/projects/yuicompressor/" tit
 >le="http://yuilibrary.com/projects/yuicompressor/">YUIcompressor<
 >/a>.
24        </div>
25      </li>
26      <li>
27        <div>
28          Verifiez que votre site ne contient pas de code inutile
 > ou de tags superflus.&nbsp;
29        </div>
30      </li>
31    </ul>
32    <div>
33      Téléchargez le html d'abords, puis le CSS et le JavaScript 
 >nécessaires à son affichage, de sorte que l'utilisateur obtienne 
 >rapidement une réponse apparente au cours du chargement de la pag
 >et. Ce contenu est généralement du texte, et peuvent donc bénéfic
 >ier de la compression de texte dans le modem, fournissant ainsi u
 >ne réponse encore plus rapide à l'utilisateur.
34    </div>
35    <p>
36      &nbsp;
37    </p>&lt;meta http-equiv="content-type" content="text/html; ch
 >arset=utf-8"/&gt;
n32      <br>n
33      <br>
34      Réduire le nombre de fichiers référencés dans une page web 42      Réduire le nombre de fichiers référencés dans une page web 
>diminue le nombre de connexions <a href="/en/HTTP" title="https:/>diminue le nombre de connexions <a href="/en/HTTP" title="https:/
>/developer.mozilla.org/en/HTTP">HTTP</a> nécessaire pour téléchar>/developer.mozilla.org/en/HTTP">HTTP</a> nécessaire pour téléchar
>ger une page.<br>>ger une page.
35      <br>
36      En fonction des paramètres du cache du navigateur, celui ci
> peut envoyer une demande "If-Modified-Since" au serveur web pour 
> chaque CSS, JavaScript ou fichier image, demandant si le fichier 
> a été modifié depuis la dernière fois qu'il a été téléchargé.<br 
>> 
37      <br>
38      En réduisant le nombre de fichiers qui sont référencés dans
> une page Web, vous réduisez le temps nécessaire de l'envoi de ce 
>s demandes, et de leurs réponses à recevoir.<br> 
39      <br>
40      Trop de temps passé interrogeant le temps de dernière modif
>ication des fichiers référencés peut retarder l'affichage initial 
> d'une page web. En effet, le navigateur doit vérifier la date de 
> modification pour chaque fichier CSS ou JavaScript, avant de ren 
>dre la page. 
nn44    <ul>
45      <li>Utilisez le moins d'images possible sur votre site (et 
 >de gif animés ofc). Preferez des <a class=" external" href="http:
 >//css-tricks.com/examples/ButtonMaker/" title="http://css-tricks.
 >com/examples/ButtonMaker/">boutons graphiques en css</a>.
46      </li>
47      <li>Compressez vos images (éviter les .png). Vous pouvez po
 >ur cela utiliser <a class=" external" href="http://www.gimp.org/"
 > title="http://www.gimp.org/">Gimp</a> ou <a class=" external" hr
 >ef="http://www.imagemagick.org/script/index.php" title="http://ww
 >w.imagemagick.org/script/index.php">Imagemagik</a>.
48      </li>
49      <li>Preferez le css ou le javascript au flash:&nbsp;il rale
 >nti le navigateur.
50      </li>
51    </ul>
52    <p>
53      Les videos sont diffusées progressivement depuis le serveur
 >, elles ne ralentisseent donc pas le chargement de votre page.
54    </p>
55    <p>
56      &nbsp;
57    </p>&lt;meta http-equiv="content-type" content="text/html; ch
 >arset=utf-8"/&gt;
n46      <br>n
47      <br>
48      Étant donné que chaque requete DNS demande du temps, le tem62      Étant donné que chaque requete DNS demande du temps, le tem
>ps de chargement de la page va augmenter avec l'augmentation du n>ps de chargement de la page va augmenter avec l'augmentation du n
>ombre de domaines séparés figurant dans le lien CSS et JavaScript>ombre de domaines séparés figurant dans le lien CSS, JavaScript e
> et image src.<br>>t image (src). Vous devez toujours prendre soin de n'utiliser que
 > le nombre minimum nécessaire de différents domaines dans vos pag
 >es.
49      <br>
50      Ce n'est pas toujours pratique, mais vous devez toujours pr
>endre soin de n'utiliser que le nombre minimum nécessaire de diff 
>érents domaines dans vos pages. 
51    </p>
52    <p>
53      &nbsp;
n59      <br>n
60      <br>
n62      <br>n
63      En particulier, attention à l'en-tête "Last-Modified". Elle69      En particulier, attention à l'en-tête "Last-Modified". Elle
> permet la mise en cache la page; grâce à cette en-tête, l'inform> permet la mise en cache de la page; grâce à cette en-tête, l'inf
>ation est transmise au navigateur (ou "user agent") sur le fichie>ormation est transmise au navigateur (ou "user agent") sur le fic
>r qu'il veut charger, comme lors de sa dernière modification. La >hier qu'il veut charger, comme lors de sa dernière modification. 
>plupart des serveurs web ajoute automatiquement l'en-tête "Last-M>La plupart des serveurs web ajoute automatiquement l'en-tête "Las
>odified" aux pages statiques (par exemple. html,. css), basé sur >t-Modified" aux pages statiques (par exemple. html,. css), basé s
>la date de la dernière modification stockées dans le système de f>ur la date de la dernière modification stockées dans le système d
>ichiers. Avec des pages dynamiques (p. ex. Php,. Aspx), ceci, bie>e fichiers. Avec des pages dynamiques (p. ex. Php,. Aspx), ceci, 
>n sûr, ne peut pas être fait, et l'en-tête n'est pas envoyé.<br>>bien sûr, ne peut pas être fait, et l'en-tête n'est pas envoyé.<b
 >r>
64      <br>
n74      L'ordre optimal des composants d'une pagen
75    </h3>
76    <p>
77      <br>
78      <br>
79      Télécharger le contenu d'une page pour la première fois, ai
>nsi que tous les CSS ou JavaScript qui peuvent être nécessaires à 
> son affichage initial, de sorte que l'utilisateur obtienne rapid 
>ement une réponse apparente au cours de la page de chargement. Ce 
> contenu est généralement du texte, et peuvent donc bénéficier de 
> la compression de texte dans le modem, fournissant ainsi une rép 
>onse encore plus rapide à l'utilisateur.<br> 
80      <br>
81      Tous les dispositifs de DHTML qui exigent la fin du chargem
>ent de la page avant d'être utilisés, doivent être initialement d 
>ésactivé, et permis seulement après le chargement de la page. Cel 
>a entraînera le DHTML JavaScript d'être chargé après le contenu d 
>e la page, ce qui permettra d'améliorer l'apparence générale du c 
>hargement de la page. 
82    </p>
83    <h3>
n87      <br>n
88      <br>
89      Les scripts intégrés peut être coûteux pour le chargement d82      Les scripts intégrés peut être coûteux pour le chargement d
>e la page, puisque l'analiseur (ou parser) doit supposer qu'un sc>e la page, puisque l'analiseur (ou parser) doit supposer qu'un sc
>ript intégré pourrait modifier la structure de la page quand le ">ript intégré pourrait modifier la structure de la page quand le "
>parsing" est en cours. Il est donc préférable, en général, de réd>parsing" est en cours. Il est donc préférable, en général, de réd
>uire l'utilisation des scripts intégrés et l'utilisation de docum>uire l'utilisation des scripts intégrés et l'utilisation de docum
>ent.write () , en particulier au contenu de sortie. Ces manipulat>ent.write(), en particulier au contenu de sortie. Ces manipulatio
>ions peuvent améliorer chargement globale de la page. Utilisez de>ns peuvent améliorer chargement globale de la page. Utilisez des 
>s méthodes modernes de W3C-DOM pour manipuler le contenu de la pa>méthodes modernes de W3C-DOM pour manipuler le contenu de la page
>ge pour les navigateurs modernes, plutôt que des approches plus f> pour les navigateurs modernes, plutôt que des approches plus fon
>ondées sur document.write ().>dées sur document.write ().
n98      <br>n91      Utiliser des balises valides a d'autres avantages. Tout d'a
 >bord, les navigateurs n'ont pas besoin d'effectuer de corrections
 > d'erreurs lors de l'analyse du code HTML.<br>
99      Utiliser des balises valides a d'autres avantages. Tout d'a92      En outre, la validité du balisage permet la libre utilisati
>bord, les navigateurs n'ont pas besoin d'effectuer de corrections>on d'autres outils qui peuvent pré-traiter vos pages web. Par exe
> d'erreurs lors de l'analyse du code HTML. ((Ceci est en dehors d>mple, <a class=" external" href="http://tidy.sourceforge.net/" ti
>e la question philosophique de savoir s'il faut permettre une var>tle="http://tidy.sourceforge.net/">HTML Tidy</a>&nbsp;&nbsp;peut 
>iation dans le format d'entrée de l'utilisateur donc corriger par>supprimer des espaces blancs et des balises facultatives, mais il
> le programme, ou la normaliser; ou si, au contraire, appliquer u> refusera de s'exécuter sur une page avec des erreurs de balisage
>n strict et sans tolérance format d'entrée)).<br>> graves.
100      <br>
101      En outre, la validité du balisage permet la libre utilisati
>on d'autres outils qui peuvent pré-traiter vos pages web. Par exe 
>mple, HTML Tidy (<a class=" external" href="http://tidy.sourcefor 
>ge.net/" rel="freelink">http://tidy.sourceforge.net/</a>) peut su 
>pprimer des espaces blancs et des balises facultatives, mais il r 
>efusera de s'exécuter sur une page avec des erreurs de balisage g 
>raves. 
n107      <br>n
108      <br>
n130      Préciser les tailles d'images et de tableauxn119      Préciser la taille des images et des tableaux
n133      <br>n
134      <br>
n150      <br>n
n153      Idéalement, vous devriez vous concentrez sur l'examen des nn139      Idéalement, vous devriez vous concentrez sur l'examen des n
>avigateurs modernes qui prennent en charge des normes pertinentes>avigateurs modernes qui prennent en charge des normes pertinentes
>. Il peut s'agir de: Firefox 3.6, Internet Explorer 8 sur Windows>. Il peut s'agir de: Firefox 5, Internet Explorer 9 sur Windows, 
>, Opera 11 sous Windows et Safari 7 sur Mac OS X.<br>>Opera 11 sous Windows et Safari 5 sur Mac OS X.<br>
n155      Notez, cependant, que beaucoup de conseils énumérés dans cen141      Notez, cependant, que beaucoup de conseils énumérés dans ce
>tte TechNote sont des techniques de bon sens qui s'applique à tou>tte page sont des techniques de bon sens qui s'applique à tous, e
>t agent utilisateur, et peut être appliquée à n'importe quelle pa>t peuvent être appliquées à n'importe quelle page web, indépendam
>ge web, indépendamment des exigences relatives à l'aide des navig>ment des exigences relatives des navigateurs.
>ateurs. 
156    </p>
157    <h3>
158      Exemple de la structure d'une page
159    </h3>
160    <p>
161      · HTML<br>
162      <br>
163      · HEAD<br>
164      <br>
165      · LINK...<br>
166      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Les fichie
>rs CSS sont nécessaires à l'apparence de la page. Réduisez le nom 
>bre de fichiers pour de meilleures performances tout en gardant l 
>e CSS dans des fichiers séparés pour l'entretien.<br> 
167      <br>
168      · SCRIPT ...<br>
169      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Les fichiers Jav
>aScript pour les fonctions requises pendant le chargement de la p 
>age.<br> 
170      <br>
171      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Réduisez le nomb
>re de fichiers pour de meilleures performances tout en gardant le 
> JavaScript dans des fichiers séparés pour l'entretien.<br> 
172      <br>
173      · BODY<br>
174      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Mode contenu de la pag
>e visible en petits morceaux (tables / div) qui peuvent être affi 
>chés sans attendre le téléchargement de la pleine page.<br> 
175      <br>
176      ·SCRIPT ...<br>
177      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Il n'est pas néc
>essaire de charger ces scripts avant le contenu de la page. Cela  
>ne fait que ralentir la comparution initiale de chargement de la  
>page.<br> 
178      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Réduisez le nomb
>re de fichiers pour des performances tout en gardant le JavaScrip 
>t dans des fichiers séparés pour l'entretien.<br> 
179      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Si des images so
>nt utilisés pour des effets de survol, vous devez les précharger  
>ici après le contenu de la page est téléchargée. 
t186      <br>t148      &nbsp;&nbsp; &nbsp;* <a class=" external" href="http://www.
 >alsacreations.com/astuce/lire/527-optimisez-vos-pages-avec-yslow.
 >html" title="http://www.alsacreations.com/astuce/lire/527-optimis
 >ez-vos-pages-avec-yslow.html">Optimisez vos pages avec Yslow</a><
 >br>

Retour à l'historique