Optimisation de WordPress avec Varnish et W3 Total Cache

Ce tutoriel fait suite Installation de WordPress dans Amazon Cloud, montrant comment optimiser votre site avec la mise en cache.

Si vous auto-hébergez WordPress, il est conseillé d'implémenter une sorte de solution de mise en cache. Que vous souhaitiez exécuter votre blog dans une micro-instance économique dans le nuage Amazon (AWS) ou que votre blog prenne une ampleur considérable en termes d'échelle ou de trafic, la mise en cache sera essentielle pour gérer les performances. La mise en cache peut également aider à améliorer la vitesse de votre page Google, ce qui influe sur le classement de votre moteur de recherche..

En fonction du trafic sur votre site et de la complexité de votre thème WordPress, les performances peuvent en réalité être assez lentes sur AWS. Ma recommandation est de combiner l'utilisation du cache open source Varnish avec le plugin gratuit W3 Total Cache (W3TC). 

Varnish est un cache qui stocke des copies de pages pour les utilisateurs non connectés (la plupart des lecteurs ne le sont pas). Lorsque des demandes arrivent sur votre serveur, Varnish renvoie instantanément ces pages prédéfinies au lieu de demander à Apache, PHP et WordPress de reconstruire la page pour chaque demande. À mesure que le trafic évolue, la reconstruction de chaque page de la pile WordPress peut littéralement planter votre serveur. Plus tard, W3 Total Cache peut être configuré pour pré-construire régulièrement des pages de votre site afin qu'elles soient toujours prêtes pour Varnish.

Remarque: c’est aussi une bonne raison d’envisager un plugin de commentaires externes tel que Disqus plutôt que des commentaires WordPress intégrés. JavaScript Disqus est cacheable. Si vos commentateurs se connectent à votre site WordPress, la mise en cache sera utilisée moins souvent et votre évolutivité pour vos visiteurs les plus actifs sera considérablement réduite..

La puissance de Varnish est spectaculaire lorsque l’intérêt suscité par votre site augmente. J'ai réussi à exploiter mon propre site avec cette configuration en utilisant une petite instance Amazon pour environ 14,95 $ par mois, avec succès à gérer de nombreuses apparences sur BoingBoing, Slashdot et al..

Si vous souhaitez en savoir plus sur la mise en cache, ses avantages et le W3TC, lisez l'introduction d'Ahmad Awais à la mise en cache.. 

Installation de Varnish Cache

Varnish Cache est un module de mise en cache pour Linux. Nous allons configurer Varnish pour qu'il écoute le trafic HTTP (Web) sur le port 80, Apache n'écoutant que Varnish sur le port 8080. Lorsque Varnish nécessite la création manuelle d'une page, il transmet la demande au port Apache 8080..

Cela peut paraître un peu déroutant au début, mais oui, nous faisons essentiellement en sorte de déplacer Apache dans les coulisses. Varnish agira comme porte d'entrée sur le port 80 pour toutes vos demandes Web. Apache jouera un rôle de support pour Varnish sur le port 8080. Il n'y a pas de trafic public sur le port 8080, il n'y a que des demandes privées de Varnish. Si vous souhaitez savoir en quoi cela concerne les groupes de sécurité AWS, il n'est pas nécessaire d'ouvrir le port 8080..

Pour commencer, nous devons installer Varnish sur notre instance:

sudo apt-get install vernis

Editez le fichier ports.conf d'Apache pour l'écouter sur le port 8080:

sudo nano /etc/apache2/ports.conf

Voici à quoi cela devrait ressembler:

Écoutez 8080

Modifiez le fichier de configuration de votre site Apache pour répondre au port 8080:

sudo nano /etc/apache2/sites-available/wordpress.conf

Modifiez la ligne VirtualHost de *: 80 à *: 8080

Vous devrez peut-être modifier votre site Apache par défaut pour écouter sur le port 8080 ou le désactiver:

sudo a2dissite 000-default

Déplacez les fichiers de configuration Varnish d’origine dans votre répertoire de base en tant que sauvegardes (si vous décidez de les consulter ultérieurement):

sudo mv / etc / default / varnish ~ / default-varnish-old sudo mv /etc/varnish/default.vcl ~ / varnish-default-vcl.old

Remplacez la configuration par défaut de Varnish par le fichier disponible ici sur gist. Vous pouvez utiliser copier et coller. 

sudo nano / etc / default / varnish

Ensuite, remplacez la configuration Varnish VCL par le fichier gist ici (à nouveau, copier-coller).

Attention: vous pouvez obtenir des erreurs VCL lorsque vous essayez de redémarrer Varnish si vous ne gérez pas correctement les sauts de ligne lors du collage. Les sauts de ligne peuvent être difficiles à détecter, alors examinez-les attentivement. S'il y a des erreurs lors du redémarrage de Varnish, il est assez utile de vous dire quel numéro de ligne regarder..

sudo nano /etc/varnish/default.vcl

Maintenant, relançons Apache et Varnish:

sudo service apache2 redémarrer sudo service vernis redémarrer

N'oubliez pas que si vous obtenez des erreurs VCL à ce stade, cela peut être dû à des sauts de ligne brisés lors du collage dans le fichier Varnish default.vcl..

Visitez votre site à l'adresse http://votredomaine.fr et tout devrait commencer à fonctionner avec Varnish. La deuxième fois que vous chargez une page statique, cela devrait être beaucoup plus rapide.

Installation de W3 Total Cache 

W3 Total Cache est un plugin WordPress exceptionnel. C'est gratuit et fournit une formidable optimisation des performances de votre site. Vous pouvez en apprendre plus sur W3 Total Cache sur son site de plugins.

Connectez-vous à votre page d'administration WordPress à l'adresse http://votredomaine.com/wp-admin à l'aide du nom d'utilisateur et du mot de passe que vous avez configurés lors de l'installation. Sélectionnez Plugins -> Ajouter un nouveau dans le menu de gauche. Recherche de W3 Total Cache.

En raison de sa puissance et de sa sophistication, W3 Total Cache propose une grande variété de paramètres qui peuvent sembler accablants. Ci-dessous, je présente quelques paramètres recommandés qui facilitent la mise en route..

Ne vous laissez pas submerger. Commencez par les paramètres généraux indiqués ci-dessous et par la suite. Si vous êtes intéressé pour commencer plus rapidement, J'ai fourni des instructions pour télécharger et importer mes paramètres par défaut (voir ci-dessous).

Alternativement, W3 Total Cache propose une installation payante et une assistance à partir de 150 USD. Vous pouvez les atteindre via sa page de tableau de bord du plugin ou leur site web. C'est un excellent plugin, donc je me sens bien de les recommander. J'ai eu quelques expériences avec leur soutien payé et c'est généralement bon. Vous pouvez également consulter la présentation de l’installation de W3 Total Cache et la FAQ sur le site Web du plug-in pour plus de détails..

À un niveau élevé, je recommande d'activer les paramètres suivants, que je détaille plus en détail ci-dessous:

  • Mise en cache de la page: Cache les pages pour un chargement plus rapide et une livraison plus efficace (séparé de Varnish).
  • Minify: Réduit et combine les fichiers JS et CSS pour un chargement plus rapide et une livraison plus efficace.
  • Cache d'objets: Accélère la génération de contenu par WordPress.
  • Cache du navigateur: Étiquette correctement le contenu afin que les clients de navigateur réduisent les téléchargements de pages.
  • Proxy inverse: Demande au W3TC de purger le cache Varnish lorsque des publications, des pages, et autres. sont mis à jour.
  • Amazon CloudFront CDN: Assure la livraison de fichiers statiques et d'images rapidement, de manière fiable et géographiquement proche de vos visiteurs.
  • Divers: Utiliser un fichier d'index de sitemap pour pré-mettre en cache des pages hautement prioritaires.

Installation des composants de support

Avant de configurer W3 Total Cache, installons et activons un certain nombre de composants Linux nécessaires. Encore une fois, connectez-vous à votre instance et procédez comme suit:

sudo apt-get install php5-dev php5-memcache memcached php-poire build-essential php5-nid php5-curl apache2-dev php-apc

Editez votre fichier php.ini pour activer memcache:

sudo nano /etc/php5/apache2/php.ini

Dans la section Extensions dynamiques, ajoutez les lignes ci-dessous:

extension = apc.so extension = memcache.so

Dites à Apache d'activer ces modules et de le redémarrer:

sudo a2enmod réécrire sudo a2enmod expire les en-têtes sudo a2enmod sudo service apache2 restart

Editez votre fichier wp-config.php pour activer la mise en cache:

sudo nano /var/www/wordpress/wp-config.php

Ajoutez la définition WP_CACHE suivante au-dessus de la ligne d'arrêt d'édition:

define ('WP_CACHE', true); / * C'est tout, arrête de monter! Bonne blogging. * /

Vérification de l'état de la configuration

À ce stade, il est utile de consulter le tableau de bord du plug-in W3TC et de vérifier que tous les composants appropriés sont actifs. Mais d’abord, nous devons activer Fancy Permalinks pour les formats d’URL, ce qui optimisera notre site pour l’indexation par les moteurs de recherche. À partir du tableau de bord d'administration WordPress, sélectionnez Paramètres -> Permaliens, choisissez le jour et le nom, puis cliquez sur Enregistrer les modifications.. 

Ensuite, dans la barre latérale gauche, cliquez sur Performances -> Tableau de bord, puis sur le bouton Contrôle de compatibilité. Ça devrait ressembler a quelque chose comme ca:

Remarque: vous pourrez gagner du temps si vous choisissez un thème et installez les autres plug-ins que vous prévoyez d'utiliser avant de terminer le reste du processus de configuration de W3 Total Cache. Pour changer de thème et ajouter des plugins, vous devrez probablement purger et retester vos paramètres W3 Total Cache..

réglages généraux

W3TC fonctionne généralement bien avec ses paramètres par défaut. Nous devrons donc avant tout configurer la page Paramètres généraux et non pas aller dans chaque zone de fonctionnalité individuelle.

Visitez la page des paramètres généraux du W3TC. Dans la barre latérale gauche, cliquez sur Performances -> Paramètres généraux. Nous pouvons effectuer une configuration de haut niveau ici, mais nous effectuerons également une configuration plus détaillée sur les pages de paramètres individuels. Je laisse (décoché) "Activer ou désactiver (en une fois) tous les types de mise en cache" "dans la boîte générale.

Activer le cache de pages avec le cache alternatif Opcode (APC):

Activer Minify avec les paramètres suivants. J'utilise le mode manuel car minify peut casser certains thèmes si vos paramètres sont trop agressifs (toutefois, le thème choisi peut fonctionner correctement):

Je laisse la case Mise en cache de la base de données non cochée / désactivée, car cette option est recommandée uniquement si vous n'activez pas la mise en cache des objets..

Activer le cache d'objets:

Activer le cache du navigateur:

Activer le proxy inverse:

Configurez W3TC pour purger régulièrement le cache Varnish de 127.0.0.1 (localhost).

Paramètres de cache de page

Dans la barre latérale gauche, cliquez sur Performances -> Cache de page. Faites défiler la liste jusqu'à la zone Préchargement du cache. Activez «Amorcer automatiquement le cache de la page». Entrez votre URL de sitemap. 

Remarque: Vous devrez avoir installé le Meilleur plugin WordPress Google XML Sitemaps avant que cela fonctionne correctement.

Si vous utilisez un CAPTCHA sur des formulaires de contact, vous voudrez inclure le chemin d'accès à ces pages dans l'exclusion du cache. La mise en cache d'un CAPTCHA annulera la fonctionnalité. Faites défiler la liste jusqu'à la zone Paramètres avancés. Ajoutez votre chemin de fichier, par exemple. contacts ici:

Groupes d'agents d'utilisateurs

Mon thème étant réactif, je mets en cache les agents d’utilisation des appareils mobiles et des tablettes séparément. En d'autres termes, Varnish met en cache des copies de différentes mises en page réactives de mon site. Lorsqu'un utilisateur mobile se rend sur le site, il obtient un fichier spécifique par rapport au moment où un utilisateur de bureau arrive. Si le contenu de votre site réagit dynamiquement (par exemple, les modifications ne sont apportées qu'en Javascript et CSS), vous n'avez pas besoin de le faire..  

Si vous le souhaitez, activez les groupes d’agents d’utilisateur supérieurs et inférieurs:

Groupes de référents

J'active également les groupes de référents pour les moteurs de recherche:

Minify Settings

Minify compresse votre code HTML, JS et CSS et combine les fichiers lorsque cela est possible. Cela accélère la diffusion de vos pages et réduit la bande passante. Cependant, cela peut parfois casser le code du thème.

Vous devrez peut-être ajuster les paramètres pour le thème choisi. J'ai constaté qu'en désactivant la minification CSS en ligne, mon thème fonctionne bien. Dans la barre latérale gauche, cliquez sur Performances -> Réduire:

Importer des exemples de paramètres (facultatif)

Si vous préférez commencer par importer mon fichier de paramètres, procédez comme suit:

  1. Téléchargez l'exemple de fichier de paramètres
  2. Visitez les paramètres généraux du W3TC, par exemple. barre latérale gauche, Performances -> Paramètres généraux et défilez vers le bas avec les paramètres d'importation / exportation (voir ci-dessous).
  3. En regard de Importer la configuration, cliquez sur Choisir un fichier et sélectionnez le fichier de paramètres d'exemple que vous avez téléchargé. Puis cliquez sur télécharger.
  4. Parcourez vos paramètres W3TC et assurez-vous qu'ils ont du sens pour votre site WordPress.
  5. Vous devrez peut-être personnaliser les paramètres de votre site après l'importation, par exemple. Google PageSpeed, Amazon CloudFront CDN, etc..

Utilisation du CDN Amazon CloudFront

Cela vaut vraiment la peine d'activer un CDN. Le CDN est très utile pour réduire la charge globale de votre serveur. Par exemple, W3TC peut rediriger des demandes d'images et de fichiers statiques tels que des scripts et des CSS vers le CDN d'Amazon..

Si vous le souhaitez, suivez les instructions sur mon site pour activer Amazon CloudFront. J'utilise actuellement la méthode Pull (mon tutoriel décrit l'ancienne méthode Push).

Suivre une performance

Il existe de nombreuses façons de surveiller les performances de votre serveur. W3TC prend en charge l'intégration avec le module de surveillance New Relic. W3TC propose un widget de tableau de bord pour Google Page Speed ​​et un plugin Google Page Speed ​​pour WordPress. Celles-ci vous seront utiles pour évaluer les performances de vos blogs..

Toutes nos félicitations!

Vous devriez maintenant être le fier propriétaire d'un site WordPress auto-hébergé entièrement optimisé dans Amazon Cloud à l'aide de Varnish et W3 Total Cache. J'espère que vous avez trouvé cette série de deux parties utile. S'il vous plaît laissez-nous savoir ce qui a bien fonctionné pour vous et ce qui n'a pas.