Comment installer et configurer Mod_PageSpeed de google ?

MAJ 15/06/2017: J’ai mis à jour ma configuration initiale dans la partie « configuration de modpagespeed / Configurer Mod_PageSpeed depuis le vhost ».

Vous l’avez peut-être déjà vu dans les guides précédents, Il y a beaucoup de choses à optimiser pour accélérer son site web et face à cette complexité , Google a eu la bonne idée de nous concocter un module qui permet d’automatiser un grand nombre de ces taches. Mod_PageSpeed fusionne, minifie, compresse, met en cache, optimise vos ressources automatiquement sans se prendre la tête.

Des pages chargées rapidement c’est bon pour votre référencement et Google a compris que c’était aussi dans son intérêt de crawler plus rapidement les pages du web. Les hébergeurs s’y sont pas trompés non plus , certains l’ont déjà intégrées sur leurs serveurs mutualisés, puisque ça leur permet d’économiser de la bande passante en plus de satisfaire leurs clients.

Modpagespeed ne fait pas tout non plus et ne vous dispense pas de suivre les conseils d’optimisations pour améliorer les performances de vos pages, car ce module demande malgré tout des ressources serveur.  Mal configuré, il peux même aggraver la vitesse ou avoir aucun effet sur le temps de chargement. Je vais donc essayer de vous guider pour correctement installer et configurer ce super module.

Les fonctions de mod_pagespeed

Mod_pagespeed est un module apache à installer sur le serveur web. Il contient un certain nombre de filtres pré-installés par défaut qui permettent de réaliser les actions suivantes:

• Optimiser les images (compression et taille)
• Fusionner, minifier et compresser les ressources CSS , JS et HTML
• Ettendre les fonctionnalités de cache

En plus de ces bonnes pratiques de base, d’autres filtres optionnels permettent d’activer un grand nombre de taches supplémentaires comme:

• Retarder le chargement des javascripts
• Enlever les commentaires et les espaces des pages HTML
• Activer le lazy-loading sur les images (les images sont chargées uniquement lorsqu’ elles sont visibles à l’écran)
• Insérer les petites images dans le code
• Et beaucoup d’autres choses

Google n’ a activé par défaut que les filtres considérés comme sûr. En effet, selon les sites, certaines fonctions peuvent créer des incompatibilités et créer des bugs d’affichage.

Installer Mod_Pagespeed

Je pars du principe que le serveur web est déjà installé avec au minimum apache 2.2.

1/Télécharger

Pour installer mod_pagespeed sur ubuntu ou n’importe quel serveur debian, c’est très simple, il suffit de vous rendre sur votre serveur et télécharger la dernière version du .deb avec la commande suivante:

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

2/Installer

Puis de l’installer comme ceci:

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

J’installe ici la version 64 bits sur un serveur apache, la plus commune, et en beta. Depuis quelques temps, les versions beta sont pratiquement finalisées et sont généralement poussées tel quel en version stable 2 mois après. L’avantage c’est de bénéficier tout de suite des améliorations et des corrections de bugs éventuels. Mais si, par mesure de sécurité, vous voulez la version stable, installer la version 32 bits ou l’installer sur un autre type de serveur (fedora, centos,..), rendez vous sur la page téléchargement de google Mod_pagespeed . Pour les serveurs nginx, il faut compiler depuis la source.

3/Activer

Il est installé, le module s’active automatiquement dans apache lors de l’installation (pas besoin de a2enmod logiquement), cependant il faut relancer le service apache :

sudo /etc/init.d/apache2 restart

Pour ne pas interrompre le service apache, vous pouvez remplacer restart par reload, ça marche aussi. Merci Gael G. 🙂

4/Mettre à jour

Modpagespeed est installé dans les dépôts systèmes, il sera automatiquement mis à jour, pensez donc à mettre régulièrement à jour votre système :

sudo apt-get update
sudo apt-get upgrade

Vous pouvez le faire tout de suite, une mise à jour du serveur web renforcera ses performances et sa sécurité.

5/Vérifier que c’est bien installé

Une fois installé et activé, votre site est déjà optimisé avec mod_pagespeed. Vous pouvez vérifier que c’est bien le cas en regardant vos entêtes http à l’aide d’un plugin comme live http headers par exemple. Vous devriez voir une entête qui s’appelle « X-Mod-Pagespeed » suivi du numéro de version. Ou si vous êtes toujours sur votre serveur, vous pouvez utiliser la commande curl pour vérifier la présence de l’entête pagespeed:

curl -D- http://www.votresite.fr | less

Certaines ressources JS et CSS devraient aussi être composées avec « pagespeed » dans le nom.

Configuration de ModPageSpeed

Vous pourriez vous arrêter là, la configuration par défaut est déjà bonne la plupart du temps. Mais en fonction des sites, vous pouvez obtenir de meilleurs résultats en activant des modules supplémentaires. Chaque site étant différent, il faudra tester ce qui marche le mieux dans votre cas. Je vais quand même traiter des options que j’ai activées et qui donnent de bons résultats.

Mettre le cache de mod_pageSpeed en RAM

Le module utilise une mémoire cache sur le disque qui se trouve ici:

 /var/cache/mod_pagespeed/

Les accès disque étant plus lent que les accès en mémoire, on va mettre ce cache en mémoire RAM comme ceci:

sudo rm -rf /var/cache/mod_pagespeed/*
sudo mount -t tmpfs -o size=256M tmpfs /var/cache/mod_pagespeed
sudo echo "tmpfs /var/cache/mod_pagespeed/ tmpfs rw,size=1048M,mode=0777 0 0" >> /etc/fstab

Configurer Mod_PageSpeed depuis pagespeed.conf

Le fichier de configuration principal sur ubuntu et les systemes debian se trouvent ici par défaut:

  /etc/apache2/mods-available/pagespeed.conf

Ce fichier permet d’activer (par défaut) ou de désactiver modpagespeed pour tous les sites:

ModPagespeed on

OU

ModPagespeed off

Il permet d’activer certains systèmes de cache. J’ai pour ma part activé memcached qui est installé sur mon serveur web:

ModPagespeedMemcachedServers localhost:11211

Vous pouvez aussi directement activer ou désactiver certains filtres depuis ce fichier, mais je le déconseille car cette configuration impacterait l’ensemble des sites installés sur le serveur.

Augmenter le cache de Pagespeed

Par défaut, le cache de pagespeed est de 100 Mo (102400 Kb). Cette commande se situe à la ligne suivante:

#ModPagespeedFileCacheSizeKb 102400

Normalement, cette taille devrait être 4 fois supérieur à la taille de ressources à mettre en cache, la taille de votre site. Vous regardez simplement la taille de votre site sur votre ftp et multiplié par 4.
Ensuite vous décommentez la ligne en question avec vos valeurs, par exemple:

ModPagespeedFileCacheSizeKb 409600

Charger les ressources depuis le disque

Par défaut, Mod_pagespeed va chercher les ressources à mettre en cache et à optimiser via des requêtes http executés depuis le serveur. C’est comme si le serveur passait par l’extérieur pour aller chercher des ressources qui sont déjà là, sur le disque. On va donc faire en sorte que mod_pagespeed aille directement chercher ce qu’il a besoin sur le disque système. Pour cela, on fait correspondre l’adresse http avec l’adresse physique du site sur le serveur, avec cette commande:

ModPagespeedLoadFromFile "http://www.votresite.fr/" 
"/var/www/votresite/"

Autoriser d’autres domaines

Par défaut, Mod_pagespeed optimise uniquement les ressources du domaine mais il est possible d’ajouter des ressources servies depuis un sous-domaine par exemple où vous auriez eu la bonne idée de mettre vos images dans un sous-domaine par exemple:

ModPagespeedDomain http://votresite.fr
ModPagespeedDomain cdn.exemple.com
ModPagespeedDomain http://images.example.com/images
ModPagespeedDomain *.exemple.com

Configurer Mod_PageSpeed depuis le vhost

Pour le reste de la configuration, il est préférable d’activer ou pas les filtres optionnels sur le fichier de configuration vhost de votre site qui se trouve ici, sur les serveur ubuntu et debian:

/etc/apache2/sites-available/votresite.fr.conf

Tous les filtres de mod_pagespeed sont disponibles ici

Pour activer des filtres supplémentaires,Voici un exemple de mon fichier de configuration /creapulse.fr.conf

ModPagespeedEnableFilters inline_images,inline_google_font_css,canonicalize_javascript_libraries,lazyload_images,prioritize_critical_css,collapse_whitespace,remove_comments

En plus des modules qui sont déjà activés par défaut, j’ai donc activé les modules optionnels:

• inline_images: permet de mettre directement dans le code les toutes petites images, ça économise des requêtes vers les petites images
• inline_google_font_css: ca economise des requêtes sur les sites qui utilisent les polices Google
• canonicalize_javascript_libraries: ça permet de charger les librairies javascripts les plus connus directement depuis les serveur de Google. Ca marche avec jquery par exemple qui ne sera plus chargé depuis votre serveur mais depuis un CDN de Google et en version minifiée en plus
• lazyload_images: Le lazyloading afin de ne pas charger les images qui ne sont pas visibles à l’écran
• prioritize_critical_css: Il trouve tous les css nécéssaires au chargement initial de la page et le place directement dans le code de la page. C’est assez spectaculaire puisque tous les styles dessus utile au dessus de la ligne de flottaison sont affichés immédiatement.
• collapse_whitespace,remove_comments: C’est assez simple, ça réduit le code html de la page en supprimant commentaires et espaces inutiles.
• defer_javascript: Je l’ai testé mais pas activé finalement, car ça pétait ma page d’accueil. Le chargement du javascript est retardé lorsqu’il est activé mais à bien tester avant.

Certains filtres sont optionnels car ils ne sont pas toujours compatibles sur toutes les configurations comme le defer_javascript dans mon cas, il faut donc bien les tester.

Pour désactiver des filtres

ModPagespeedDisableFilters rewrite_images

Le filtre « rewrite_images » est normalement activé par défaut et sert à compresser et à réenconder les images. Ça semble très bien mais après des tests, j’ai remarqué de moins bonnes performances et également une dégradation de la qualité des images. J’ai donc décidé de désactiver ce filtre. J’optimise déjà mes images avant de les envoyer sur wordpress, avec le meilleur compromis poids/qualité, je n’ai donc pas besoin d’activer ce module qui est gourmand en temps processeur.

Tester

Vous pouvez tester l’efficacité d’un filtre simplement en rajoutant des paramètres dans l’url. L’avantage c’est que vous testez rapidement l’impact d’un filtre sur la vitesse de chargement du site sans modifier la configuration de votre serveur. Vous pouvez voir des exemples de tests en ligne sur cette page.

Désactiver mod_pagespeed:

https://www.creapulse.fr?PageSpeed=off

Pour activer, il suffit bien-sur de mettre « on » à la place.

Ajouter de nouveaux filtres:

http://www.votresite.fr/?PageSpeed=on&PageSpeedFilters=sprite_images

Sur ce dernier exemple, je teste l’impact des sprites images (ou sprite CSS) qui consiste à combiner les images du template en une seule, puis à les appeler via les CSS. Mes tests n’étaient pas non plus très concluants, c’est le genre d’opération qui demande visiblement trop de ressources serveur (et donc plus grand TTFB) par rapport au gain sur le nombre de requêtes gagnées. Ça ne veux pas dire que ce n’est pas une technique intéressante, mais pas de manière automatique. Ca peux aussi créer, selon les sites, des problèmes d’affichage.

Purger le cache de mod_pagespeed

Il se peux que vous ayez parfois besoin de purger le cache de mod_pagespeed car vous avez mis à jour votre site ou dans le cadre de vos tests. Dans ce cas, rentrez cette commande sur le serveur web:

sudo touch `grep "^ *ModPagespeedFileCachePath" /etc/apache2/mods-enabled/pagespeed.conf | awk ' { print $2; } ' | sed 's/"//g'`/cache.flush

Analyser

Mod_pageSpeed stocke des logs sur son utilisation et on peux accéder à des statistiques détaillées via l’adresse votresite/pagespeed_admin.

Pour être en mesure d’y accéder il faut autoriser votre adresse IP à accéder à l’interface d’administration. Si vous utilisez WordPress, il faut aussi désactiver le rewrite engine uniquement sur cette location. Il faut modifier votre fichier pagespeed.conf comme ceci:

<Location /pagespeed_admin>
 <IfModule mod_rewrite.c>
 RewriteEngine Off
 </IfModule>
 Order allow,deny
 Allow from localhost
 Allow from 127.0.0.1
 Allow from VOTREADRESSE-IP
 SetHandler pagespeed_admin
</Location>

L’accès aux statistiques de mod_pagespeed permettent de vérifier les ressources utilisées, l’utilisation du cache et un tas d’informations. Par exemple, sur la capture ci-dessus on voit un graphe sur le « cache misses », ça correspond aux ressources qui n’ont pas été trouvées dans le cache de pagespeed et que probablement la taille du cache est trop petite. Dans ce cas, il faut modifier le pagespeed.conf et augmenter la taille du  » FileCacheSizeKb« . J’ai justement légèrement augmenté la taille de ce cache et on voit sur le graphe que ça a baissé.

Mod_PageSpeed sur IIs: IISSpeed

Pour microsoft IIs 7 et au dessus, la communauté microsoft a eu la bonne idée de porter cette solution apache sur les serveurs windows. Vous pouvez télécharger l’extension iispeed ici et suivre les conseils d’installation ici

Pour aller plus loin

Pour ceux que le sujet passionne, je vous recommande vivement cette vidéo en anglais et qui dure une heure sur le fonctionnement de mod_pagespeed:

Voila, si vous avez des retours d’expérience sur l’utilisation de Mod_PagesSpeed ou des questions sur sa configuration, les commentaires sont la pour ça 🙂

A propos de Serge Esteves

Consultant SEO / Webmarketing : Techniques avancées en référencement combinées aux leviers du marketing entrant (UX, CRO, analytics, content marketing, ereputation, ..).