CDN WORDPRESS

CDN WORDPRESS

INSTALLATION D’UN CDN SUR WORDPRESS

L’optimisation du temps de chargement et de la rapidité d’un site web est une tâche relativement fastidieuse en raison des nombreux facteurs qui peuvent être optimisés. Aujourd’hui, nous allons aborder un guidé dédiée à l’installation d’un CDN et sa mise en œuvre sur WordPress. Ce didacticiel est basé sur l’hôte infomaniak, mais il est aussi adapté aux autres hébergeurs. Cet hébergeur vous permet de générer un CDN pour les bases statistiques d’un site comme javascript, fichier CSS et les images. 

I. LA NOTION D’UN CDN

CDN qui signifie en anglais, Content Delivery Network et peut stocker des ressources sur plusieurs serveurs externes. L’objectif est de pouvoir donner à tous les internautes les fichiers dont ils ont besoin dans les meilleurs délais. Pour cette raison, le CDN est fondé sur plusieurs facteurs :

  • Chaque fichier réside sur plusieurs facteurs, ce qui peut réduire l’accumulation du site pendant des pics de trafic. 
  • Cela augmente le nombre de connexions simultanées autorisées entre l’ordinateur et le fichier que l’ on doit télécharger, car certains fichiers se trouvent sur des serveurs différents. 
  • En théorie, les serveurs CDN sont uniformément répartis géographiquement, ce qui réduit la distance entre le serveur et l’ordinateur. 
  • Ces serveurs n’ont pas de cookie (CookiLess), vous pouvez donc réduire le poids de tout transfert en supprimant ces données sans utilités pour les ressources statistiques. 

Concernant le deuxième point que nous avons mentionné sur les avantages du CDN, ce sont les navigateurs antérieurs qui auront le plus grand impact car internet Explorer 6 n’autorise que deux requêtes simultanées sur le même serveur, alors que la version 8 n’en autorise que 6 (par contre, Chrome et firefox dépassent de loin les 10 connexions simultanées). 

II. QUAND DOIT ON UTILISER UN CDN ?

Il est nécessaire de vous poser cette question, avant de vous expliquer comment installer un CDN :

A quoi sert un CDN pour mon site ?

Le temps de chargement d’un site est amélioré uniquement dans ces cas de figure que si vous installez un CDN sur WordPress ou un autre site. 

  • si la page a au moins 6 ressources statistiques (rappelez-vous que nous parlons de fichiers CSS, de Javascript et d’images de background). 
  • si votre trafic est très dense et que vos serveurs sont régulièrement surchargés. 
  • si vous obtenez un effectif très important d’images de contenus, de vidéos ou de fichiers audio.  

Dans ces trois cas, choisissez un CDN dès que possible. Sinon, les performances peuvent détruire car cette méthode nécessite une requête DNS supplémentaire (c’est-à-dire “se connecter à un serveur différent”). Par conséquent, le temps perdu par cette requête doit être rattrapé soit en déchargeant votre serveur ou soit en téléchargeant plus de ressources simultanément. 

 

III. INSTALLATION D’UN CDN SUR WORDPRESS

3.1. UN CDN POUR RESSOURCES STATISTIQUES

Dans un premier temps, nous allons vous montrer comment installer un CDN sur votre propre serveur sans pour autant payer un service. Bien sûr, vous ne pouvez pas bénéficier  d’un CDN complet dans le sens où le même serveur servira toujours des ressources différentes. Cependant, cela réduira le poids (en supprimant les cookies) tout en augmentant le nombre de téléchargement simultanés. 

Comme mentionné précédemment, ce tutoriel est principalement basé sur la création d’un CDN pour vos ressources statistiques (images « décoratives », javascript, polices, fichiers CSS, …). pour un CDN qui inclut également des images, des vidéos, ou même des pages en cache, consultez les solutions de paie au bas de cet article.

3.1.1. Générer des sous domaines 

C’est le premier pas. Tout d’abord déterminez le nombre de CDN dont vous avez besoin. Cela dépend du nombre de ressources que vous souhaitez y placer. Suivant certains blogs et articles concernant ce sujet, c’est une bonne idée d’avoir 6 à 10 fichiers pour chaque CDN. 

3.1.2. Diviser vos ressources

Depuis lors, vous devez envisager les liens disponibles entre eux, vous devez donc distribuer logiquement vos ressources. Par exemple, les images que vous avez chargées via un un fichier CSS ne peuvent être téléchargées par l’internaute que si le chargement de votre feuille de style est complet.

Nous pouvons suivre ce procédé suivant : 

    • première requête sur le domaine initial
    • première série de requêtes simultanées 
    • deuxième série de requête et suivantes

3.1.3. Supprimer les cookies 

Sur votre serveur, il existe un ou plusieurs sous-domaines qui agissent comme CDN. Cependant, ces sous-domaines sont inutilement reçus de cookies inutiles qui augmentent le poids de chaque téléchargement.

WordPress a pensé à tout car vous pouvez  configurer un domaine principal pour échanger des  cookies. Ajoutez cette ligne dans le fichier wp-config.php à la racine de votre site web, en préfixant le nom de domaine complet avec www. Par conséquent, les cookies ne sont plus envoyés lorsqu’une requête est transmise à un sous-domaine.

define(‘COOKIE_DOMAIN’, ‘www.cslh.fr’);

3.1.4. Utiliser le CDN

C’est la dernière étape, mais c’est certainement la plus longue. Vous devez modifier le thème pour refléter la nouvelle URL de chacune de vos ressources statistiques. Par conséquent, vous devez modifier les éléments suivants :

    • les fichiers PHP de votre thème WordPress
    • le fichier CSS
    • peut être le fichier javascript

3.2. UN CDN POUR LE CONTENU

Comme détaillé précédemment, dans la première partie du didacticiel, vous avez pu créer un CDN sans cookie pour placer des ressources statistiques. Voyons ce que nous pouvons faire pour vos ressources dynamiques cela signifie les médias que vous avez envoyé dans le contenu dans vos diverses publications (image, audio, vidéo).

Répétez les opérations précédentes qui sont identiques: 

    • générer du sous domaine qui servira de CDN à WordPress
    • paramétrer du fichier wp-config.php pour les cookies
    • ajouter un fichier Htaccess

3.2.1. Configurer WordPress pour devenir un CDN

Utilisez ensuite le logiciel FTP de votre choix pour télécharger tous les fichiers du répertoire wp-content/ upload de votre site web sur votre ordinateur. Placez ensuite tous ces fichiers dans un nouveau répertoire sur votre CDN.

Une fois tous les fichiers en ligne, allez dans le menu paramètre => Média. ici, nous devons changer deux paramètres :

    • mettez le nom du répertoire de votre CDN à la place de wp-content/uploads
    • mettez votre sous-domaine sans le slash final.

Par conséquent, vos fichiers existent déjà sur le nouveau CDN et les fichiers que vous placerez dans l’avenir en ligne seront positionnés au même emplacement, ce qui réduira le temps de chargement de votre site web.

3.2.2. Utiliser un plugin

Vous pouvez également utiliser des plugins tels que WP Super Cache et W3 Total Cache, qui fournissent également des fonctionnalités CDN. Pour les raisons ci-dessus, nous vous recommandons de vous y opposer, car cela dépendra des bugs et des mises à jour des plugins particulièrement concernés. Cependant, il est conseillé de bien sauvegarder ses données pour éviter tout risque de casser l’installation wordpress. 

3.3. UN CDN COMPLET SUR WORDPRESS

Malheureusement, si vous avez besoin d’un véritable CDN, vous devez le payer. Prévoyez environ 20€ minimum par mois pour des solutions qui commencent à faire des preuves. L’avantage est qu’il est un vrai CDN. Cela signifie qu’il existe plusieurs serveurs dans le monde qui dupliquent l’intégralité du site (incluant les pages HTML mises en cache du site). 

Quelques services payants :

  • Rackspace cloud file
  • Amazon S3
  • CloudFlare MaxCDN

L’une des solutions clés de la vitesse de nos jours est d’utiliser un CDN sur WordPress. Il accélère la livraison de contenu à vos visiteurs, réduit la charge sur votre serveur web et rend votre expérience de visiteurs plus agréable.