41Mag - Pourquoi et comment réduire et rassembler vos fichiers JavaScript ?

Pourquoi et comment réduire et rassembler vos fichiers JavaScript ?

Voici un tableau avec la taille des différents fichiers. Nous avons pris comme exemple la bibliothèque jQuery. Sa taille varie presque du simple au dixième suivant le degré de compression. Les résultats sont significatifs ! Si vous n’aviez encore pas réduis vos fichiers javascript, maintenant, vous comprendrez pourquoi cette opération est très importante. Découvrons les avantages d’effectuer une réduction de ces fichiers contenant vos scripts.

La version réduite – minified – de jQuery est dites version de production et la source originale est appelé version de développement.

FichierOriginalRéduisGZipRéduis + GZip
jQuery.js252881948407377533656

Quels sont les avantages de réduire ses fichiers JavaScript ?

Vous remarquerez que la taille d’un fichier réduis (Minify) ou compressé (GZip) est sensiblement la même. IL arrive même parfois que le fichier soit moins lourds après une réduction qu’une compression. Lorsque un fichier est compressé avec gzip tous de ce fichier est compressé et expédié.

Les fichiers JavaScript et même les fichiers CSS peuvent être combinés en un seul fichier.

Quand un navigateur récupère un fichier à partir d’un serveur il fait de multiples demandes aller-retour. Chacun de ces allers-retours dispose d’un délai de communication entre un navigateur et un serveur. Sur les réseaux mobiles ce délai peut être plusieurs fois supérieur à une connexion filaire pour chacune des demandes aller-retour. Donc, pour accélérer les performances pour un utilisateur individuel, il est primordial de supprimer les demandes inutiles.

protocole tcp/ip

Imaginez que vous ayez 8 fichiers JavasCript et 3 feuilles de style relier à votre site web. A chaque connexion, votre site effectue au minimum 11 requêtes (8 + 3) au serveur. En plus de réduire, réunissez par concaténation tous vous fichiers du même type. Ce qui ne ferais plus que deux requêtes (une pour le javascript et l’autre pour le css) au serveur et donc un gain de temps de téléchargement et d’affichage de votre site web ainsi qu’une charge en bande passante réduits.

Les économies réalisé grâce à la réduction et / ou la compression gzip ne sont pas obsolète. Si vous pensez 10.000 téléchargements de la bibliothèque jQuery par mois, en reprenant notre tableau, c’est une économie de 420 Mo de économies de bande passante dans un mois !

Comment réduire et rassembler ses fichiers ?

N’hésitez pas a étendre la réduction et la concaténation à tous les fichiers de même langage … ajax.js, Form.js, UI jQuery, et tout les autre fichiers JavaScript de votre site ou blog. Par fichiers réduis nous pouvons économisez de la bande passante et restreindre le nombre des requêtes tout en offrant à nos utilisateurs une amélioration de la performance sans sacrifier la fonctionnalité.

Compressez et réduisez vos fichiers avec les outils en ligne

JSCompress.com est un compresseur en ligne qui vous permet de compresser et de réduire vos fichiers javascript. Les fichiers compressés javascript sont idéale pour les environnements de production car ils réduisent généralement la taille du fichier de 30-90%. La réduction de taille du fichier est obtenue en supprimant les commentaires et les caractères d’espacement supplémentaires qui ne sont pas nécessaires pour la compréhension des navigateurs Web ou des visiteurs.

Vous pouvez également utilisez minifyjavascript.com qui fonction sur le même principe.

Les deux services présenté ci-dessus sont très simple d’utilisation. Commencez par copier / coller le contenu de votre fichier javascript (votre script) et lancer la réduction. Il vous suffira de récupérer un code « illisible ». Remplacez votre script original par le nouveau (qui est équivalent) mais plus petit.

Le plugin Minify pour WordPress

Il existe de nombreux plugins permettant de réduire vos fichiers javascript. Nous avons sélectionner Better WordPress Minify. Très simple d’installation et d’utilisation, il est également compatible avec la version 3.3.1 de WordPress (et il dispose d’une traduction française).

Better WordPress Minify vous permet de réduire vos fichiers CSS et JS pour un chargement plus rapide de vos pages. Ce plugin utilise la librairie PHP MINIFY.

La bibliothèque MINIFY

Vous qui souhaitez rassembler tous vos scripts JQuery en un seul fichier, il vous faut télécharger la biliothéque Minify en PHP.

La bilibotheque MINiFY est très simple à utiliser et fonctionne également avec les fichiers CSS.

Article du même thême : ..

Copyright © 2013 | 41Mag. All rights reserved. Contact.
Integrated by Créa-troyes. Powered by WordPress.