Best Of Développement Web E-commerce — 02 septembre 2014 — 6 commentaires
Performance web : 5 erreurs à ne pas faire sur votre site

Il y a quelques semaines, nous évoquions ensemble l’impact considérable du temps de chargement sur le succès des sites internet. En effet, un site se doit d’être rapide pour convertir plus, convertir mieux, et convertir plus longtemps !

Découvrons maintenant 5 erreurs à ne pas faire lorsqu’on est webmarketeur, pour avoir un site rapide et efficace.

Oublier de redimensionner ses images

Les images constituent environ 60% du poids des pages : elles impactent donc fortement la performance, et il est essentiel d’y accorder un soin tout particulier.

Le premier point à prendre en compte lorsque vous utilisez une image sur votre site web, est de l’utiliser à la bonne taille. Si une image va s’afficher à une taille inférieure à l’originale, fournissez-la directement aux bonnes dimensions. En effet, configurer une taille d’affichage (souvent gérée avec les attributs HTML width et height) ne change en rien la quantité de données téléchargées par l’internaute.

WordPress par exemple génère automatiquement des miniatures sur vos médias. Mais si elles ne vous conviennent pas et que vous êtes amenés à redimensionner l’image directement dans l’éditeur de billets (en utilisant les poignées qui apparaissent sur l’image quand vous cliquez dessus), vous faites une erreur !

À moins que votre CMS ne prenne en charge cette fonctionnalité, attention donc à toujours générer vos miniatures en amont, avec votre éditeur favori, ou bien à en faire la demande auprès de votre équipe ou prestataire.

Utiliser des images non optimisées

C’est une technique encore trop peu appliquée, mais certains outils permettent d’optimiser les images, et ce sans aucune perte de qualité.

Notre propos n’est donc pas de vous demander de compresser vos photos au maximum, aux dépens de la mise en valeur de vos produits, mais uniquement de vous assurer de la mise en place d’une opération technique dans votre processus de mise en ligne d’images. Les gains seront sans aucun doute conséquents.

S’il on prend l’exemple de la page d’accueil de Webmarketing & Co’m, sur laquelle les images ne sont malheureusement pas optimisées, ce sont 130Ko de données inutiles qui nous sont envoyées à tous. C’est plus de 5 fois la taille du document HTML. Non seulement cela ralentit l’affichage de la page mais cela surcharge également le serveur web.

Comment optimiser les images ?

  • en utilisant un outil en ligne comme kraken.io
  • en automatisant l’optimisation lors de l’upload, avec un plugin pour votre CMS par exemple (nous parlions de WordPress plus tôt, il existe notamment WP Smush.it pour ce dernier)
  • en utilisant les options adéquates dans votre éditeur d’images au moment de l’enregistrement, si ce dernier le propose (Photoshop par exemple le permet)
  • si vous avez l’âme technique, en utilisant des utilitaires comme optipng ou jpegtran, en ligne de commande
    Nous parlons ici d’une optimisation sans perte de qualité : mais rappelons toutefois qu’il est indispensable de faire des compromis sur le web ! Tous vos contenus n’ont pas besoin d’être en haute définition, vos utilisateurs ne vous en feront pas le reproche. En effet, la même photo jpeg, entre une version raisonnablement compressée et une version HD peut avoir un poids qui passe du simple au double.

Ne pas mesurer l’impact d’une fonctionnalité

En tant que webmarketeur, les tentations sont fortes de rechercher l’interactivité maximale et d’insérer des fonctionnalités variées : meilleures ventes, promotions, catégories, partenariats, publicités, etc. Mais cette richesse fonctionnelle ne vient pas sans contrepartie.

Que ce soit pour l’utilisation d’un service tiers (tracking, click-to-chat, widget social…) ou d’un nouveau développement interne, la question de l’impact sur la performance se doit d’être posée.

En effet, toute nouvelle fonctionnalité va faire appel à des ressources (images, javascripts, feuilles de style, etc) et/ou des opérations supplémentaires (traitement côté serveur, requêtes en base de données, etc).

Même si une fonctionnalité peut paraître anodine dans un premier temps, une mauvaise conception peut être dramatique en termes de performance, et donc dégrader l’expérience utilisateur de manière globale.

Quelques exemples de question à se poser :

  • quelle est la valeur ajoutée pour mon utilisateur ?
  • quelle est la valeur ajoutée pour mon entreprise ?
  • cette nouvelle fonctionnalité implique-t-elle l’utilisation d’un nouveau framework, d’une nouvelle librairie ?
  • est-ce un service tiers ? Si oui est-il fiable ? Est-il performant ?
  • l’impact estimé sur le temps de chargement est-il acceptable, en considérant la valeur ajoutée apportée ?

Des questions dont il va probablement falloir discuter avec l’équipe technique.

Si une solution ne s’avère pas suffisamment performante, il existe peut-être une alternative. Et encore une fois, la performance web est une histoire de compromis.

Des outils de diagnostic automatisé (comme DareBoost) vous permettront de mesurer les performances de vos pages, avant et après la mise en place d’une nouvelle fonctionnalité.

Pour résumer ce paragraphe, une citation de Larry Page (fondateur de Google, cité par Urs Hölzle lors de la conférence Velocity en 2010) :

« As a product manager you should know that speed is product feature number one. »

“En tant que responsable produit, vous devriez savoir que la vitesse est la fonctionnalité numéro un du produit.”

Croire qu’un CMS est forcément performant

Les CMS (Content Management System) sont des logiciels qui permettent la gestion de sites web et leur administration. Magento, Joomla, Prestashop, WordPress et Drupal sont quelques exemples d’une très longue liste. Le but est d’offrir une base générique pour répondre à de nombreux besoins, avec un certain degré de personnalisation et de configuration. C’est une solution devenue presque incontournable pour un site dynamique, qu’on parle d’un blog ou d’un site e-commerce. Ils sont d’ailleurs extrêmement répandus (sur w3techs.com on constate que près de 40% des sites internet utilisent un des CMS répertorié, et la liste est loin d’être exhaustive)

Cependant, utiliser une solution reconnue ne signifie pas que la performance sera au rendez-vous. Premièrement, il est plutôt rare que les configurations par défaut soient adaptées pour l’affichage rapide des pages de votre site. Pour PrestaShop par exemple, une documentation est dédiée à l’optimisation. Il en va de même pour la plupart des CMS : nativement des fonctionnalités pour l’optimisation des temps de chargement sont présentes, mais elles ne sont tout simplement pas activées.

Au-delà des fonctionnalités natives, vous trouverez des plugins qui viendront compléter certains manquements de votre CMS, voire des plugins dont l’amélioration des performances sera le seul but (citons par exemple les Français de WP Rocket pour WordPress)

Ne pas surveiller les performances de votre site web

Sans aucun doute, vous surveillez le positionnement de votre site, son taux de conversion ou encore l’engagement de votre public sur les réseaux sociaux. Si vous vous rappelez de notre article Pourquoi la performance web doit être une priorité ? 10 données marquantes, vous l’aurez compris, le temps de chargement est un critère essentiel pour le succès d’une activité web.

Google est l’un des précurseurs de ce sujet, et tend de plus en plus à l’intégrer dans ces différents outils. Saviez-vous que Google Analytics propose du Real User Monitoring ? Autrement dit, si vous utilisez Google Analytics, il vous est déjà possible de connaître les temps de chargement de vos visiteurs, en bénéficiant de la richesse habituelle de la solution. (Comportement > Vitesse du site).

Il est essentiel d’intégrer le temps de chargement aux variables que vous suivez au quotidien. Des solutions de monitoring des performances web existent, elle vous aideront non seulement à détecter rapidement les problèmes (mécanismes d’alerte), mais également à les corriger.

En bref

Les images représentent en moyenne 60% du poids des pages web. Vous devez veiller à les utiliser aux bons formats (pas de redimensionnement en HTML), à les optimiser (traitement automatique) et à faire un compromis entre qualité et poids de l’image.

L’optimisation des temps de chargement doit faire partie des priorités de tout site web, et chaque nouvelle fonctionnalité doit être envisagée sous cet aspect.

Votre CMS est probablement très puissant, mais il faut s’assurer que toutes les conditions sont réunies pour qu’il se mette réellement au service de vos utilisateurs.

Surveillez les performances de votre site, détectez les régressions et les problèmes récurrents, corrigez-les et boostez votre activité !


Crédit photo

Articles similaires

Articles Recommandés



L'auteur

Damien Jubeau

Je suis le CEO de DareBoost, une startup qui fournit un outil en ligne (SaaS) d'analyse de sites Internet : www.dareboost.com. Nous proposons une expertise unique et automatisée pour l'optimisation du temps de chargement de votre site web, mais aussi l'amélioration de sa qualité.Je suis ingénieur informatique et réseaux. J'ai auparavant travaillé pour un éditeur de logiciels pour le marketing mobile. J'ai également été concepteur web en freelance pendant 5 ans.

 


6 Commentaires

  1. Tout à fait d’accord notamment sur le choix du CMS. Le choix du CMS et crucial et les solutions les plus évidentes et connues (WordPress, Drupal, etc.) ne sont pas forcément adaptées pour tout le monde.
    +1 pour les images ce qui represente un vrai problème pour les personnes non-techniques qui doivent mettre à jour le site web de leur entreprise et qui ne savent pas couper ou optimiser une image.

  2. Article clair et très enrichissant !

    Par ailleurs et pour compléter quelque peu, je viens de lire qu’il était maintenant important d’optimiser au maximum la sécurité de son site ( passer au https en d’autre termes) pour s’assurer une meilleure visibilité dans les SERP.

  3. Merci pour ces astuces qui améliorèrent la performance des sites. Je confirme l’importance de redimensionner les images et je vais prendre le temps de lire la documentation de prestashop.

  4. Tout à fait d’accord sur les mises en garde concernant les cms.

    Juste une question à ce sujet. Un site sur lequel on chargerait ses photos pour les recevoir en retour prêtes à l’emploi, çà existe ?

  5. Merci pour vos commentaires.

    @dlerayer, si je comprends bien la question, je pense qu’un exemple se trouve dans l’article :
    http://www.kraken.io

  6. Pour les services tiers, si ceux-ci sont chargés en javascript asynchrone, cela n’a pas d’impact pour le temps de chargement (et donc sur le référencement). Et c’est cela qu’il faut privilégier à mon sens : le script est-il asynchrone ? non : alors je vais voir ce qu’il se fait d’autre.

    Pour l’optimisation des images, perso j’utilise tinypng.com que je trouve très bien.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *