WordPress CDN : Un guide définitif pour booster votre visibilité mondiale

Au fil des ans, des vitesses de chargement de plus en plus rapides sont devenues une priorité absolue pour les sites Web. Mais cela va de pair avec un contenu et des fonctionnalités plus riches qui doivent répondre à une demande toujours croissante d'interactivité des utilisateurs. De nombreux propriétaires de sites Web ont donc du mal à fournir leur contenu plus rapidement aux utilisateurs finaux du monde entier.

À la lumière de cela, de nombreux sites Web ont commencé à utiliser WordPress CDN (Content Delivery Network). Cette technologie permet de fournir plus rapidement le contenu du site Web à chaque utilisateur, quel que soit son emplacement. Dans ce guide pratique, vous apprendrez ce qu'est un CDN, pourquoi il est important pour WordPress et comment utiliser WordPress CDN.

1. Qu'est-ce qu'un CDN (réseau de diffusion de contenu) ?

Comme son nom l'indique, un CDN a quelque chose à voir avec la diffusion de contenu. Mais quel contenu, et comment ? Eh bien, il fournit le contenu statique, en streaming et dynamique de votre site WordPress, y compris les fichiers multimédias, les fichiers CSS et JavaScript.

L'autre partie, c'est-à-dire le réseau, est l'essence de ce système de livraison. Le contenu dont nous avons parlé précédemment est hébergé sur ce réseau de serveurs répartis dans le monde, et lorsque l'utilisateur envoie une requête depuis son navigateur, il est géré par le serveur le plus proche pour éviter la latence.

Réalité : 1 seconde de retard dans le temps de chargement des pages peut entraîner une perte de 7 % de conversion, 11 % de pages vues en moins et une baisse de 16 % de la satisfaction client.

Supposons que vous ayez lancé un serveur sur l' hébergement géré Cloudways WordPress et choisi le centre de données à Londres, au Royaume-Uni. C'est là que votre site WordPress est physiquement hébergé et toutes les demandes sont traitées à partir d'ici. Votre site sera ultra-rapide pour les utilisateurs en Europe, mais il peut se charger un peu plus lentement pour les utilisateurs de Tokyo ou de Manille. C'est parce que Londres est plus loin de Tokyo que Paris.

Le meilleur CDN pour WordPress réduirait cette distance en fournissant du contenu à l'utilisateur à partir du serveur le plus proche. Afin de réduire la distance entre l'utilisateur et le contenu Web, le CDN conserve une copie en cache du contenu sur plusieurs serveurs situés dans le monde entier.

2. Qui a besoin du CDN WordPress ?

Presque tous les sites WordPress ont besoin d'un CDN, et le nombre de sites utilisant CDN augmente de façon exponentielle. Les entreprises opérant dans plusieurs emplacements géographiques s'appuient sur ces services CDN pour les mêmes raisons évoquées plus haut dans cet article. Cependant, si vous exécutez un site qui cible uniquement les utilisateurs du même emplacement que votre hébergement Web, l'utilisation d'un CDN n'est pas idéale. En fait, cela peut entraîner une mauvaise expérience utilisateur, car les utilisateurs peuvent être confrontés à des retards en raison d'interférences inutiles provenant de connexions supplémentaires entre l'utilisateur et l'hébergement.

Voyons quels types d'entreprises utilisent CDN pour WordPress pour accélérer leurs sites WordPress.

• Commerce électronique
• Blogues
• Agences de publicité
• Médias et divertissement
• Sites de diffusion en continu
• Sites de jeux en ligne
• Éducation en ligne
• Soins de santé

3. Pourquoi le CDN est-il important pour WordPress ?

Au fil du temps, le Content Delivery Network (CDN) s'est beaucoup amélioré. Avoir un CDN WordPress sur le site WordPress présente de nombreux avantages qui ne peuvent être ignorés. Voyons-les en détail !

• Temps de chargement plus rapides : Il réduit les temps de chargement des pages, avec un contenu facilement disponible à partir du réseau de serveurs CDN.
• Gestion du trafic élevé : étant donné que le contenu provient de plusieurs sources, un site utilisant un CDN pour WordPress est à peine confronté à des temps d'arrêt ou à de faibles performances, même lorsqu'il connaît un volume de trafic plus élevé.
• Économie de bande passante : Un CDN réduit également la consommation de bande passante car il limite le flux direct de requêtes des utilisateurs vers l'hébergement Web en délivrant le contenu lui-même.
• Sécurité : Le réseau CDN est dispersé et est capable de résister à des attaques DDoS faibles à légères. Quelques fournisseurs de CDN ont également installé un mécanisme actif pour identifier ces attaques, les spammeurs et les bots. Il ajoute une couche de sécurité supplémentaire, en particulier pour les sites WordPress où les clients paient avec les informations de leur carte de crédit.
• Meilleur classement SEO : Ce n'est un secret pour personne que Google classe plus haut les sites les plus rapides. Il est difficile de déterminer à quel point la vitesse peut nuire au classement SEO, mais il est évident que cela affecte mal l'expérience utilisateur, ce que Google décourage.
• Expérience utilisateur améliorée : WordPress CDN sur le site WordPress améliore non seulement l'expérience utilisateur sur le bureau, mais également sur les appareils mobiles en chargeant les pages Web plus rapidement. De nombreuses personnes utilisent désormais leur téléphone portable pour surfer sur Internet. Google a également lancé une initiative de recherche adaptée aux mobiles, ce qui signifie que les sites optimisés pour les mobiles auront un avantage dans les résultats de recherche.

Réalité : les revenus ont augmenté de 1 % pour chaque tranche de 100 ms de diminution du temps de chargement des pages.

Test de vitesse CDN WordPress

Voyons un CDN en action en le testant sur un site WordPress hébergé sur Cloudways. Notre serveur est situé à Fremont, États-Unis. Nous avons testé la vitesse à partir de plusieurs emplacements avant et après l'intégration de CloudwaysCDN .

San José, Californie, États-Unis

Avant

Après

New York, New York, États-Unis

Avant

Après

Stockholm, Suède

Avant

Après

Melbourne, Australie

Avant

Après

Ces résultats de test montrent que sans CDN, la vitesse est plus lente dans les régions plus éloignées de l'emplacement réel du serveur. Mais après avoir intégré le CDN sur le site WordPress, il a montré des améliorations de la vitesse de chargement.

4. Meilleurs fournisseurs de CDN WordPress

Les fournisseurs de CDN WordPress sont disponibles dans toutes les gammes de budget. En plus de cela, de nombreux fournisseurs de CDN proposent un compte d'essai.

Pour aider les utilisateurs de Cloudways, j'ai compilé la liste suivante de fournisseurs de CDN qui peuvent être facilement intégrés aux serveurs gérés de Cloudways.

Remarque : StackPath (alias CloudwaysCDN) peut être facilement intégré à la plate-forme.

CloudwaysCDN (StackPath)

CloudwaysCDN est alimenté par StackPath, l'un des meilleurs fournisseurs de CDN pour WordPress avec un grand réseau de serveurs mondial.

Les fonctionnalités populaires incluent la protection contre les attaques DDoS et les fonctionnalités de blocage avec équilibrage de charge. Tous les forfaits offrent également une protection par pare-feu qui contribue également à améliorer le temps de chargement des pages de votre site Web.

Les utilisateurs de Cloudways peuvent également utiliser cette option CDN avec « Breeze », le plugin de mise en cache par défaut.

Prix : 1 $ par 25 Go

CléCDN

KeyCDN offre plusieurs fonctionnalités utiles qui optimisent la diffusion de contenu dans divers endroits du monde. KeyCDN est une option WordPress CDN populaire réputée pour sa rapidité et son support client 24h/24 et 7j/7.

KeyCDN offre également une protection DDoS, des certificats SSL gratuits et personnalisés, une prise en charge HTTP/2 et une API RESTful pour les intégrations tierces.

Tarification : le modèle de tarification est basé sur le paiement à l'utilisation, à partir de 0,04 $/Go, avec une facture annuelle minimale de 40 $.

Cloudflare

Cloudflare est l'un des CDN les plus populaires pour WordPress, principalement parce qu'il est facile à configurer et qu'il dispose d'un vaste réseau de serveurs mondial.

Cloudflare propose également un CDN gratuit pour les sites WordPress avec une sécurité limitée contre les attaques DDoS et autres vulnérabilités. Les autres fonctionnalités incluent l'équilibrage de charge, l'optimisation Web, la gestion DNS et les certificats SSL.

Tarification : Le plan Pro commence à partir de 20 $/mois.

CloudFront

CloudFront by Amazon est un CDN rapide et sécurisé pour WordPress qui offre une sécurité standard contre les DDoS et les menaces similaires. Il peut facilement être intégré à l'aide de la console de gestion Amazon, de la CLI et des SDK.

Tarifs : à la demande

Incapsule

Incapsula est un autre CDN populaire pour WordPress avec des serveurs situés à travers le monde. Il peut facilement être intégré à WordPress et est compatible avec tous les plugins de mise en cache populaires.

Incapsula offre des fonctionnalités telles que les certificats SSL, la prise en charge 24h/24 et 7j/7, la protection DDoS, le pare-feu, l'analyse des attaques, les renseignements sur les menaces et la protection des données.

Prix ​​: À partir de 59$/mois

CDN77

CDN77 est l'un des CDN les plus rapides pour les sites Web WordPress. Les fonctionnalités mises en évidence incluent les certificats SSL/TLS, la protection DDoS, la protection des hotlinks et le pare-feu Web.

CDN77 propose également des outils d'analyse pour le suivi du trafic et de l'utilisation de la bande passante, ainsi que des journaux CDN qui contiennent des informations utiles et des rapports de plantage.

Prix : À partir de 199 $/mois

Lors de la sélection du bon CDN pour votre entreprise, assurez-vous de prendre en compte le coût et les services ainsi que les performances.

5. Analyse comparative du CDN WordPress

Il existe de nombreux fournisseurs de CDN WordPress parmi lesquels choisir, mais il est difficile de déterminer lequel offrira les meilleures performances dans des scénarios du monde réel.

La seule façon de résoudre ce problème était de comparer ces CDN et pour cela, nous avons sélectionné trois fournisseurs de CDN populaires largement utilisés :

1. CloudwaysCDN (en partenariat avec StackPath anciennement connu sous le nom de MaxCDN)
2. Cloudflare
3. CléCDN

Le processus d'analyse comparative des CDN

J'ai lancé le WordPress par défaut sur le serveur Cloudways DigitalOcean de 1 Go de RAM , 25 Go de SSD et 1 processeur de base .

Pour le test d'analyse comparative, l'outil que nous avons utilisé est une CLI de référence CDN Node.js open source . Pour comprendre à quelle vitesse un CDN WordPress fournit du contenu, vous aurez besoin d'entrées de données suffisantes au cours de quelques heures.

Dans notre analyse comparative CDN, nous avons téléchargé trois fichiers image de notre site WordPress hébergé sur Cloudways ( petit : 78,6 Ko, moyen : 747 Ko, grand : 1,28 Mo), pendant 3,5 heures avec des intervalles de 5 minutes. Ces fichiers sont extraits d'un site WordPress hébergé sur Cloudways.

Les résultats de l'analyse comparative CDN

Après le test d'analyse comparative, nous avons compilé les données finales dans une représentation graphique pour une comparaison facile. Les données ont été générées après avoir exécuté le test pendant 3,5 heures d'affilée. Le test vous donne une idée du CDN qui fonctionne le mieux sur quelle taille de fichier.

Petite image

Cloudflare a démarré normalement mais n'a pas pu maintenir le même rythme lors du téléchargement de l'image de petite taille. Au cours des 40 premières minutes du test, il a atteint 22 millisecondes alors que CloudwaysCDN et KeyCDN étaient juste allongés sur l'axe horizontal, affichant une vitesse constante d'environ 2-3 millisecondes. Il y a un pic de la 75e à la 85e minute dans KeyCDN où il a atteint 9 ms.

Le CloudwaysCDN a été assez fluide tout au long du test. Il a commencé et terminé le test avec la vitesse de téléchargement maximale sans aucune surprise.

Image moyenne

Les choses ne se sont pas améliorées pour CloudFlare lors du téléchargement d'une image de taille moyenne également. Il y avait d'énormes pics de 20 à 40 minutes d'environ 128 ms. Un autre pic plus petit des minutes 75 à 85. D'autre part, CloudwaysCDN a maintenu sa position de tête dans la comparaison avec KeyCDN , qui a montré une certaine perturbation vers la fin du test, comme le montre le graphique ci-dessus.

Grande image

Lors du téléchargement de la grande image (1,28 Mo), la vitesse de téléchargement de Cloudflare était d'environ 40 ms tandis que ses homologues avaient un démarrage relativement bon. KeyCDN a été presque stable tout au long du test, à l'exception de quelques bosses au début et vers la fin du test. CloudwaysCDN a encore fait un travail incroyable en restant aussi près que possible de l'axe X, montrant la vitesse de téléchargement rapide et constante tout au long du test.

Nous avons également calculé la vitesse de téléchargement moyenne de chaque CDN sur trois tailles d'image.

Score moyen

Les résultats du graphique ci-dessus sont assez simples. CloudwaysCDN avait la vitesse de téléchargement la plus élevée dans les trois catégories de fichiers. KeyCDN est arrivé deuxième avec un score moyen. Cloudflare a obtenu la troisième position avec le score le plus bas en raison d'énormes pics dans les étapes initiales des trois tests. Il s'est plutôt bien comporté au milieu et à la fin des tests.

6. Comment utiliser le CDN dans WordPress ?

6a. Ajouter CloudwaysCDN à WordPress

Les clients de Cloudways peuvent activer et intégrer CloudwaysCDN avec WordPress en un seul clic. Voici quelques étapes impliquées dans le processus : connectez-vous au compte Cloudways, accédez à Applications, puis accédez aux applications WordPress sur lesquelles vous souhaitez installer CloudwaysCDN.

Dans le volet de gauche, accédez à l' onglet CloudwaysCDN , puis entrez l' URL de votre site WordPress. Cliquez sur le bouton CRÉER .

Il activera CloudwaysCDN pour cette application et vous fournira quelques détails tels que l'URL du CDN, l'utilisation de la bande passante et la purge du cache. Vous avez également la possibilité de supprimer le CloudwaysCDN.

Pour l'intégrer dans un site WordPress, il suffit de cliquer sur le bouton Appliquer .

PS : Le simple clic ne s'applique qu'à Breeze, un plugin de cache WordPress gratuit de Cloudways. Si vous utilisez un autre plug-in de mise en cache, obtenez l'URL du CDN dans l'onglet CloudwaysCDN et configurez le CDN en conséquence.

Connectez-vous au panneau d'administration de votre site WordPress puis cliquez sur Breeze sous Paramètres :

Accédez à l' onglet CDN du plug- in Breeze Cache et vous verrez ici que l' option Activer le CDN est cochée et que l' URL du CDN est définie dans le champ CDN CNAME .

Il est maintenant temps de vérifier que le CDN est intégré. Ouvrez votre site, appuyez sur CTRL+U et recherchez StackPath . Vous obtiendrez quelques résultats qui signifient que CDN est intégré avec succès.

On dirait que le site est cassé?

Pas de soucis! Cloudways utilise Varnish pour optimiser les sites WordPress. Assurez-vous de purger tout le cache, puis revisitez le site. Hourra! Vous avez intégré le CloudwaysCDN en quelques clics.

Vous voulez en savoir plus sur CloudwaysCDN ? Jetez un oeil ici .

6b. Ajouter CloudFront à WordPress

CloudFront by Amazon est peut-être le CDN le plus populaire pour les sites Web WordPress. Une fois connecté, CloudFront sert le contenu d'un site WordPress directement depuis ses serveurs au lieu de demander au serveur d'hébergement. Cela réduit le nombre de requêtes qui pèsent sur le serveur d'hébergement.

Obtenir l'URL du CDN en créant une distribution Web dans CloudFront CDN

Je suppose que vous avez déjà un compte sur Amazon Web Services (AWS). Sinon, inscrivez-vous et accédez à CloudFront Console . Ensuite, cliquez sur Commencer dans la section Web .

Il vous mènera aux options pleine page où vous pourrez choisir parmi un certain nombre d'options. Pour faire simple, j'utiliserai les paramètres par défaut définis par CloudFront lui-même.

• Nom de domaine d'origine : l'URL de mon site Web (wpcommunity.org)
• Chemin d'origine : saisissez le chemin spécifique des actifs, le cas échéant. (Je l'ai laissé vide.)
• ID d'origine : saisissez une description simple de l'objet de ce service.

Tous les autres paramètres restent inchangés. Si vous souhaitez configurer davantage, voici le guide complet décrivant toutes ces options. Faites défiler vers le bas et cliquez sur Créer une distribution .

Le déploiement prendra quelques minutes, selon le contenu de votre site. Une fois le processus terminé, il vous mènera à l'écran d'où vous trouverez le nom de domaine (URL CloudFront).

Copiez l'URL dans le nom de domaine et accédez à l' onglet CDN de Breeze et collez-le dans le champ de texte URL racine CDN .

• Activer le CDN : Cochez cette case si vous souhaitez activer le CDN.
• URL racine CDN : L'URL de la distribution créée. N'oubliez pas d'ajouter HTTP / HTTPS à l'URL.
• Contenu CDN : Les répertoires du contenu que vous souhaitez desservir par un CDN.
• Exclure le contenu : Si vous souhaitez exclure quelques extensions de fichiers ou répertoires à ne pas desservir par le CDN, saisissez-les ici.
• Chemin relatif : Il est toujours recommandé d'activer le chemin relatif pour conserver la structure des fichiers et des dossiers.

Testons-le !

Visitez l'URL de votre site, affichez le code source et recherchez CloudFront . Vous verrez que tous les actifs, tels que CSS, JS et images, sont servis par le CDN CloudFront.

6c. Ajouter KeyCDN à WordPress

KeyCDN est l'un des principaux fournisseurs de CDN WordPress sur le marché. Je vous suggère d'essayer leurs services sur votre site Web (pendant la période d'essai gratuite) avant d'opter pour un compte complet.

Dans cet article, je vais montrer comment connecter KeyCDn avec le plugin de cache Breeze afin que tout le contenu soit servi via CDN.

Tout d'abord, je dois créer un compte KeyCDN en remplissant les quelques détails requis. Dans le tout premier champ, entrez l'URL du site Web que vous souhaitez connecter avec KeyCDN et remplissez d'autres détails tels que l'e-mail et les informations d'identification de l'utilisateur.

Après avoir cliqué sur le bouton Créer un compte , vous recevrez un e-mail de vérification. Une fois vérifié, vous verrez le tableau de bord KeyCDN :

Obtenez l'URL du CDN en ajoutant une zone dans KeyCDN

Mon site WordPress a été ajouté à mon compte. Maintenant, je dois ajouter une zone par rapport à l'URL de mon site. Dans le volet de gauche, accédez à l' onglet Zones et il vous sera demandé de configurer la zone.

• Nom de la zone : KeyCDN fournit une URL spéciale avec le format par défaut : http://xxx-yyy.kxcdn.com. Où XXXX est le nom que vous avez entré dans le champ Nom de la zone. Dans mon exemple, ce sera wp-yyy.kxcdn.com car j'ai entré wp.
• Statut de la zone : Puisque mon site sera accessible au public, j'ajouterai le statut comme Actif.
• Type de zone : Il existe deux types de zone, soit à tirer, soit à pousser. Outre le type de zone, vous pouvez voir la case à cocher Afficher les fonctionnalités avancées. Développez-le et configurez-le - si vous êtes suffisamment confiant dans ce que vous faites ! Sinon, laissez-le par défaut.
• URL d'origine : Saisissez l'URL du site Web que vous souhaitez connecter avec cette Zone.

Après avoir configuré la zone, vous serez redirigé vers l' onglet Zone et vous y verrez une zone nouvellement créée comme l'image ci-dessous. Le statut de ma zone est actuellement défini sur Déploiement . Cela signifie qu'il configure et relie tout entre la zone de KeyCDN et le site Web.

Le processus peut prendre quelques minutes. Une fois cela fait, le statut sera changé en Actif . Vous pouvez purger le cache en cliquant sur le bouton Gérer comme l'image ci-dessous.

Configurer KeyCDN avec Breeze

Bon, j'ai configuré KeyCDN, créé une zone et obtenu l'URL de la zone.

Copiez-le et accédez à l' onglet CDN du plug-in de cache Breeze WordPress et collez-le dans le champ URL racine CDN .

Tester le site

À ce stade, j'ai correctement configuré le KeyCDN et je l'ai connecté au Breeze. Vérifions si le CDN sert le site Web. Pour cela, visitez votre site Web et affichez la source de la page en appuyant sur CTRL+U (Chrome). Recherchez kxcdn , et vous pouvez voir que le CSS, le JS et les images sont servis via KeyCDN.

Breeze ne se limite pas à eux, tout CDN basé sur des actifs peut facilement être configuré avec Breeze. Il vous suffit d'obtenir l'URL du CDN WordPress et de la coller dans l'onglet Breeze CDN. C'est ça!

Emballer!

Nous avons vu comment la vitesse joue un rôle majeur dans la conversion globale ainsi que dans le classement SEO de votre site. Investir dans un bon CDN WordPress n'est pas une mauvaise idée après tout. Les utilisateurs de Cloudways peuvent facilement intégrer CloudwaysCDN à partir de leur tableau de bord et ils sont facturés 1 $ pour 25 Go par application. La consommation supplémentaire ne coûte que 0,04 $ par Go.