Qu’est-ce que PageSpeed?
C’est un outil qui optimise et implémente pour vous les meilleures pratiques du web selon Google. Il récrit votre site Web afin de le rendre plus rapide pour vos visiteurs. C’est automatique et transparent.
Ça permet de:
- « Minify » le HTML, CSS et JavaScript (enlever les commentaires, le code non-utilisé etc…)
- Récrire les images pour les alléger leur poids
- « Defer » le JavaScript (c-a-d exécuter le JS quand la page a terminé de charger avant)
- Retirer les espaces blancs
- Caching sur la mémoire vive
- Réécrire le CSS et JavaScript de façon optimal
- et bien plus! Voyez la liste complète sur https://www.modpagespeed.com/doc/
Quelles règles dois-je activer?
Lorsque vous activez PageSpeed depuis votre panneau de contrôle World ou cPanel, les règles recommandées sont activées, communément appelées « CoreFilters« . Ce sont des règles très utilisées et qui conviennent à la majorité des sites Internet.
Sur la section « Avancé », vous pouvez choisir des règles plus avancées. Pour ce faire, cliquez sur « Configuration », ensuite « Avancé » et choisissez les règles souhaitées. Nous vous recommandons de consulter la documentation officielle de PageSpeed pour en savoir plus sur chaque règle et son utilité.
Comment débugger en cas de souci?
L’outil permet un débug clair et simple.
Pour ce faire, il suffit de vous diriger sur votre navigateur préféré et ensuite rajouter le paramètre debug. Voyez l’exemple ci-dessous:
https://VOTRENOMDEDOMAINE.com/?PageSpeedFilters=+debug
Ensuite, ouvrez le code source de la page. Vous verrez plusieurs commentaires de débug et à la toute fin vous verrez un bloc similaire à
<!-- mod_pagespeed on Filters: ah Add Head cc Combine Css jc Combine Javascript gp Convert Gif to Png jp Convert Jpeg to Progressive jw Convert Jpeg To Webp mc Convert Meta Tags pj Convert Png to Jpeg ws When converting images to WebP, prefer lossless conversions db Debug ec Cache Extend Css ei Cache Extend Images es Cache Extend Scripts fc Fallback Rewrite Css if Flatten CSS Imports hw Flushes html ci Inline Css ii Inline Images il Inline @import to Link ji Inline Javascript js Jpeg Subsampling rj Recompress Jpeg rp Recompress Png rw Recompress Webp ri Resize Images cf Rewrite Css jm Rewrite External Javascript jj Rewrite Inline Javascript cu Rewrite Style Attributes With Url cp Strip Image Color Profiles md Strip Image Meta Data Options: CssInlineMaxBytes (ci) 32768 EnableRewriting (e) 1 ImageInlineMaxBytes (ii) 32768 JsInlineMaxBytes (ji) 32768 RewriteLevel (l) Pass Through RunExperiment (fur) False #NumFlushes 0 #EndDocument after 1273us #Total Parse duration 1249us #Total Render duration 6797us #Total Idle duration 24us No critical images detected. The following filters were disabled for this request: SupportNoscript -->
Finalement pour comparer le résultat avec PageSpeed et sans PageSpeed, il suffit de rajouter le paramètre qui désactive PageSpeed:
https://VOTRENOMDEDOMAINE.com/?ModPagespeed=off