2 Associés est une agence web de Montréal spécialisée en développement web et mobile, stratégie de contenu SEO, SEM et les technologies langagières.

Vous voulez discuter?

WordPress et CDN sous Nginx

CDN ou réseaux de diffusion de contenu

WordPress et CDN sous Nginx pour optimiser votre site et votre serveur afin de rendre le tout le plus performant possible. Chez 2 Associés, nos installations de WordPress sont optimisées à plusieurs niveaux : Outils open-source de Roots.io pour le développement sous WordPress, serveur Forge avec hébergement sur Digital Ocean. Tout ça mis ensemble donne une excellente performance. Cependant les images, scripts et feuilles de styles demeurent des ressources statiques qui peuvent jouer sur la performance d’un site web. Alors entre en jeu le « CDN », ou réseaux de diffusion de contenu.

WordPress et CDN sous Nginx

Avec WordPress, il y a plusieurs bonnes façons de configurer un CDN. Yoast, la compagnie reconnue pour optimiser les sites Web, utilise MaxCDN. Si vous avez déjà un compte avec eux et que vous utilisez déjà Nginx, je vous recommande de lire leur solutions d’intégrations avec WordPress.

Dans cet article je vais partager ma configuration Nginx avec KeyCDN. Avant de commencer, la raison pour laquelle nous avons opté pour KeyCDN résulte du fait que nous utilisons Bedrock pour le développement WordPress et qu’un plugin du nom de CDN Enabler existe pour KeyCDN. Après avoir configuré le plugin, nous avons découvert que notre certificat SSL causait un problème pour le plugin et après quelques recherches, j’ai découvert qu’il était plus facile de configurer KeyCDN avec Nginx que nous avons aussi dû au fait que nous utilisons aussi Laravel Forge… Voilà pour l’histoire.

Configurer KeyCDN

Vous pouvez ouvrir un compte (gratuit avec un crédit de 1,00 $) en y ajoutant une Zone de type pull. Le résultat sera la création d’un URL unique pour votre Zone :

Wordpress et CDN sous Nginx - Interface KeyCDN

Si vous voulez un alias personnalisé, exemple cdn.votredomaine.com, vous pouvez le configurer sous Zonealiases :

Wordpress et CDN sous Nginx - Zone Aliases avec keyCDN

Quand vous êtes prêt, vous devrez éditer votre zone sous la colonne Actions > Manage > Edit :

Wordpress et CDN sous Nginx - Zones Edit Menu chez keyCDN

Lorsque vous aurez rempli l’écran ci-dessous, KeyCDN devrait télécharger ce qui est présentement sur votre domaine vers votre Zone.

Wordpress et CDN sous Nginx - Edit Zone KeyCDN

Une fois sauvegardé, si tout se passe bien, un message et un statut deploying devraient s’afficher dans le tableau de vos Zones. Ne vous surprenez pas si ça prend quelques minutes, c’est normal :

Wordpress et CDN sous Nginx - Déploiement sur KeyCDN

La configuration au niveau de KeyCDN est complétée!

Configurer Nginx

Dans votre fichier de configuration Nginx, à l’intérieur du bloc server, on configure la redirection en utilisant les filtres de substitutions subs_filter_types et subs_filter :

server {

    [...]

    # Redirects traffic to KeyCDN;
    subs_filter_types text/html text/css text/xml;
    subs_filter https://cdn.2associes.com/app https://cdn.2associes.com/app;
    subs_filter https://cdn.2associes.com/wp/wp-includes https://cdn.2associes.com/wp/wp-includes;

    [...]

}

subs_filter_types est utilisé pour spécifier quels types de contenus devraient être surveillés pour substitutions.

subs_filter permet de remplacer une string source par une string destination.

Ensuite vous devrez possiblement redémarrer votre service Nginx pour constater les changements :

Wordpress et CDN sous Nginx - Inspecteur Safari

Au niveau du code source, ci-dessus on peut voir que le logo SVG de 2 Associés est servi par notre Zonealias personnalisée https://cdn.2associes.com.

Si vous voulez vérifier la vitesse de votre site Web actuel, je vous recommande Pingdom car vous aurez non seulement la vitesse mais un aperçu des ressources constituants votre site et leurs impacts sur le temps de chargement.

25% plus rapide avec KeyCDN

Chez 2 Associés, notre utilisation de KeyCDN augmente la rapidité de téléchargement globale de notre page d’accueil d’environ 25% (selon GTMetrix). Si vous avez des questions ou simplement besoin d’aide dans le choix d’un réseaux de diffusion de contenu, n’hésitez pas à communiquer avec nous.

Commentez cet article

Votre adresse de courriel ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Articles reliés