PageSpeed Insights (PSI) est une outil, proposé par Google. Il permet de tester et d’améliorez la vitesse de chargement de vos pages web sur ordinateurs et mobiles.

Son utilisation est très simple. Il vous suffit de renseigner l’url de page web et PageSpeed Insights vous indiquera un score sur 100 en fonction de l’optimisation de votre site internet.

En plus de cette notation, PageSpeed Insights vous donnera des indications pour améliorer votre score. Cet article va vous aider à comprendre ces indications pour obtenir un score de plus de 90/100.

Optimisation des images

Le temps de chargement d’un site est souvent ralenti par des images trop lourdes. La première étape et la plus simple, consiste donc à réduire le poids de vos images.

Pour cela, rien de plus simple. De nombreux outils existent. Celui que j’utilise personnellement est Compressor. Il est gratuit et fonctionne en ligne. Compressor accepte les formats JPEG, PNG, GIF ou SVG. Une fois chargée, votre image est compressée et est donc moins lourde. Vous pouvez ainsi obtenir une réduction de 90% du poids de l’image tout en préservant la qualité.

Cette première étape devrait sans nul doute déjà faire augmenter votre score PageSpeed Insights. Mais pour que votre site soit encore plus performant, je vous recommande de poursuivre. Alors, passons à l’étape suivante.

Autoriser la compression

Ici nous rentrons dans la partie technique mais très facile à comprendre. Nous allons notamment nous pencher sur l’outil de compression GZIP.

Intérêt de la compression

Pour les webmaster, la compression avec l’outil gzip offre de nombreux atouts.

Lorsque ce dernier est activé, le serveur Web initie automatiquement la compression de l’espace Web téléchargé. Cela permet une réduction considérable du temps de chargement du site sur ordinateur ou sur mobile.

Comment utiliser GZIP

L’utilisation de l’outil de compression GZIP passe par quelques lignes de codes. Tout d’abord, créer un fichier nommé .htaccess et insérer le à la racine de votre site (si vous ne parvenez pas à le nommer directement ainsi, enregistrez le sous le nom htaccess et  renommez le une fois que vous l’aurez placé sur votre espace web, en .htaccess et sans oublier de retirer l’extension .txt). Puis, copiez-collez ce code dans votre fichier .htaccess :

## activation ZEND optimizer
SetEnv ZEND_OPTIMIZER 1

## suppression de SESSID dans les url
SetEnv SESSION_USE_TRANS_SID 0

## serveur en PHP5
SetEnv PHP_VER 5

## Commenter la ligne ci-dessous si plantage
# php_flag zlib.output_compression on

## Activer le filtre
SetOutputFilter DEFLATE

## Certains navigateurs ne peuvent pas avoir GZIP (les vieux)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0678 no-gzip

## On ne prend pas IE
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

## On ne compresse pas les images, elles le sont déjà
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary

## on gère le cas des proxy
Header append Vary User-Agent env=!dont-vary

Enregistrez et voilà c’est fait ! Vous pouvez tester la compression via PageSpeed Insights, si l’indication « autoriser la compression » ne s’affiche plus c’est que cela fonctionne.

Mise en cache du navigateur

La mise en cache permet au serveur d’indiquer au navigateur de garder les fichiers en mémoire. Cela évite que ces derniers soient téléchargés à chaque fois qu’un internaute visite votre site. Le site se charge alors beaucoup plus vite.

Pour mettre en cache vos fichiers, insérez ce code dans votre fichier .htaccess à la suite du code précédent :

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault « access plus 7200 seconds »
ExpiresByType image/jpg « access plus 2592000 seconds »
ExpiresByType image/jpeg « access plus 2592000 seconds »
ExpiresByType image/png « access plus 2592000 seconds »
ExpiresByType image/gif « access plus 2592000 seconds »
AddType image/x-icon .ico
ExpiresByType image/ico « access plus 2592000 seconds »
ExpiresByType image/icon « access plus 2592000 seconds »
ExpiresByType image/x-icon « access plus 2592000 seconds »
ExpiresByType text/javascript « access plus 2592000 seconds »
ExpiresByType text/css « access plus 2592000 seconds »
ExpiresByType text/html « access plus 7200 seconds »
ExpiresByType application/xhtml+xml « access plus 7200 seconds »
ExpiresByType application/javascript A2592000
ExpiresByType application/x-javascript « access plus 2592000 seconds »
ExpiresByType application/x-shockwave-flash « access plus 2592000 seconds »
</IfModule>
# END Expire headers

# BEGIN Cache-Control Headers
<IfModule mod_headers.c>
<FilesMatch « \.(ico|jpe?g|png|gif|swf|css|gz)$ »>
Header set Cache-Control « max-age=2592000, public »
</FilesMatch>
<FilesMatch « \.(js)$ »>
Header set Cache-Control « max-age=2592000, private »
</FilesMatch>
<filesMatch « \.(html|htm)$ »>
Header set Cache-Control « max-age=7200, public »
</filesMatch>
# Disable caching for scripts and other dynamic files
<FilesMatch « \.(pl|php|cgi|spl|scgi|fcgi)$ »>
Header unset Cache-Control
</FilesMatch>
</IfModule>
# END Cache-Control Headers

Enregistrez et  testez la compression via PageSpeed Insights, si l’indication « exploiter la mise en cache du navigateur » ne s’affiche plus c’est que cela fonctionne.

Attention : Une fois la mise en cache activée, les futures modifications de vos fichiers mis en cache ne seront pas visibles à moins de vider le cache. Ne mettez donc en cache que les fichiers qui subissent peu voire pas du tout de modifications. Vous pouvez choisir de ne pas mettre des fichiers en cache en les supprimant simplement du code ci-dessus. Par exemple, si vous ne souhaitez pas mettre en cache le fichier CSS, supprimez le ligne « ExpiresByType text/css « access plus 2592000 seconds » ».

Éliminer les codes JavaScript et CSS

Votre site comprend des fichiers JavaScript ou CSS sans qu’ils aient une quelconque utilité ? supprimer les fichiers inutiles sera bénéfique pour votre score PageSpeed Insights.

Autre astuce : regrouper les fichiers de même type pour en réduire le nombre.

Réduire la taille des ressources HTML et CSS

De la même manière que le point précédent, il y a peut-être dans vos codes des lignes qui n’ont pas d’utilité ou redondantes. Nettoyez vos fichiers permet de libérer de nombreux octets de données et réduire ainsi les délais de téléchargement et d’analyse.

Voilà en suivant toutes ces recommandations, vous devriez obtenir un score de plus de 90/100 sur PageSpeed Insights. Cela sera bénéfique pour votre SEO. Un site plus performant offre aussi une meilleure expérience utilisateurs qui auront un accès plus rapide à l’information.