Cocktailand – Gérer ses images sous symfony

La page d’accueil de cocktailand affiche en moyenne 35 images. Dans sa première version, je n’avais pas pris la peine de soigner la gestion des images. J’avais pour objectif de sortir le produit minimum viable, je me suis donc attardé sur les fonctionnalités principales:

  • L’ajout des recettes de cocktail
  • L’affichage des recettes de cocktails
  • La catégorisation
  • Le moteur de recherche

Cette méthodologie permet de sortir rapidement un site de base et de l’enrichir de façon successive.

Le fait d’avoir mis en place varnish et les esis faisait que la page s’affichait très rapidement mais les images mettaient du temps à s’afficher.

Dans cet article je vais faire le point sur les différentes techniques à mettre en place pour réduire au maximum le temps de chargement des images sur votre site WEB.

Optimiser les images

La première chose à faire est de redimensionner votre image à une taille raisonnable.

Il est rare d’avoir besoin d’une image avec une résolution plus grande que 1024×768 pixels.

La seconde étape est d’optimiser vos images à l’aide d’outils comme imageoptimcompressor.io ou tout autre outil du genre.

Vous pouvez régler l’outil pour avoir ou non de la perte de qualité au profit d’un gain de taille.

Il n’est pas rare de gagner 70% de taille sur une image.

Sur 35 images de 1Mo, on gagnerait 25Mo.

Cache http

Maintenant que nous avons optimisé la taille de nos images au maximum et que le visiteur les a téléchargées, nous allons dire à son navigateur de les conserver pour la prochaine fois.

Côté varnish j’ai pour habitude d’avoir cette règle qui surcharge le retour de nginx pour ajouter une durée de cache de 24h.

Cette règle est géniale si chaque fichier est immuable et a une url unique. Cela implique que lors de votre build vous ajoutiez un hash unique dans le nom de vos JS et CSS. Si vous avez des fichiers qui changent au cours de la journée, cette solution n’est pas faite pour vous.

Http 2

Http 2 permet d’optimiser très largement le temps de téléchargement des assets, car il conserve la même connexion au serveur. HTTP 1 pour sa part initialise une connexion par fichier à télécharger. Cette démonstration http2 vs http1 va vous permettre de vous rendre compte du gain par rapport à http 1.

Le site va télécharger une mosaïque qui est composée de 100 petites images en http 1 puis en http 2. Le gain est environ de 60% de temps de chargement sur mon macbook pro avec une connexion fibre.

Si vous ne savez pas comment faire, ou que vous n’êtes pas techniquement sûr de comment gérer http2 sur votre serveur, vous pouvez utiliser cloudflare. Par défaut, cloudflare va gérer les connexions http 2 tout en continuant de faire des appels http 1 sur votre serveur. Il va s’occuper de multiplexer les requêtes et tout se passera de manière transparente pour vous. Ce n’est pas parfait, mais c’est mieux que rien…

Pré-calculer les différentes tailles

Pour la partie serveur, nous avons maintenant une stack idéale pour afficher rapidement nos images.

Il ne reste que quelques détails à régler. Dans la première partie je vous ai dit de redimensionner vos images au format maximum que vous pourrez un jour utiliser.

Mais pour avoir de bonnes performances, il va falloir aller plus loin.

C’est le moment de pré-calculer l’ensemble des tailles d’images que vous allez utiliser. L’idée est de ne faire télécharger que le strict nécessaire à l’utilisateur. Si nous avons besoin d’une image de 64×64 pixels il est préférable d’envoyer une image qui fait déjà la bonne taille plutôt que de télécharger une grosse image et de laisser le navigateur la redimensionner. Vous allez gagner en bande passante mais aussi en CPU.

Par exemple, sur cocktailand, une image peut actuellement être utilisée avec les tailles suivantes:

  • 64×64
  • 240×180
  • 270×200
  • 400×400

Pour un peu plus de 1000 images sur le site, le travail n’est pas faisable à la main. D’autant plus que je ne m’interdis pas d’ajouter de nouvelles tailles si je modifie le design ou les supports.

Sur Symfony, il existe un bundle liip/imagine-bundle qui permet cette automatisation. Le bundle va générer à la volée les miniatures lors de la première demande puis les stocker sur le serveur pour les prochaines demandes.

Une fois le bundle installé dans votre projet, vous n’avez qu’à enregistrer vos formats dans la configuration et à utiliser le filtre twig.

On pourra remarquer que plus l’image est petite, plus j’ai fait baisser la qualité.

Résultat pour une image déclinée dans plusieurs des tailles:

Respectivement les tailles sont de 2Ko, 12Ko et 39Ko. Il y a donc un facteur 20 entre la miniature et le plus grand format utilisé sur le site.

Lazy loading/ image set

Le dernier point permet un énorme gain de performance, mais il peut aussi impacter votre SEO si vous le faites mal. L’idée est de ne faire télécharger au visiteur que les images qui seront immédiatement visible à l’écran. Si l’image n’est pas visible à l’écran, elle ne sera pas téléchargée au chargement, mais au scroll quand elle entrera dans le viewport. Le problème réside dans le fait de mettre en place cette technique et en laissant Google (ou autre) voir les images. Le paquet npm vanilla-lazyload est vraiment sympa car il répond aux deux points précédents et en plus il permet de mettre en place des « images responsives » via les srcset.

Une fois le paquet installé vous n’avez quasiment rien à faire pour initialiser la librairie.

Une fois la librairie mise en place et instanciée côté javascript, il ne reste plus qu’à utiliser les data attributes des images pour l’utiliser. Voici un exemple d’utilisation avec imagine.

Conclusion

Une fois l’ensemble des techniques mises en place, le chargement de la home ne télécharge « que » 1.2 Mo d’images, publicités incluses. Voici des données issues de webPageTest concernant la home.

Le premier chargement de la page pour un visiteur:

Le second chargement de la page pour un visiteur:

On remarque que le nombre d’assets téléchargés lors du second chargement est plus faible. Si on regarde en détails la liste des fichiers téléchargés, on constate, avec chagrin, que plus rien ne provient de cocktailand. Il ne reste en effet que le tracking et la publicité.

Cocktailand – Monitorer les performances d’un site web

Les outils

Monitorer les performances WEB d’un site web est vraiment indispensable, mais ce n’est pas simple de le faire gratuitement. Il existe des outils en ligne comme SpeedCurve mais c’est relativement cher.

L’idée ici est d’avoir un suivi, certes plus simple, mais de façon gratuite. Il se trouve que j’ai déjà une stack graphite/grafana qui tourne en production. Si ce n’est pas votre cas et que vous avez un serveur avec docker qui tourne dessus vous pouvez toujours démarrer un container avec l’image docker-grafana-graphite pour tester la suite de cet article. Une fois que votre graphite est en ligne on va pouvoir commencer à pousser des metrics dedans. Un outil est très connu pour obtenir des metrics de performance sur un site web. Webpagetest, dont j’ai déjà parlé dans un billet précédent sur la mise en place de varnish et des ESIs. Il se trouve que webpagetest fournie une api.

Pour obtenir une clef d’api il faut en faire la demande sur le site de WebPageTest.

Vous recevrez votre clef par email automatiquement sous quelques minutes.

La mise en place

Il ne reste plus qu’a faire le lien entre les retours de l’API de webpagetest et notre graphite. J’ai choisi de faire un petit script en node js, mais vous pouvez le faire avec ce que vous voulez.

Installer les dépendances

Le script

Très claireiment c’est pas un script optimisé ni prévu pour monitorer plusieurs pages d’un site. Maintenant si vous avez besoin d’étendre son scope ce ne sera pas trop difficile.

Il y a quelques placeholder dans le script à remplacer par vos valeurs:

  • NOM_DU_SITE_OU_DE_LA_PAGE: Le nom de votre site en snake case (ex: cocktailand_fr)
  • VOTRE_URL: L’url de la page à monitorer (ex https://cocktailand.fr)
  • VOTRE_HOST_GRAPHITE: L’ip ou le hostname de votre graphite
  • VOTRE_API_KEY: La clef d’api que WebPageTest vous a donnée

Cronner le script

Je fait tourner le script toutes les heures.

De cette manière je peux analyser le comportement du site sur une journée complète et éliminer les fausses alertes.

Il est en effet possible d’avoir des résultats qui varient en fonctions de plusieurs facteurs extérieur:

  • La saturation du réseau de webPageTest
  • Un agent de webpagetest qui est plus lent qu’un autre
  • Des publicités mal optimisées de la part d’un partenaire

Il ne faut pas s’inquiéter si un résultat est moins bon qu’un autre.

Le but ici est d’analyser une tendance.

Faire un beau dashboard

Maintenant que vous avez toutes vos informations dans votre graphite on peut commencer à grapher ce qui nous intéresse.

Voici par exemple mon dashboard:

Pour ma part je surveille principalement les temps de réponse et le cache avec mon dashboard, mais en fonction des objectifs que l’on se donne on peut axer les graphiques sur d’autres KPIs.

Conclusion

J’ai un suivi des performances. Si grafana est à jour (ce qui n’est pas mon cas) il est même possible d’envoyer des mails d’alertes quand on dépasse une limite fixée.

Après plusieurs semaines d’exploitation je me rends compte que le site en lui-même est stable et avec des performances prévisibles, mais que les grandes inconnues sont les publicités. Une mauvaise pub sur le site peut anéantir tout le travail fait en amont sur les performances.

Performance site wordpress

Booster votre wordpress

Augmenter les performance pour diminuer le temps de réponse de son site devrait être la préoccupation de tout webmaster, afin d’améliorer au maximum l’expérience utilisateur mais aussi pour être mieux référencé sur Google. Nous allons voir dans cet article comment optimiser WordPress pour obtenir un temps de réponse minimal.

Logo wordpress

Il existe une kyrielle de plugins WordPress qui permettent de réduire le temps de réponse de WordPress. Un des plus connus est w3 Total Cache car il possède énormément de fonctionnalités.

Mais après l’avoir installé, je me suis rendu compte que WordPress consommait quasi 100% de tous les coeurs de mon serveur pour afficher une page. C’est un problème qui est assez fréquent avec ce plugin. C’est pourquoi j’ai cherché des solutions alternatives.

Charge CPU avant optimisation

Coté WordPress

WP Super Cache

WP Super Cache est développé par Donncha O Caoimh, auteur de la branche Wp MU.

Le plugin va générer des pages HTML statiques à partir des pages du sites. Les pages sont mises à jour régulièrement (réglable). Ce procédé permet de servir des pages sans avoir à la générer.

La seconde fonctionnalité intéressante du plugin est le pré-chargement des pages pour forcer la mise en cache. Il est possible par exemple de pré-générer ou mettre à jour les caches toutes les 30 minutes. Cette fonctionnalité est très intéressante car même le premier visiteur profitera du cache, contrairement à la plupart des plugins de cache ou c’est le premier visiteur qui va le générer.

WP Minify

Wp Minify est un plugin qui permet la compression et la concaténation des fichiers JS et CSS. Selon la qualité de vos fichiers (en terme de code) il n’est peut être pas possible de les compresser. Dans ce cas la il faut aller dans option avancé et désactiver la minification.

La concaténation des /assets, même non minifiés, permet de diminuer le nombre de requêtes et donc le temps de réponse.

WP Optimize

Wp Optimize est un plugin qui permet de nettoyer et optimiser la base de données de wordpress. Il va aussi défragmenter les tables. Il suffit de le lancer de temps en temps.

jQuery lazy load plugin

jQuery lazy load plugin est un plugin qui pemet de charger les images des pages à la demande. le plugin est basé sur le plugin JQuery Lazy Load.

Ceci permet de diminuer grandement le temps de chargement initial d’une page. Et c’est quand l’utilisateur affichera l’image qu’elle sera chargée.

Sur une page d’accueil où il y a une dizaine d’articles (ou plus) cela peut faire gagner énormément de connexion HTTP.

Conseils de bon sens

  • Eviter d’installer trop de plugins
  • Limiter les JS et CSS externe (hors CDN)
  • Utiliser des images compressées et découpées à la bonne taille

Côté Serveur

Si on veux que le site soit aussi performant que possible, il va falloir, si possible, aller configurer un peu le serveur. Pour cette partie vous allez avoir besoin des accès root sur le serveur.

XCache

XCache est un accélérateur de code PHP. Il va mettre en cache le code PHP compilé afin de ne pas avoir à le re-compiler une prochaine fois. Contrairement à PHP APC, XCache est stable et entièrement compatible avec PHP 5.4+.

Voici un tutoriel qui date un peu, mais qui est toujours d’actualité, qui explique comment faire l’installation de XCache sur un serveur debian : Installer XCache sur Debian.

Configurer Apache

Apache est très configurable, le tutoriel optimiser la configuration d’Apache est assez complet à ce sujet.

MySQL

Pour une installation basique de wordpress le SGBD est MySQL.

Il existe des scripts comme MySQLTuner qui peuvent aider à configurer correctement le serveur MySQL.

Installer un Firewall

Un firewall, par exemple Shorewall permet de faire le tri dans les demandes et de ne pas envoyer à Apache les requêtes de type DDOS. Contrairement au mod_evasive la requête va être ignorée au niveau de la carte réseau. On va donc limiter au maximum son impact sur le serveur en termes de ressources utilisées.

Résultat

Voici le résultat de Yslow sur la page d’accueil du blog une fois toutes les optimisations mises en place.

Et voici le temps de chargement de la vue réseau de Firebug pour le premier et le second chargement de la page d’accueil:

Premier chargement

Second chargement