Après les conseils fantastiques de l’article d’edbaxter sur l’optimisation de la vitesse des pages, j’ai décidé qu’il était temps de publier un guide du débutant sur l’une des méthodes les plus efficaces pour augmenter la vitesse qui n’était mentionnée que dans cet article : un réseau de diffusion de contenu (CDN). Le but d’un CDN est de placer les fichiers statiques ou immuables de votre site Web sur des serveurs très rapides partout dans le monde, afin que les demandes de visualisation du contenu par les visiteurs de votre site aient le plus court trajet possible pour obtenir vos données. Un exemple de ces fichiers statiques sont les fichiers images, css et javascript.
Pensez-y comme un bol de bonbons dans votre cuisine. Lorsque vous voulez un bonbon, vous devez faire le trajet de quelque part dans votre maison à la cuisine, et cela peut prendre plus de temps que vous ne le souhaiteriez. Vous pouvez à la place mettre plusieurs bols de ce même bonbon dans chaque pièce de votre maison. Cela rendrait le voyage beaucoup plus rapide pour recevoir les bonbons, même si cela ne ferait rien pour votre tour de taille.
Cet article se concentrera spécifiquement sur l’utilisation de deux services qui sont sous le label Amazon Web Services (AWS) : Amazon Simple Storage Service (S3) et Amazon CloudFront. CloudFront est le CDN, et S3 est un emplacement rapide utilisé pour stocker vos fichiers statiques, où CloudFront va chercher le fichier le plus à jour. Bien que ces services aient des coûts associés, il existe un niveau d’utilisation gratuite qui couvrira une grande partie des coûts de S3. Les coûts de CloudFront varient, mais pour une certaine perspective, j’ai un site qui compte 450 000 pages vues par mois, et les coûts impliqués sont de 3 $/mois. C’était 4 $ le mois dernier, mais j’ai réduit les requêtes HTTP en supprimant les images inutiles, en combinant des fichiers, en utilisant des sprites, etc.
Quel est l’avantage ? En utilisant ces méthodes seules, vous pouvez voir une réduction des temps de chargement entre 50% et 75%, et lorsqu’elles sont combinées avec les conseils d’edbaxter, vous pouvez avoir des pages qui se chargent en moins de deux secondes. Commençons!
Création de vos comptes et téléchargement de logiciels
Avant d’entrer dans les étapes détaillées de création de votre compte, vous souhaiterez télécharger gratuitement CloudBerry S3Explorer pour Windows. J’ai trouvé que ce logiciel était le plus puissant, mais si vous n’avez pas accès à Windows d’une manière ou d’une autre, il existe un plugin Firefox appelé S3Fox qui peut être utilisé en combinaison avec AWS Management Console pour accomplir ces mêmes tâches.
Il est maintenant temps de créer vos comptes. Accédez à la page AWS Free Usage Tier et inscrivez-vous avec le lien en haut à droite. Une fois terminé, vous recevrez un e-mail de confirmation qui inclura un lien pour obtenir vos identifiants d’accès. Cliquez sur ce lien et notez à la fois votre identifiant de clé d’accès et votre clé d’accès secrète (cliquez sur Afficher) ; les deux sont nécessaires plus tard pour utiliser CloudBerry avec votre compte.
Il est maintenant temps de vous inscrire spécifiquement à S3 en vous rendant sur la page Amazon S3 et en cliquant sur S’inscrire en haut à droite. Cette étape nécessitera qu’une carte de crédit soit fournie à Amazon et qu’une adresse de facturation soit sélectionnée. Une fois ces deux éléments de données entrés, vous cliquerez sur “Terminer l’inscription”. Le message suivant s’affichera.
Il est temps de rincer et de répéter le processus d’inscription à Amazon Cloudfront. Comme d’habitude, cliquez sur “Terminer l’inscription” pour conclure. Même message, et généralement dans les 10 minutes, vous recevrez deux e-mails pour vous informer que tout est configuré pour S3 et CloudFront.
Ce serait le moment idéal pour installer CloudBerry, et si les e-mails sont arrivés au moment où vous avez terminé, vous pouvez alors créer votre nouveau compte dans CloudBerry. Lancez l’application et, dans le menu, sélectionnez Fichier > Comptes Amazon S3. Double-cliquez sur l’icône Nouveau compte, entrez un surnom tel que votre nom de domaine, puis retirez les informations d’identification que vous avez notées précédemment et copiez/collez-les dans les cases appropriées.
Assurez-vous de cliquer sur “Tester la connexion” avant de cliquer sur OK. Une fois de retour à l’écran principal, vous devriez avoir un nouvel onglet. Un côté doit être configuré sur votre nouveau compte S3 et l’autre sur Poste de travail (voir l’image ci-dessous). L’étape suivante consiste à créer un compartiment, mais parlons d’abord des fichiers eux-mêmes et de votre site Web.
Quels fichiers ?
Avant tout, si vous souhaitez simplement utiliser un CDN pour accélérer votre blog Wordpress, les fichiers qui vous intéressent sont le contenu de wp-includes et wp-content. Vous pouvez ensuite utiliser un plugin comme WP-Super-Cache ou W3-Total-Cache pour faire tout le gros du travail. Cependant, faire cela pour un blog Wordpress est un article complet en soi, et je n’ai pas été ravi à 100% jusqu’à présent avec ma configuration et mes tests de plugins, donc je laisserai quelqu’un d’autre écrire celui-là. Je vais me concentrer sur tout le monde.
Les fichiers que vous souhaitez déplacer vers un CDN sont vos fichiers javascript, vos feuilles de style en cascade (CSS) et vos images. Ces éléments sont statiques et changent rarement sur votre site Web, et si vous les modifiez à l’avenir, vous devrez mettre à jour le fichier sur Amazon S3. Pour l’instant cependant, supposons que vous soyez un bon organisateur et que ces fichiers se trouvent tous dans des sous-dossiers tels que javascript/, stylesheets/ et images/. Super! Cela facilite leur copie !
Conseil de pro : L’un de vos fichiers javascript est-il une bibliothèque, telle que jQuery? Laissez le CDN de Google faire le travail pour vous (c’est vraiment rapide et gratuit) ! Consultez la liste complète des bibliothèques disponibles hébergées par Google et mettez à jour les liens de votre site Web de manière appropriée.
Buckets, ACL et CloudFront – Téléchargement des fichiers
Il est temps de créer un seau. Un compartiment est un conteneur pour tous les fichiers et un excellent moyen d’organiser les fichiers ensemble lorsque vous gérez plusieurs sites Web et que vous souhaitez garder les choses un peu séparées. Clique le bleu bouton indiqué dans l’image ci-dessus dans CloudBerry Explorer pour créer votre premier compartiment. Je recommande de nommer votre bucket quelque chose comme : cdn.votresiteweb.com (c’est propre et facile). L’emplacement du seau est un détail mineur, donc pour l’instant, réglez-le simplement sur l’emplacement le plus proche de vous.
Cliquez sur OK et créez votre compartiment, qui sera désormais répertorié dans CloudBerry. Double-cliquez sur le seau pour l’ouvrir. Il sera vide, mais il est maintenant temps de copier vos fichiers. Utilisez le côté Poste de travail pour rechercher sur votre ordinateur ces fichiers statiques. Sélectionnez tous les dossiers/fichiers, faites un clic droit et choisissez Copie.
Le temps variera en fonction du nombre de fichiers que vous déplacez, mais une fois que tout est terminé, nous pouvons configurer les paramètres de niveau d’accès (ACL). Sélectionnez tous les fichiers du côté Amazon S3 de CloudBerry, cliquez avec le bouton droit et sélectionnez Paramètres ACL.
Les paramètres ACL représentent qui est autorisé à afficher les fichiers. Si cette étape était ignorée, les fichiers ne seraient pas accessibles aux visiteurs de votre site Web. Par conséquent, c’est critique pour mettre cela en place. Après avoir sélectionné Paramètres ACL, la fenêtre suivante s’affiche.
Cliquez sur Publique (tout le monde) sur le côté droit, puis cochez la case en bas à gauche pour Appliquer pour tous les sous-dossiers et fichiers. Cela garantit que tous les fichiers à l’intérieur de vos dossiers sont traités. Enfin, cochez la case dans Utilisateurs authentifiés > Lire. Avant de cliquer sur OK, tout devrait ressembler à l’image ci-dessous.
Au bas de CloudBerry, vous verrez l’état pendant qu’il traite tous vos fichiers. Cela peut prendre un certain temps, mais laissez agir. S’il y a des erreurs, vous verrez l’option de réessayer celles qui ont échoué. Cliquez simplement sur Réessayer et tout devrait bien se passer la deuxième fois. Vous y êtes presque… excité ?
La dernière étape dans AWS consiste à transférer ces fichiers vers CloudFront d’Amazon. Cliquez sur la flèche vers le haut juste au-dessus de vos dossiers du côté S3, en laissant votre compartiment afficher (par exemple, cdn.yourwebsite.com). Faites un clic droit sur le bucket et sélectionnez CloudFront > Nouvel assistant de distribution CloudFront.
En parcourant l’assistant, appuyez sur Suivant, puis laissez la valeur par défaut Télécharger option et cliquez à nouveau sur Suivant. Quitter le L’origine est le compartiment Amazon S3 et assurez-vous que votre compartiment est sélectionné dans la liste déroulante. Avant de cliquer sur Suivant, nous devons nous arrêter un instant et parler de l’option CNAME.
CNAME et DNS
Un enregistrement CNAME est configuré sur votre hébergeur et vous permet d’avoir un sous-domaine tel que CDN.votresiteweb.com représente une autre URL. Lorsque vous configurez CloudFront, Amazon vous envoie une URL similaire à abcd1234.cloudfront.net pour représenter vos fichiers. Cependant, en configurant un enregistrement CNAME pour votre site Web, vous pouvez faire pointer cdn.yourwebsite.com vers abcd1234.cloudfront.net (exemple !). Ce n’est pas seulement facile à retenir, mais cela donne l’impression que les choses se trouvent sur votre site Web. Selon votre domaine, les étapes varieront pour le configurer. Cependant, si vous souhaitez le configurer vous-même, il est maintenant temps de décider de l’URL et de la définir dans la zone CNAME à l’intérieur de l’assistant.
Passez à l’étape suivante, en laissant la valeur par défaut Pas de journalisation paramètre et en cliquant à nouveau sur Suivant. Ne cochez pas Activer la distribution de contenu privé, cliquez à nouveau sur Suivant. L’écran suivant vous permet de Activer la distribution immédiatement. Vous ne voudrez cocher que cette option et cliquer sur Suivant. La dernière étape est un examen de tous vos paramètres, alors revérifiez les choses et cliquez sur Terminer.
Il faut 10 à 15 minutes pour finaliser la création de CloudFront, mais vous pouvez vérifier l’état en vérifiant le Propriétés du compartiment à l’aide de l’icône ci-dessus ou en cliquant avec le bouton droit de la souris et en sélectionnant Propriétés.
Il y a deux zones d’intérêt sous la section Distribution en haut de la fenêtre Propriétés. La Statut affichera En cours ou Déployé. Sachez qu’il peut être Déployé avant qu’il ne s’affiche dans le statut, et vous pouvez le vérifier directement sur le Web via AWS Management Console. L’autre domaine d’intérêt est le Nom de domaine. Vous voudrez copier ceci pour l’utiliser plus tard sur votre site Web pour pointer vers vos fichiers, ou si vous configurez un CNAME, vous ferez pointer votre cdn.yourwebsite.com CNAME vers le nom de domaine répertorié (par exemple abcd1234.cloudfront.net). C’est maintenant le bon moment pour configurer cet enregistrement CNAME.
Astuce d’utilisateur avancé : Vous pouvez configurer des en-têtes HTTP sur vos fichiers pour améliorer la vitesse, le plus courant étant la configuration des en-têtes Cache-Control pendant 31 jours (2678400 secondes). Cela aide les visiteurs réguliers à charger moins de fichiers. Pour ce faire, faites un clic droit sur votre compartiment et sélectionnez Définir les en-têtes HTTP. Cliquez sur Ajouter en haut à droite, sélectionnez Cache-Control dans le menu déroulant du haut, et saisissez ce qui suit dans la zone de texte du bas (sans guillemets) : ‘public, max-age=2678400‘. Cliquez sur OK et tous vos fichiers seront mis à jour afin qu’il y ait une expiration du cache de 31 jours.
Vous avez terminé toutes les étapes nécessaires pour placer vos fichiers dans AWS. Toutes nos félicitations! Maintenant, mettez à jour votre site Web pour utiliser vos nouveaux fichiers.
Configuration de votre site Web et tests
Tout d’abord, si vous souhaitez mettre à jour manuellement tous les liens de votre site Web pour pointer vers le nouvel emplacement, plus de pouvoir pour vous. Voici un exemple:
ANCIEN LIEN : http://votresite.com/images/loading.gif
NOUVEAU LIEN: http://abcd1234.cloudfront.net/images/loading.gif
OU
NOUVEAU LIEN: http://cdn.votresiteweb.com/images/loading.gif
Bien sûr, vous voudrez peut-être faire quelque chose de plus avancé. La méthode la moins efficace consiste à utiliser une redirection. Oui, c’est un bon temporaire mesure, mais ne doit pas être utilisé indéfiniment. Si vous utilisez un fichier .htaccess et mod_rewrite sur votre serveur, voici une règle rapide pour vous :
Règle de réécriture ^(images|javascript|feuilles de style)\/(.*)\.(gif|jpg|jpeg|png|css|js) http://cdn.votresiteweb.com/$1/$2.$3 [R]
Vous devrez mettre à jour la zone en gras avec votre lien de domaine (cloudfront ou CNAME). Une fois que cela est configuré, vous pouvez facilement voir quels fichiers sont capturés par la règle de réécriture en vous rendant sur http://tools.pingdom.com/ qui propose un test de vitesse fichier par fichier pour votre site Web. Une flèche verte apparaît pour les fichiers qui ont été redirigés. C’est un excellent moyen de s’assurer que vous n’avez rien manqué ! Assurez-vous de consulter un expert si vous n’êtes pas à l’aise avec les règles mod_rewrite ou si vous utilisez un autre serveur Web qu’Apache et votre cas varie.
Pour les développeurs PHP, vous pouvez utiliser ob_start() pour effectuer un rappel à une fonction, qui remplacera tous les liens par les nouveaux liens CDN. En haut de vos pages, modifiez ob_start(); à ob_start(‘CDN’); Ensuite, vous pouvez utiliser la fonction CDN suivante, en remplaçant les zones en gras :
fonction CDN($tampon){
return (preg_replace(“/(href|src)=(\”|’)(\/|\.\/|http:\/\/www\.votresite\.com\/|\.\/|\/)([^’\”]*\.)(gif|jpg|jpeg|png|css|js)(\”|’)/”,”\${1}=\${2}http://cdn.votresiteweb.com/\${4}\${5}\${6}”,$tampon) );
}
Remarque finale
Si vous n’êtes toujours pas sûr de la valeur d’un CDN, considérez que lorsque vous affichez la source de SEOmoz.org, vous constaterez que les fichiers statiques sont tous servis à partir d’une URL CDN. Deuxièmement, pour renforcer ce point, toutes les images utilisées dans ce didacticiel sont également diffusées à partir de mon compte Amazon CloudFront. Les avantages sont considérables, et il y a beaucoup d’avantages pour le référencement et vos utilisateurs en accélérant leur expérience avec votre site Web. Bonne chance!
A propos de l’auteur
Mario Lurig est un auteur, entrepreneur et génial. Développeur PHP amateur, il a déjà publié deux articles sur YouMoz. Son projet le plus récent est un service de notification des horaires des compagnies aériennes, FlyTimeNotify.com.
