Optimiser les images sur macOs facilement avec ImageOptim

Il est très important d’optimiser les images pour le web. Le site sera plus rapide et mieux référencé. L’optimisation des images est une part importante du SEO technique. J’ai longtemps chercher une solution idéale pour optimiser les images sur macOs facilement, et j’ai enfin trouvé!

Pour WordPress, je préfère optimiser les images avant de les télécharger sur le site. La raison est toute simple: WordPress est souvent bien assez chargé de plugin, autant éviter d’un ajouter. D’une manière générale, si je peux faire quelque chose sans plugin WordPress, je n’hésite pas.

ImageOptim pour optimiser les images sur macOs

ImageOptim, c’est gratuit, c’est Open-Source et l’interface graphique est agréable. On part déjà sur de bonnes bases. Pour l’installer, télécharger l’archive sur le site officiel: https://imageoptim.com, décompresser l’archive et copier le programme dans « Applications ». ImageOptim n’est pas disponible sur HomeBrew :(.

ImageOptim intègre et cumule tous les optimiseurs d’image les plus utilisés:

  • JPEG (.jpg / .jpeg)
    • jpegoptim
    • guetzli
  • PNG
    • PNGOUT
    • OxiPNG
    • AdvPNG
    • PNGCrush
  • GIF (ou Jif?)
    • Gifsicle
  • SVG
    • SVGO
    • SVGCleaner

On peut facilement choisir entre une compression sans perte (Lossless) ou avec, on peut conserver le timestamp initial, on peut supprimer les informations EXIF.

J’ai opté pour une compression avec perte, en suivant les recommandations de Google pour le JPEG: « au delà de 85%, la taille de l’image grandit vite mais n’apporte que peu d’amélioration visuelle » (source: Google PageSpeed du 9 février 2019). Pour le format PNG et SVG, j’ai également opté pour une compression avec perte, pour une qualité de 90%. Bien entendu, je supprime toutes les informations EXIF et la correction Gamma des PNG (là encore, sur recommandation de Google). Enfin, j’ai mis la vitesse d’optimisation la plus lente pour avoir la meilleure compression.

Utilisation d’ImageOptim

Pour optimiser les images sur macOs avec ImageOptim, c’est très simple. Un clic droit sur l’image puis « Image Optimize » et le tour est joué. La compression peut prendre plusieurs secondes suivant la taille de l’image et la puissance de votre ordinateur.

Après compression, l’image est remplacée: il n’y a pas de copie de sauvegarde de l’image d’origine. Pour mon utilisation, ça m’arrange mais sachez le avant de traiter en lot des images précieuses.

Optimiser les images sur macOs clic droit

On peut traiter une image ou un lot d’image tout aussi simplement, en les sélectionnant et en faisant un clic droit.

ImageOptim est très efficace. Depuis que je l’utilise, Google PageSpeed n’a plus rien à redire sur mes images.

Exemple d’optimisation d’image

Démonstration sur une image au hasard. Au départ, cette image JPEG fait 9,8Mo. Après optimisation, on arrive à 5,9Mo. A l’arrivée, l’image est presque 40% plus légère. Ça veut également dire un coût de bande passante 40% moins élevé pour la même image.

OptimImage est simple, gratuit et efficace. Il fait une tâche et la fait bien. On serait beaucoup plus heureux si tout était aussi simple :).

Retour sur l’incident Soyouz du 11 octobre 2018

Le 11 octobre, le lanceur russe Soyouz devait transporter le cosmonaute russe Alexeï Ovtchinine et l’astronaute américain Nick Hague vers l’ISS, la station spatiale internationale. Depuis 2011, Soyouz est l’unique vaisseau habilité à transporter des hommes vers l’ISS. Un problème au lancement a conduit à l’echec de la mission, l’équipage étant rappatrié sain et sauf dans la capsule de sécurité et laissant l’ISS sans aucun moyen de ravitaillement humain.

Comment Soyouz s’est retrouvé l’unique lanceur pour rejoindre l’ISS

L’ISS n’est pas vraiment internationale, mais surtout américaine, russe, européene, japonaise et canadienne. Depuis le démarrage du programme, les ravitaillements humains sont partagés entre la Russie et les États-Unis, les seuls pays du programme disposant de vaisseaux capables d’emporter des humains dans l’espace. Pour les États-Unis, il s’agit de Navettes Spatiales: Columbia, Challenger, Discovery, Atlantis et Endeavour. Pour la Russie, il s’agit de la fusée Soyouz.

Soyouz est un lanceur un peu ancien mais extremement fiable: elle a volé pour la 1ère fois en 1966! Il y a tout de même eu des modifications mais on reste sur la même conception. Petit point sur la fiabilité: Aucune perte humaine avec Soyouz, plus de 1800 tirs réussi et 3 échecs, dont celui de 2018. Seulement 3 échecs en 52 ans.

De l’autre côté, la navette américaine a volé pour la 1ère fois en 1981. En 1986, Challenger se désintègre au lancement au dessus de l’atlantique avec à bord 7 membres d’équipage. En 2003, Columbia se désintègre au retour, lors de l’entrée dans l’atmosphère, avec à bord 7 membres d’équipage. Ces problèmes de fiabilité ont conduit la NASA à abandonner ses navettes qui ont volés pour la dernière fois en 2011. En tout, les navettes auront effectués 133 missions pour 2 échecs et 14 morts. La Nasa a délégué la conception de fusée a des sociétés commerciales privés qui, encore en 2018, ne sont pas habilitées à transporter des humains: SpaceX, BlueOrigin, United Launch Alliance.

Voilà comment ce bon vieux Soyouz se retrouve, encore en 2018, et depuis 9 ans, comme l’unique moyen de rejoindre l’ISS.

L’incident du 11 octobre 2018

Au décollage, tout va bien. À 2mn45s, le premier étage – les 4 boosters – se sépare. C’est à ce moment que le pilote, Alexeï Ovtchinine annonce à la radio « Problème de lanceurs, deux minutes 45 secondes ».

À ce moment, la mission est abandonnée et la capsule contenant est séparée de la fusée pour retourner sur terre. Ce n’est pas un retour très agréable car il n’est pas du tout optimisé: l’équipage va encaisser jusqu’à 6,7G. Fort heuresement, le cosmonaute et l’astronaute sont récupérés sain et sauf.

Un problème au décollage signifie pas de nouveau vol tant que la cause n’est pas identifiée et corrigée. L’autre problème, c’est que les 3 humains qui peuplent l’ISS doivent rentrer à la fin de l’année – la capsule Soyouz de retour ne peut rester qu’environ 200 jours dans l’espace. Potentiellement, l’ISS pourrait être abandonnée à la fin de l’année…

L’enquête de Roscosmos

L’agence spatiale russe a débuté les investigations dès le 11 octobre. Il n’y a pas de temps à perdre! Rapidement, l’enquête se focalise sur les boosters puisque les problèmes ont débuté à la séparation des boosters.

La vidéo de la séparation des boosters est même publiée sur Twitter et même un novice peut voir qu’il y a un problème. Les 4 boosters sont parfaitement équilibré autour de la fusée et lorsqu’ils se séparent, ils forment une croix, appelée croix de Korolev (l’ingénieur en chef de programme spatiaux de l’Union Soviétique). Là, très clairement, la croix n’y est pas.

L’agence spatiale russe révèle le problème à l’origine de l’incident du 11 octobre

« Un capteur qui surveille la séparation des boosters était mal monté, de 6 degrés ». Le communiqué de presse précise que cette pièce est montée lors de l’assemblage finale sur le cosmodrome de Baïkonour, au Kazakhstan.

6 degrés, c’est pas grand chose. Mais ça a suffit à perturber la séparation du booster qui a ensuite hurté violemment le réservoir principal, ce qui a dévié fortement la fusée de sa trajectoire.

Voilà à quoi tient la conquête spatiale, à peu de chose. Finalement, tout rentre dans l’ordre et le prochain lancement de Soyouz le 16 Novembre (un vol non habité, de ravitaillement) devrait se dérouler sans encombre.

Photo par Bill Ingalls/NASA

Plugins pour accélérer WordPress: éléments chiffrés!

J’ai longtemps tâtonné dans les plugins WordPress pour obtenir la configuration la plus efficace. Mon site se trouve sur un serveur virtuel (VPS) chez Scaleway. Il coûte 3€ par mois. Au fur et à mesure que la fréquentation augmentait, je me demandais à partir de quel moment je devais faire grossir le serveur. Conclusion, c’est pas pour tout de suite, ce petit serveur sait gérer un flux énorme, et ce grâce à 2 plugins pour accélérer WordPress.

Configuration de départ

Pour faire ce test, j’ai choisi un article du site et j’utilise deux outils pour mesurer la vitesse:
Pingdom: pour mesurer la performance unitaire du site
Loader.io: pour mesurer la montée en charge, avec 100 requêtes par secondes durant 1mn

Au départ, le site tourne sur nginx sans option particulière (gzip est activé par défaut). Il n’y a pas de plugins pour accélérer WordPress. Le CDN Cloudflare est configuré mais en mode « développement » pour accéder directement au site.

Résultat Pingdom:
– Note: 74%
– Vitesse de la page: 5,68s
– Nombre de requêtes: 30

Résultat Loader:
– Test avorté à la 2ème seconde car le taux d’erreur est trop élevé (= le serveur met trop de à répondre)

Pas génial donc…

Plugin Autoptimize

J’ai choisi de commencer par Autoptimize. Ce plugin permet de:
– Minifier le code HTML
– Minifier et unifier en un seul fichier le code CSS
– Minifier et unifier en un seul fichier le code Javascript

Plus on a de plugins, plus on a de fichiers css et javascript qui s’ajoutent et qui dégradent la vitesse de chargement du site. Parfois, même les fichiers incluent dans les thèmes nécessitent un travail d’optimisation.

Est-ce que le plugin fait ce qu’il annonce? Oui! Et je suis le premier surpris car des plugins de minification qui ne marchent pas, j’en ai vu des dizaines. Après activé la minification HTML, CSS et Javascript, WordPress charge un seul fichier css dont le nom contient « Autoptimize ». WordPress charge toujours le fichier JQuery.js séparément (il est dans la liste blanche de autoptimize), et les autres fichiers ne font plus qu’un. Le code HTML est également minifié. C’est parfait! Ce plugin ne fait qu’une chose et le fait très bien.

Résultat Pingdom:
– Note: 85% (+9%)-
– Vitesse de la page: 1,96s _(-65%)

– Nombre de requêtes: 14 (-53%)

Résultat Loader:
– Test avorté à la 3ème seconde

C’est mieux, le site est plus rapide en accès direct. Par contre il ne tient pas encore la charge.

HTTP2

HTTP2 est une nouvelle norme. La plupart des navigateurs la supporte désormais. Je ne connais pas les détails mais cette norme est sensé rendre internet plus rapide.

HTTP2 s’active au niveau de Nginx. Il suffit d’ajouter « http2 » au niveau de la ligne « listen »:

listen 443 ssl http2;

Résultat Pingdom:
– Note: 85%
– Vitesse de la page: 1,33s (-30%)
– Nombre de requêtes: 14

Résultat Loader:
– Test avorté à la 3ème seconde car le taux d’erreur est trop élevé (= le serveur met trop de à répondre)

Encore une nette amélioration du temps de chargement unitaire. Tout ça rien qu’avec un changement de norme.

Le plugin Cache-Enabler

Générer une page à chaque accès c’est bien beau mais ce n’est pas efficace. Pour tenir une montée en charge, il va falloir générer des pages statiques qui seront envoyées aux visiteurs. J’ai choisi d’utiliser le plugin Cache-Enabler car il me paraissait simple. Il ne veut pas trop en faire comme « W3 Total Cache » par exemple. Ce plugin va uniquement créer une page html statique pour chaque page ou article du site. En configurant Nginx tel que recommandé par le plugin, le client accédera directement à la page en cache sans passer par PHP.

Pour profiter à fond du plugin, il faut donc changer sa configuration nginx tel quel préconisé par le plugin.

Il vous faut remplacer la zone « location » de votre configuration qui doit ressembler à ça:

location / {
# This is cool because no php is touched for static content.
# include the "?$args" part so non-default permalinks doesn't break when using query string
try_files $uri $uri/ /index.php?$args;
<code> }

Par le code fourni par le plugin:

set $cache_uri $request_uri;

# bypass cache if POST requests or URLs with a query string
 if ($request_method = POST) {
 set $cache_uri 'nullcache';
 }
 if ($query_string != "") {
 set $cache_uri 'nullcache';
 }

# bypass cache if URLs containing the following strings
 if ($request_uri ~* "(/wp-admin/|/xmlrpc.php|/wp-(app|cron|login|register|mail).php|wp-.*.php|/feed/|index.php|wp-comments-popup.php|wp-links-opml.php|wp-locations.php|sitemap(_index)?.xml|[a-z0-9_-]+-sitemap([0-9]+)?.xml)") {
 set $cache_uri 'nullcache';
 }

# bypass cache if the cookies containing the following strings
 if ($http_cookie ~* "comment_author|wordpress_[a-f0-9]+|wp-postpass|wordpress_logged_in") {
 set $cache_uri 'nullcache';
 }

# custom sub directory e.g. /blog
 set $custom_subdir '';

# default html file
 set $cache_enabler_uri '${custom_subdir}/wp-content/cache/cache-enabler/${http_host}${cache_uri}index.html';

# webp html file
 if ($http_accept ~* "image/webp") {
 set $cache_enabler_uri '${custom_subdir}/wp-content/cache/cache-enabler/${http_host}${cache_uri}index-webp.html';
 }

location / {
 gzip_static on; # this directive is not required but recommended
 try_files $cache_enabler_uri $uri $uri/ $custom_subdir/index.php?$args;
 }

Pensez bien à recharger le serveur nginx. Sur Debian/Ubuntu, c’est:

sudo service nginx reload

Résultat Pingdom:
– Note: 86% (+1%)
– Vitesse de la page: 0,736s (-44%)
– Nombre de requêtes: 14

Résultat Loader:
– Temps de réponse moyen: 118ms
– Taux d’erreur: 0%

C’est une claque! Je ne pensais pas le plugin de cache si efficace. L’article se charge en 0,7s, c’est parfait. Le serveur est capable de servir 100 demandes par secondes, durant une minute, sans broncher, sans erreur.

Pour aller plus loin

Avec 100 requêtes par secondes, le site gère sans problème. Peut-on aller plus loin? J’ai essayé 500 requêtes par seconde:

Résultat Loader @500req/s:
– Temps de réponse moyen: 121ms
– Taux d’erreur: 0%

Aucun problème pour 500. On peut pousser encore? 1000 requêtes par seconde?

Résultat Loader @1000req/s:
– Temps de réponse moyen: 182ms
– Taux d’erreur: 0,2%

Des erreurs commencent à arriver mais ça reste acceptable. Durant le test, les ressources du serveur sont à 100%, signe qu’on ne pourra pas aller beaucoup plus loin.

Plugins pour accélérer WordPress: en conclusion

L’objectif était d’améliorer la vitesse de son site WordPress. Au départ, notre site chargeait en plus de 5s et ne tenait pas la charge. A l’arrivée, notre site charge en 0,7s et est capable de gérer 1000 requêtes par secondes. Le tout grâce à 3 points clefs:
– HTTP2
– Plugin Autoptimize
– Plugin Cache-Enabler

A ma question « quand devrais-je augmenter la puissance de mon serveur », la réponse est donc:
– Quand le site devra afficher plus de 1000 requêtes par seconde;
– Ou quand le site devra afficher plus de 3,6 millions de page par heure

Avec un serveur à 3€, on peut faire un site WordPress capable d’afficher plus de 3 millions de page par heure. Ça devrait nous suffire pour l’instant =).