Automatiser les performances Web avec mod_pagespeed de Google

Automatisation des performances Web avec mod_pagespeed
J’adore optimiser le chargement de mes sites Web. Des tâches comme réduire le nombre de requêtes, minifier les feuilles de styles et l’optimisation des images font partie de mon quotidien. Je peux toutefois comprendre que ce n’est pas pour tous et que cela peut parfois devenir fastidieux. En particulier pour les projets complexes et de grande envergure.

Quoi qu’il en soit, la performance Web reste nécessaire. C’est pourquoi les ingénieurs de Google ont créé un module pour serveur Web (Apache et NGINX) qui automatise les bonnes pratiques de performances Web.

Possibilités d’optimisations

PageSpeed fonctionne avec un vaste éventail de filtres et plusieurs d’entre eux sont activés par défauts.

add_head
combine_css
combine_javascript
convert_meta_tags
extend_cache
fallback_rewrite_css_urls
flatten_css_imports
inline_css
inline_import_to_link
inline_javascript
rewrite_css
rewrite_images
rewrite_javascript
rewrite_style_attributes_with_url

Les filtres par défauts concentrent leurs efforts sur les problèmes d’optimisation les plus communs. Soit, l’optimisation des CSS, des JavaScript, des images et de la mise en cache des ressources statiques.

Plusieurs autres filtres sont disponibles pour personnaliser davantage l’optimisation de votre site Web. Ils vous permettront entre autres de:

Installer mod_pagespeed pour Apache

Installer PageSpeed nécessite une connexion SSH, ce n’est normalement pas disponible avec les serveurs partagés. Si tel est le cas, je vous suggère de demander à votre hébergeur si mod_pagespeed est déjà installé, car dans le cas contraire vous ne pourrez pas bénéficier des avantages du module. À moins de migrer sur un autre serveur!

1. Ouvrir une connexion

Nous devons nous connecter au serveur pour installer le module.

ssh [email protected]_ip

2. Télécharger le module

Nous devons ensuite télécharger le module sur le serveur.

wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_amd64.deb

Autres versions disponibles: (dernières versions stables)

32-bit .deb (Debian/Ubuntu) https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_i386.deb
64-bit .deb (Debian/Ubuntu) https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_amd64.deb
32-bit .rpm (CentOS/Fedora) https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_i386.rpm
64-bit .rpm (CentOS/Fedora) https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_x86_64.rpm

Note: Certains filtres ne fonctionnent pas au moment ou j’écris ces lignes, avec la dernière version stable (ex: prioritize_critical_css ). Si vous êtes dans cette situation, je vous suggère d’utiliser une version bêta.

3. Installation du module

Installation simple et rapide.

sudo dpkg -i mod-pagespeed-*.deb
apt-get -f install

Nettoyage du fichier téléchargé.

rm mod-pagespeed-*.deb

4. Redémarrer Apache

Le module est maintenant installé. Vous devez redémarrer votre serveur Apache pour que les changements prennent effet.

service apache2 restart

Pour vous assurer que PageSpeed est bien installé et activé sur votre serveur, vous pouvez bien entendu regarder la source de votre site, mais également par l’inspecteur de Chrome.

Inspecteur de chrome pour détecter mod_pagespeed

De cette façon, vous connaissez la version de mod_pagespeed qui est installé sur votre serveur.

Tester une configuration mod_pagespeed

Parce qu’il s’agit d’un module, il est nécessaire de redémarrer Apache à chaque fois que vous désirez appliquer une nouvelle configuration, ce qui n’est pas pratique pour expérimenter plusieurs scénarios.

Heureusement, les ingénieurs de Google ont prévu cela. Il vous est possible d’activer et de désactiver des filtres à la volée, grâce à des paramètres d’URL.

Activer / désactivez mod_pagespeed


http://www.votresite.com/?PageSpeed=off
http://www.votresite.com/?PageSpeed=on

Ajouté / retiré des filtres

Il est possible d’activer des filtres en ajoutant l’opérateur “+” et de retirer des filtres avec le “-”.


http://www.votresite.com/?PageSpeedFilters=+lazyload_images,-inline_images

N’oubliez pas que chaque filtre doit être séparé par une virgule.

Configurer mod_pagespeed

Une fois satisfaits des résultats, il ne vous reste plus qu’à configurer le module. Pour cela, vous devez modifier le fichier “pagespeed.conf” disponible sous “/etc/apache2/mods-available/”.

Pour cela, vous pouvez utiliser votre éditeur SSH préféré tel que Nano, mais personnellement je préfère procéder avec un bon vieux logiciel FTP.

Activer des filtres

ModPagespeedDisableFilters filtera,filterb

Désactiver des filtres

ModPagespeedDisableFilters rewrite_images,combine_css

mod_pagespeed et WordPress

Plusieurs d’entre vous me diront peut-être “Je n’ai pas besoin de ça, mon site est déjà configuré avec une extension de caching”. Il est vrai qu’une extension de caching est primordiale avec WordPress. Il n’y a cependant rien qui vous empêche de configurer mod_pagespeed également puisqu’il est complémentaire sur plusieurs aspects.

La plupart des extensions de cache ne permettre pas:

  • De différer le chargement des scripts.
  • De prioriser le CSS essentiel.
  • De charger progressivement vos images.
  • De modifier à la volée les images pour l’utilisateur.

Bref, je vous le suggère fortement!

Ma configuration

Voici la configuration que j’utilise sur ce site.

ModPagespeedRewriteLevel CoreFilters
ModPagespeedEnableFilters prioritize_critical_css
ModPagespeedEnableFilters defer_javascript
ModPagespeedEnableFilters sprite_images,lazyload_images
ModPagespeedEnableFilters convert_png_to_jpeg,convert_jpeg_to_webp
ModPagespeedEnableFilters remove_comments
ModPagespeedEnableFilters insert_dns_prefetch

Avec cette configuration, vous devriez vous rapprocher du 100% dans Page Speed Insights.

À votre tour

De quelle façon automatisez-vous la performance de votre site? Pour ceux qui ont essayé mod_pagespeed, avez-vous eu de bons résultats?

Partagez cela
© 2017 , bulledev.com