Comment puis-je résoudre les problèmes de latence de mon site Web statique hébergé sur Amazon S3 et servi via CloudFront ?

Date de la dernière mise à jour : 29/06/2020

Le contenu statique de mon site Web est hébergé sur un compartiment Amazon Simple Storage Service (Amazon S3) et diffusé aux utilisateurs via une distribution Amazon CloudFront. Le contenu de mon site Web se charge lentement, ou je vois que la métrique TTFB (Time To First Byte, ou temps jusqu'au premier octet) est élevée. Comment puis-je résoudre ce problème ?

Brève description

Pour résoudre les problèmes de latence lors du chargement du contenu statique de votre site Web, identifiez les événements suivants qui contribuent à la latence. Ensuite, implémentez des moyens d'optimiser ces événements :

  1. Lorsque le client envoie une requête DNS pour le nom de domaine (processus de recherche DNS).
  2. Lorsque le client envoie la requête au serveur Web (réseau de diffusion de contenu CloudFront), y compris la négociation SSL/TLS.
  3. Lorsque CloudFront traite la requête et diffuse le contenu du cache, ou lorsque CloudFront envoie la requête vers l'origine (Amazon S3).

Les performances de ces événements dépendent de ce qui suit :

  • Le navigateur Web et les ressources sur le système local
  • Le réseau local
  • Le serveur DNS local
  • Le routeur, le pare-feu ou le proxy local
  • Le serveur DNS en amont
  • Le fournisseur de services Internet
  • Amazon S3 et CloudFront

Solution

Identifiez l'événement qui contribue à la latence

Vérifiez les performances de chaque composant d'une requête pour le contenu de votre site Web en utilisant les outils pour développeurs de votre navigateur Web. Par exemple, si vous utilisez Mozilla Firefox, consultez Firefox Developer Tools (Outils pour développeurs Firefox) et Network request details (Détails des demandes réseau) sur le site Web MDN Web Docs.

Une fois que vous avez déterminé quels événements contribuent à la latence, passez en revue les considérations suivantes pour réduire le temps de ces événements.

Lorsque le client envoie une requête DNS pour le nom de domaine (le processus de recherche DNS)

Prenez connaissance des manières permettant d'optimiser le processus de recherche DNS :

  • Activez ou augmentez la mise en cache DNS côté client.
  • Définissez ou augmentez le cache DNS sur le serveur DNS local.
  • Si le serveur DNS du résolveur du fournisseur de services Internet est à l'origine de la latence, pensez à utiliser des serveurs DNS publics.

Lorsque le client envoie la requête au serveur Web (réseau de diffusion de contenu CloudFront), y compris la négociation SSL/TLS

Prenez connaissance des manières suivantes qui permettent de réduire le temps de connexion client à serveur :

  • Optimisez les performances de votre réseau local en modifiant votre mise en cache Web, votre fournisseur de services Internet ou vos itinéraires réseau. La connexion entre votre navigateur Web et CloudFront dépend en grande partie du réseau local, de la bande passante du fournisseur de services Internet et de l'itinéraire réseau ou des sauts nécessaires à l'emplacement de point de présence CloudFront le plus proche du client. Il est recommandé de configurer le chemin d'accès le plus optimisé aux ressources Web. De plus, l'utilisation du bon résolveur DNS permet à votre navigateur Web de trouver l'emplacement du point de présence le plus proche et le mieux adapté.
  • Utilisez la mise en cache locale pour réduire les requêtes de ressources provenant du serveur (CloudFront). La mise en cache locale est particulièrement utile pour les objets statiques qui ne changent pas souvent, tels que CSS, Javascript ou des images. Pour votre contenu statique hébergé sur Amazon S3, vous pouvez ajouter un en-tête Cache-Control aux objets. L'en-tête Cache-Control indique aux navigateurs Web de conserver le contenu du site Web dans la mémoire du navigateur ou sur le disque local pendant un certain temps. Pendant ce temps, le navigateur Web charge le contenu à partir de la mémoire locale au lieu d'interroger le contenu via Internet. Vous pouvez utiliser la console Amazon S3 pour définir un en-tête Cache-Control.
  • Si vous disposez déjà d'un proxy de transfert HTTP de mise en cache local, vous pouvez spécifier une taille de cache suffisamment grande pour le contenu de votre site Web. Cela peut réduire le nombre de requêtes envoyées via Internet, car les pages fréquemment consultées sont stockées dans le cache de votre proxy local, qui diffuse ensuite le contenu aux navigateurs sur demande.

Lorsque CloudFront traite la requête et diffuse le contenu du cache, ou lorsque CloudFront envoie la requête vers l'origine (Amazon S3)

Vous pouvez réduire la latence lors du chargement de votre site Web en diffusant plus de contenu à partir du cache et en réduisant les requêtes de contenu à partir de l'origine. Prenez connaissance des manières permettant d'optimiser votre configuration CloudFront afin que votre contenu Web soit diffusé principalement à partir du cache :

  • Augmentez la durée de mise en cache minimale du contenu statique sur CloudFront. Vous pouvez également augmenter la durée de mise en cache minimale sur le comportement par défaut de votre distribution CloudFront. Un moyen d'augmenter la durée de cache minimale du comportement par défaut de votre distribution consiste à augmenter la valeur Minimum TTL (durée de vie minimale), afin que CloudFront mette en cache les objets plus longtemps au lieu de demander les objets à votre origine Amazon S3.
  • Vérifiez vos paramètres de réacheminement ou de cache pour les en-têtes ou les chaînes de requête. La mise en cache CloudFront est optimisée lorsque les valeurs de Cache Based on Selected Request Headers (Cache basé sur les en-têtes de requête sélectionnés) et Query String Forwarding et Caching (Transfert et mise en cache des chaînes de requête) sont toutes définies sur None (Improves Caching) (Aucun (Améliore la mise en cache)). Toutefois, si vous devez transférer ou mettre en cache en fonction de certaines de ces valeurs, assurez-vous que seuls des en-têtes et des chaînes de requête spécifiques sont transférés ou mis en cache.
    Remarque : ne configurez pas CloudFront pour transmettre les cookies à une origine Amazon S3. Amazon S3 ne traite pas les cookies.
  • Activez la compression sur votre distribution CloudFront. Lorsque vous activez la compression, CloudFront compresse automatiquement les objets à l'emplacement périphérique ou à l'emplacement de point de présence, puis diffuse les objets compressés. Cela peut réduire le temps de téléchargement et améliorer les performances de chargement des pages.
  • Utilisez des comportements de cache distincts pour le contenu statique. Il est recommandé d'utiliser différents comportements de cache pour le contenu statique et le contenu dynamique.

Suivez ces étapes pour configurer les paramètres de cache optimaux pour votre contenu statique :

  1. Ouvrez la console CloudFront.
  2. Dans la liste des distributions, choisissez la distribution qui diffuse le contenu statique de votre site Web.
  3. Choisissez l'onglet Behaviors (Comportements).
  4. Vous pouvez créer un nouveau comportement pour le contenu statique ou modifier un comportement existant pour le modèle de chemin de votre contenu statique. Pour modifier un comportement existant, sélectionnez le comportement, puis choisissez Edit (Modifier).
  5. Pour Cache Based on Selected Request Headers (Cache basé sur les en-têtes de requête sélectionnés), sélectionnez None (Improves Caching) (Aucun (Améliore la mise en cache)) pour optimiser la mise en cache. Si vous devez transmettre certains en-têtes, sélectionnez Whitelist (Liste blanche), puis ajoutez uniquement les en-têtes requis.
  6. Pour Object Caching (Mise en cache d'un objet), pour utiliser l'en-tête Cache-Control sur les objets Amazon S3, sélectionnez Use Origin Cache Headers (Utiliser les en-têtes de cache d'origine). Pour remplacer l'en-tête Cache-Control de l'origine Amazon S3, sélectionnez Customize (Personnaliser). Ensuite, définissez Minimum TTL (Durée de vie minimale) sur la durée de cache minimale souhaitée.
    Avertissement : les valeurs Minimum TTL (Durée de vie minimale), Maximum TTL (Durée de vie maximale) et Default TTL (Durée de vie par défaut) du comportement de distribution interagissent avec les en-têtes de cache définis sur l'objet à partir de l'origine.
  7. PourForward Cookies (Réacheminer les cookies), sélectionnez None (Improves Caching) Aucun (améliore la mise en cache).
  8. Pour Query String Forwarding and Caching (Transfert et mise en cache des chaînes de requête), sélectionnez None (Improves Caching) (Aucun (Améliore la mise en cache)) pour optimiser la mise en cache. Si vous devez réacheminer certaines chaînes de requête, sélectionnez Forward all, cache based on whitelist (Tout réacheminer, mettre en cache en fonction de la liste blanche), puis ajoutez uniquement les chaînes de requête requises.
  9. Pour Compress Objects Automatically (Compresser automatiquement les objets), sélectionnez Yes (Oui).
  10. Choisissez Yes, Edit (Oui, modifier) pour enregistrer vos modifications.