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 faire un guide étape par étape sur la façon de 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'inscription 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 cinéma hébergé sur un Datacenter à Las Vegas.

cdn77-avec-wordpress-03

Puisque nous allons implémenter une solution HTTPS complète, nous utiliserons le nouveau « HTTPS » chez 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 tente soudainement de charger une ressource via une requête HTTP non sécurisée.

cdn77-avec-wordpress-04

Comment configurer un SSL sur CDN77

Nous pouvons configurer 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 mettrons 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.notredomaine. 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 allez 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 en mode HTTP/2 dans votre ressource HTTPS par défaut, réduisant votre temps de moitié.

Si vous passez par HTTPS, vous devez également faire 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 un contenu chargé dynamiquement qui doit être mis à jour toutes les heures, vous pouvez vous en sortir avec les chaînes de requête et tout ignorer, cela augmentera considérablement les performances du cache et du site.

CDN77 propose également l'option d'expiration du cache. Si vous chargez beaucoup d'images, cela doit être réglé sur le réglage 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 ?

Rappelez-vous dans notre article précédent, nous avons parlé de la façon dont 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 qui n'est pas encore mis en cache est un fichier CSS, le temps de chargement augmentera et cela pourrait avoir un impact négatif sur vos performances. Cela pourrait affecter la vitesse de rendu de votre site beaucoup plus que si vous décidiez de ne pas servir CSS avec CDN.

Les fichiers CSS et Javascript sont vitaux pour le chargement d'un 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 correctement peaufiné, nous pouvons passer à l'onglet du menu des centres de données.

cdn77-avec-wordpress-07

CDN77 offre un moyen pratique d'activer/désactiver chaque nœud de leur réseau. Le but est de sélectionner avec soin 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 dispensables. Il y a une explication simple à cela : plus vous avez de nœuds sur votre réseau, plus il vous faudra de temps pour tous les mettre à jour, d'où vos performances en souffrent. 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, purger et prérécupérer 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 le mettre à jour. Prefetch fera le contraire, il forcera un contenu spécifique dans le cache CDN.

cdn77-avec-wordpress-10

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 faire 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. En outre, 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 Outil CDN, un plugin gratuit pratique. La raison d'utiliser ce plugin est simple – la majorité des plugins CDN ne permettent 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 puisque nous ne voulons pas inclure de fichiers Javascript ou CSS, juste les images téléchargées.

cdn77-avec-wordpress-14

Une fois installé, vous pouvez trouver le plugin ici…

cdn77-avec-wordpress-15

Modifions-le !

cdn77-avec-wordpress-16

Vous vous souvenez quand nous avons parlé 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 que le CDN « se réplique » et ils vous diront 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 des plugins et des thèmes, y compris des tonnes de fichiers Javascript et CSS. Vous risquez de perdre des performances lorsqu'ils ne sont pas mis en cache, comme indiqué précédemment.

Alors, comment résoudre ce problème ? Nous incluons simplement le dossier wp-content/uploads. Une solution si simple !

Aussi choqué que vous puissiez être, la grande majorité des plugins qui gèrent les CDN ne vous permettront pas de le faire. Inclure uniquement ce sous-dossier indiquera à votre CDN votre dossier de téléchargement, c'est-à-dire vos photos uniquement.

cdn77-avec-wordpress-17

Une simple actualisation 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 avéré !

Sur l'écran de gauche, on peut voir le temps qu'il faut pour charger le site depuis la Suède (qui est loin de notre serveur hôte à Las Vegas, tu te souviens ?) Sur l'écran de droite, on peut voir que les performances ont augmenté, le temps a été presque coupé en deux ! Tous les fichiers essentiels sont toujours en cours de chargement depuis notre serveur à Las Vegas, mais les fichiers lourds, comme les images, sont en cours de chargement 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 ces 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 essayerez l'essai CDN gratuit et que vous 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.