Share
Nous vivons dans un monde où les gens attendent de plus en plus de vitesses plus rapides. En quelques fractions de seconde, votre site Web peut perdre de précieux visiteurs et, par conséquent, de l'argent. Bien que la plupart des gens pensent que les CDN sont destinés aux "gros chiens", ils sont en fait très bon marché et incroyablement faciles à utiliser de nos jours.
Dans ce tutoriel, je vais vous montrer comment configurer et utiliser les services Web S3 et CloudFront d'Amazon afin de réduire le temps de chargement du site Web et d'afficher les différences de performances..
Un CDN est un réseau de distribution de contenu (ou de distribution de contenu). C'est un réseau d'ordinateurs avec chaque système placé à différents points avec les mêmes données sur chacun. Lorsqu'une personne accède au réseau, elle peut accéder au fichier sur le système le plus proche ou celui dont la charge est la plus faible. Cela se traduit par une réduction de la latence et de la durée de téléchargement des fichiers. Pour en savoir plus sur les CDN, voir "Réseau de diffusion de contenu" sur Wikipedia.
Dans l'exemple ci-dessus, les visiteurs accèdent au serveur le plus proche d'eux afin d'offrir les meilleures performances possibles. Le réseau de serveurs serait le CDN. Un hôte Web régulier aurait un serveur central auquel tous les visiteurs devraient accéder. Ce serveur unique pourrait être situé uniquement aux États-Unis ou peut-être en Europe, ce qui entraînerait une latence plus longue et des temps de chargement plus longs pour les visiteurs..
L'utilisation de plusieurs serveurs, même sur un seul continent, aura un impact positif sur les performances.
Plusieurs personnes m'ont demandé pourquoi un CDN est important, même pour des sites Web plus petits, et pourquoi ils devraient s'embêter à payer pour un autre service Web. La réponse simple est que plus vite sera le mieux. Et pourquoi ne pas offrir à vos clients (visiteurs) le meilleur de leurs capacités?
Plus le site Web est petit, moins un CDN aura d’impact. Bien que, si vos visiteurs se traduisent en argent pour vous, alors chaque petit geste compte.
Ce n'est pas cher. C'est facile. Et cela peut se traduire par plus d'argent en termes de clients et par des économies sur vos dépenses d'hébergement Web habituelles..
Amazon fournit une multitude de services Web fantastiques. Nous allons utiliser Simple Storage Service (S3) et CloudFront d'Amazon. S3 est une solution de stockage de données dans le cloud qui peut être liée à CloudFront, le CDN d’Amazon..
Si vous recherchez une solution un peu plus simple et tout-en-un, Rackspace Cloud Files est une autre excellente option. Ils ont établi un partenariat avec le CDN de Limelight Network, qui offre des performances légèrement supérieures à celles du CDN d’Amazon. Cependant, leur service présente quelques inconvénients que vous ne trouverez pas avec Amazon. Je ne parlerai pas de tout cela, mais l'un des plus importants pour moi est le manque de support personnalisé de CNAME, censé arriver à un moment donné dans le futur. Avec le support CNAME, vous pouvez configurer un sous-domaine personnalisé pour accéder à vos fichiers tels que "cdn.votredomaine.com"..
Pour voir les comparaisons de performances récentes, visitez http://www.cloudclimate.com/cdns/
Voici la tarification S3 d'Amazon pour les États-Unis. Pour les autres zones, cliquez sur l'image pour voir le prix complet.
Voici le prix CloudFront d'Amazon pour les États-Unis. Pour les autres zones, cliquez sur l'image pour voir le prix complet.
Utilisez la calculatrice mensuelle d'Amazon pour avoir une meilleure idée de votre facture finale. Le mois dernier, ma facture totale s'élevait à moins de 5 USD, la majeure partie de celle-ci représentant plus de 20 Go de stockage de données. Comme vous pouvez le constater, c’est très, très bon marché, surtout si l’on prend en compte les avantages en termes de performances et de flexibilité..
Pour commencer, nous devons nous inscrire aux services S3 et CloudFront d'Amazon. Si vous avez déjà un compte sur Amazon, il vous suffit de vous connecter et de terminer l'inscription. Si ce n'est pas le cas, vous devrez créer un compte, puis passer à l'inscription pour S3 et CloudFront. L'inscription consiste simplement à ajouter le service à votre compte. Il n'y a rien de compliqué impliqué.
Cliquez sur chaque image pour accéder à la page d'informations et d'inscription du service..
Une fois que vous vous êtes inscrit, vous recevrez un identifiant de clé d’accès et une clé d’accès secrète qui se trouvent sous "Votre compte"> "Informations de sécurité". Ceci est essentiellement votre nom d'utilisateur et mot de passe pour accéder à S3.
Nous devons d’abord créer un compartiment dans lequel stocker tous nos fichiers. Pour plus d’informations sur les «compartiments», consultez «Les compartiments Amazon S3 sont décrits en clair»..
Pour ce faire, nous allons d’abord nous connecter à notre compte S3 en utilisant l’ID de clé d’accès et la clé d’accès secrète avec une application telle que Transmit (OS X), ce que je vais utiliser. Pour voir plus d'applications ou de modules complémentaires de navigateur permettant d'accéder à S3, voir "Service de stockage simple Amazon S3 - Tout ce que vous voulez savoir"..
Une fois connecté, nous allons créer un compartiment dans lequel placer nos fichiers. J'ai nommé le mien "files.jremick.com". Les compartiments doivent avoir des noms uniques, doivent comporter entre 3 et 63 caractères et peuvent contenir des lettres, des chiffres et des tirets (mais ne peuvent pas se terminer par un tiret).
Par unique, ils signifient unique sur le réseau AWS. C'est donc une bonne idée d'utiliser quelque chose comme une URL ou quelque chose de similaire..
Les fichiers que nous avons placés dans ce compartiment sont désormais accessibles à l’adresse "files.jremick.com.s3.amazonaws.com". Cependant, cette URL est assez longue et nous pouvons rapidement en configurer une plus courte. Nous allons configurer une nouvelle entrée CNAME sur notre hébergeur pour le faire..
Pour raccourcir l'URL par défaut, nous allons créer une entrée CNAME comme je l'ai fait ci-dessous (sur votre hôte Web). J'ai choisi "fichiers" comme sous-domaine mais vous pouvez utiliser ce que vous voulez.
Maintenant, nous pouvons accéder à ces fichiers de seau à "files.jremick.com". Beaucoup mieux! Ensuite, téléchargez simplement les fichiers de votre choix dans le compartiment "files.jremick.com".
Une fois vos fichiers téléchargés, vous voudrez configurer la liste de contrôle d'accès (ACL) pour permettre à tout le monde de lire les fichiers (si vous souhaitez les rendre publics). Dans Transmettre, il vous suffit de cliquer avec le bouton droit de la souris, de sélectionner l’information, de définir le paramètre "Lecture" sous "Autorisations" et de cliquer sur "Appliquer aux éléments inclus ...". Cela donnera à tous les fichiers de ce compartiment un accès en lecture au monde.
Par défaut, les fichiers téléchargés sur votre compte S3 n'autorisent qu'un accès en lecture et en écriture au propriétaire. Donc, si vous téléchargez de nouveaux fichiers ultérieurement, vous devrez répéter ces étapes ou appliquer des autorisations différentes pour ces fichiers uniquement..
Maintenant que nous avons configuré S3, créé une URL plus courte et téléchargé nos fichiers, nous voudrons rendre ces fichiers accessibles via CloudFront afin d'obtenir une latence extrêmement faible afin de réduire nos temps de chargement. Pour ce faire, nous devons créer une distribution CloudFront..
Connectez-vous à votre compte AWS et accédez à votre console de gestion Amazon CloudFront (sous le menu déroulant "Votre compte"). Puis cliquez sur le bouton "Créer une distribution".
Nous allons sélectionner le compartiment d'origine (le compartiment que nous avons créé précédemment), activer la journalisation si vous le souhaitez, spécifier un CNAME et des commentaires, et enfin activer ou désactiver la distribution. Vous n'avez pas besoin d'entrer un CNAME ou des commentaires, mais nous voudrons configurer une URL plus courte ultérieurement, comme nous l'avons fait pour S3. J'aimerais utiliser "cdn.jremick.com", c'est ce que je mets ici.
Comme vous pouvez le constater, l’URL par défaut est plutôt moche. Ce n'est pas quelque chose que vous allez vouloir essayer de retenir. Alors maintenant, configurons un CNAME pour la jolie et courte URL.
Pour configurer le sous-domaine CloudFiles personnalisé, nous allons suivre le même processus que pour S3..
Maintenant, nous pouvons accéder aux fichiers via CloudFront en utilisant "cdn.jremick.com".
Lorsque quelqu'un accède à un fichier via votre compartiment S3, il agit comme un hôte de fichier standard. Cependant, lorsque quelqu'un accède à un fichier via CloudFiles, il le demande à votre compartiment S3 (l'origine) et le met en cache sur le serveur CDN le plus proche de la requête initiale pour toutes les requêtes suivantes. C'est un peu plus compliqué que ça, mais c'est l'idée générale.
Imaginez un CDN comme un réseau intelligent capable de déterminer l'itinéraire le plus rapide possible pour la livraison des demandes. Un autre exemple serait le suivant: si le serveur le plus proche est encombré par le trafic, il peut être plus rapide d’obtenir le fichier d’un serveur un peu plus éloigné, mais avec moins de trafic. Donc, CloudFront livrera le fichier demandé à partir de cet emplacement.
Une fois qu'un fichier est mis en cache dans les serveurs de réseau CloudFront, il n'est pas remplacé jusqu'à son expiration et il est automatiquement supprimé (après 24 heures d'inactivité par défaut). Cela peut être très pénible si vous essayez de publier immédiatement les mises à jour. Pour résoudre ce problème, vous aurez besoin de la version de vos fichiers. Par exemple, "my-stylesheet.css" pourrait être "my-stylesheet-v1.0.css". Ensuite, lorsque vous effectuez une mise à jour qui doit être publiée immédiatement, vous modifiez le nom en "my-stylesheet-v1.1.css" ou quelque chose de similaire..
Notre contenu est chargé dans notre compartiment S3, notre distribution CloudFront est déployée et nos sous-domaines personnalisés sont configurés pour un accès facile. Il est temps de mettre à l'épreuve pour voir quel type d'avantages en termes de performances nous pouvons attendre.
J'ai configuré 44 exemples d'images allant d'environ 2 Ko à 45 Ko. Vous pensez peut-être qu'il y a plus d'images que la plupart des sites Web n'en chargeront sur une seule page. C’est peut-être vrai, mais de nombreux sites Web, tels que des portefeuilles, des sites de commerce électronique, des blogs, etc., chargent tout autant d’images, voire davantage..
Bien que j'utilise uniquement des images pour cet exemple, l'important est la taille du fichier et la quantité pour la comparaison. Les sites Web actuels chargent plusieurs fichiers javascript, CSS, HTML et images sur chaque page. 44 demandes de fichiers représentent probablement moins que la plupart des sites Web. Un CDN pourrait donc avoir un impact encore plus important sur votre site Web que celui présenté dans cette comparaison..
J'utilise Web Inspector de Safari pour afficher les résultats de performance. J'ai désactivé les caches et le décalage + rafraîchissement 10-15 fois (environ toutes les 2-3 secondes) pour chaque test afin d'obtenir une moyenne décente du temps de chargement total, de la latence et de la durée..
Voici les résultats de performance lorsque hébergé via mon hôte Web habituel. Trié par latence.
Trié par durée.
Les mêmes fichiers ont été utilisés pour tester S3. Trié par latence.
Trié par durée.
S3 est plus rapide que mon hébergeur habituel mais seulement de manière marginale. Si vous n'avez pas envie de jouer avec un CDN, S3 est tout de même une excellente option pour donner à votre site Web un gain de vitesse décent. Je recommande quand même d'utiliser un CDN et nous verrons pourquoi dans ce prochain test.
Les mêmes fichiers ont été utilisés pour tester CloudFront.
Trié par durée.
Voici un aperçu rapide de la comparaison des performances entre mon hôte Web habituel et les mêmes fichiers sur le service CloudFront d'Amazon.
Comparaison de durée
50 ms ou même 100 ms, cela ne semble pas être très long d’attendre (0,1 seconde), mais si vous répétez cela pour 30, 40, 50 fichiers ou plus, vous pouvez voir comment cela s’ajoute rapidement en secondes.
Voici une vidéo rapide pour montrer à quel point l’augmentation du temps de chargement est notable. J'ai désactivé les caches et procédé à une actualisation forcée (décalage + actualisation) pour m'assurer que les images ne sont pas mises en cache.
Il existe plusieurs autres moyens d'augmenter les performances d'un site Web lorsque vous utilisez un CDN..
Voir Meilleures pratiques pour accélérer votre site Web pour plus d'informations..
L'une des options ci-dessus pour augmenter encore plus les performances consistait à fournir des fichiers gzippés. Malheureusement, CloudFront n'est pas en mesure de déterminer automatiquement si un visiteur peut accepter les fichiers gzippés ou non et en servir le bon. Heureusement, tous les navigateurs modernes supportent les fichiers gzippés ces jours-ci.
Pour servir des fichiers gzippés à partir de CloudFront, nous pouvons donner à notre site Web une logique pour servir les bons fichiers ou définir le codage et le type de contenu sur quelques fichiers spécifiques pour simplifier les choses. Gzip les fichiers que vous voulez et renommez-les pour que ça ne finisse pas .gz. Par exemple, "filename.css.gz" deviendrait "filename.css" ou pour vous rappeler qu'il s'agit d'un fichier compressé, nommez-le "filename.gz.css". Téléchargez maintenant le fichier gzippé à l’emplacement de votre compartiment S3 de votre choix (n'oubliez pas de définir la liste de contrôle d'accès / autorisations)..
Si vous n’êtes pas sûr de savoir comment gziper un fichier, consultez http://www.gzip.org (OS X peut le faire dans un terminal)
Nous devons définir le type de contenu et d'encodage du contenu (s'il ne l'est pas déjà) sur nos fichiers afin que, lorsque le navigateur le demande, il sache que le contenu est compressé et puisse le décompresser correctement. Sinon ça va ressembler à ça.
Nous pouvons le faire facilement avec Bucket Explorer. Une fois que vous l'avez téléchargé, entrez votre clé d'accès AWS et votre clé secrète pour vous connecter à votre compte S3. Recherchez le fichier gzippé que vous avez précédemment téléchargé, faites un clic droit et sélectionnez "Mettre à jour les méta-données"..
Comme vous pouvez le constater, Content-Type est déjà défini sur text / css, nous n’avons donc pas besoin de le définir (javascript serait text / javascript). Nous devons juste ajouter le bon encodage de contenu. Cliquez sur "Ajouter" et dans la boîte de dialogue contextuelle, entrez "Codage du contenu" dans le champ Clé et "gzip" dans le champ Valeur. Cliquez sur OK, puis sur Enregistrer et vous avez terminé! Maintenant, le navigateur va voir le fichier correctement.
Gzipper un fichier peut réduire considérablement sa taille. Par exemple, cette feuille de style de test faisait environ 22 Ko et a été réduite à environ 5 Ko. Pour mon blog, j'ai combiné tous mes plugins jQuery avec des onglets jQuery UI. Après minification, il a été réduit à 26.49KB, après avoir été compressé, à 8.17KB..
Il existe de nombreuses façons d’augmenter les performances de votre site Web et, à mon avis, elles valent la peine d’être essayées. Si les visiteurs ne sont plus qu'à 0,5 seconde, voire 1 seconde, de votre site Web, un CDN pourrait empêcher cela de se produire. De plus, la plupart d’entre nous sont des adeptes de la vitesse, alors pourquoi ne pas augmenter les performances de votre site Web si vous le pouvez? Surtout si cela peut vous faire économiser de l'argent dans le processus.
Si vous avez des questions, s'il vous plaît laissez-moi savoir dans les commentaires et je vais essayer d'y répondre. Merci!
Accentsconagua