Magazine Emarketing

Compression HTML CSS Javascript et PHP

Publié le 23 septembre 2009 par Adonfff
Compression HTML CSS Javascript et PHP
La compression permet un gain de temps côté serveur et côté utilisateur
Avant de saisir toute l'importance de la compression, faites un test sur votre site web avec WebSiteOptimisation
Le rapport indique toutes les améliorations possibles concernant le HTML, les CSS, le javascript ainsi que les images.
Si comme moi vous intégrez des scripts et des images extérieures (affiliation notamment) sur lesquelles vous ne pouvez faire aucune optimisation, il est nécessaire d'optimiser votre code et vos images.
Ce peut être aussi un argument pour vendre un site à un client, un outil qui va plus vite est pour moi un gage de qualité.
J'ai obtenu pour ma page d'accueil plus de 50 Ko d'images (ce qui n'est pas énorme) dont la moitié pour une seule image (publicité).
Les compressions CSS et javascript m'ont permis d'obtenir 25% de compression sur la taille des fichiers grâce aux outils suivants :

Compresseurs en ligne
Pour tout les compresseurs suivants, il suffit de copier-coller votre code dans une zone de texte puis de valider. Il suffit de copier-coller le code compressé dans la seconde zone de texte et de remplacer votre ancien code.
Par mesure de précaution, pensez à faire une sauvegarde de l'ancien code.

TextFixer
Outil de compression et de décompression HTML en ligne.
Une petite option pour enlever les commentaires aurait été un plus. Si vous avez du PHP et du HTML mélangé, cet outil laisse intact les balises PHP (Heureusement).


ClientSide CSS
Outil de compression et de décompression CSS en ligne.
Des options intéressantes tels que le tri des CSS, une règle par ligne, suppression des commentaires.

Javascript Compressor
Outil de compression javascript en ligne.
Comme options, on y trouve la réduction de la taille des variables et l'obfuscation du script (augmente la taille du fichier compressé)

Javascript Beautifier
Outil inverse du précédent qui rend lisible du code compacté.
Le nombre d'espace pour l'indentation du code est modifiable

Online code beautyfier
Même outil que le précédent mais pour PHP, javascript, CSS, Perl, Java, C, C++.
Outil utile si on ne souhaite pas lancer un éditeur de texte.

PHP Speedy
Une classe PHP à télécharger, 3 lignes de codes à ajouter à vos pages et l'auteur promet que vos pages se chargeront 6 fois plus vite. Fonctionne avec WordPress, Drupal et Joomla.

Si les tests de vitesse vous intéresse, je vous conseille des modules complémentaires pour Firefox : YSlow de Yahoo et Page Speed de Google qui ont tous deux une dépendance à FireBug

Plus clean et alors ?
Pour conclure, la compression peut paraître inutile de nos jours étant donné qu'une grande majorité des internautes dispose de connexion à haut débit.
Cependant elle est utile à mon sens pour au moins 3 points (intuitions sans réelle démonstration) :
  • d'un point de vue commercial pour le taux de rebond
  • augmentation des pages crawlés par les bots d'un point de vue référencement
  • économie de la bande passante d'un point de vue financier
  • Civilité*
  • * Ces champs sont obligatoires
Ajouter un commentaire Signaler un abus Imprimer cet article Partager sur Facebook Voir l'article original
Retour à La Une de

Ces articles peuvent vous intéresser :

LES COMMENTAIRES (1)

Par marius
posté le 20 juillet à 14:42
Signaler un abus

J'aurais une question : quel est l'intérêt de NE PAS compresser le code html ou JS sur un site web ? Je me suis amusé à regarder les codes sources de diverse pages web et force est de constater que très peu utilisent cet outil. Hors, on gagne entre 5 et 25% sur du html, et jusqu'à 50% sur du JS, ce qui ne me paraît pas négligeable.

Quelqu'un saurait pourquoi c'est si peu utilisé ?

Ajouter un commentaire

A propos de l’auteur

Adonfff 25 votes

Dossiers Paperblog

Magazines