Comment accélérer la vitesse de son site web sur les mobiles?

Retrouvez dans ce post les éléments qu'il faut absolument revoir pour accélérer la vitesse de son site web sur les mobiles.

L'équipe BY FILLING

Partager cet article

accélérer la vitesse de son site web

Aujourd’hui c’est un fait, il y a plus de mobinautes que d’internautes connectés via les ordinateurs de bureau. La tendance est aux petits écrans et votre entreprise doit s’adapter si elle ne veut pas perdre de potentiels clients. De nombreuses entreprises ont déjà effectué cette mise à jour de leur site afin de permettre à leurs clients de vivre une expérience de navigation agréable quel que soit le support utilisé. Cependant, il n’est pas rare que les performances des sites web sur les supports mobiles soient insatisfaisantes. Un page qui tarde à se charger a un effet négatif sur la façon dont les clients perçoivent votre marque. Cela ne les incitent pas à revenir.

Les causes les plus fréquentent de ces lenteurs peuvent être diverses. De l’optimisation de vos images à l’allègement du code de votre site, retrouvez dans ce post les éléments que vous devez absolument revoir pour diminuer les lenteurs de votre site pour les mobinautes.

1 – Avez-vous bien optimisé votre site pour le mobile ?

Parfois, les sites web ne sont pas vraiment optimisés pour les supports mobiles.

La première question à vous poser dans ce cas est : Avez-vous un site web mobile dédié (comme m.facebook par exemple) ou avez-vous opté pour un site responsive design? L’un comme l’autre sont des méthodes efficaces et avec des avantages non négligeables. Retenez qu’un site responsive design est plus simple à créer, coûte moins cher et s’adapte à tous les écrans tandis que les sites web mobiles sont plus destinés aux petits écrans.

Quelle que soit la stratégie mobile que vous aurez choisi, le temps de chargement des pages de votre site ne doit pas dépasser les 3 secondes. Au delà, vous risquez de voir vos visiteurs s’en aller comme le montre cette étude du site  Kissmetrics.

2 – Vos images sont elles bien optimisées ?

Quel est le poids des images de votre site ? Voilà une question que vous devez vous poser. Si les images de votre site sont trop lourdes, celles-ci n’apparaîtront pas rapidement. Ce ralentissement se matérialise par des temps de chargement qui peuvent être stressants que ce soit sur les ordinateurs de bureau ou les appareils mobiles.

Si vos images ne sont pas au bon format, certains logiciels comme photoshop peuvent vous aider à les normaliser. Choisissez des formats standards comme PNG, JPG ou GIF.

En réglant les problèmes de chargement des images de votre site, vous permettez à vos lecteurs de bénéficier d’une expérience intéressante.

De plus, vous ferez un pas de plus pour sortir du lot des 90% des sites web du Alexa Top 1000 dont la vitesse de chargement des page est affectée par des fichiers images mal optimisés. Pour information, cette étude a été menée sur un  million de sites web par l’entreprise Alexa spécialiste des statistiques sur le trafic du Web mondial.

3 – Vos vidéos se chargent-elles rapidement ?

Si des images qui tardent à se charger est facteur de “stress” chez les internautes, une vidéo qui charge au ralenti c’est pire. Les vidéos ne sont pas pourtant pas à négliger. Ce format est une opportunité de rendre vivant le contenu de son site. Il est d’ailleurs un des formats qui remportent le plus de succès auprès des internautes.

Une étude révélée par Ericsson met en avant le fait qu’une vidéo YouTube qui avait un retard de chargement de deux secondes causait une augmentation de 3% du niveau de stress des téléspectateurs. Pour les utilisateurs de devices mobiles, l’expérience est encore plus désagréable, surtout quand il s’agit d’une connexion grâce aux données cellulaires. Des vidéos qui ne chargent pas rapidement sont d’ailleurs une cause possible d’un taux de rebond élevé.

Si vous utilisez des vidéos dans vos contenus, assurez-vous que celles-ci sont bien mise en arrière plan. Ainsi, leur chargement ne sera pas un élément dérangeant pour le visiteur.

Si vous avez des vidéos longues telles que les publi-reportages, vous pouvez utiliser un lien de partage ou un call-to-action afin que les utilisateurs mobiles puissent s’envoyer la vidéo si celle-ci les intéresse et continuer tranquillement leur navigation.

4 – Avez-vous intégré des médias externes ?

Votre site web embarque t-il des supports externes tels que les vidéos YouTube, ou des applications comme Flickr et autres widgets? Pour un utilisateur mobile, ces ressources peuvent considérablement ralentir la vitesse de chargement.

Pour ces derniers, deux options s’offrent à vous :
Si vous avez un site mobile dédié, vous serez peut-être obligé de supprimer les éléments qui sont à même de ralentir le temps de chargement de la page.

Dans le cas du responsive design cela ne devrait pas poser de problème outre mesure.

{{cta(‘240c755d-937d-4e25-ac71-50fc2b60ddda’)}}

5 – Avez -vous pensé à alléger le code ?

Les pages web contiennent du code pour contrôler la mise en page. Que ce soit CSS et/ou du Javascript, ces éléments sont contenus dans un «fichier de ressources ». C’est ce qui est essentiellement préchargé avant que la page n’apparaisse devant lecteur.

Ce temps de chargement s’il est rapide pour les ordinateurs, il peut paraître long lorsque l’on se connecte via un support mobile.

Pour y remédier, vous pourriez par exemple raccourcir le code afin de réduire les caractères inutiles, qui n’affectent pas le fonctionnement du site. Ainsi, votre site web charge plus rapidement quel que soit le device utilisé.

Il y a également un ensemble de bonnes pratiques que vous pouvez appliquer pour que le code de votre site ne le ralentisse pas :

  • Ne pas inclure le CSS dans le HTML : beaucoup font l’erreur d’inclure le CSS dans le HTML. Même rien ne l’interdit, il est cependant plus recommandé de mettre le CSS dans un fichier dédié.
  • Installer le reset CSS : Chaque navigateur ayant sa façon de fonctionner, cela permettra d’adapter ton site à chacun d’eux en  réinitialisant à 0 la valeur de certains éléments HTML.
  • Organiser son CSS

Vous pouvez également utiliser certains outils comme CSS Lint, pour alléger votre code.

Chaque année, le nombre d’inscriptions ou d’ouverture de compte via smartphone augmente de 3% portant le nombre à 7.3 miliards d’inscriptions en 2015. L’Afrique  présente un des taux de mobinautes les plus élevés. Les entreprises locales doivent par conséquent se donner les moyens de fournir une expérience agréable à ces derniers lorsqu’ils se rendent sur leur site que ce soit en tant que client ou simple visiteur.

Articles similaires