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...
<!-- 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 ?
