COMMENT OPTIMISER LES IMAGES POUR GOOGLE PAGESPEED

pageSpeed

 

Si vous avez un site c’est sûr que vous avez déjà utilisé Google PageSpeed. Cet outil en ligne vous fournit un rapport très détaillé concernant la productivité de votre page Web. Le plus souvent les propriétaires des sites comprennent qu’il faut optimiser le contenu graphique.

Plus les photos sont petites, plus vite le site se charge. Moins d’images -> moins de traffic -> le site fonctionne mieux. Les visiteurs du site ne sont pas obligés d’attendre pendant que le site se charge et tout le monde est content.
Dans cet article nous avons sélectionné les outils principaux pour l’optimisation de contenu graphique.

Outils serveurs

Le plus souvent on utilise des images au format JPG. Dans ce cas les outils principaux sont :

  • Imagemagick : presque tous les formats sont compatibles. L’utilitaire «convert» donne la possibilté d’indiquer un paramètre de qualité pour la réduction des images:
    convert input.jpg -quality 75 output.jpg
  • Jpegtran offre la possibilité de réduire une image sans réduire sa qualité et supprime les métadonnées :
    jpegtran -copy none -optimize -outfile output.jpg input.jpgphoto_meta_donnees

    On utilise le format PNG pour les pictos, icônes, logos, etc. Ci-desous une liste des outils nécessaires pour l’optimisation :

  • pngquant – est un outil de compression par perte, qui vous permet d’optimiser un PNG avec une perte de qualité. Le principal algorithme consiste à réduire la quantité des couleurs utilisées. Cela permet de réduire la taille sans perte majeure en qualité de l’image :
pngquant --quality 75 —speed 1 input.png

png_couleurs
  • pngcrush – encore un outil efficace pour optimiser des images PNG sur votre site. Il utilise un algorithme de compression sans perte de qualité:
pngcrush -reduce -brute in.png out.png

Outils Cloud :

  • JPEGmini. Peut reduire la taille d’une photo de 20 à 30%. Les developpeurs de cet outil affirment qu’en l’utilisant il est possible de reduire certaines images 5 fois sans perte de qualité. Ils proposent une API pour l’automatisation du processus.
  • TinyPNG. Un très bon outil pour optimiser les images PNG. La compression est très effective et sans perte de qualité. Il y a également une API et un grand package gratuit.
  • i.onthe.io/google_speed : un service très simple, il est possible de l‘utiliser pour tous les formats d’images. Il est très pratique pour une utilisation unique.

Module PageSpeed

Google a bien travaillé et a lancé son module pour Ngnix et Apache afin d’améliorer la performance des sites web. Ce module permet d’augmenter la vitesse de chargement en optimisant différents paramètres y compris les photos. Tout fonctionne automatiquement, il suffit juste d’installer et d’activer le module :

pagespeed on;
pagespeed FileCachePath /var/cache/nginx;

Ce module fonctionne très bien, il analyse HTML et optimise les ressources. Par exemple, il permet de réduire les images et minimise le contenu statique. Toutes les ressources des pages qui ont été optimises auront un chemin d’accès différent.

Optimisation directe des ressources

Arpès l’optimisation PageSpeed sauvegarde le fichier dans un autre dossier (pour avoir un chemin d’accès différent). Cependant que peut on peut faire avec des photos affichées via JavaScript? Ou avec les liens sur vos photos de sources externes ? Dans ce cas IPRO peut nous aider, il permet d’optimiser les ressources sans modifier leur URL.
Pour cela il suffit d’activer dans le config les instruments suivants (pour Nginx):

pagespeed InPlaceResourceOptimization on;

EN RESUMÉ

  1. Utilisez PageSpeed pour trouver les problèmes du contenu graphique de votre site.
  2. Si vous avez beaucoup d’images, utilisez des outils serveur pour leur optimisation : jpegtran, jpegoptim, ImageMagick, pngquant, pngcrush.
  3. Les outils Cloud pour les tâches unique et pour la connexion via API: JPEGmini, tinyPNG, i.onthe.io/google_speed.
  4. Le module PageSpeed pour Nginx/Apache procède à l’optimisation tout seul mais il faut consacrer un peu de temps pour l’installer.

 

Articles similaires