Meilleures pratiques et conseils d'amélioration pour la vitesse de chargement du site Web

Quand il s'agit d'utilisateurs en ligne aujourd'hui, ils veulent ce qu'ils veulent et ils le veulent maintenant. Nous avons tous été dans une situation où une ressource en ligne a une vitesse de chargement de site Web trop lente et nous avons simplement cliqué. Grâce aux médias sociaux, à la télévision et à toutes les autres technologies modernes, les humains d'aujourd'hui ne sont pas exactement connus pour leur patience et leur concentration.

La vitesse est le tueur silencieux des sites Web. Près de la moitié de tous les utilisateurs de sites Web s'attendent à ce que votre site Web se charge en 2 secondes ou moins. Cela peut sembler fou, mais il est vrai que même quelques secondes de temps de chargement lent effrayeront les utilisateurs sans arrière-pensée. La réalité est que vous avez besoin que votre site Web se charge correctement et rapidement.

Meilleures pratiques relatives à la vitesse de chargement du site Web

Vous ne réaliserez peut-être pas à quel point votre site Web est lent à moins de le tester par vous-même. Heureusement, vous pouvez le faire gratuitement sur Google PageSpeed. Il s'agit d'un outil Web permettant d'identifier vos temps de chargement et de trouver les zones à problèmes. Comment le temps de chargement de votre site Web s'accumule-t-il ? Si vous avez besoin de travail, ne vous inquiétez pas. Il est plus facile que vous ne le pensez d'améliorer le temps de chargement de votre site Web en quelques clics. Voici quelques conseils supplémentaires pour vous aider à démarrer.

Utilisez la compression Gzip pour une meilleure vitesse de chargement du site Web

La compression Gzip est un outil puissant qui réduit la taille de la réponse d'environ 70%, ce qui est impressionnant. Gzip est quelque chose qui est fait via votre hébergeur, vous devrez donc demander à votre hébergeur s'il utilise cette compression sur ses serveurs. Avec Gzip, vous réduisez le temps de réponse sans compromettre la qualité de vos vidéos, images ou autres éléments.

Vous pouvez exécuter un test pour voir si votre site Web est GZIPPÉ et exécuter un test de compression zip. Le fonctionnement de Gzipping consiste à réduire la taille de la réponse HTTP. Cela change finalement le poids de la page.

Mettez vos fichiers en cache

La mise en cache, c'est lorsqu'une version de votre site Web est stockée dans les navigateurs de vos utilisateurs. De cette façon, lorsqu'ils visitent à nouveau votre site Web, une version antérieure se chargera jusqu'à ce que la nouvelle version puisse être actualisée. La mise en cache peut réduire votre temps de chargement de plus de 2 secondes à moins de 1 seconde. C'est un grand saut et vous devriez vous en soucier. Heureusement, il est facile de configurer la mise en cache avec votre site Web. Si vous utilisez WordPress, vous pouvez utiliser le plugin gratuit W3 Total Cache. La mise en cache est aujourd'hui indispensable pour ajouter un coup de pouce supplémentaire aux performances de charge de votre site Web.

Outre la mise en cache côté serveur, vous devez également activer la mise en cache du navigateur. Il s'agit essentiellement d'un moyen de demander aux navigateurs de stocker une copie des fichiers statiques tels que des images, des fichiers CSS et JS sur le navigateur afin que les visiteurs n'aient pas à attendre le téléchargement de ces fichiers lorsqu'ils visitent à nouveau votre site Web. Vous pouvez en savoir plus dans cette collection d'informations sur la mise en cache du navigateur WordPress.

Mettez à niveau votre hébergeur de site Web

Avoir le bon hébergeur pour votre site Web peut jouer sur les performances de votre page. Vous pouvez apporter autant de modifications que vous le souhaitez à votre site Web, mais si vous ne voyez pas beaucoup d'améliorations, votre hébergeur pourrait être à blâmer. Il est tentant de choisir l'option d'hébergement la moins chère lorsque vous lancez votre site Web pour la première fois. Bien que cela puisse être bien pendant un petit moment, vous allez probablement le dépasser si vous hébergez beaucoup de fichiers ou si vous rencontrez un trafic plus important.

Des forfaits moins chers sont probablement partagés, ce qui signifie que tout problème sur les sites Web de vos voisins affectera également le vôtre. Avoir un serveur dédié vous permet d'éviter tous les problèmes qui peuvent survenir si vous êtes sur un serveur partagé. Vous aurez également plus d'options de service client si vous avez besoin d'aide pour votre temps de réponse.

Acheter un hébergement

Vérifiez le thème de votre site Web

La façon dont votre site Web est conçu influera également sur la qualité et la rapidité avec laquelle votre site Web apparaîtra aux visiteurs. Changer de thème peut suffire pour libérer quelques précieuses secondes dans le temps de chargement de votre site Web.

L'utilisation d'un créateur de page ou d'un thème de site Web professionnel garantira que votre site Web n'est pas surchargé de code inutile et désordonné. C'est pourquoi il est essentiel d'examiner plus que l'esthétique de votre modèle, thème ou constructeur de site Web. En outre, pensez à vous connecter à votre site Web ou à votre application Web. La journalisation du site Web vous aide à découvrir les problèmes avant qu'ils ne surviennent et peut empêcher votre site Web de rencontrer des problèmes. Alternativement, vous pouvez envoyer des messages de journal directement avec un outil comme Papertrail App.

Réduisez vos fichiers Java et CSS

La plupart des sites Web utilisent aujourd'hui beaucoup de fichiers Javascript et CSS, et ces fichiers peuvent être traités individuellement dans les navigateurs de vos utilisateurs. Avoir trop de demandes à la fois réduira la vitesse de chargement de votre site Web. Si vous parvenez à réduire tous ces fichiers, vous n'ajouterez pas autant de poids au temps de chargement de votre site Web.

Faire charger vos fichiers Java et CSS en externe au lieu d'entraver chaque page est une bonne idée. Ensuite, les utilisateurs n'ont qu'à charger les fichiers au fur et à mesure qu'ils apparaissent, pas à chaque fois que quelqu'un visite une nouvelle page de votre site Web. Ne bloquez pas les navigateurs de vos utilisateurs avec trop de fichiers.

Transportez votre charge sur le réseau

Si vous rencontrez un trafic élevé, vous devez prendre votre réseau au sérieux. Un service de réseau de diffusion de contenu (CDN) apporte les fichiers à vos utilisateurs directement en utilisant des serveurs dans de nombreuses zones géographiques différentes. Cela signifie qu'il y a moins de temps entre les endroits afin que votre site puisse se charger plus rapidement. Le CDN le plus connu est Amazon CloudFront, et il est facile de l'intégrer à votre site Web actuel.

Essayez les plateformes d'hébergement externes

Semblable au CDN, vous pouvez héberger vos fichiers sur des plateformes d'hébergement externes pour éviter de ralentir votre temps de chargement. Ceci est le plus courant pour les fichiers vidéo. Les vidéos sont assez massives et les télécharger directement sur votre site Web prendra beaucoup de place. Ils peuvent facilement dépasser 100 Mo, il n'est donc pas judicieux d'héberger des vidéos ou d'autres fichiers volumineux sur votre propre serveur.

Il est préférable d'héberger ces fichiers en externe. YouTube et Vimeo sont d'excellentes options pour les fichiers vidéo. De là, vous pouvez intégrer la vidéo sur votre site Web. Il économise de l'espace et ne ralentit pas votre temps de chargement. C'est aussi beaucoup plus simple !

L'utilisation de YouTube, en particulier, ouvre votre contenu à un tout nouveau public. En fait, YouTube est considéré comme l'un des plus gros moteurs de recherche et attire plus d'un milliard d'utilisateurs par mois. Son utilisation est gratuite et vous pouvez télécharger des vidéos d'une durée maximale de 15 minutes (ou plus si vous soumettez une demande). Vous ne pouvez tout simplement pas vous tromper.

Vérifiez vos requêtes HTTP

Yahoo affirme que 80% du temps de chargement d'un site Web provient du téléchargement de toutes les différentes parties d'une page. Alors que nous avons déjà discuté des meilleures pratiques en matière de fichiers Java et CSS, qu'en est-il de tout le reste ? Plus il y a d'éléments sur la page qui doivent être chargés, plus il faudra de temps pour que la page apparaisse pleinement.

Vous pouvez vérifier combien de ces demandes se produisent en accédant à votre navigateur. Google Chrome est équipé d'outils de développement qui se concentrent sur les requêtes HTTP. Pour accéder à ces outils, faites un clic droit sur votre page dans Google Chrome, cliquez sur Inspecter, puis accédez à l'onglet Réseau.

Maintenant, vous pouvez voir combien de temps prend chaque fichier à charger dans la section « Temps ». Dans le coin, vous verrez également le nombre total de demandes. Réduire les demandes qui prennent le plus de temps est un moyen simple d'accélérer le temps de chargement de votre site Web. Continuez à lire pour apprendre la meilleure façon de combiner des fichiers dans le prochain conseil.

Combiner et réduire les fichiers HTML

Lorsque vous minimisez un fichier, vous éliminez tout espace ou code inutile. Toutes ces petites choses peuvent ne pas sembler importantes, mais cela augmente votre temps de chargement. L'objectif est d'avoir des fichiers HTML aussi légers que possible.

Examinez votre site Web pour voir s'il y a des pages inutiles que vous n'utilisez plus. Y a-t-il des endroits où vous pouvez éliminer les espaces ou le code inutile ? Enfin, combinez des fichiers HTML pour vous assurer de ne pas ralentir le temps de chargement de votre site Web.

Utiliser CSS externe

CSS est la façon dont vous incluez le style et les éléments de conception de votre page. Votre site Web peut soit accéder à un fichier externe qui se charge avant votre page, soit accéder au style en ligne. Inclure votre CSS dans votre document HTML lui-même ajoute beaucoup de code. Comme nous l'avons dit précédemment, ce n'est pas bon.

Au lieu de cela, vous devez utiliser un CSS externe qui est chargé dans la tête de votre HTML. Ne mettez pas de CSS dans votre code HTML si vous pouvez l'éviter. Cela signifie en particulier les divs ou les en-têtes. C'est beaucoup plus propre et plus léger si vous utilisez une feuille de style externe. C'est aussi beaucoup plus facile à éditer.

Si vous n'êtes pas sûr de l'état de votre CSS, utilisez les outils de livraison CSS pour voir comment vos fichiers CSS s'empilent. Cela vous permettra de savoir où se trouve votre fichier externe et si vous avez des éléments en ligne dans votre code HTML. Dans la mesure du possible, n'utilisez qu'un seul fichier CSS externe. Vous pouvez probablement combiner des fichiers si vous en avez plusieurs.

Différez votre chargement Javascript

Lorsque vous différez un fichier, comme JavaScript, vous vous assurez que le reste de votre site Web se charge correctement avant de charger les éléments Java supplémentaires. Parfois, différer Java est aussi simple que d'utiliser un plugin. D'autres fois, vous devrez ajouter manuellement un script HTML pour informer le site Web que vous souhaitez charger Java en dernier.

Ce script appelle un fichier JavaScript externe. Il y a un tutoriel complet ici pour différer votre Java. Bien qu'il ne s'agisse pas d'une énorme différence, cela peut donner l'impression que votre papier se charge plus rapidement.

Passez en revue votre temps jusqu'au premier octet

Votre temps jusqu'au premier octet (TTFB) est le temps qu'un navigateur attend avant de commencer à charger son premier octet de données. Selon Google, votre TTFB devrait être inférieur à 200 ms. Cependant, il s'agit d'une préoccupation côté serveur, il est donc facile pour un plus grand nombre de développeurs Web de l'ignorer.

Lorsque les utilisateurs visitent votre site Web, le chargement ne démarre pas automatiquement. Bien que cela puisse sembler être un processus instantané, il y a 3 étapes qui se produisent en premier. Votre navigateur envoie une requête HTTP initiale au serveur hébergeant le site Web, et à partir de là, les étapes sont la recherche DNS, le traitement du serveur et la réponse.

Encore une fois, vos outils de développement Chrome indiqueront combien de temps ce processus prend sur votre page Web. Cela dépendra aussi grandement de la force de la connexion Internet. Une connexion lente a un TTFB plus lent. Vérifiez votre TTFB pour vous assurer qu'il est inférieur à 200 ms. Si ce n'est pas le cas, il est temps de discuter avec votre hôte de la bonne solution. Vous n'avez peut-être pas assez d'espace ou vous rencontrez peut-être trop de trafic.

Contenu au-dessus de la ligne d'abord

Parfois, vous avez de longues pages qui prennent un certain temps à charger. C'est une réalité. Cependant, vous assurer que les informations au-dessus de la ligne de flottaison se chargent en premier peut vous faire économiser quelques visiteurs. Améliorez votre expérience utilisateur en vous assurant que tout ce contenu en haut de la page s'affiche rapidement.

Il s'agit d'un processus appelé « chargement paresseux », et le nom est logique. C'est comme charger lentement la page, mais cela commence en haut, là où vos utilisateurs sont le plus concentrés. Avec le chargement différé, vos utilisateurs peuvent voir le contenu principal et augmenter la vitesse de chargement du site Web sans avoir à attendre que le reste de la page se charge. C'est une excellente idée car imaginez avoir plus de 10 photos sur toute la page. Vous ne voudriez pas que vos visiteurs attendent que toutes ces images se chargent pour commencer à lire.

Lazy load utilise le jQuery.sonar pour charger uniquement les images visibles. Il existe de nombreux plugins qui facilitent l'ajout de lazy load à vos pages, mais voici un tutoriel complet pour le faire manuellement. Vos utilisateurs seront ravis de ne plus avoir à attendre un contenu hors de la ligne de flottaison.

Vérifiez la taille de vos images

Il est facile de télécharger des images sans vérifier la taille de votre fichier. Cela peut être bien de temps en temps, mais cela peut facilement ralentir votre site Web si vous ne faites pas attention. Lorsque vous enregistrez vos images, essayez de les enregistrer avec l'option « Enregistrer pour le Web ». Ceci est disponible avec des outils comme Photoshop ou Fireworks. Avec « Enregistrer pour le Web », la taille de l'image peut être réduite sans perdre la netteté de l'image.

En général, évitez les fichiers plus volumineux. PNG lors de l'enregistrement de vos photos. Vous pouvez vérifier les propriétés de votre image pour voir si elles frôlent des tailles plus grandes. Enfin, si vous avez déjà de grandes images sur votre site Web, utilisez un plugin ou compressez manuellement ces fichiers pour améliorer la vitesse de chargement de votre site Web.

Supprimez les extras inutiles pour une meilleure vitesse de chargement du site Web

Parfois, nous ajoutons de nouvelles choses à nos sites Web et les oublions. Soit nous passons à autre chose, soit nous n'avons plus besoin d'une solution passée. Quelle que soit la raison, assurez-vous de consulter fréquemment votre site Web pour vous assurer que vous ne perdez pas d'espace sur quelque chose que vous n'utilisez pas. Cela s'applique à tous les éléments suivants :

• Images;
• Plugins ;
• Éléments de navigation ;
• Éléments de design;
• pages ;
• Articles de blog archivés.

Peu importe leur taille, ceux-ci affecteront négativement la vitesse de chargement de votre site Web. De plus, ils peuvent créer des points faibles dans la sécurité de votre site Web, en particulier avec les plugins. Ceux-ci sont facilement endommagés, ce qui peut réduire votre sécurité. Prenez l'habitude de consulter régulièrement votre site Web à la recherche d'extras obsolètes.

Limitez vos boutons de partage social

Les boutons de partage social sont un excellent moyen d'encourager l'engagement sur les réseaux sociaux. Cependant, il doit y avoir une limite. Ces boutons sont parfois très efficaces. Cependant, ils peuvent aussi être un buste. Ce sur quoi nous pouvons nous mettre d'accord, c'est que ces boutons de partage social utilisent plusieurs JavaScripts externes et ceux-ci ralentissent votre site Web.

Facebook, en particulier, en est l'un des principaux coupables. Les scripts Facebook peuvent ralentir les performances du site Web avec leurs boutons de partage. Déterminez si ces boutons de partage valent vraiment la peine. Vous pouvez toujours les garder, mais ne garder que ceux qui se sont avérés les plus performants.

Livraison asynchrone

En parlant de codes tiers, beaucoup de choses peuvent mal tourner. Si le tiers subit une panne ou est soudainement ralenti, votre page peut facilement se bloquer en essayant de charger cette ressource, qu'il s'agisse d'un bouton de partage social ou d'un script d'analyse de réseau.

La livraison asynchrone est la solution à ce ralentissement. Avec cette option activée, si votre réseau tiers subit une panne, votre propre site Web ne sera pas affecté. Vous pouvez activer la livraison asynchrone de plusieurs manières, toutes décrites ici.

Installer Google PageSpeed

Google PageSpeed ​​est un module serveur open source qui optimise la vitesse de chargement de votre site Web. Il est conçu par Google pour rendre votre site Web plus rapide et il est facile à utiliser. Fondamentalement, il apporte différentes modifications à la fois à votre serveur et aux fichiers de votre site Web. Vous n'avez rien à faire manuellement et votre site Web fonctionnera mieux.

C'est aussi proche d'une solution unique que vous trouverez en ce qui concerne les performances de votre site Web. Vous pouvez installer vous-même Google PageSpeed ​​sur votre gestionnaire de fichiers, ou vous pouvez demander à votre hébergeur ou développeur de vous aider avec l'installation. Vous pouvez le régler et l'oublier.

Combiner des images d'arrière-plan

De nombreux thèmes utilisent plusieurs images d'arrière-plan pour créer une seule image complète. Bien que cela puisse sembler génial et simultané, cela peut ralentir les performances de votre site Web. Étant donné que les navigateurs de vos utilisateurs devront faire plusieurs requêtes différentes pour charger les photos d'arrière-plan, cela prend du temps sur le processus de chargement.

Au lieu de cela, combinez vos images en une seule pour augmenter la vitesse de chargement de votre site Web. De cette façon, vos utilisateurs n'ont besoin de faire qu'une seule demande plutôt que plusieurs. Votre site web sera plus rapide puisqu'il n'y a plus plusieurs requêtes aller-retour pour que l'arrière-plan se charge correctement.

Arrêtez de créer des liens vers des images

Le hotlinking est la pratique consistant à intégrer une photo d'un autre site Web sur le vôtre sans la télécharger sur votre serveur. C'est simple avec un peu de code, mais c'est une mauvaise pratique qui peut entraîner, entre autres, un ralentissement du site Web.

Le hotlinking nuit non seulement à votre site Web, mais c'est techniquement du vol si vous le faites sans autorisation. Les propriétaires de sites Web paient pour l'espace pour héberger ces fichiers, et lorsque vous placez ce même fichier sur votre propre site Web via un code d'intégration, vous prenez leurs ressources sans autorisation.

Bien qu'il existe certains sites Web qui vous permettent de télécharger des images directement dans l'intention de les partager, ce n'est toujours pas une bonne idée. Lorsque ces sites Web sont lents ou connaissent un trafic élevé, ils peuvent ralentir la vitesse de chargement de votre site Web si vous les intégrez. De plus, à moins que vous ne payiez pour l'espace, ces fichiers peuvent être supprimés à tout moment sans avertissement.

Oui, le hotlinking peut vous faire économiser de la bande passante, mais il est plus susceptible de ralentir votre site Web à long terme. Hébergez toujours vos images sur votre propre serveur au lieu de créer des liens. En cas de doute, il est préférable d'acheter plus d'espace sur votre propre serveur afin de pouvoir vous permettre de les télécharger. De toute façon, vous devriez utiliser de petits fichiers image, donc cela ne devrait pas poser de problème.

Augmentez la vitesse de chargement de votre site Web aujourd'hui

Êtes-vous prêt à amener votre site Web vers de nouveaux sommets? Il est temps d'augmenter la vitesse de chargement de votre site Web. Si la vitesse de chargement de votre site Web est lente, il est facile de perdre des visiteurs par inadvertance. Pensez à la frustration que vous ressentez lorsqu'un site Web met trop de temps à se charger. Un retard d'une seconde dans le temps de chargement du site Web entraînera une diminution de 7 % des conversions et une diminution de 11 % des pages vues. Ne faites pas cela à vos utilisateurs en prenant au sérieux ces conseils ci-dessus.

Accélérer votre site Web n'est pas compliqué, coûteux ou déroutant. C'est l'un des moyens les plus simples et les plus rapides d'améliorer votre référencement et d'avoir un impact positif sur vos utilisateurs. Si vous voulez que votre site Web fonctionne mieux et impressionne vos utilisateurs, cela vaut la peine d'investir dans les conseils ci-dessus.

De l'évitement des hotlinks et des liens rompus à la mise à niveau de votre hébergement Web, même les petites étapes ci-dessus ont un impact important. Si vous êtes débordé, commencez simplement par tester la vitesse de chargement de votre site Web. À partir de là, vous aurez une bonne idée des améliorations que vous devez apporter pour vous assurer que votre site Web fonctionne à son niveau de performance maximal. Votre site Web n'aura peut-être besoin que de quelques ajustements pour être conforme aux normes de Google. Vos utilisateurs sont fatigués d'attendre, il est donc temps de se mettre au travail.

Vecteur de vitesse de chargement du site Web créé par ibrandify