The web should be fast… Derrière ce leitmotiv de Google se cache un véritable casse-tête pour nous autres blogueurs. Si bien que ce sujet est revenu me préoccuper depuis une dizaine de jours, et après quelques nouvelles recherches, j’ai décidé de me lancer dans la grande aventure du CDN, le Content Delivery Network.

On le sait désormais, les temps de chargement d’un site sont primordiaux, à la fois pour les visiteurs, mais aussi pour les moteurs de recherche, puisque Google a récemment intégré ce critère dans son algorithme de résultats. Pour rappel, un temps de chargement supérieur à 4 secondes pour une page devient critique, car au delà un nombre non négligeable de visiteurs renoncent et se dirigent vers un autre site. Mais si cet ordre de grandeur de 4 secondes constitue un cap essentiel pour éviter l’hémorragie, optimiser un temps déjà inférieur à 4 secondes permet à l’inverse de gagner des visiteurs supplémentaires.

Sauf que pour le simple blogueur amateur que je suis, cette optimisation relève d’un véritable défi. Le simple fait d’être sur un hébergement mutualisé ne va pas déjà forcément dans le bon sens. Sauf que comme de nombreux blogueurs, les autres solutions d’hébergement restent hors de portée. Il y a quelques temps je m’étais déjà penché sur la question et j’avais réussi à gagner quelques demi-secondes loin d’être négligeables en optimisant l’utilisation du cache. Mais depuis une dizaine de jours j’ai décidé de me réattaquer à ce sujet. J’ai trouvé quelques pistes intéressantes, et notamment les CDN (Content Delivery Network), qui consistent à mettre à disposition les fichiers statiques de votre blog (images, scripts, …) sur différents serveurs de par le monde entier. Et après quelques recherches, j’ai opté hier pour le service -plus qu’abordable- proposé par Amazon Web Services: CloudFront.

Le système est en test depuis ce wek-end, et si le résultat est concluant, je vous ferai un petit tuto détaillé pour vous expliquer tout ça. J’ai quand même galéré un peu mais maintenant ça a l’air de marcher correctement! (ce qui explique d’ailleurs le manque d’articles depuis 2 semaines, entre ça et le boulot et le froid de canard, pas facile…). En attendant n’hésitez pas à me signaler ce qui vous paraîtrait bizarre sur le blog, et si vous avez constaté une différence 🙂

Pas besoin de bloqueur de pub sur ce site, car il n'y a pas de pub. Découvrez pourquoi.

24 Réponses

  1. Johnd129

    Wow, fantastic blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your web site is wonderful, let alone the content!

    Répondre
  2. Kw

    je viens de passer ma journée à virer des plugins mais c’est toujours pareil, c’est lent 🙁 ça m’épuise. Vous croyez que ça se joue aussi avec l’hébergement que l’on a choisi ?

    Répondre
    • Airdecker

      Oui je pense que l’hébergement peut entrer en compte, surtout si c’est du mutualisé comme moi, en particulier pour la base de données. Pour info j’ai abandonné le CDN, je ne suis pas entièrement convaincu de son utilité pour des blogs francophones par rapport à sa complexité de paramétrage et son coût. J’ai installé à la place le plugin Use Google Libraries qui charge uniquement les javascripts les plus couramment utilisés par WordPress depuis le CDN Google.

      Répondre
  3. Jean Luc

    Oui ça fonctionne ! les cdn1 …cdn5 (je n’en mets pas plus de 5 car ensuite les temps de latence du serveur DNS dégraderont le temps total de chargement) sont des alias de du host de la distribution Amazon.
    J’ai quelques erreurs 404 bien que les images apparaissent … mais bon je vais attendre le temps de propagation des DNS comme tu dis très justement plus haut avant de le mettre en production.

    Répondre
  4. Jean Luc

    OK merci beaucoup !
    ça fonctionne bien comme tu dis. par contre sur la page cdn
    de WPSC si je mets en premier l’url offsite de la distribution Amazon il utilise toujours d28xjyrttert.cloufront.net pour par ex mon css en plus des cdn1, cdn2 .. ajoutés dans les « additionnal cnames » pour les autres contenus statiques : autres css, js, images etc
    Alors je pense mettre cdn1.monsite.com dans cet url offline et cdn2, cdn3 etc dans les add. cnames ??

    Répondre
    • Airdecker

      Cool, content que ça fonctionne!
      Bonne question pour le point que tu mentionnes, je l’avais remarqué aussi. En fait WP Super Cache répartit les adresses des différents éléments statiques sur les « additionnal cnames » mais également sur l' »url off-site ». C’est pas forcément très gênant, sauf quand ça tombe sur une image qu’un internaute télécharge par exemple. Du coup j’avais rajouté quelques cnames en plus (au total j’en ai huit) pour diminuer la part d’utilisation de l’url off-site. Je n’avais pas envisagé ce que tu proposes, j’avais suivi à la lettre un tuto en anglais qui reprenait vraiment l’adresse en cloudfront dans l’url offsite… Mais a priori il y aurait des chances pour que ça marche, tiens moi au courant si tu essaies éventuellement

      Répondre
  5. Jean Luc

    Merci pour ta réponse rapide. OK pour les 2 premières manips, pour la troisième pour par exemple le sous domaine cdn1.monsite.com il faut lui donner pour CNAME l’url de la distribution Amazon : d28xjyrttert.cloufront.net ??
    et virer les autres enregistrements DNS du sous domaine ?
    Encore merci

    Répondre
    • Airdecker

      Je n’ai supprimé aucun enregistrement DNS existant pour ma part. Je ne maîtrise pas trop ce sujet, mais je ne vois pas de raison pour supprimer des enregistrements de sous-domaines que tu as déjà, c’est indépendant (à moins que tu en avais déjà fait en cdn1.monsite.com etc.?)

      J’ai regardé comment j’avais fait, j’ai simplement rajouter comme tu dis des sous-domaines qui pointent vers l’adresse Amazon. Pour info sur OVH l’écran d’ajout d’un CNAME se présente de la façon suivante:
      – sous-domaine: cdn1 « .monsite.com »
      – destination: ton adresse en .cloufront.net

      Une remarque, tout nouvel enregistrement dans les DNS peut mettre plusieurs heures à se propager (jusqu’à 48h mais en général c’est beaucoup plus rapide): cela signifie qu’il se peut au début que tes images ne se chargent pas, mais ça ne voudra pas dire que tu as mal renseigné les CNAMEs (en fait, tant que l’enregistrement DNS n’est pas propagé, un navigateur web va essayer de charger une image depuis « cdni.monsite.com » et il ne trouvera pas le serveur correspondant, en l’occurence Cloudfront…)

      Répondre
  6. Jean Luc

    Bonjour Airdecker
    Je suis entrain de mettre en place cdn pour un site WP .
    J’ai créé la distribution dans Amazon cloudfront
    dans le cname tu mets les differents cdn ex :
    cdn1.monsite.com, cdn2.monsite.com etc ??
    et sur WP supercache le d28xjy rttert.cloufront.net d’Amazon ?
    Merci pour ton aide !

    Répondre
    • Airdecker

      Bonjour Jean-Luc,

      Oui c’est bien ça, sur la distribution Amazon Cloudfront, tu renseignes les CNAMEs cdn1.monsite.com, cdn2.monsite.com, etc.
      Et pour les réglages de WP Super Cache, onglet CDN:
      – dans le champ « off-site url », tu mets l’adresse qui correspond à ta distribution Amazon: d28xjyrttert.cloufront.net
      – dans le champ additionnal CNAMES: tu remets les noms que tu as renseigné sur ta distribution, séparés par une virgule: http://cdn1.monsite.com,http://cdn.monsite.com, etc.

      Pour que cela fonctionne il faut aussi avoir renseigné ces CNAMES sur ton hébergement (sur OVH: Domaines & DNS > Zone DNS > Gestion des alias > Type CNAME)

      Mettre en place des CNAMES pour le CDN n’est pas obligatoire mais présente 2 avantages: le 1er, éviter que les images soient chargées sous l’adresse Amazon pas très jolie, et le second de permettre au navigateur de charger simultanément différents éléments statiques puisqu’il utilisera les différentes adresses CNAMES existantes.

      Répondre
  7. Adrien

    Pas de souci pour le retour.

    Non, je n’ai pas de problème. C’est réglable dans les paramètres du plugin je suppose.

    Répondre
    • Airdecker

      Corrigé pour le commentaire en indésirable, ça doit être l’URL + le point d’exclamation qui a dû être détecté comme un spam… J’ai vu qu’OVH était en beta pour leur CDN, je suis preneur de ton retour d’expérience 🙂 Sinon t’as toujours le problème de vider le cache de ton navigateur pour voir les nouveaux commentaires sur cette page? J’espère que non, normalement avec le nouveau plugin de cache ça devrait le faire

      Répondre
    • Airdecker

      Pour les statistiques j’utilise google analytics. Sinon pour les temps de chargement et le problème de « en attente de airdecker.net », je pense que ca vient des ressources de l’hebergement et de la base sql (donc tout ce qui n’est pas statique et donc qui ne dépend pas du cdn…). J’ai fait du ménage dans ma bdd, et rechangé le plugin de cache pour WP Super Cache, j’ai l’impression que c’est mieux depuis.

      Répondre
  8. Airdecker

    Bizarre pour le cache, je n’ai pas eu le problème. Je suis passé sur W3 Total Cache comme plugin pour mieux gérer le CDN

    Répondre
  9. Adrien

    Là l’envoi du commentaire à bien pris 10 secondes. :s
    Tu utilises quoi comme plugin de cache ?

    Répondre
  10. Adrien

    Autre fait intéressant : j’ai dû vider le cache de mon navigateur après avoir cliqué sur le lien e-mail m’informant d’un nouveau commentaire.
    Sinon j’avais aucun commentaire. 😮

    Je crois aussi que OVH met du temps à répondre. Parfois, c’est jusqu’à 4s !

    Répondre
  11. Airdecker

    Merci pour ton feedback. J’ai mesuré les résultats avec GTmetrix, et il y a une différence notable entre les fichiers qui sont servis par OVH et ceux qui sont servis par les infrastructures d’Amazon (ça se compte en secondes pour le 1er et en millisecondes pour le second).

    Par contre j’avais également constaté depuis quelques temps le problème dont tu fais allusion et je pense qu’il est de toute façon indépendant du CDN. En effet, en regardant de plus près, la roue qui tourne correspond en fait à « attente de airdecker.net »: dès que le site répond, les temps de chargement sont particulièrement rapides. Les tests sur GTmetrix montrent que cette 1ère étape dure environ 800ms, parfois 2s ou plus… Ce problème commence à m’énerver, je me demande si cela ne vient de la zone DNS d’OVH?

    Tu peux faire le test par curiosité avec ton site sur http://gtmetrix.com/ puis dans la timeline regarde la 1ère étape

    Répondre
  12. Adrien

    Par exemple pour ce commentaire, avant que la roue de chargement de mon navigateur s’arrête le temps d’attente a été assez long.

    Répondre
  13. Adrien

    C’est intéressant.

    Mais à ta place j’aurai attendu un peu parce qu’il se pourrait que le CDN d’OVH s’étende aux mutus. Je crois que tu es chez eux, non ?

    Et je ne sais pas ce que tu en penses, mais je trouve pas ton blog spécialement très, très rapide.

    A +

    Répondre

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.

Merci !

Abonnez-vous à la newsletter !

Ne manquez pas les prochaines astuces high-tech