6 façons d'accélérer le chargement de votre site Web

Votre site Web pourrait être le plus beau site du monde, mais il ne vous servira à rien s'il met une éternité à se charger. Avouons-le. Les gens sont impatients et un site Web lent empêche les clients potentiels de finaliser leur achat.

Lorsque je fais des achats en ligne, je m'attends à ce que les pages se chargent au pire dans les 5 à 10 secondes. Plus longtemps que cela et je deviens nerveux ou je quitte complètement le magasin.

Bien sûr, certaines personnes peuvent être plus patientes que moi, mais pourquoi prendre le risque ? Jouez la sécurité et rendez votre site Web professionnel aussi rapide que possible.

Photo par Meddygarnet

Avant de commencer cependant, la première chose que vous devez déterminer est à quelle vitesse est assez rapide ? L'étendue des optimisations de votre site Web dépend en grande partie des analyses et des données démographiques de vos visiteurs Web.

Par exemple, il y a 3 ans, lorsque ma femme et moi avons lancé notre boutique en ligne pour la première fois, plus de 35% de nos clients utilisaient l'accès commuté. En conséquence, nous avons dû réduire considérablement la conception de notre site Web afin de fournir une expérience d'achat rapide en supposant un taux de téléchargement de 56K seulement.

Aujourd'hui, seuls 2% de nos clients utilisent l'accès commuté (Dieu merci !) afin que nous puissions ajouter plus de contenu multimédia en toute sécurité sans affecter l'expérience utilisateur.

Pour déterminer la taille maximale d'une page donnée, je multiplie généralement 5 secondes par la bande passante moyenne pondérée de mes visiteurs Web. Par exemple, si la plupart de mes visiteurs utilisent DSL, je pourrais supposer une vitesse de téléchargement de 1 Mbit et décider que 5 Mbits est la taille maximale que devrait avoir une page Web donnée.

Ce n'est pas une science exacte. En fin de compte, vous devez décider vous-même de la vitesse à laquelle votre site Web doit être.

Dans tous les cas cependant, plus vite est toujours mieux. Comme je l'ai mentionné dans mon dernier message, la vitesse du site Web n'est pas toujours fonction de votre hébergeur. En fait, la plupart du temps, le webmaster est responsable d'un site Web lent et non d'un serveur lent. Cet article décrira quelques conseils sur la façon d'accélérer les choses.

Décidez de ce qui est le plus important et réorganisez le chargement

Rendre votre site Web plus rapide ne consiste pas toujours à supprimer des images et du contenu. Parfois, vous pourriez aimer votre site exactement tel qu'il est et vous n'avez pas vraiment envie de changer quoi que ce soit.

Si tel est le cas et que votre site Web est lent, vous pouvez souvent vous en tirer en priorisant simplement la façon dont votre page se charge.

Que voulez-vous que l'utilisateur voie en premier ? Dans la plupart des cas, vos visiteurs ne craindront pas un site plus lent tant que les éléments importants seront chargés en premier et que le contenu se terminera plus tard.

Par exemple, avec MyWifeQuitHerJob.com, je m'assure toujours que tout le contenu juteux s'affiche en premier avant les publicités. De cette façon, si les annonces sont un peu lentes à charger, cela ne ralentira pas tout le blog.

Les pages Web se chargent toujours dans l'ordre séquentiel, vous devez donc toujours placer les éléments que vous souhaitez charger en premier en haut de votre page et les éléments les moins importants à la fin de votre document html.

Dans le cas d'éléments qui doivent apparaître dans une position spécifique sur la page, vous pouvez soit utiliser javascript ou css pour contrôler l'ordre de chargement.

Par exemple, même si mon annonce de classement 728 × 90 apparaît tout en haut de mon MyWifeQuitHerJob.com, je m'assure qu'elle se charge en dernier en effectuant les étapes suivantes.

• Je crée un <div id="banner728″> vide où l'annonce doit être et je mets son identifiant sur "banner728". Cela crée effectivement un espace réservé vide que je peux charger plus tard à l'aide de javascript
• À la toute fin de la page, j'inclus l'extrait de code javascript suivant
  <type de script="texte/javascript">
  document.getElementById("banner728").innerHTML = "code de bannière publicitaire souhaité" ;
  </script>
  Ce code trouve l'espace réservé « banner728 » que j'ai défini ci-dessus et insère la bannière publicitaire dans le <div>. Comme ce script se trouve à la toute fin du fichier, il se charge en dernier après tout le reste.

N'utilisez pas le redimensionnement d'image HTML

Une erreur courante que de nombreux débutants commettent est de s'appuyer sur HTML pour réduire et redimensionner les images. Bien que cette technique fonctionne et semble inoffensive, elle tuera absolument les performances de votre site Web.

La raison en est que l'intégralité de l'image originale doit être chargée avant d'être affichée, même si vous ne montrez qu'une image beaucoup plus petite.

Pour éviter de tomber dans ce piège, assurez-vous de prendre le temps de réduire l'image aux dimensions souhaitées avant de l'afficher sur votre site. Ne vous contentez pas d'extraire des images directement de votre appareil photo numérique.

Optimisez vos images

L'œil humain est beaucoup plus indulgent en termes de qualité d'image lorsqu'il regarde une image autonome sur un écran d'ordinateur. Par conséquent, vous pouvez vous en tirer avec des images de bien moindre qualité pour votre site Web.

Assurez-vous d'optimiser et de réduire vos images autant que possible avant de les afficher sur votre page. Je choisis souvent une qualité JPEG de 50 % ou moins en utilisant Photoshop avec les images de mes sites.

Si vous utilisez GIFS, assurez-vous que vous n'utilisez pas une palette de couleurs plus large que ce dont vous avez vraiment besoin. Si vous pouvez vous en tirer avec seulement 16 couleurs, choisissez votre GIF avec seulement une palette de 16 couleurs.

Analysez tous vos GIFS pour vous assurer qu'aucun des emplacements de couleur n'est gaspillé par des doublons.

Hébergez des vidéos et de grandes images avec un tiers

À moins que vous n'hébergiez votre site Web sur un ensemble de serveurs puissants, un contenu multimédia riche ralentira votre site à un rythme effréné. En général, il est beaucoup plus économique d'héberger vos vidéos et fichiers plus volumineux sur un service tiers avec une infrastructure plus robuste qui prend mieux en charge le streaming.

Par exemple, au lieu d'héberger des vidéos sur votre propre serveur, pourquoi ne pas utiliser YouTube ou Vimeo ? Si vous souhaitez posséder le contenu que vous produisez, vous pouvez également payer et utiliser un service comme le S3 d'Amazon. Laissez le contenu à large bande passante pour les grands.

Évitez d'utiliser du code tiers ou des images liées

Chaque fois que vous associez une image ou exploitez un code hébergé sur un autre serveur, vous mettez en danger la vitesse de votre site Web. Si le serveur tiers est lent ou en panne, il peut également arrêter votre propre site Web. Il est donc important de minimiser l'utilisation de code tiers.

De plus, chaque fois que votre site accède à un serveur tiers, une recherche DNS doit être effectuée, ce qui peut prendre un peu de temps en fonction de la congestion du réseau.

Quelques centaines de millisecondes de retard peuvent sembler peu, mais si vous extrayez le code de 10 serveurs différents, ces recherches peuvent ajouter jusqu'à plusieurs secondes de latence.

Profitez de la mise en cache et de la compression

La plupart des sites Web contiennent du texte et le texte se compresse extrêmement bien. C'est pourquoi si vous activez la compression sur votre serveur, vous pouvez réduire les temps de téléchargement jusqu'à 75 %.

Malheureusement, tous les hébergeurs partagés n'ont pas activé la compression sur leurs serveurs. Si votre site Web est sur un hébergeur partagé, assurez-vous de leur demander si leurs serveurs prennent en charge mod_deflate ou mod_gzip.

Si la compression est prise en charge par votre serveur, assurez-vous de l'activer sur votre site Web en suivant les étapes décrites dans cet article. Si vous utilisez WordPress, le plugin WP-SuperCache gère déjà la compression pour vous.

En plus de la compression, vous pouvez accélérer votre site en mettant en cache les pages fréquemment consultées sur votre site Web. Pour notre boutique en ligne, je vais encore plus loin et je crée des pages statiques pour les pages Web à fort trafic qui ne changent pas très souvent.

La vitesse compte

Il y a de fortes chances que quelqu'un consulte votre site Web avec une connexion beaucoup plus lente que la vôtre. Et vous devez toujours tenir compte du plus petit dénominateur commun afin de maximiser le potentiel de profit de votre entreprise en ligne.

J'ai été assez choqué de voir que notre boutique en ligne a toujours des clients commutés ! Si je les ai toujours, vous pourriez aussi.