Comment améliorez la vitesse sur mobile de votre site WordPress ?

Si vous avez déjà exécuté un test PageSpeed ​​ou un autre test de vitesse pour la version mobile de votre site, vous avez sans aucun doute été étonné et inquiet par la faible vitesse et le score par rapport à la version de bureau de votre site.

Dans cet article, je vais vous expliquer:

  • Pourquoi les performances mobiles sont généralement pires
  • La principale cause de la lenteur des pages mobiles
  • Comment créer des versions spécifiques aux mobiles de vos pages
  • Comment supprimer les fichiers inutiles de vos pages mobiles

L’optimisation pour mobile demande un peu d’effort supplémentaire, car les propriétaires de sites «modernisent» généralement leurs sites pour les performances mobiles. Si vous démarrez un nouveau site, ce sera plus facile si vous considérez les performances mobiles dès le départ et en faites une priorité.

Pourquoi mon site Web est-il lent sur mobile ?

Tout d’abord, soyez assuré que c’est tout à fait normal! Les vitesses et les scores mobiles seront pires que ceux du bureau par défaut car :

  • L’outil PageSpeed ​​de Google utilise une connexion 3G lente pour exécuter le test. C’est très différent de la 4G rapide ou du Wi-Fi. Vitesse de connexion plus lente = expérience de chargement plus lente
  • Les appareils mobiles ont généralement moins de puissance de traitement qu’un ordinateur de bureau, il faut donc plus de temps pour traiter tout le code de votre page. Google utilise un appareil de milieu de gamme pour les tests, qui est plus lent que l’iPhone sophistiqué que vous pourriez avoir.

Rendre un site rapide dans des conditions optimales est très différent de l’optimiser pour de mauvaises conditions, comme celles d’un test mobile PageSpeed. Cela demande un travail supplémentaire si vous souhaitez optimiser correctement votre site mobile.

Ce que les propriétaires de site font de mal

De nombreux propriétaires de sites créent leurs sites en pensant aux visiteurs de bureau. Ils chargent leurs pages avec un contenu riche et gourmand en ressources. Ces fonctionnalités peuvent fonctionner correctement sur un bureau. Mais avec les limitations mobiles décrites ci-dessus à l’esprit, vous ne pouvez pas transférer ce même contenu sur une connexion lente vers un appareil limité et vous attendre aux mêmes performances. A

lors que Google continue d’évoluer vers une indexation mobile d’abord, nous devons concevoir nos sites en conséquence. Cela signifie s’assurer que l’expérience mobile est aussi bonne ou meilleure que celle d’un ordinateur de bureau. Nous devons d’abord faire un virage mental vers la conception pour les visiteurs mobiles. Rendez la version mobile de votre site aussi rapide que possible et ajoutez les éléments supperflus uniquement pour les visiteurs sur ordinateur.

Qu’est-ce qui ralentit une page mobile ?

Toutes les mêmes choses qui ralentissent une page pour les visiteurs sur ordinateur ralentiront une page mobile, mais l’impact sera amplifié sur mobile.

Le plus gros problème est normalement JavaScript qui est utilisé pour des fonctionnalités interactives / dynamiques telles que:

  • Curseurs
  • Carrousels
  • Boîtes de Chat
  • Vidéos
  • Widgets avec des flux sociaux (par exemple, afficher des photos Instagram)
  • Animations et autres effets
  • Effets de parallaxe

Pour avoir une idée de la dépendance de votre site à JavaScript, faites cette expérience. Désactivez JavaScript dans votre navigateur et affichez votre site Web. Voyez combien il est encore visible et utilisable. Tout ce qui est cassé ou non visible repose sur JavaScript et ce sont les fonctionnalités potentiellement problématiques de votre site. Si la plupart du contenu n’est pas visible ou si la mise en page est cassée, vous avez des problèmes.

Comment accélérer mon site mobile WordPress?

Vous devez d’abord déterminer ce qui cause le plus de problèmes.

PageSpeed ​​vous indique quels plugins sont à l’orgine du problème.

Lorsque vous exécutez le rapport, portez une attention particulière à ces sections:

  • Réduisez l’impact du code tiers
  • Réduisez le temps d’exécution de JavaScript

Développez-les et vous trouverez certains des plus gros goulots d’étranglement en matière de performances.

Les tiers coupables sont généralement faciles à identifier par le domaine. Lorsque le fichier réside sur votre propre domaine, passez la souris dessus pour voir quel plugin le charge.

Bien, que dois-je faire à propos du JavaScript inutilisé et non optimisé ?

La meilleure technique d’optimisation est la suppression du JavaScript.

La première chose à faire est donc de vérifier toutes ces fonctionnalités – vos visiteurs mobiles en ont-ils vraiment besoin?

Une autre façon d’y penser est la suivante: pouvez-vous vous les offrir du point de vue de la performance? Il y aura un compromis à faire, vous devez donc décider si l’avantage de la fonctionnalité l’emporte sur l’impact qu’elle a sur la vitesse.

Si vous décidez que ce n’est pas crucial pour vos visiteurs mobiles mais bien pour les visiteurs de bureau, vous créeriez idéalement une version mobile de vos pages.

Comment créer une page d’accueil différente pour les visiteurs mobiles sur votre site WordPress

Il existe une gamme de plugins qui vous permettent de créer une version séparée de l’ensemble de votre site pour mobile, avec un thème différent, etc. Mais certaines pages de votre site n’auront pas besoin d’une version spécifique au mobile si elles ne nécessitent pas autant de ressources.

Cependant, de nombreux sites que je vois ont un gros problème avec la page d’accueil. Cela a tendance à être chargé avec des curseurs, des tonnes de contenu en vedette, etc. Vous n’aurez donc peut-être besoin que de créer une version allégée d’une ou deux pages, pas toutes.

Plug-in Mobile Pages

Le plugin Mobile Pages de Pootlepress vous permet de créer facilement une version mobile de n’importe quelle page de votre site. Le plugin fonctionnera mieux sur les sites construits avec Gutenberg. Certains constructeurs de pages ne seront probablement pas compatibles ici, bien que beaucoup proposent leurs propres moyens de créer du contenu spécifique aux mobiles.

Pour utiliser le plugin Mobile Pages:

  • Ajouter un nouveau bloc dans votre page
  • Recherchez le bloc Gutenberg Mobile
  • Cliquez sur le bouton Importer le contenu de la page – cela amène votre contenu existant dans le bloc Gutenberg Mobile.
  • Le contenu de votre page a maintenant été divisé entre le bureau et le mobile et vous pouvez créer une version distincte uniquement pour mobile.

Gardez le contenu mobile vraiment simple et ne le chargez pas de la même manière que vous le faites pour votre version de bureau. Si vous utilisez un plugin de mise en cache, assurez-vous qu’il peut créer une version mobile distincte du cache, sinon la mauvaise version de la page pourrait apparaître.

Découvrir 10 astuces rapides pour améliorer le temps de chargement de votre site web

Supprimez les fichiers inutiles sur mobile avec Asset CleanUp Pro

Après avoir créé du contenu spécifique aux mobiles, vous pouvez également aller plus loin et supprimer tous les fichiers CSS et JS inutiles du chargement sur les appareils mobiles.

La version Pro d’Asset CleanUp vous permettra de contrôler les fichiers à charger en fonction des requêtes multimédias. Cela signifie que vous décidez pour quelles tailles d’écran le fichier doit charger.

Si vous ne pouvez pas supprimer JavaScript, vous devez le retarder

Si vous n’êtes pas prêt à faire des compromis sur le contenu, la meilleure chose à faire pour améliorer les performances est de retarder l’exécution de JavaScript.

Vous pouvez le faire avec un plugin comme WP Rocket ou avec Flying Scripts.

Cette optimisation retarde le chargement et l’exécution de JavaScript jusqu’à ce que le visiteur interagisse avec la page, touche l’écran ou défile, par exemple.

Avantage

Vous obtenez un chargement de page initial plus rapide. Tout contenu non JavaScript s’affichera plus rapidement. JavaScript est masqué de PageSpeed, donc votre score augmente.

Inconvénient

Si la partie visible de votre page nécessite JavaScript et que vous le retardez, le visiteur ne verra rien tant qu’il n’interagira pas. Donc, dans certains cas, cela pourrait fournir une expérience utilisateur étrange. De plus, bien que cette technique améliore PageSpeed, dès que le visiteur interagit avec la page, tout le JavaScript lourd va toujours se charger et causer les problèmes qu’il a toujours causés à votre visiteur réel. Par exemple, si vous avez beaucoup d’annonces sur votre site, vous pouvez retarder le script qui les lance et cela améliorera considérablement votre score PageSpeed. Mais lorsqu’un vrai visiteur fait défiler la page, les publicités et tous les nombreux Mo de JavaScript qui les accompagnent continueront de se charger et auront un impact sur l’expérience utilisateur à ce stade. Cela coûtera toujours la bande passante du visiteur, de l’argent, du temps, etc.

Les optimisations fondamentales s’appliquent toujours

Toutes les autres optimisations standard telles que la compression GZIP, la minification, LazyLoad, etc. s’appliquent pour le mobile comme elles le feront pour le bureau. Mais si vous voulez vraiment avoir une page mobile performante, vous devrez également optimiser le contenu.

Conclusion

L’indexation mobile d’abord et Core Web Vitals devenant réalité, le moment est venu de commencer à travailler sur les performances mobiles de votre site. Faites-en une priorité, pas après coup!

Laisser un commentaire