Comment améliorer votre score mobile sur PageSpeed

Il est tout à fait normal que les vitesses des téléphones portables soient plus lentes et que le score de PageSpeed mobile soit inférieur à celui des ordinateurs de bureau. Ce guide vous explique pourquoi, vous recommande les règlages de WP Rocket qui auront le plus d'impact et vous montre les mesures concrètes à prendre pour optimiser davantage votre site sur mobile.

Les conditions d’utilisation des mobiles

Les conditions dans lesquelles les mobiles sont utilisés ne sont pas toujours optimales :

Les appareils ont dès le départ une puissance de traitement inférieure à celle d'un ordinateur
Les connexions Internet peuvent être plus lentes et/ou moins fiables
Selon la localisation de votre visiteur, il se peut qu'il paie un coût élevé pour l'accès à Internet et la bande passante

Tout prend simplement plus de temps sur un mobile. Cela signifie que tout aspect négatif au niveau des performances, qui pourrait ne pas être perceptible sur ordinateur, sera flagrant sur les mobiles.

En ce qui concerne le test PageSpeed pour mobile, il est effectué sur une connexion 4G bridée et sur un appareil très moyen. Les conditions sont donc probablement pires que celles que vos utilisateurs connaissent dans la vie réelle.

Comment WP Rocket peut aider ?

Assurez-vous tout d’abord que la mise en cache pour mobile est activée dans WP Rocket.

Cela appliquera la mise en cache et toutes les optimisations de fichiers pour les visiteurs mobiles. Toutes les fonctionnalités de WP Rocket qui contribuent à la vitesse des ordinateurs de bureau contribueront également à améliorer les performances des téléphones portables. Les éléments suivants peuvent avoir un impact supplémentaire pour les mobiles :

Précharger les polices

Précharger toutes les polices listées dans Précharger les demandes clés

Ressources bloquant le rendu

Dans WP Rocket, activez :

Différer le chargement des images hors écrans

Dans l’onglet Média, activez le LazyLoad

Optimisations supplémentaires

Toutes les meilleures pratiques en matière de performances web s'appliquent aux appareils mobiles tout comme aux ordinateurs de bureau, mais elles auront encore plus d'impact.

Les pages mobiles doivent être aussi légères que possible pour obtenir un score élevé. Vous devez donc être très sélectif quand vous déciderez des fonctionnalités que vous devez effectivement inclure ou pas dans la version mobile de votre site.

Il est important de comprendre qu'il y aura un compromis entre le fait d'avoir beaucoup de fonctionnalités, d'interactivités et d'avoir un site rapide. Vous devez absolument essayer de trouver un équilibre.

Il y a quelques points auxquels vous devez prêter une attention particulière pour la version mobile de votre site :

Supprimez / Reportez le JavaScript

Un trop grand nombre de scripts lents nuira vraiment aux performances de votre site sur mobile.

La suppression et le report du JavaScript sont les éléments les plus importants dans ce cas.

Faites un test PageSpeed en contournant WP Rocket : ajoutez ?nowprocket à votre URL (ex: https://exemple.fr?nowprocket)
Consultez le Diagnostic Réduisez le temps d'exécution JavaScript pour trouver les scripts les plus lents.
Évaluez si vous avez besoin de ces fonctionnalités, ou au moins sur cette page de votre site.
Si possible, supprimez la fonction/le plugin.
Ou bien, chargez-le de manière sélective uniquement sur les pages importantes en utilisant le plugin Asset CleanUp
Si vous conservez le script, essayer de la reporter
S'il ne peut être reporté, déplacez-le plus bas sur votre page afin de ne pas ralentir l'affichage initial de la page. Par exemple, si vous avez un curseur sur votre site, envisagez de le charger au milieu de la page et pas tout en haut.

Réduisez la taille de la page

La réduction de la charge utile du réseau est très importante sur mobile. Visez moins de 1MB pour vos pages mobiles.

Envisagez de remplacer les éléments interactifs comme les sliders par une image statique par exemple
Réduisez la quantité de contenu, comme les articles/produits présentés sur la page
Réduisez le nombre de polices différentes utilisées
Veillez à ce que les images soient correctement dimensionnées et optimisées
Divisez les très longues pages en plusieurs petites
Sur la page d'accueil de votre blog, affichez des extraits d'articles au lieu des articles complets

Supprimez / Réduisez les contenus externes

La puissance de traitement et l'espace d'écran sont limités sur mobile. N'utilisez pas l'espace et les données avec des widgets sociaux, des popups, des requêtes de notification, etc. qui sont probablement rarement utilisés. Tous ces éléments s'interposent entre votre visiteur et votre contenu, augmentent la taille de la page et le temps de chargement.

Le contenu provenant de tiers, c'est-à-dire de domaines externes que vous ne contrôlez pas, se charge généralement plus lentement et de manière moins fiable. Veuillez consulter notre guide : Gérer les ressources externes

Faites un test PageSpeed en contournant WP Rocket : ajoutez ?nowprocket à votre URL (ex: https://exemple.fr?nowprocket)
Cherchez cette recommandation : Réduire l'impact du code tiers et ciblez les principaux responsables.
Vous constaterez probablement que c'est le JavaScript de tierces parties qui est particulièrement problématique, vous pouvez donc utiliser les mêmes conseils que ceux décrits ci-dessus pour remédier à ce problème.
Réduisez le nombre de publicités sur votre site mobile et ne les placez pas en haut de la page
Supprimer les widgets sociaux inutiles comme les flux Instagram / Facebook / Twitter