Compression de Javascript, bande passante

Version imprimable

02/12/2009, 08h39
coolfarmer

Compression de Javascript, bande passante

Bonjour bonjour !

Je vais bientôt sortir un prochain site web, mais j'ai quelques problèmes en ce qui concerne la poid Javascript de la page !

J'utilise 2 gros frameworks, soit script aculous et prototype, et quelques autres petites qui apportes des petites fonctions bien utile, au total c'est quand même 353 KO de javascript à télécharger par le navigateur.

Bien-sûre, le javascript compresser à l'aide des outils disponible diminue fortement ce chiffre mais cela apporte un très gros désavantage, en effet on réussi à sauver de la bande passante en compressant le javascript, mais c'est du temps de perdu concernant l'exécution et l'affichage de la page !

En effet, lorsque le javascript est compressé, une fonction eval() est utilisé et empêche l'exécution et l'affichage de la page tant que le javascript n'est pas totalement téléchargé du côté client.

Alors la je suis dans la mer** ! :mouarf:

Si je compresses le javascript, je sauve de la bande passante mais la page en moyenne de 5 à 8 secondes environ pour s'afficher, bien-sûre seulement quand la page n'est pas en cache dans le navigateur, dans le cas contraire 1 à 2 secondes suffisent.

J'ai entendu parler de la compression GZIP, mais qu'un 15% de la population de supportait pas cette technique ...

Alors je suis dans une impasse ! :calim2:

Je suis à la recherche de solution ou de conseils, si vous seriez prêt à m'offrir de vôtre je serais content !

Merci d'avance,
Coolfarmer
02/12/2009, 09h21
gwyohm

Citation:

Envoyé par coolfarmer

J'utilise 2 gros frameworks, soit script aculous et prototype, et quelques autres petites qui apportes des petites fonctions bien utile, au total c'est quand même 353 KO de javascript à télécharger par le navigateur.

Tu as besoin de tout scriptaculous ? tu as vu que tu pouvais limiter les scripts embarqués (scriptaculous.js?load=effects)

Citation:

Envoyé par coolfarmer

En effet, lorsque le javascript est compressé, une fonction eval() est utilisé et empêche l'exécution et l'affichage de la page tant que le javascript n'est pas totalement téléchargé du côté client.

Ca je ne comprend pas ; la compression javascript ne consiste pas simplement à enlever les commentaires, les espaces inutiles et renommer les variables privées (et donc non exposées aux appels) ?
02/12/2009, 10h18
E.Bzz

Bonjour,

Citation:

Envoyé par gwyohm

Ca je ne comprend pas ; la compression javascript ne consiste pas simplement à enlever les commentaires, les espaces inutiles et renommer les variables privées (et donc non exposées aux appels) ?

+1

@coolfarmer > As-tu essayé plusieurs compresseurs différents pour comparer ?

Si le tien implique l'utilisation d'eval(), c'est très mauvaise signe .... :aie:
(normalement, il ne doit y avoir aucun impact sur l'utilisation du script)

A+
02/12/2009, 11h39
madevilts

C'est lourd certes mais il ne sera chargé que la première fois puis ensuite en cache non?
02/12/2009, 14h17
Bovino

Citation:

En effet, lorsque le javascript est compressé, une fonction eval() est utilisé et empêche l'exécution et l'affichage de la page tant que le javascript n'est pas totalement téléchargé du côté client.

Ca n'a rien à voir avec la compression, JavaScript est toujours chargé en mode synchrone, notamment pour garantir à quel endroit seront exécutés les morceaux de code transformant la page lors de son chargement (via document.write par exemple).
02/12/2009, 19h42
coolfarmer

Citation:

Envoyé par gwyohm

Tu as besoin de tout scriptaculous ? tu as vu que tu pouvais limiter les scripts embarqués (scriptaculous.js?load=effects)

Ca je ne comprend pas ; la compression javascript ne consiste pas simplement à enlever les commentaires, les espaces inutiles et renommer les variables privées (et donc non exposées aux appels) ?

Est-ce que la limite des scripts aculous fonctionne avec le duo Prototype + ScriptAculous dans le même fichier ?

Sinon pour la compression, oui j'étais bien conscient que cela n'était pas seulement pour enlever les commentaires et tout le blabla du script.

Citation:

Envoyé par E.Bzz

Bonjour,+1

@coolfarmer > As-tu essayé plusieurs compresseurs différents pour comparer ?

Si le tien implique l'utilisation d'eval(), c'est très mauvaise signe .... :aie:
(normalement, il ne doit y avoir aucun impact sur l'utilisation du script)

Oui, j'ai essayé plusieurs compressions, j'ai suivi les marches à suivre sur google et fais plusieurs recherches pour déterminée le meilleur et ceux à ne pas utiliser.

C'est bizarre car dans la plupart la fonctionne eval est bien présente, et j'avais lu quelques part sur google que la fonction eval utilise un temps de traitement supplémentaire qui pendant ce temps bloque le rendu et le téléchargement de la page.

Mais aurais-tu un compresseur à me conseiller en particulier ?

Citation:

Envoyé par madevilts

C'est lourd certes mais il ne sera chargé que la première fois puis ensuite en cache non?

Oui bien-sûre, mais cela ne fait pas très professionnelle ... et je peux perdre beaucoup de visiteur surtout ceux qui n'attende que 3 secondes et si jamais aucun résultat est apparu il quitte la page car ils pensent qu'elle ne fonctionnera pas ... :aie:

Pour l'instant je n'ai rien modifier, le JS est encore compressé, est-ce vous tous vous pouvez tester le temps d'affichage de la page ?

--> www.pharaoh.fr (c'est un bêta donc vous n'avez accès qu'à l'accueil, mais cela est suffisant pour me dire combien de temps la page prend chez vous pour s'afficher)

Je suis curieux de savoir combien sa prend de temps chez vous.. :roll:
03/12/2009, 09h09
gwyohm

Le réseau n'est pas excellent, je trouve le temps de chargement largement acceptable.

Pour en revenir à la compression de flux JS et plus généralement aux performances, je te recommande le livre "JavaScript Performance Rocks!" de Amy Hoy & Thomas Fuchs (Thomas Fuchs est un des concepteurs des frameworks)

extrait du livre :

Citation:

One of the most common questions the Prototype team receives is
How can I minify Prototype?
The answer is:
For the love of god, don’t!
03/12/2009, 13h29
kernelfailure

Citation:

Envoyé par gwyohm

...compression de flux JS et plus généralement aux performances, je te recommande le livre "JavaScript Performance Rocks!" de Amy Hoy & Thomas Fuchs (Thomas Fuchs est un des concepteurs des frameworks)

extrait du livre :

Citation:

Citation:
One of the most common questions the Prototype team receives is
How can I minify Prototype?
The answer is:
For the love of god, don’t!

Je n'en reviens pas de lire un truc pareil 8O

J'espère que le reste du livre n'est pas fait de conseils en prières pour obtenir de meilleures performances. :mouarf:

...

Pour ma part, les temps de chargement m'ont paru convenable. Même meilleur que sur certains gros site. Pas de quoi s'alarmer.
03/12/2009, 13h40
kimjoa

sinon y'a Google AJAX Libraries API.

http://code.google.com/apis/ajaxlibs/

Ce service permet d'aller chercher les fichier js directement sur les serveurs de google, donc toujours à la même adresse.Ca permet de mieux gérer la cache du navigateur en téléchargeant qu'un prototype par exemple pour tout les sites qui l'utilise.

Les scripts sont compresser aussi ...
03/12/2009, 13h55
grunk

LE chargement de ta page est en effet un peu long mais pas rédibitoire.
En revanche en parcourant la sources :

Utilisation de xajax , prototype , scriptaculous
=> Qu est ce que prototype ne fait pas que tu sois obliger d'utiliser xajax ?

Sur ta home tu charge une tripotée de script (lightview , prototype, datepicker ...)
=> je n'en vois aucun utilisé.

Les framework JS sont très pratique , mais pèse lourd en effet. Tu dois donc être prudent sur tes insertions.

- Rien ne sert d'inclure des script qui ne sont pas utiliser
- Rien ne sert d'inclure 2 frameworks alors que tout est faisable avec un seul
- Si ta home se charge vite , c'est beaucoup moins problématique que certaines autres pages soient plus longue à charger (enfin c'est mon avis)
03/12/2009, 19h01
coolfarmer

Merci pour tous vos commentaires c'est très apprécié.

En fait j'utilise Xajax car je n'ai pas eu le temps de me prêter à l'ajax pure, je devais terminée ce projet le plus rapidement possible pour des raisons personnels. Je le trouvais beaucoup plus simple et beaucoup plus organisé que d'utiliser prototype pour cela.

Après, pour les scripts lightview, date picker, c'est normal que tu n'en vois pas l'utilisation vu que vous avez seulement accès à la page d'accueil, le reste du site reste inaccessible jusqu'à Début Décembre 2009.

Sinon merci encore pour tous vos conseils, je vérifier maintenant ce que je peux faire, et aussi merci pour les tests de temps de chargement, finalement il est vrai que c'est plutôt convenable comparé à d'autres gros sites. ;)