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

Dernière mise à jour : 14/09/2021

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

Ré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 :

  • Lancez 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 autorise votre navigateur Web à 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 :

  • Utilisez la politique de cache CachingOptimized gérée par AWS pour vos comportements de cache qui diffusent du contenu statique depuis Amazon S3.
  • 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.
  • Lancez la compression sur votre distribution CloudFront. Lorsque vous lancez 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. Sous Demandes de clé de cache et demandes d'origine, sélectionnez Politique de cache et politique de demande d'origine.
  6. Pour Politique de cache, choisissez CachingOptimized.
  7. Pour Politique de demande d’origine, choisissez Aucun ou laissez ce champ vide. Les politiques de demande d'origine sont facultatives et ne sont pas recommandées pour les origines S3.
  8. Choisissez Save Changes (Enregistrer les modifications).