Depuis des années, le poids des pages web ne cesse d’augmenter, passant de légères à obèses. Les pages se chargent de gadgets superflus qui font plus de ceci, ou plus de cela, avec pour résultat des temps de chargement en croissance constante.
Le poids des images pèse sur le Web
Le poids total des pages a augmenté de 32% en 2013 pour atteindre 1.7 Mo par page et 96 requêtes HTTP individuelles. Ceci n’est qu’une moyenne, la moitié des sites du web sont dépassent largement ces chiffres. L’obésité du Web est devenue une épidémie et les développeurs, tout comme les administrateurs de sites sont à blâmer. Il n’y a pas d’excuses.
- Crédit Photo : David Blackwell
Un site en surpoids nuira aux visiteurs, mais aussi à l’ensemble des résultats. Voyons quelques points négatifs
- Plus il faudra de temps à votre site site, moins il y aura d’attrait à visiter votre blog, même si les articles sont excellents.
- Tout le monde n’a pas une connexion rapide (ADSL ou câble) et c’est particulièrement vrai dans les régions escarpées et décentralisées où les infrastructures en cuivre sont toujours actives.
- Quelle que soit la qualité de votre site les utilisateurs ne vont pas attendre.
- L’algorithme de calcul de rapidité de Google, réduira à néant vos efforts d’optimisation
- Plus il y a de code et plus la page sera longue à charger
L’accès à l’Internet mobile a augmenté rapidement pour atteindre un utilisateur sur quatre. Sur une connexion type 3G, une page de 1.7Mo prendra près d’une minute à apparaître. Autre question, est-il nécessaire d’adopter des techniques de Responsive Design alors que votre site ne sera pas efficace sur ces appareils?
Heureusement, il existe un certain nombre de solutions rapides qui auront un effet immédiat sur les performances de votre site. Toutes ces techniques sont connues, elles utilisent les technologies d’aujourd’hui, ne prennent pas beaucoup de temps, et peuvent être mises en œuvre avec le code existant sans nécessité un réaménagement.
Les trois premiers ne vont pas alléger votre site, mais le mettront dans un corset et des vêtements sayants …
1. Activez la compression GZIP
Selon W3Techs.com, près de la moitié de tous les sites Web n’activent pas la compression. En principe la compression fait partie des paramètres du serveur et elle doit être activée par votre hébergeur, bien qu’il puisse être possible de le configurer vous-même.
2. Utilisez le cache du navigateur
Le navigateur peut facilement mettre un fichier en cache, de ce fait il ne sera pas nécessaire de le télécharger à nouveau. Des solutions simples existent pour modifier les propriétés appropriées Expires header, Last-Modified ou l’adoption de ETags dans l’en-tête HTTP.
Vous avez la possibilité de configurer votre serveur afin de les gérer automatiquement, par exemple ci-dessous le code à insérer dans le fichier .htaccess pour mettre en cache toutes les images pendant un mois.:
|
1
|
<IfModule mod_expires.c> |
|
2
|
ExpiresActive On |
|
3
|
<FilesMatch « \.(jpg|jpeg|png|gif|svg)$ »> |
|
4
|
ExpiresDefault « access plus 1 month » |
|
5
|
</FilesMatch> |
|
6
|
<</IfModule>> |
3. Utiliser un Content Delivery Network (CDN)
Les navigateurs fixent une limite comprise entre quatre et huit requêtes HTTP simultanées par domaine. Si votre 
page contient 96 requêtes actives à charger , au mieux il y aura douze ensembles de requêtes simultanées avant que l’affichage ne soit complet. (En réalité, la taille des fichiers diffèrent de sorte que cela ne se passe pas exactement comme ça, mais la limitation s’applique toujours)
Un Content Delivery Network est constitué d’ordinateurs reliés en réseau à travers Internet et qui coopèrent afin de mettre à disposition des utilisateurs du contenu ou des données . Le CDN CloudFlare vous permet d’avoir un site sur leur réseau gratuitement.
Les demandes de fichiers statiques faites vers d’autres domaines auront pour effet de doubler le nombre de requêtes HTTP à réaliser par votre navigateur. En outre, l’utilisateur est susceptible d’avoir ces fichiers en pré-cache parce qu’ils auront été utilisé sur un autre site qu’il a consulté. Les bibliothèques JavaScript telles que jQuery et les répertoires de polices de caractères sont des options simples à utiliser, mais vous pouvez aussi envisager l’hébergement d’image dédié.
Ces trois premières options permettent d’améliorer la vitesse de chargement des pages, mais vous aurez besoin d’examiner votre code avant de réduire activement le poids de la page …
4. Retirer le code inutilisé
Les sites évoluent. Si vous n’utilisez plus un widget, vous pouvez supprimer le code CSS et JavaScript associé. Si le code est contenu dans des fichiers séparés la tâche sera simple. Dans le cas contraire, vous devrez peut-être utiliser des outils spécialisés tels que Chrome Audit Developer Tool Chrome, JSLint , Dust-Me Selectors (pour Firefox), CSS Usage ou unused-css.com .
De même, si vous n’utilisez plus un plugin, supprimez le. D’une part cela déchargera votre page, mais en plus vous éviterez les éventuels problèmes posés par un plugin obsolète.
5. Utilisez le format d’image adapté
Utiliser le mauvais format d’image peut générer des problèmes sur vos pages. En général :
- Utilisez le format JPG pour les photos
- Utilisez le format PNG pour tout le reste.
Le format GIF compresse mieux quand il s’agit de petites images avec des jeux de couleurs limités, mais c’est rare.
- Credit Photo : Rosa Menkman
Vous aurez besoin d’un bon logiciel graphique pour convertir les images, il existe de nombreuses options gratuites disponibles, certains programmes, comme XnView vous permettent de traiter des fichiers par lots. N’oubliez pas de jouer avec les réglages:
- Le format JPG est un format générant peu de perte de qualité. Le niveau de qualité va de 0 (faible, pour les plus petits fichiers ) à 100 (meilleur, pour les plus grands fichiers). La majorité des images auront une qualité suffisante si vous utilisez un réglage compris entre 30 et 70, toutefois je vous conseille de faire des essais afin de trouver la valeur la plus faible acceptable.
- Le format PNG est disponible en 256 couleurs et en couleurs 24 bits. Si vous n’avez pas besoin de transparence et que vous pouvez limiter la palette de couleurs, la version 256 couleurs compresse mieux.
6. Redimensionnez les grandes images
Un smartphone d’entrée de gamme, avec un appareil photo 3 méga-pixels, produira une image trop grande pour être affichée sur une page Web. Malheureusement, les éditeurs de contenu téléchargent leurs images directement depuis leur appareil photo. Un système de redimensionnement automatique est donc recommandé.
Les dimensions de l’image ne doivent jamais dépasser la taille maximale de leur conteneur. Si votre page dispose d’un espace maximum de 800 pixels horizontaux, l’image ne devra pas avoir une largeur supérieure. Cela dit, ceux qui utilisent un affichage haute-densité/Retina peuvent apprécier une largeur d’image de 1600 pixels , mais c’est toujours plus petit que ce que produisent les appareils photos moyen de gamme.
Le redimensionnement des images a un effet significatif sur le poids de la page. Un rétrécissement de 50% des dimensions de l’image réduit la superficie totale de 75% et par la même, réduira considérablement la taille du fichier.
7. Compressez les images
Même si vous avez modifié le format et redimensionné vos images, il est possible de réduire encore plus les fichiers image en utilisation des outils qui analysent et optimisent le graphique. Les quatres outils les plus connues à l’heure actuelle sont :
Ce sont tous des programmes gratuits, qui sont à utiliser en ligne de commande. Pour ma part je vous suggère un outil en ligne qui s’appelle Smush.it, il fait le même travail sans aucune installation ou manipulation complexe.
8. Supprimer les polices inutiles
Les polices Web ont révolutionné la conception et réduit le besoin de graphique basé sur du texte. Toutefois, les polices personnalisées ont un coût et peuvent ajouter plusieurs centaines de kilo-octets sur vos pages.
- Crédit Photo : Jesus Arpon
Si vous utilisez plus de deux ou trois polices, la meilleure solution serait d’en réduire le nombre. Si une police de caractères n’est utilisé que pour le titre est-ce la peine de télécharger un fichier de police 200 Ko ou vaut-il mieux une image optimisée de quelques kilo-octets?
La perte de poids deviendra une nécessité sur Internet
Aujourd’hui, de très nombreux sites pourraient réduire leur poids de 30 à 50% moyennant quelques heures d’effort. Pour un site moyen, cela correspondrait à un gain de plus de 800 Ko et il deviendrait ainsi sensiblement plus rapide. Lorsque l’on pense que la taille des tuyaux du net n’est pas infini, et que plus vous envoyez de données et plus le débit ralentir, il vaudrait mieux s’en occuper dès à présent.
Avez vous d’autres solutions pour que vos pages se chargent plus rapidement ? Partagez vos techniques dans les commentaires ci-dessous.
Publié à l'origine le : 29 janvier 2014 @ 17 h 08 min
