Accélérez WordPress Utilisation de CDN, Compression et Minification

Dans la première partie de cette série, nous avons examiné la mise en cache et l’optimisation de la base de données. Dans cette seconde partie, nous parlerons de compression, de minification et d’utilisation d’un CDN..

Commençons!

Compression et Minification d'Actifs

C'est simple en mathématiques: si la taille de votre page est de 1 Mo, un visiteur disposant d'une connexion à 10 Mbits peut la charger en 800 millisecondes. Donc, si vous pouvez réduire la taille de votre page à, par exemple, 600 Ko, il suffirait d’une demi-seconde au visiteur pour la charger..

Heureusement, il existe de nombreuses façons de compresser et de minimiser les sorties CSS, JS et HTML de vos pages. Voyons comment:

Méthode 1: activation de la compression HTTP

Les formats de compression HTTP tels que gzip et deflate sont utilisés par presque toutes les plates-formes de serveur (y compris Apache et Microsoft IIS) et acceptés par pratiquement tous les navigateurs. Par conséquent, la compression HTTP s'exécute généralement sur tous les périphériques et tous les serveurs. (Votre serveur peut même l'activer par défaut. Pour le vérifier, recherchez "vérification de la compression http", cliquez sur l'un des résultats et tapez l'adresse de votre site Web.)

Alors, comment pouvons-nous activer la compression HTTP? Il y a plusieurs façons de le faire, mais je pense que ces deux peuvent aider tout le monde:

1. Activer la compression via .htaccess: Si votre serveur n’a pas activé la compression HTTP par défaut, vous pouvez l’activer en collant le code suivant dans votre .htaccess Fichier (extrait du Boilerplate HTML5):

 # Force la compression pour les en-têtes mutilés. # https://developer.yahoo.com/blogs/ydn/pushing-beyond-gzipping-25601.html   SetEnvIfNoCase ^ (Accept-EncodXng | X-cept-Encoding | X 15 | ~ 15 | - 15) $ ^ ((gzip | deflate) \ s *,? \ S *) + | [X ~ -] 4,13 $ HAVE_Accept-Encoding RequestHeader append Accept-Encoding "gzip, deflate" env = HAVE_Accept-Encoding   # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - # # Marquer certaines ressources comme ayant été comprimées pour: # # 1) empêche Apache de les recomprimer # 2) s'assurent qu'ils sont servis avec l'en-tête de réponse HTTP # 'Content-Encoding' approprié  AddEncoding gzip svgz  # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - # Compresse toutes les sorties étiquetées avec l'un des types de support suivants . # IMPORTANT: Pour les versions d’Apache inférieures à 2.3.7, vous n'avez pas besoin d'activer # 'mod_filter' et vous pouvez supprimer le ''&''# lignes comme' AddOutputFilterByType 'est toujours dans les directives principales.  AddOutputFilterByType DEFLATE "application / atome + xml" \ "application / javascript" \ "application / json" \ "application / ld + json" \ "application / manifeste + json" \ "application / rss + xml" \ "application / vnd .geo + json "\" application / vnd.ms-fontobject "\" application / x-font-ttf "\" application / x-web-app-manifeste + json "\" application / xhtml + xml "\" application / xml "\" font / opentype "\" image / svg + xml "\" image / x-icon "\" text / cache-manifest "\" text / css "\" text / html "\" text / plain "\" text / vtt "\" text / x-composant "\" text / xml "   

2. Activer la compression HTTP avec les plugins: Si vous ne savez pas comment éditer votre .htaccess fichier (ou tout simplement ne pas vouloir le faire), vous pouvez activer la compression HTTP en utilisant les deux plugins de mise en cache les plus populaires: WP Super Cache et W3 Total Cache. Les deux offrent la possibilité d'activer la compression HTTP via leurs pages de paramètres.

Méthode 2: Réduire et combiner des fichiers CSS et JS

Réduire les actifs est presque aussi important que les compresser. Dans les fichiers PHP, les espaces ne sont pas vraiment importants car ils sont analysés et compilés; mais les espaces dans les fichiers HTML, CSS et JS augmentent la taille du fichier, ce qui signifie que les visiteurs téléchargeront des fichiers plus volumineux. Pour éviter cela, vous pouvez supprimer tous les caractères inutiles de vos fichiers HTML, CSS et JS..

En plus de les réduire, vous pouvez également combiner plusieurs fichiers CSS et JS en un seul fichier CSS et JS. Cela réduira le nombre de recherches DNS et les navigateurs ne téléchargeront pas chaque fichier CSS et JS séparément..

Réduire et combiner vos actifs manuellement est considéré comme une mauvaise pratique et pourrait être impossible dans certains cas. Heureusement, il est très facile de le réaliser automatiquement avec des plugins. Si vous utilisez le plug-in W3 Total Cache, vous pouvez activer la réduction et la combinaison de vos fichiers CSS et JavaScript via la page Paramètres du plug-in. Si vous ne l'utilisez pas, vous pouvez installer un plugin séparé. Mon préféré est Autoptimize. Autoptimize fait parfaitement son travail et propose des options très utiles que vous pouvez gérer. J'utilise celui-ci avec WP Super Cache et je suis extrêmement heureux des résultats..

Utiliser un CDN dans WordPress

Si votre blog est plus visuel que la moyenne, si vos pages sont remplies d'images, ou même si vous êtes un blogueur habituel et souhaitez que vos images se chargent plus rapidement, vous pouvez (et devriez) utiliser les réseaux de diffusion de contenu (communément appelés CDN)..

Pourquoi utiliser un CDN pour un site Web?

La logique des réseaux de distribution de contenu consiste à servir le contenu plus efficacement en utilisant des "serveurs de périphérie" dans le monde entier. Ces serveurs peuvent contenir votre contenu téléchargeable (images, fichiers CSS, etc.) et lorsqu'un utilisateur visite votre page, le serveur Edge le plus proche du visiteur fournit les fichiers. Avec des prix bas sur la bande passante (même gratuite, parfois) et des serveurs rapides, la livraison de votre contenu sera plus rapide que jamais.

CDN Plugins pour WordPress

Il existe plus de quelques plug-ins qui permettent la synchronisation de vos actifs avec différents CDN, mais je n'en citerai que quelques-uns:

• Photon de Jetpack: Etant l’un des plugins WordPress les plus populaires dans le référentiel de plugins, Jetpack fournit un certain nombre de fonctionnalités en tant qu’addons. (Pensez-y comme un plugin servant de nombreux plugins.) L'un des addons s'appelle "Photon", un service CDN simple et gratuit pour votre site web. Photon prendra vos images et les images présentées dans vos publications et vos pages, les téléchargera sur les serveurs de WP.com et modifiera les URL de vos images avec de nouvelles URL à partir du CDN. Il ne fera que filtre vos messages pour changer les URL (ce qui signifie qu'il ne modifiera pas vos messages), de sorte que vous pouvez facilement le désactiver si vous ne l'aimez pas, mais vous l'aimerez probablement beaucoup-c'est l'un des meilleurs choix gratuits pour la plupart des sites Web WordPress.
• CloudFlare: CloudFlare s'apparente davantage à un serveur proxy doté d'un CDN et servant de pare-feu pour protéger votre site Web contre les attaques malveillantes. Et puisque vous utilisez leurs zones DNS, les URL des images resteront les mêmes mais seront mises en cache dans les serveurs de CloudFlare. Mais attention, installer CloudFlare est un peu délicat. Consultez l'article de WPBeginner pour plus d'informations sur l'installation de CloudFlare et l'utilisation de ses fonctionnalités CDN.
• W3 Total Cache: Ils ne l'ont pas appelé "W3 Total Cache" pour rien. Après tout, ce plug-in de mise en cache extrêmement populaire inclut la fonction d'intégration d'un CDN de votre choix sur votre site Web. MaxCDN, une des marques populaires de CDN, propose un didacticiel complet sur l’installation de son CDN dans les paramètres de W3 Total Cache..

Fin de la partie 2

Dans cette deuxième partie de la série, nous avons utilisé la compression et la minification des actifs, et l’utilisation d’un CDN dans WordPress. Dans le prochain (et dernier) article, nous verrons l’importance de l’optimisation des images et nous ferons une réflexion sur l’utilisation de WordPress avec bon sens..

Que pensez-vous de l'accélération de WordPress? Partagez vos pensées ci-dessous dans la section commentaires. Et si vous avez aimé l'article, n'oubliez pas de le partager.

On se voit dans la prochaine partie!