Dans notre article précédent, nous avons exploré les avantages d’avoir un service CDN avec WordPress et pourquoi les CDN sont l’un des meilleurs moyens d’accélérer WordPress plusieurs fois auparavant sur le blog. . Nous avons observé à quel point les performances augmentent si vos visiteurs sont éloignés de votre serveur hôte. Nous espérons que cela a suscité votre intérêt, car dans l’article d’aujourd’hui, nous allons vous expliquer étape par étape comment créer une ressource CDN sur CDN77 et comment la modifier correctement. Après cela, nous allons installer un ensemble spécifique de plugins sur WordPress, puis vérifier si tout fonctionne correctement.
La première étape de notre guide sera de créer un compte CDN77. Si vous n’avez pas encore de compte, CDN77 offre un essai gratuit de 14 jours. L’enregistrement ne prend que quelques minutes. Ensuite, nous allons réellement créer une ressource CDN en cliquant sur Créer une nouvelle ressource CDN (sous l’onglet CDN). Pour les besoins de cet article, nous allons implémenter un CDN sur un blog de films hébergé sur un centre de données à Las Vegas.
Puisque nous allons implémenter une solution HTTPS complète, nous utiliserons le nouveau « HTTPS » à CDN77. Cette option sécurise le transfert des données de votre serveur hôte vers le serveur CDN.
Si votre site fonctionne en mode SSL, vous devez absolument créer une ressource SSL uniquement sur CDN77. Sinon, vous risquez des erreurs de contenu mixte. Ce type d’erreur se produit lorsque le navigateur s’exécute en mode SSL et essaie soudainement de charger une ressource via une requête HTTP non sécurisée.
Comment configurer un SSL sur CDN77
Nous pouvons mettre en place un certificat SSL gratuit de 2 manières. Nous pouvons soit utiliser un certificat SSL partagé pour un sous-domaine sur xxx.c.cdn77.org, soit utiliser notre propre CNAME (voir l’image ci-dessus). En général, nous vous encourageons à utiliser un CNAME comme cdn.votresite.com.
Si vous optez pour la solution partagée CDN77, aucune autre étape n’est nécessaire pour que le sous-domaine SSL fonctionne correctement.
Dans ce cas, nous allons mettre en place un CNAME. Cela signifie que le contenu de notre site Web sera accessible via HTTPS instantanément si nous remplaçons notre site par cdn.ourdomain. Avec CDN77, obtenir un SSL se fait en quelques clics.
Ajustez-le !
Une fois que vous avez créé la ressource, la première chose à regarder est le menu Autres paramètres. Si vous comptez utiliser HTTPS, il est absolument obligatoire de garder HTTP/2 activé. L’amélioration de la vitesse entre HTTP/1.x normal et HTTP/2 est énorme. CDN77 fonctionnera par défaut en mode HTTP/2 dans votre ressource HTTPS, réduisant ainsi votre temps de moitié.
Si vous passez par HTTPS, vous devez également effectuer une redirection 301 pour vous conformer aux normes google pour HTTPS, activez la redirection HTTPS.
Pour des performances optimales, activez tout ignorer dans Ignorer les chaînes de requête. À moins que votre site n’exécute du contenu chargé dynamiquement qui doit être mis à jour toutes les heures, vous pouvez vous en tirer avec les chaînes de requête et tout ignorer, cela augmentera considérablement le cache et les performances du site.
CDN77 propose également l’option d’expiration du cache. Si vous chargez beaucoup d’images, ce paramètre doit être réglé sur le paramètre le plus élevé possible, soit 12 jours.
Dans ce guide, nous considérerons la vitesse en premier lieu. CDN ne nous fournira donc que le contenu statique de l’image, tout le reste sera chargé depuis le serveur d’origine.
Pourquoi ne pas utiliser CDN pour Javascript & CSS, vous êtes fou ?
N’oubliez pas que dans notre article précédent, nous avons expliqué comment les performances du CDN peuvent varier lorsque le contenu n’est pas disponible sur le nœud demandé du réseau CDN. Eh bien, si le fichier non encore mis en cache est un fichier CSS, le temps de chargement augmentera et cela peut avoir un impact négatif sur vos performances. Cela peut affecter la vitesse de rendu de votre site beaucoup plus que si vous décidez de ne pas servir CSS avec CDN.
Les fichiers CSS et Javascript sont essentiels pour le chargement du site Web sur n’importe quel navigateur et ils ne devraient pas faire l’objet d’un mécanisme de cache comme celui des services CDN. Cependant, vous pouvez créer une ressource statique sur le CDN pour vider ces fichiers importants. Il s’agit d’une technique plus avancée qui vous obligera à modifier votre WordPress à un niveau dépassant le cadre de ce didacticiel.
Une fois que nous avons tout réglé correctement, nous pouvons passer à l’onglet du menu des centres de données.
CDN77 fournit un moyen pratique d’activer/désactiver chaque nœud de leur réseau. Il s’agit de sélectionner soigneusement les nœuds les plus activement utilisés. C’est facile à découvrir, il suffit de suivre vos lecteurs.
Une fois que vous savez de quels nœuds vous avez besoin, il vous est conseillé de désactiver tous les nœuds superflus. Il y a une explication simple à cela : plus vous avez de nœuds sur votre réseau, plus il faudra de temps pour tous les mettre à jour, par conséquent, vos performances en pâtiront. En règle générale, lorsque vous réduisez le nombre de nœuds, vous augmentez également les performances du cache. Choisis sagement.
Lorsque vous testez les performances de votre site pour la première fois, purge et prélecture pourrait être pratique. Purge poussera un contenu spécifique hors du réseau CDN, c’est pratique si vous modifiez le contenu et devez vider le cache pour mettre à jour. Prefetch fera le contraire, il forcera un contenu spécifique dans le cache CDN.
Une fois que vous avez tout configuré, vous pouvez faire pointer votre CNAME vers votre propre domaine. Pour ce faire, vous devez créer une règle dans votre bureau d’enregistrement ou votre panneau d’hébergement dans la section DNS et pointer votre cdn.votredomaine.com vers CNAME xxx.rsc.cdn77.org comme indiqué sur l’image, cela instruira le DNS pour rediriger tout le trafic de votre sous-domaine vers l’endroit où il doit se trouver. Ne vous inquiétez pas, cela n’affectera pas les performances. De plus, il sert également à montrer à vos lecteurs que vous utilisez un cdn.votredomaine.com qui a l’air chic.
Si vous préférez utiliser l’adresse cdn77.org, vous n’avez rien à faire, utilisez simplement cette adresse lors du remplacement de votre contenu dans WordPress.
Côté WordPress
Du côté de WordPress, nous devons ajouter un plugin pour que cela fonctionne correctement. Nous allons utiliser le Enabler CDN, un plugin gratuit très pratique. La raison d’utiliser ce plugin est simple : la majorité des plugins CDN n’autorisent pas un contrôle aussi granulaire sur les dossiers que vous envoyez au CDN. Ce plugin le fait et c’est très important pour notre cas car nous ne voulons pas inclure de fichiers Javascript ou CSS, juste les images téléchargées.
Une fois installé, vous pouvez trouver le plugin juste ici…
Ajustons-le !
Vous vous souvenez quand nous parlions de personnalisation ? Voici le fait le plus important sur la façon de configurer correctement un CDN sur WordPress. La grande majorité des plugins CDN vous diront d’inclure un répertoire pour le CDN à « répliquer » et ils vous disent généralement d’inclure wp-content. C’est bien pour un réglage général mais ce n’est pas bon pour vos performances car le dossier wp-content est rempli d’un autre dossier très sensible, le dossier plugins et thèmes, comprenant des tonnes de fichiers Javascript & CSS. Vous pouvez perdre des performances s’ils ne sont pas mis en cache comme indiqué précédemment.
Alors, comment réparons-nous cela? Nous incluons simplement le dossier wp-content/uploads. Une solution si simple !
Aussi choqué que vous soyez, la grande majorité des plugins qui gèrent les CDN ne vous permettront pas de le faire. Inclure uniquement ce sous-dossier instruira votre CDN dans votre dossier de téléchargement, c’est-à-dire vos images uniquement.
Un simple rafraîchissement du site permettra au CDN d’obtenir le contenu pour vous. Dans cet exemple, nous avons ouvert un onglet développeur Firefox (F12) et recherché la première image. Vous pouvez voir clairement que le lien a été remplacé et qu’il est maintenant chargé directement depuis le CDN au lieu de notre serveur hôte !
Avant et après
Voyons comment tout cela s’est passé !
Dans l’écran de gauche, nous pouvons voir le temps qu’il faut pour charger le site depuis la Suède (qui est loin de notre serveur hôte à Las Vegas, vous vous souvenez ?) Dans l’écran de droite, nous pouvons voir que les performances ont augmenté, le temps a été presque coupé en deux ! Tous les fichiers essentiels se chargent toujours depuis notre serveur à Las Vegas, mais les fichiers lourds, comme les images, se chargent depuis le nœud en Suède.
Emballer
J’espère que vous avez appris un moyen puissant d’implémenter un CDN dans votre site WordPress. Certaines techniques sont non intrusives comme les fichiers CSS & Javascript indispensables à la vitesse de chargement du site. Vous pouvez désormais tirer parti de tous les avantages d’un CDN tout en minimisant ses inconvénients. Nous espérons que vous essaierez gratuitement le CDN et utiliserez les conseils de cet article pour voir si vous pouvez accélérer votre site WordPress. Nous espérons que vous avez apprécié l’article! Comme d’habitude, laissez vos questions ou doutes dans les commentaires ci-dessous.
