Comment accélérer le chargement de votre site Web sur mobile (2024)

Les performances de votre site Web sur les appareils mobiles sont désormais plus importantes que sur les ordinateurs de bureau.

En effet, il y a plus de personnes utilisant un mobile pour accéder à Internet que de personnes utilisant des ordinateurs de bureau.

D’après StatCounter, plus de 50 % des internautes dans le monde utilisent des appareils mobiles. Alors qu'un peu plus de 47% seulement utilisent des ordinateurs de bureau.

Si vous optimisez votre site principalement pour le bureau uniquement, vous nuisez au succès de votre entreprise. Le mobile est plus important que jamais.

Les performances de votre site sur mobile sont très importantes pour Le SEO . L'approche de Google est maintenant indexation mobile en premier. Cela signifie que Google utilise la version mobile d'un site Web pour l'indexation et le classement.

Si votre site est rapide sur ordinateur et lent sur mobile, votre classement en souffrira. Les performances de votre site sur mobile devraient être plus importantes que ses performances sur les ordinateurs de bureau.

Accélérer le chargement de votre site Web sur mobile améliorera votre référencement, réduira le taux de rebond et augmentera la conversion.

Mais optimiser un site pour la vitesse sur mobile n'est pas aussi facile que d'optimiser un site pour la vitesse sur les ordinateurs de bureau. Heureusement, cet article peut vous aider à accélérer le chargement de votre site Web sur mobile si vous suivez les conseils que j'ai énumérés ici.

Tester la vitesse de votre site Web

La première chose à faire est de tester la vitesse de votre site sur mobile. Cela vous donnera une image claire de la vitesse ou de la lenteur de votre site.

Ce n'est pas parce que votre site se charge rapidement sur ordinateur qu'il se charge rapidement sur mobile. Il est possible que votre site soit super rapide sur ordinateur mais super lent sur mobile.

Il y a beaucoup de outils de test mobiles, mais je préfère utiliser Google Testez mon site pour le test de vitesse mobile.

Il suffit de visiter Pensez avecGoogle et entrez l'URL de votre site. Vous devriez pouvoir tester la rapidité de votre site.

Pour moi, un site qui se charge en 3 secondes est suffisant. Mais Think With Google recommande au moins 2.4 secondes.

Comment accélérer le chargement de votre site Web sur mobile

Voici les bonnes pratiques pour accélérer votre site sur mobile :

Utiliser un thème responsive

Un thème réactif est un thème qui s'adapte à tous les appareils. Cela signifie que même si vos utilisateurs viennent d'un ordinateur de bureau, d'un mobile ou d'une tablette, votre thème leur fournira une version de votre site Web adaptée à l'appareil qu'ils utilisent.

Servir la version de bureau d'un site Web aux utilisateurs mobiles ralentira le temps de chargement. Et c'est terrible pour l'expérience utilisateur.

Utiliser un thème responsive est très important. C'est la première base d'un site web rapide sur mobile. Vous pouvez choisir parmi plusieurs thèmes réactifs. Lisez ma liste de Top 10 des thèmes WordPress les plus rapides et les meilleurs, n'importe lequel des thèmes répertoriés est assez bon et réactif.

Utilisez un hébergeur rapide

Votre hébergeur joue le rôle le plus important dans l'accélération de votre site Web. Un hébergeur très rapide avec les dernières technologies d'hébergement accélérera le chargement de votre site Web sur mobile.

Si vous avez un hébergeur lent, quelle que soit la manière dont vous optimisez votre site Web, vous ne constaterez peut-être pas d'amélioration significative.

Je recommande Cloudways et Kinsta pour les sites web établis. TendanceCible est hébergé chez Cloudways. Pour les sites débutants, je recommande Bluehost.

Utiliser AMP

Les pages mobiles accélérées (AMP) sont un Projet par Google pour accélérer les sites Web sur mobile.

AMP est optimisé pour la navigation mobile et peut aider à accélérer considérablement le temps de chargement d'un site Web. Ça peut aussi réduire le nombre de demandes de plus de 77% selon une étude.

Vous pouvez démarrer avec AMP en installant le plugin AMP officiel. Il existe d'autres AMP plugins, vous pouvez aussi les utiliser.

Une fois que vous avez activé le plugin, vous pouvez choisir l'un des trois modes disponibles. Si la majorité de vos visiteurs proviennent d'un mobile, envisagez d'utiliser le mode transitionnel ou standard. Mais votre thème doit être compatible AMP.

Images de chargement différé

Les images peuvent ralentir un site Web, plus particulièrement sur les appareils mobiles. La meilleure façon de les gérer est de les charger lorsque les utilisateurs y ont fait défiler. De cette façon, ils ne se chargeront qu'en cas de besoin et n'auront donc que peu ou pas d'effet sur le temps de chargement.

Si vous essayez de tester votre site Web sur Aperçu de la vitesse de la page or Web.dev et vous êtes averti de "différer les images hors écran", cela signifie que les images ralentissent votre temps de chargement et vous devriez envisager de les charger paresseux.

Le chargement d'images paresseux consiste à retarder le chargement des images jusqu'à ce qu'un utilisateur y fasse défiler. Cela peut améliorer la vitesse.

Il y a de nombreux plugins pour gérer le chargement paresseux. La plupart des plugins de cache et des plugins d'optimisation d'image ont des options de chargement paresseux.

Éliminez les ressources bloquant le rendu

L'élimination des ressources bloquant le rendu peut accélérer le temps de chargement de votre site Web sur mobile.

Il existe généralement des scripts Java et CSS qui empêchent le navigateur de rendre rapidement un site Web lorsqu'un utilisateur le visite. En effet, le navigateur doit s'arrêter et lire ces fichiers avant de pouvoir rendre le site à l'utilisateur.

L'élimination de ces ressources peut accélérer le temps de chargement. Il existe des plugins comme Autoptimize qui peuvent aider à éliminer les ressources bloquant le rendu.

J'ai un article utile à ce sujet, vous devriez lire: Comment éliminer les ressources bloquant le rendu dans WordPress.

Supprimer les CSS inutilisés

Avoir beaucoup de CSS inutilisés peut ralentir un site Web. Les CSS inutilisés sont des CSS qui ne sont pas nécessaires au chargement d'un site Web. Mais parce qu'ils sont présents, le navigateur doit toujours les télécharger, les analyser et les traiter.

Il existe des plugins tels que Perfmatters et Nettoyage des actifs qui peut aider à supprimer les CSS inutilisés.

J'ai écrit un guide simple à ce sujet: Comment supprimer les CSS et JS inutilisés dans WordPress.

Générer un CSS critique

Le CSS critique est utilisé pour extraire facilement le contenu au-dessus de la ligne de flottaison afin de le rendre rapide pour l'utilisateur. Avoir un chemin CSS critique peut accélérer le temps de chargement de votre site Web sur mobile et ordinateur de bureau.

Il existe des plugins qui peuvent aider à générer du CSS critique. WP Rocket peut le faire, LiteSpeed ​​Cache et Performances WP peut également générer du CSS critique.

Avoir un bon système de cache

La mise en cache est un moyen très fiable d'accélérer un site Web. Vous devez utiliser un plugin de mise en cache efficace pour servir le contenu mis en cache à vos visiteurs mobiles. WP rocket est un plugin de mise en cache premium très efficace. Le cache W3 Total, s'il est bien configuré peut être très efficace.

pont sociétés d'hébergement Web gérées offre une mise en cache au niveau du serveur. Découvrez si votre hébergeur propose la même chose et demandez-lui de l'activer pour votre site s'il n'est pas prêt à l'emploi.

Vous pouvez demander à votre hébergeur d'installer et d'activer le cache Varnish. Le cache de vernis est connu pour accélérer les sites Web.

Optimisation des images

Assurez-vous de compresser les images. Je préfère compresser complètement les images avant de les télécharger. Cependant, il existe de nombreux plugins tels que optimal et d'autres qui peuvent aider à compresser les images dans WordPress.

La diffusion d'images WebP peut également aider à augmenter la vitesse du site Web. WebP est plus petit que JPG et PNG, donc plus rapide.

Il existe de nombreux plugins qui peuvent aider à convertir et à servir des images WebP. Optimole et images volantes peut très bien le faire.

Réduire le code

La minification est le processus de compression du code d'un site Web d'une taille plus grande à une taille plus petite. Le plus petit sera le mieux tant qu'il ne casse rien.

Vous devriez envisager de minifier JS et CSS.

La plupart des plugins de mise en cache offrent des fonctionnalités de minification. Mais assurez-vous d'utiliser la mise en scène pour tester, car la minification est connue pour casser les sites Web.

Minimiser les redirections

Trop de redirections peuvent ralentir votre site Web, surtout sur mobile. Cela peut ralentir le temps de réponse du serveur.

Assurez-vous que vous n'avez pas trop de redirections. Si c'est le cas, réduisez-les autant que vous le pouvez.

Activer la compression

Compressez les fichiers pour rendre votre site Web rapide sur mobile. Plus les choses sont petites, plus votre site sera rapide.

Gzip ou Brotli peuvent considérablement augmenter la vitesse de votre site Web en compressant les fichiers du site Web. Généralement, Brotli est meilleur que Gzip. Mais n'importe lequel d'entre eux fonctionnera bien. Vérifiez auprès de votre hébergeur pour activer la compression pour vous.

Il existe également des plugins qui peuvent vous aider à activer la compression si une solution de plugin vous convient mieux.

Réduire le nombre d'AdSense par page

Google AdSense est l'un des plus populaires façons de gagner de l'argent en bloguant, mais il est également connu pour ralentir considérablement les sites Web.

D'après mon observation, si vous désactivez AdSense, vous remarquerez instantanément une très grande différence dans votre temps de chargement.

Mais l'argent est très important ainsi que la vitesse. Il faut donc trouver un compromis. Google recommande 3 blocs d'annonces par page. Si vous vous en tenez à cela, alors ça devrait aller.

J'ai remarqué que les unités de contenu correspondant et les annonces au niveau de la page ont l'impact le plus négatif sur le temps de chargement sur mobile.

Utiliser un CDN

A Content Delivery Network peut aider à augmenter la vitesse de votre site Web en créant une copie statique de votre site Web et en la proposant aux utilisateurs du monde entier depuis un emplacement plus proche d'eux lorsqu'ils tentent de visiter votre site Web.

Si vous n'utilisez pas de CDN, vous manquez quelque chose !.

Jetez un coup d'œil au meilleurs fournisseurs de CDN WordPress.

Utiliser la police de la pile système

Récemment, j'essayais d'accélérer le temps de chargement de ce site Web sur mobile. J'ai donc décidé d'arrêter d'utiliser la police Google et d'essayer la pile système, et à ma grande surprise, il y a eu une amélioration significative de la vitesse.

Les polices Google et Font Awesome sont incroyables, mais elles peuvent ralentir le site Web. L'utilisation de la pile système garantit qu'aucune demande externe n'est effectuée, car c'est la police de l'appareil utilisé par l'utilisateur qui est nécessaire.

Certains thèmes facilitent le passage à la pile système. Passez simplement à la pile système.

Utiliser les nouvelles versions de PHP

Les nouvelles versions de PHP sont généralement plus rapides que les anciennes. Vous devez vous assurer que vous utilisez la dernière version de PHP ou une seule version antérieure.

Pas seulement pour la vitesse, mais aussi pour sécurité.