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 loin 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 manière de créer une ressource CDN sur CDN77 et de la modifier correctement. Après cela, nous allons installer un ensemble spécifique de plugins sur WordPress, puis vérifier si tout fonctionne bien.

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 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 cinématographique 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 de 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’erreurs 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 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 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.ourdomain. Avec CDN77, l’obtention d’un SSL se fait en quelques clics.

Tweak it!

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 utilisez 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 Ignorer tout dans les chaînes de requête Ignorer. À 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 offre également l’option d’expiration du cache. Dans le cas où vous chargez beaucoup d’images, cela doit être réglé sur le paramètre le plus élevé possible, qui est de 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é à partir du serveur d’origine.

Pourquoi ne pas utiliser CDN pour Javascript et CSS, êtes-vous fou?

Rappelez-vous dans notre article précédent, nous avons expliqué comment les performances 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 se trouve être 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 de CSS avec CDN.

Les fichiers CSS et Javascript sont vitaux pour le chargement de sites 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 à ajuster votre WordPress à un niveau dépassant la portée de ce tutoriel.

Une fois que tout est correctement peaufiné, nous pouvons passer à l’onglet du menu des centres de données.

cdn77-avec-wordpress-07

CDN77 fournit un moyen pratique pour activer / désactiver chaque nœud de leur réseau. Le but est de sélectionner soigneusement les nœuds les plus 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 inutiles. 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, par conséquent, 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, purge et prélecture pourrait être utile. La 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.

cdn77-avec-wordpress-10

Une fois que tout est configuré, vous pouvez pointer votre CNAME vers votre propre domaine. Pour ce faire, vous devez créer une règle dans votre registraire ou votre panneau d’hébergement dans la section DNS et pointer votre cdn.yourdomain.com vers CNAME xxx.rsc.cdn77.org comme indiqué sur l’image, cela indiquera au DNS pour rediriger tout le trafic de votre sous-domaine vers l’endroit réel où il doit être. Ne vous inquiétez pas, cela n’aura aucun impact sur 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 Activateur CDN, un plugin gratuit et pratique. La raison d’utiliser ce plugin est simple: la majorité des plugins CDN ne permettent pas un tel contrôle granulaire sur les dossiers que vous envoyez au CDN. Ce plugin 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.

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 le CDN à «répliquer» et ils vous diront généralement d’inclure wp-content. C’est bien pour un paramètre 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 pouvez perdre des performances lorsqu’ils ne sont pas mis en cache comme indiqué précédemment.

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

Aussi choqués que vous soyez, la grande majorité des plugins qui gèrent les CDN ne vous permettront pas de faire cela. Le fait d’inclure uniquement ce sous-dossier indiquera à votre CDN votre dossier de téléchargement, c’est-à-dire vos images uniquement.

cdn77-avec-wordpress-17

Un simple rafraîchissement du site permettra au CDN d’obtenir le contenu pour vous. Dans cet exemple, nous avons ouvert un onglet de 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, 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?) Dans l’écran de droite, on peut voir que les performances ont augmenté, le temps était 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, 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 et Javascript qui sont essentiels pour la vitesse de chargement du site. Vous pouvez maintenant tirer parti de tous les avantages d’un CDN et en même temps minimiser ses inconvénients. Nous espérons que vous essaierez l’essai gratuit de 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.

Share: