L’importance de la vitesse du site Web

  • Rétention des visiteurs. Plus votre page est longue à charger, plus un utilisateur est susceptible de rebondir.
  • Classement des moteurs de recherche Google. Google prend en compte la vitesse de chargement des pages comme l’un des nombreux signaux de classement utilisés pour déterminer les classements des moteurs de recherche.
  • Battez vos concurrents. Si votre site web se charge constamment plus rapidement que la concurrence, les utilisateurs sont plus susceptibles de rester avec vous que de tendre la main aux sites plus lents.
  • Une meilleure expérience utilisateur. Évitez la frustration des utilisateurs avec un site Web lent et donnez-leur une expérience utilisateur optimisée.
    Accélérez votre site Web

    Dans le monde instantané d’aujourd’hui, la vitesse est tout!

Comment optimiser les performances du site Web

Ici, nous avons une liste de choses que vous pouvez faire pour optimiser la vitesse de votre site Web. Beaucoup de ces techniques peuvent nécessiter des connaissances supplémentaires, comme l’utilisation des sprites CSS mentionnés ci-dessous. Nous ne voulons pas réinventer la roue ici, mais vous pouvez trouver des tutoriels en ligne avec un peu de Google-fu (rechercher Google pour les mots clés que vous n’êtes pas familier avec ou que vous souhaitez savoir la meilleure façon de mettre en œuvre). Commençons.

    1.  

    2. La vitesse d’hébergement est essentielle. Vous pouvez avoir le code le plus optimisé de la planète, mais si vous hébergez avec un fournisseur de second ordre qui a un temps de décalage important et un temps lent au premier au-être (TTFB), vos efforts d’optimisation seront pour la plupart futiles. Exécutez des tests de performances basés sur des mesures pour déterminer l’hôte Web le plus rapide. La surveillance des performances peut être mise en place par la suite pour s’assurer que votre société d’hébergement est à la hauteur.
    3.  

    4. Limitez le nombre de demandes requises par une page. Chaque fois qu’un utilisateur envoie une demande d’un navigateur au serveur, il perd de précieuses millisecondes. En consolidant des éléments en fichiers individuels, tels qu’un fichier sprite CSS à la place de dizaines de fichiers d’image, vous limitez le nombre de requêtes que le navigateur fera
    5.  

    6. Générer un fichier sprite CSS. Au lieu de télécharger des dizaines d’images pour chaque page de votre site, un fichier sprite CSS ne devrait nécessiter qu’un seul téléchargement. Cela éliminerait la nécessité d’avoir beaucoup de petites images pour des choses comme des menus, des bordures arrondies et des images de fond. L’essence d’un fichier sprite CSS est que vous empilez toutes les images de votre site dans un seul fichier PNG, et créez des références à chaque emplacement d’image dans votre CSS. Maintenant, lorsque vous avez besoin d’afficher l’image, il vous suffit d’appeler la classe CSS dans une balise div.
    7.  

    8. Utilisez CSS dans la mesure du possible. Débarrassez-vous des styles, images et autres contenus en ligne partagés sur plusieurs pages de votre site Web.
    9.  

    10. Regroupez vos feuilles de style de sorte qu’il n’y a qu’une seule demande CSS. Une fois que vous téléchargez la feuille de style, il élimine les demandes futures pour tous les éléments liés au style.
      Une exception possible à la règle d’une feuille de style par site est si vous optimisez le temps d’interaction ou le contenu «au-dessus du pli». Le contenu qui apparaît en haut de votre page qui permet à un utilisateur de commencer à interagir avec le site doit être priorisé lorsque vous craignez que les utilisateurs rebondissent si la page prend trop de temps à charger. Dans ce cas, vous pouvez charger un fichier CSS pour afficher correctement le contenu du pli au-dessus du contenu du pli, puis charger le deuxième fichier CSS pour optimiser tout le reste sur la page.
    11.  

    12. Utilisez les réseaux de diffusion de contenu (CDN). Les CDN placent le contenu du site Web, en particulier les images, les vidéos et les fichiers multimédias plus importants que possible, près de l’utilisateur final. Plutôt que tous les utilisateurs qui appellent les éléments de votre serveur Web, ils téléchargent maintenant ces éléments à partir d’un serveur CDN qui est hébergé à quelques sauts dans un centre de données près de leur emplacement géographique.
      Tant que vous n’utilisateurz pas plus de deux ou trois domaines, la division des éléments entre plusieurs domaines (tels que votre domaine de base et un CDN) maximisera les téléchargements parallèles simultanés dans le navigateur. À ce stade, le coût de la recherchez DNS commence à compter contre vous.
    13.  

    14. Réduisez au minimum le nombre de rechercher DNS requis par votre site. Chaque élément hébergé par un domaine unique peut nécessiter une recherche supplémentaire qui pourrait ajouter des secondes à votre temps de chargement. Même les demandes sur les domaines connexes (tels que www.example.com et css.example.com) nécessitent toujours une recherche supplémentaire. Si cela semble contre-intuitif après que nous venons de recommander l’utilisation de CDNs, c’est parce qu’il devrait y avoir un milieu heureux. Il suffit d’essayer de limiter le nombre de domaines supplémentaires référencés. Les optimiseurs extrêmes vont jusqu’à éliminer tous les boutons des médias sociaux parce qu’ils appellent à chaque domaine.
    15.  

    16. Assurez-vous que votre serveur permet la mise en cache du navigateur en fonction de l’âge du fichier, de l’expiration et d’Etag. Cela signifie que tout contenu qu’un navigateur a récemment téléchargé à partir du serveur, tel qu’un logo d’entreprise, ne sera pas téléchargé à nouveau tant qu’il est toujours valide. Assurez-vous également que chaque élément a un TTL approprié, ou l’âge du fichier, pour profiter de la mise en cache du navigateur.
    17.  

    18. Déplacez JavaScript vers le bas de votre page. Cela garantit des charges de contenu avant d’attendre sur les fichiers JavaScript plus volumineux à charger.
    19.  

    20. Lorsque vous avez l’option, consolider ou éliminer autant de plugins JavaScript que possible. Bien qu’il soit formidable de recueillir des données sur la façon dont vos visiteurs utilisent votre site Web, vous ne voulez pas que le script recueillant ces données pour ralentir votre site et nuire à l’expérience utilisateur. Si vous allez ajouter un nouveau plugin à un site Web, assurez-vous que vous ne dupliquez pas les fonctionnalités d’un plugin existant, et si vous êtes, supprimer l’ancien plugin.
    21.  

    22. Utilisez la compression sur votre site. L’utilisation de gzip peut réduire considérablement la taille totale des fichiers que vous envoyez du serveur au navigateur. La compression permet souvent une diminution de plus de 70 % de l’utilisation de la bande passante.
    23.  

    24. Optimisez la taille des fichiers en n’envoyant que la plus petite taille d’image requise par la page. Modifiez l’image pour qu’elle soit la taille exacte du pixel requise sur la page. Lorsque vous choisissez un format de fichier pour les images, utilisez des PNG ou des JPEGs, plutôt que des TIFF et des PGB. Utilisez un outil de compression d’image tel que TinyPNG. C’est un excellent outil pour réduire la taille du fichier des images avant de les mettre sur votre site. Évitez également les balises source vides sur les images. Une balise vide amène le navigateur à envoyer une demande supplémentaire au serveur.
    25.  

    26. Minify le code. Une fois la page terminée, exécutez un code un minificateur. La version de Google(https://developers.google.com/speed/docs/insights/MinifyResources),supprime tout code inutile, tels que les espaces vides, les lignes vides, etc., ce qui permet d’économiser des KB de taille de fichier.
    27.  

    28. Optimisez votre base de données. Si votre site utilise une base de données pour héberger du contenu dynamique, vous devez vous assurer que la base de données est correctement indexée. Une fois la base de données indexée, réduisez au minimum le nombre d’appels effectués vers la base de données. Par exemple, si votre site saisit les résultats de la base de données pour afficher une liste de produits, réutilisez les résultats de la requête plutôt que d’envoyer une requête supplémentaire lors du forage dans un sous-ensemble de résultats.
    29.  

    30. Surveillez votre site quotidiennement pour les demandes non traitées. Si votre site contient du code qui indique un élément qui n’existe plus, que ce soit sur votre serveur ou à partir d’un tiers, alors vous perdez inutilement du temps à envoyer et à attendre 404 erreurs.
    31.  

    32. Astuce bonus! Testez régulièrement votre site pour la compatibilité dans différents navigateurs, y compris les différentes plates-formes mobiles. Les visiteurs mobiles commencent à dominer le marché des navigateurs. Concentrez-vous sur le test de votre site sur mobile avant le bureau.
    33.  
      En suivant ces étapes, vous devriez être en mesure d’optimiser la vitesse de chargement de votre page Web et d’augmenter la facilité d’utilisation de votre site Web. Vous devez veiller à ce que la qualité de votre contenu retienne l’attention des visiteurs du site!


      En plus d’exécuter un test de vitesse de site Web pour obtenir une image claire de la façon dont votre site web fonctionne à travers le monde, l’outil d’aperçu de vitesse de page Google est idéal pour analyser votre page Web et fournir des suggestions sur la façon d’effectuer de nombreuses optimisations énumérées dans cet article. Le plugin Yslow est également un excellent outil pour trouver des moyens supplémentaires d’optimiser une page Web.