Ma dernière optimisation boutiquepourbebe.com

 

google-pagespeed-score-boutiquepourbebe

On me contacte parfois pour me demander si je peux optimiser tel ou tel site, sans savoir que j’offre le service d’optimisation de sites.

Si le mandat est intéressant, je dis oui, sinon je passe mon tour.

Ce qu’il faut comprendre c’est que la performance n’est pas qu’une option supplémentaire à ajouter à votre site.

La performance se planifie depuis le début!

Pour avoir un site performant, vous devrez être prêt à reconsidérer complètement ou partiellement les éléments suivants:

  • L’hébergement.
  • Le visuel.
  • Les fonctionnalités (plugins, widgets).

Heureusement, pour ce site j’avais pratiquement carte blanche. Nous avons donc évalué les besoins et nous avons convenus que la refonte graphique était nécessaire.

Technologie utilisée pour le nouveau site

  • Migration chez Digital Ocean
  • Propulsé par Nginx, HHVM et Google PageSpeed
  • Caching par WP Rocket
  • Cloudflare Pro comme CDN

Avec une infrastructure comme celle-là, j’avais tous les éléments en main pour un site rapide.

Optimisation des images

L’un des grands défis de ce site était de bien optimiser l’affichage des images. Il était bien entendu prévu d’utiliser TinyPNG pour optimiser les images automatiquement, mais j’avais quelque crainte par rapport aux milliers d’images déjà présentes sur le serveur. Difficile de prévoir quelles images seraient affichées à quel moment. Et il n’est pas vraiment possible de compresser autant d’images.

J’ai tout de suite compris que le chargement progressif (Lazy Load) serait totalement obligatoire, surtout pour les pages de catégories qui listent plusieurs produits.

Mon objectif était de compresser toutes les nouvelles images avec TinyPNG et d’utiliser Google PageSpeed pour les autres images.

pagespeed EnableFilters lazyload_images;
pagespeed EnableFilters rewrite_images;
pagespeed EnableFilters convert_jpeg_to_progressive,convert_png_to_jpeg,convert_jpeg_to_webp,convert_to_webp_lossless;

Malheureusement, d’après mes tests j’ai compris que l’optimisation des images avec PageSpeed est une opération très coûteuse en ressource serveur. De plus, le chargement progressif ne fonctionnait pas vraiment bien. J’ai donc décidé d’externaliser l’optimisation générale des images avec Cloudflare.

Optimisation des images avec Cloudflare

En effet, Cloudflare offre le service d’optimisation d’images avec les comptes payants, ça serait idiot de ne pas en profiter.

Le slider principal

J’ai essayé plusieurs techniques de slider responsive. Il était important pour moi de ne pas servir des images de 2000px par 600px aux téléphones et aux tablettes.

Je ne suis toujours pas certain qu’il s’agit de la meilleure technique, mais j’ai finalement opté pour l’utilisation de background-image et de media query en CSS. De cette façon, le navigateur ne charge que les images appropriées.

Optimisation des ressources CSS

La concaténation de fichiers CSS est une opération délicate et je dois avouer que les 7 feuilles de styles me rendaient anxieux. Effectivement, la concaténation brisait le site. J’ai donc dû utiliser PageSpeed pour l’optimisation des CSS. Bingo, résultats impeccables avec le serveur qui ne s’emballe pas trop.

pagespeed EnableFilters combine_css,rewrite_css;

CSS critique

Un autre point important est l’optimisation du rendu critique de la page. C’est à dire l’optimisation du contenu au-dessus de la ligne de flottaison.

La vitesse de chargement c’est bien, mais je veux toujours en faire plus en affichant le plus rapidement possible le contenu au-dessus de la ligne de flottaison. Pour cela, je devais trouver un moyen de prioriser le CSS critique et de charger le reste des feuilles de style de façon à ne pas bloquer l’affichage de la page.

Ce n’est pas sorcier pour un petit blogue, mais pour un site avec quelques dizaines d’extensions, c’est presque qu’impossible.

Ce n’est pas tous les sites qui réagisse très bien, mais en activant le bon filtre, c’est-à-dire prioritize_critical_css dans PageSpeed j’ai obtenu de très bon résultats.

pagespeed EnableFilters prioritize_critical_css;

Optimisation des ressources JavaScripts

Ici aussi, la concaténation avec WP Rocket n’a pas fonctionné, je dois dire que je n’avais pas grand espoir.

Comme le site a très bien réagi à l’optimisation des CSS avec PageSpeed, j’ai décidé de tenter le coup avec les JavaScripts aussi.

pagespeed EnableFilters combine_javascript,rewrite_javascript;

Encore une fois, un super travail d’optimisation et le serveur ne semblent pas surchauffer.

Différer les JavaScripts

Comme l’optimisation des fichiers JS fonctionne très bien. Et toujours dans l’optique de retirer tout ce qui peut bloquer le rendu de la page, j’ai donc décidé de tenter le coup et d’activer le filtre qui diffère le chargement des fichiers JavaScripts.

pagespeed EnableFilters defer_javascript;

J’ai été agréablement surpris de constater que rien n’a explosé. Aucune erreur dans la console, tout va bien.

J’ai été surpris que ce filtre fonctionne. Je dois avouer que ce filtre a déjà brisé plusieurs de mes sites et ils étaient beaucoup plus simples que celui-ci.

Conclusion

webpagetest-boutiquepourbebe

Voir le test au complet

Je ne pensais pas obtenir un indice de vitesse aussi impressionnant. Je suis très satisfait des résultats et surtout du coup de main du module PageSpeed qui s’est avéré très utile.

 

Partagez cela
© 2017 , bulledev.com