Compresser un fichier Javascript ? [RESOLU] Compresser un site web ?

Bonjour,

afin de réaliser l'effet de navigation fluide (fondu sur les textes) que vous pouvez voir ici en action, j'ai récupéré le script .js source (http://txpcoder.com/js/jquery-ui-personalized-1.6rc6.min.js).

Le problème est que ce script est extrêmement lourd, pour un effet qui m'a l'air très simple ! (118ko de script juste pour ça !).
Ma page atteint la taille critique de 400ko et je trouve ça vraiment lourd (d'autant plus que j'ai lu qu'il ne fallait pas dépasser les 300ko).

- Auriez-vous une idée d'un script similaire en plus léger ? un plugin Jquery ? Malgré mes recherches je n'en trouve aucuns ! (j'utilise Jquery).

- Maintenant, j'aimerais savoir comment compresser mon site web, par exemple alsacréation compresse ses pages (un gain de presque 50% !), et tous les gros sites le font, mais après de longues recherches je n'ai trouvé aucunes vrais solutions !


Je vous remercie de votre aide !
Modifié par GrosMyto (09 Oct 2009 - 23:23)

Salut,

En consultant ton site et en le chargeant, je n'ai que 150Kb ce qui est tout à fait acceptable. Comment teste tu la taille des pages ?

118K pour un script, ça me paraît beaucoup trop à moi aussi, quelque soit le poids de la page HTML qui va avec. Déjà que les 60K de JQuery ça me paraît démentiel... pour être méchant je dirais, limite de poids en js, 20-25K sont largement suffisants. Il ne faut pas oublier que l'exécution d'un gros volume de js ralentit tout, même si la page et les images sont légères.

Je mesure avec la web developer bar (informations/voir le poid de la page).

En effet je pense aussi que c'est excessif. Pour le module Jquery (environs 55ko) c'est énorme aussi mais je pense que si on s'y connaît on peut garder uniquement les partis que notre site utilise et supprimer le reste...mais là sa devient complexe.

Je cherche toujours un script similaire à celui sur la page, si vous avez un site ou n'importe quoi, sa m'intéresse.
Au pire, comment qualifiez-vous cet effet ? fading, fade-in ? effet de fondu ?
Je sais qu'une des fonctions de Jquery est la disparition en fondu, seulement je ne saurais pas faire disparaître un bloc et en faire apparaître un autre en dessous...donc incapable de recréer moi même le script :s

En ce qui concerne la compression des pages ? (facebook, alsacréations sont des pages compressés) vous avez des idées ?

Pour la compression, je pense qu'alsa autant que facebook utilisent déjà la compression gzip à la volée, mais ça n'a rien à voir avec le js.
Sinon à part ça, on ne peut pas vraiment compresser un fichier js je pense, à part en enlevant des fonctions ou en supprimant les espaces et sauts de ligne (ce qui donne un code illisible après, évidemment)

Bonjour,

Comme le souligne Quentin, pour alléger du JS, le meilleurs moyen c'est de sabrer. Il existe des script en ligne qui te permettent de supprimer les espaces et sauts de lignes des fichiers JS, par contre je conseille de n'utiliser cette version compressée qu'en ligne, sinon tu va devenir fou si tu doit retoucher le code.

http://javascriptcompressor.com/

Par contre, ton code étant déjà compressé, le gain est minime.

Il est possible de faire la même chose avec les CSS.

En mêm temps je dis ça, mais je ne vois personnellement pas l'intérêt de supprimer les sauts de ligne et les espaces inutiles d'un fichier js ou CSS. A moins qu'on s'appelle google, pour qui cela peut représenter des Go de bande passante en moins, le gain me paraît plutôt minime.
Le problème à mon avis n'est même pas tant le temps de téléchargement du fichier, mais bien le temps de traitement du script par les navigateurs, auquel la suppression des sauts de ligne ne change certainement pas grand chose (ce serait à vérifier avec des benchmark mais j'ai franchement des doutes).

Salut,

Je viens de regarder ton site et le script jquery UI qu'il y a dans ta page. Il me semble que tu n'utilises que le module Tabs de jQuery UI. Alors que dans le script que tu fais charger sur ta page, on voit plusieurs modules qui ne semblent pas utilisés (Draggable, Resizable, Dialog ...).

Va sur la page de download de jQuery UI et sélectionne seulement ce dont tu as besoin (jQuery UI Core + jQuery UI Tabs donne un fichier minimisé de 19ko)

a+

dunjl

PS: la version actuelle de jQuery est 1.3.2 et pour jQuery UI c'est 1.7.2
Modifié par dunjl (09 Oct 2009 - 15:06)

Je vous remercies pour vos réponses !

Cependant je tiens à apporter quelques précisions : le site que j'ai présenté n'est pas le miens mais juste un site auquel j'ai emprunté le script.
(le site que je fais est sur serecom.tv mais pas encore en ligne bien sur).

En ce qui concerne la compression, en effet la compression JS ne m'intéresse pas ! justement je voulais des infos sur la compression "à la volée" dont parle QuentinC. J'avais fait des recherches sur la compression JS et au final je me suis rendu compte que ce n'était pas très intéressant...Cependant la compression "gzip à la volée" que faut-il faire pour l'activer ? J'ai lu sur certains sites que les serveurs web l'utilisaient par défaut pour la plupart.

Dunjl merci pour ta réponse très intéressante, je m'en vais de suite explorer d'avantage Jquery, en fait je m'étais contenté de télécharger les scripts au complet...
Modifié par GrosMyto (09 Oct 2009 - 21:20)

Pour vous dire que j'ai réussi à alléger mon script en utilisant tout simplement Jquery-UI en triant les effets que je voulais et ceux qui ne me servaient pas.

Du coup le fichier est passé de 160ko à 26ko !! Avec un gros debug en plus ! (et un petit bug aussi que je n'avais pas avec l'ancien fichier mais rien de grave).

Je vais me renseigner pour la compression de site web à la volée.

Merci à tous !

Pour la compression gzip à la volée, c'est pas bien difficile si tu fais du php. IL suffit de mettre ob_start('ob_gzhandler'); au début de chaque script et ob_end_flush(); à la fin de chaque script.