Google Pagespeed tool : des améliorations sur l’affichage du site

Accueil / Articles / Google Pagespeed tool : des améliorations sur l’affichage du site
Google Pagespeed tool : des améliorations sur l'affichage du site

Article publié le 24 février 2017  Mot(s) clé :   Référencement  Enregistrer au format PDF   Version PDF

Je note ici les améliorations mises en place sur mon site Les Editions Blanche de Peuterey pour obtenir un meilleur résultat sur l’outil PageSpeed Insights, et un affichage sensiblement plus rapide.

l’outil est disponible depuis la Search Console (Autres ressources > Google PageSpeed Insights) Lors du premier test, les résultats étaient assez mauvais : rouge pour la version mobile, et orange pour la version ordinateur

Compresser les images

J’utilise le compresseur en ligne https://compressor.io/ pour compresser plusieurs de mes images, et je gagne quelques points. Facile à faire

Éliminer les codes JavaScript et CSS qui bloquent l’affichage du contenu au-dessus de la ligne de flottaison

Optimisez l’affichage des css

Comme cela est expliqué dans la page « Optimiser la diffusion des ressources css », il semblerait qu’il soit préférable d’inclure le css dans la page web que de faire un appel à un fichier extérieur pour des « fichiers css de petite taille ».

J’ai donc supprimé les appels au fichier css dans le <head> et j’en ai copié le contenu entre deux balise <style> et </style> dans les fichiers de mon site

Supprimez les ressources JavaScript qui bloquent l’affichage

Manifestement Google n’aime pas que l’on appelle les scripts au début de l’affichage de la page (dans le <head>). En ce qui me concerne, je ne peux pas les appeler à la fin de la page, car j’ai un diaporama en tête de site.

En revanche, je peux appeler les scripts juste au moment où j’en ai besoin dans ma page. Et l’amélioration dans Google page speed est très significative

Minifier les css

Spip le fait automatiquement grâce à une fonctionnalité dans l’espace privé, mais ici, pour un site sous Thélia, il n’y a pas de fonction semblable. J’ai donc utilisé http://www.cleancss.com/css-minify/ (en prenant soin de garder une copie du fichier original (baptisé main_avant_compression.css)

La compression du fichier css pour le diaporama ne fonctionne pas (le diaporama ne défile plus). Je ne peux pas pour l’instant faire mieux.

à suivre : temps de réponse du serveur, utilisation du cache du navigateur, compression HTML

Ces articles peuvent vous intéresser