Discussion :

[van___fanel]

Bonjour,

j'ai une application en ligne pour créer des textes, en choisissant la police, la couleur, la taille, etc.
J'utilise Cufon pour la gestion des polices. Et vu que j'ai une 20aine de police disponibles, j'ai une 20aine d'appels javascript de fichiers pesant entre 200k et 1.5Mo...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!-- SCRIPTS CUFON -->
<script language="javascript" type="text/javascript" src="common/tools/cufon_scripts/Arial_400-Arial_700-Arial_italic_400-Arial_italic_700.font.js"></script>
<script language="javascript" type="text/javascript" src="common/tools/cufon_scripts/Arial_Black_900.font.js"></script>
<script language="javascript" type="text/javascript" src="common/tools/cufon_scripts/Verdana_400.font.js"></script>
<script language="javascript" type="text/javascript" src="common/tools/cufon_scripts/Tahoma_400.font.js"></script>
<script language="javascript" type="text/javascript" src="common/tools/cufon_scripts/Benguiat_700.font.js"></script>
<script language="javascript" type="text/javascript" src="common/tools/cufon_scripts/Comic_Sans_MS_400-Comic_Sans_MS_700.font.js"></script>
<script language="javascript" type="text/javascript" src="common/tools/cufon_scripts/Copperplate_Gothic_Light_300.font.js"></script>
<script language="javascript" type="text/javascript" src="common/tools/cufon_scripts/Impact_400.font.js"></script>
 
<script language="javascript" type="text/javascript" src="common/tools/cufon_scripts/Lucida_Console_400.font.js"></script>
<script language="javascript" type="text/javascript" src="common/tools/cufon_scripts/Swis721_WGL4_BT_400.font.js"></script>
<script language="javascript" type="text/javascript" src="common/tools/cufon_scripts/Swis721_Blk_BT_italic_400.font.js"></script>
<script language="javascript" type="text/javascript" src="common/tools/cufon_scripts/Baskerville_BT_700.font.js"></script>
<script language="javascript" type="text/javascript" src="common/tools/cufon_scripts/GothicNo13_BT_400.font.js"></script>
<script language="javascript" type="text/javascript" src="common/tools/cufon_scripts/Dutch823_BT_700.font.js"></script>
<script language="javascript" type="text/javascript" src="common/tools/cufon_scripts/Clarendon_Lt_BT_400.font.js"></script>
<script language="javascript" type="text/javascript" src="common/tools/cufon_scripts/Aldine401_BT_italic_700.font.js"></script>
<script language="javascript" type="text/javascript" src="common/tools/cufon_scripts/GeoSlab703_Md_BT_italic_400.font.js"></script>
 
<script language="javascript" type="text/javascript" src="common/tools/cufon_scripts/Clarendon_Hv_BT_400.font.js"></script>
<script language="javascript" type="text/javascript" src="common/tools/cufon_scripts/Swiss921_BT_400.font.js"></script>
<script language="javascript" type="text/javascript" src="common/tools/cufon_scripts/Cooper_Lt_BT_700.font.js"></script>
<script language="javascript" type="text/javascript" src="common/tools/cufon_scripts/Staccato222_BT_italic_400.font.js"></script>
<script language="javascript" type="text/javascript" src="common/tools/cufon_scripts/Lapidary333_BT_700.font.js"></script>
<script language="javascript" type="text/javascript" src="common/tools/cufon_scripts/VAGRounded_BT_400.font.js"></script>
<script language="javascript" type="text/javascript" src="common/tools/cufon_scripts/English157_BT_italic_400.font.js"></script>
<script language="javascript" type="text/javascript" src="common/tools/cufon_scripts/Flareserif821_Lt_BT_700.font.js"></script>
<script language="javascript" type="text/javascript" src="common/tools/cufon_scripts/Brush455_BT_italic_400.font.js"></script>
 
<script language="javascript" type="text/javascript" src="common/tools/cufon_scripts/Gothic720_BT_700.font.js"></script>
<script language="javascript" type="text/javascript" src="common/tools/cufon_scripts/MattAntique_BT_italic_400.font.js"></script>
<script language="javascript" type="text/javascript" src="common/tools/cufon_scripts/DeVinne_Txt_BT_400.font.js"></script>
<script language="javascript" type="text/javascript" src="common/tools/cufon_scripts/EngrvOs205_Blk_BT_italic_400.font.js"></script>
<script language="javascript" type="text/javascript" src="common/tools/cufon_scripts/Century751_No2_BT_700.font.js"></script>
<script language="javascript" type="text/javascript" src="common/tools/cufon_scripts/Chervonec_Uzkj_BT_italic_700.font.js"></script>
<!-- SCRIPTS CUFON END -->

le tout pèse en gros 8Mo.. En local, je mets 3 secondes à charger l'application. Et une fois sur serveur distant, il faut plus de 10 secondes..

Quelle est la meilleure solution pour optimiser tout ça ?

- Utiliser une barre de chargement le temps que tout soit chargé ?
- Mettre les fichiers javascript en cache, pour ne les charger une bonne fois pour toute ?
- Un moyen pour les charger une fois que l'application est affichée ? (du coup le chargement des fichiers JS serait transparent pour l'utilisateur)
- Autre ?

[marcha]

Salut,

Si tes fichiers javascript ne changent pas, un bonne idée est de forcer
le navigateur à les mettre en cache.

ceci sera géré de manière simple avec html5 et le fichier manifest

pour l'heure, contente toi de fixer les headers HTTP appropriés pour
la gestion du cache.

Regarde aussi les outils de compression du code javascript (
cherche: js minifier, js compressor) ou alors regarde si cufon
ne fourni pas déjà des version compressées.

Une autre piste est de charger les polices que tu utilise à la demande.