TOC

Comment accélérer la livraison d’actifs WordPress à l’aide de CDN DigitalOcean Spaces

introduction

L’implémentation d’un CDN, ou C ontent D livraison N etwork, pour fournir les actifs statiques de votre site WordPress peut considérablement réduire l’utilisation de la bande passante de vos serveurs ainsi que réduire les temps de chargement de page pour des sites dispersés géographiquement utilisateurs. Les ressources statiques WordPress incluent des images, des feuilles de style CSS et des fichiers JavaScript. En exploitant un système de serveurs de périphérie distribués dans le monde entier, un CDN met en cache des copies du fichier statique de votre site. actifs sur son réseau afin de réduire la distance entre les utilisateurs finaux et ce contenu gourmand en bande passante.

Dans un précédent guide de solutions, Comment stocker les actifs WordPress sur les espaces DigitalOcean, nous avons traité le déchargement d’un La médiathèque du site WordPress (où sont stockées les images et d’autres contenus du site) est destinée à DigitalOcean Spaces, un service de stockage d’objets hautement redondant. Nous l’avons fait en utilisant le plug-in DigitalOcean Spaces, qui synchronise automatiquement les téléchargements WordPress sur votre espace, vous permettant ainsi de supprimer ces fichiers de votre serveur et de libérer du disque. espace.

Dans ce guide Solutions, nous allons étendre cette procédure en activant le CDN Spaces et en réécrivant les URL des ressources de la médiathèque. Cela oblige les navigateurs des utilisateurs à télécharger des actifs statiques directement à partir du CDN, un ensemble de serveurs de cache géographiquement répartis optimisé pour la diffusion de contenu statique. Nous verrons comment activer le CDN pour les espaces, comment réécrire les liens pour servir vos ressources WordPress à partir du CDN et, enfin, comment vérifier que les ressources de votre site Web sont correctement livrées par le CDN.

Nous montrerons comment implémenter le déchargement de la bibliothèque multimédia et la réécriture des liens à l’aide du plug-in gratuit et open-source Spaces Sync. Nous expliquerons également comment utiliser deux plugins WordPress payants populaires: * https: //deliciousbrains.com/wp-offload-s3/ [WP Offload Media] * et * https: //maxgalleria.com/downloads/media -library-plus-pro / [Dossiers de la médiathèque Pro] *. Vous devez choisir le plug-in qui correspond le mieux à vos besoins de production.

Conditions préalables

Avant de commencer ce didacticiel, vous devez avoir une installation WordPress en cours d’exécution par-dessus une pile LAMP ou LEMP. Vous devez également avoir WP-CLI installé sur votre serveur WordPress, que vous pouvez apprendre à configurer en suivant la procédure https://www.digitalocean.com/community/tutorials/how- to-back-up-wordpress-site-à-espaces # using-plugins-to-create-backups [ces instructions].

Pour décharger votre médiathèque, vous aurez besoin d’un espace DigitalOcean et d’une paire de clés d’accès:

  • Pour apprendre à créer un espace, consultez la documentation du produit Spaces.

  • Pour apprendre à créer une paire de clés d’accès et à télécharger des fichiers sur votre espace à l’aide de l’outil open source + s3cmd +, consultez la page s3cmd 2.x. , également sur le site de documentation du produit DigitalOcean.

Il existe quelques plugins WordPress que vous pouvez utiliser pour décharger vos actifs WordPress:

  • * https: //wordpress.org/plugins/do-spaces-sync/ [Synchronisation des espaces DigitalOcean] * est un plug-in WordPress gratuit et à code source ouvert permettant de décharger votre médiathèque sur un espace DigitalOcean. Vous pouvez apprendre à le faire dans Comment stocker les ressources WordPress sur les espaces DigitalOcean.

  • * https: //deliciousbrains.com/wp-offload-media/ [WP Offload Media] * est un plug-in payant qui copie des fichiers de votre bibliothèque de supports WordPress dans DigitalOcean Spaces et réécrit les URL pour servir les fichiers à partir du CDN. Avec l’extension Assets Pull, il peut identifier les actifs (CSS, JS, images, etc.) utilisés par votre site (par exemple, les thèmes WordPress) et également les servir à partir de CDN.

  • * https: //maxgalleria.com/downloads/media-library-plus-pro/ [Dossiers de la médiathèque Pro] * est un autre plug-in payant qui vous aide à organiser vos ressources de la médiathèque, ainsi qu’à les transférer vers DigitalOcean Spaces.

L’utilisation d’un custom domain avec un CDN Spaces est vivement recommandée. Cela améliorera considérablement l’optimisation du moteur de recherche (SEO) pour votre site en maintenant vos URL d’actifs déchargés similaires à celles de votre site Wordpress. Pour utiliser un domaine personnalisé avec Spaces CDN, vous devez vous assurer d’abord d’ajouter votre domaine à votre compte DigitalOcean:

Pour les tests, veillez à installer un navigateur Web moderne, tel que Google Chrome ou Firefox sur votre client ( par exemple ordinateur portable.

Une fois que vous avez une installation WordPress en cours d’exécution et que vous avez créé un espace DigitalOcean, vous êtes prêt à activer le CDN pour votre espace et commencer par ce guide.

Activation d’espaces CDN

Nous allons commencer ce guide en activant le CDN pour votre espace DigitalOcean. Cela n’affectera pas la disponibilité des objets existants. Lorsque le CDN est activé, les objets de votre espace seront «déplacés» vers des caches périphériques sur le réseau de diffusion de contenu, et une nouvelle URL de point de terminaison CDN sera mise à votre disposition. Pour en savoir plus sur le fonctionnement des CDN, consultez Utilisation d’un CDN pour accélérer la livraison de contenu statique .

Commencez par activer le CDN pour votre espace en suivant Comment activer le CDN des espaces.

Si vous souhaitez utiliser un domaine personnalisé avec Spaces CDN (recommandé), créez l’enregistrement CNAME du sous-domaine et les certificats SSL appropriés en suivant la procédure https://www.digitalocean.com/docs/spaces/how-to/customize-cdn-. endpoint [Comment personnaliser les espaces CDN Spaces avec un sous-domaine]. Notez le sous-domaine que vous utiliserez avec Spaces CDN, car nous devrons l’utiliser lors de la configuration du plug-in WordPress asset offload.

Revenez à votre espace et rechargez la page. Vous devriez voir un nouveau lien * Endpoints * sous le nom de votre espace:

image: https: //assets.digitalocean.com/articles/wordpress_cdn_offload/endpoints_link.png [Lien des noeuds finaux]

Ces points finaux contiennent votre nom d’espace. Nous utilisons ++ dans ce tutoriel.

Remarquez l’ajout du nouveau noeud final * Edge *. Ce noeud final achemine les demandes d’objets Spaces via le CDN, en les desservant autant que possible à partir du cache de périphérie. Notez ce point de terminaison * Edge *, que vous utiliserez pour configurer votre plug-in WordPress lors des étapes suivantes. Si vous avez créé un sous-domaine pour Spaces CDN, ce sous-domaine est un alias du noeud final * Edge *.

Maintenant que vous avez activé le CDN pour votre espace, vous êtes prêt à commencer à configurer votre plug-in de déchargement d’actifs et de réécriture de liens.

Si vous utilisez DigitalOcean Spaces Sync et continuez à partir de Comment stocker des éléments WordPress sur des espaces DigitalOcean , commencez à lire à partir de la section suivante. Si vous n’utilisez pas Spaces Sync, passez à la page https://www.digitalocean.com/community/tutorials/how-to-speed-up-wordpress-asset-delivery-using-digitalocean-spaces-cdn#wordpress. -offload-media-plugin [section WP Offload Media] ou https://www.digitalocean.com/community/tutorials/how-to-speed-up-wordpress-asset-delivery-using-digitalocean-spaces-cdn# media-library-folder-pro-and-cdn-enabler-plugins [section Dossiers professionnels de la médiathèque], en fonction du plug-in que vous choisissez d’utiliser.

Plugin de synchronisation des espaces

Si vous souhaitez utiliser les plug-ins DigitalOcean Spaces Sync et CDN Enabler gratuits et à code source libre pour servir vos fichiers à partir des caches périphériques du CDN, suivez les étapes décrites dans cette section.

Nous commencerons par nous assurer que notre installation WordPress et le plug-in Spaces Sync sont correctement configurés et servent les actifs de DigitalOcean Spaces.

Modification de la configuration du plug-in de synchronisation d’espaces

Suite de Comment stocker les ressources WordPress sur les espaces DigitalOcean, votre médiathèque doit être déchargée sur votre espace DigitalOcean et les paramètres de votre plug-in Spaces Sync doivent ressembler à ceci:

image: https: //assets.digitalocean.com/articles/do_spaces_sync_plugin/sync_cloud_only.png [Sync Cloud uniquement]

Si vous n’avez pas rempli les How To Store WordPress Assets sur DigitalOcean Spaces, vous pouvez toujours suivre ce guide en installant le plug-in Spaces Sync à l’aide du programme d’installation du plug-in built-in. Si vous rencontrez des erreurs, veuillez consulter les étapes de ce guide des prérequis.

Nous allons apporter quelques modifications mineures pour nous assurer que notre configuration nous permet de décharger des thèmes WordPress et d’autres répertoires, au-delà du dossier + wp-content / uploads + Media Library.

Tout d’abord, nous allons modifier le champ * Chemin d’URL complet vers les fichiers * afin que les fichiers de la bibliothèque multimédia soient servis à partir du CDN de notre espace et non localement à partir du serveur. Ce paramètre réécrit essentiellement les liens vers les actifs de la médiathèque, les changeant de liens de fichiers hébergés localement sur votre serveur WordPress en liens de fichiers hébergés sur le CDN DigitalOcean Spaces.

Rappelez-vous le point final * Edge * que vous avez noté dans la https://www.digitalocean.com/community/tutorials/how-to-speed-up-wordpress-asset-delivery-using-digitalocean-spaces-cdn#enabling-spaces -cdn [étape d’activation de CDN]. Si vous utilisez un sous-domaine personnalisé avec Spaces CDN, vous utiliserez ce sous-domaine au lieu du point de terminaison Edge.

Dans ce didacticiel, le nom de l’espace est «++» et son extrémité CDN est:

https://..cdn.digitaloceanspaces.com

Maintenant, dans la page des paramètres du plug-in Spaces Sync, remplacez l’URL dans le champ * Chemin d’accès complet aux fichiers * par votre point de terminaison Spaces CDN, suivi de + / wp-content / uploads +.

Dans ce didacticiel, à l’aide du point de terminaison CDN Spaces ci-dessus, l’URL complète serait:

https://..cdn.digitaloceanspaces.com/wp-content/uploads

Si vous utilisez un sous-domaine personnalisé, dites + https: // +, l’URL complète se présentera comme suit:

https:///wp-content/uploads

Ensuite, pour le champ * Chemin local *, entrez le chemin complet du répertoire + wp-content / uploads + sur votre serveur WordPress. Dans ce tutoriel, le chemin d’installation de WordPress sur le serveur est + / var / www // +, le chemin complet de + uploads + serait donc + / var / www // wp-content / uploads + .

Dans le champ * Préfixe de stockage *, nous allons entrer + / wp-content / uploads +, ce qui nous permettra de construire la hiérarchie de répertoires + wp-content + afin de pouvoir y décharger d’autres répertoires WordPress. Espace.

  • Filemask * peut rester un caractère générique avec + * +, sauf si vous souhaitez exclure certains fichiers.

Il n’est pas nécessaire de vérifier les options * Stocker les fichiers uniquement dans le nuage et supprimer… *; Cochez cette case uniquement si vous souhaitez supprimer les ressources de la médiathèque de votre serveur après leur téléchargement dans votre espace DigitalOcean.

Vos paramètres finaux devraient ressembler à ceci:

image: https: //assets.digitalocean.com/articles/wordpress_cdn_offload/modified_sync_settings.png [Paramètres de synchronisation des espaces finaux]

Assurez-vous de remplacer les valeurs ci-dessus par les valeurs correspondant à votre installation WordPress et à votre configuration Spaces.

Enfin, appuyez sur * Enregistrer les modifications *.

Une boîte de dialogue * Paramètres enregistrés * devrait apparaître en haut de votre écran, confirmant que les paramètres du plug-in Spaces Sync ont bien été mis à jour.

  • A venir * Les téléchargements de la bibliothèque multimédia WordPress doivent maintenant être synchronisés sur votre espace DigitalOcean et servis à l’aide du réseau de diffusion de contenu Spaces.

Dans cette étape, nous n’avons pas _ déchargé _ de décharger le thème WordPress ou d’autres actifs + wp-content +. Pour apprendre à transférer ces ressources vers des espaces et à les servir à l’aide du CDN Spaces, passez à https://www.digitalocean.com/community/tutorials/how-to-speed-up-word-adpress-asset-delivery-using-digitalocean. -spaces-cdn # offloading-additional-assets- (facultatif) [Déchargement d’actifs supplémentaires].

Pour vérifier et vérifier que les téléchargements de votre médiathèque sont livrés à partir du CDN Spaces, passez à https://www.digitalocean.com/community/tutorials/how-to-speed-up-wordpress-asset-delivery-using-digitalocean. -spaces-cdn # testing-cdn-cache [Test de mise en cache CDN].

WordPress Offload Media Plugin

Le DeliciousBrains WordPress Offload Media plugin vous permet de télécharger rapidement et automatiquement vos ressources de la médiathèque vers les espaces DigitalOcean et de réécrire les liens vers ces ressources Spaces ou via le CDN Spaces. En outre, the addets Pull addon vous permet de décharger rapidement des actifs WordPress supplémentaires tels que JS, CSS et des fichiers de polices en combinaison avec un pull CDN. La configuration de cet addon dépasse le cadre de ce guide, mais pour en savoir plus, vous pouvez consulter la documentation de DeliciousBrains.

Nous allons commencer par installer et configurer le plug-in WP Offload Media pour un exemple de site WordPress.

Installation de WP Offload Media Plugin

Pour commencer, vous devez acheter une copie du plug-in sur le site DeliciousBrains plugin. Choisissez la version appropriée en fonction du nombre d’actifs de votre médiathèque et des exigences de support et de fonctionnalités de votre site.

Une fois la commande validée, vous serez dirigé vers un site post-achat avec un lien de téléchargement pour le plug-in et une clé de licence. Le lien de téléchargement et la clé de licence vous seront également envoyés à l’adresse e-mail que vous avez fournie lors de l’achat du plug-in.

Téléchargez le plug-in et accédez à l’interface d’administration de votre site WordPress (+ https: /// wp-admin +). Connectez-vous si nécessaire. À partir de là, survolez * Plugins * et cliquez sur * Ajouter un nouveau *.

Cliquez sur * Upload Plugin * et en haut de la page, * Choisissez Fichier *, puis sélectionnez l’archive zip que vous venez de télécharger.

Cliquez sur * Installer maintenant *, puis * Activer le plugin *. Vous serez amené à l’interface d’administration du plugin de WordPress.

À partir de là, accédez à la page des paramètres du plug-in WP Offload Media en cliquant sur * Paramètres * sous le nom du plug-in.

Vous serez amené à l’écran suivant:

image: https: //assets.digitalocean.com/articles/wordpress_cdn_offload/wp_offload_storage_provider.png [Configuration du support de déchargement WP]

Cliquez sur le bouton radio à côté de * DigitalOcean Spaces *. Vous serez maintenant invité à configurer votre clé d’accès Spaces dans le fichier + wp-config.php + (recommandé) ou directement dans l’interface Web (cette dernière stockera vos informations d’identification Spaces dans la base de données WordPress).

Nous allons configurer notre clé d’accès Spaces dans + wp-config.php.

Connectez-vous à votre serveur WordPress via la ligne de commande et accédez à votre répertoire racine WordPress (dans ce tutoriel, il s’agit de + / var / www / html +). A partir de là, ouvrez + wp-config.php + dans votre éditeur favori:

sudo nano wp-config.php

Faites défiler jusqu’à la ligne `+ / * C’est tout, arrêtez de modifier! Bonne blogging. * / + `, et avant d’insérer les lignes suivantes contenant votre paire de clés d’accès Spaces (pour savoir comment générer une paire de clés d’accès, consultez la page https://www.digitalocean.com/docs/spaces/how-to/administrative -access / # access-keys [Docs produit Spaces]):

wp-config.php

. . .
define( 'AS3CF_SETTINGS', serialize( array(
   'provider' => 'do',
   'access-key-id' => '',
   'secret-access-key' => '',
) ) );

/* That's all, stop editing! Happy blogging. */
. . .

Une fois l’édition terminée, enregistrez et fermez le fichier. Les modifications prendront effet immédiatement.

De retour dans l’interface d’administration du plugin WordPress Offload Media, sélectionnez le bouton radio à côté de * Définir les clés d’accès dans wp-config.php * et cliquez sur * Enregistrer les modifications *.

Vous devriez être amené à l’interface suivante:

image: https: //assets.digitalocean.com/articles/wordpress_cdn_offload/wp_offload_bucket_selection.png [Sélection du compartiment de déchargement de WP]

Sur cette page de configuration, sélectionnez la région appropriée pour votre espace à l’aide du menu déroulant * Région * et entrez votre nom d’espace en regard de * Bucket * (dans ce tutoriel, notre espace s’appelle + wordpress-offload +).

Ensuite, appuyez sur * Save Bucket *.

Vous serez dirigé vers la page de configuration principale de WP Offload Media. En haut, vous devriez voir la boîte d’avertissement suivante:

image: https: //assets.digitalocean.com/articles/wordpress_cdn_offload/wp_offload_license.png [Licence de déchargement de WP]

Cliquez sur * entrez votre clé de licence *, et sur la page suivante, entrez la clé de licence trouvée dans le reçu de votre courrier électronique ou sur la page de paiement et appuyez sur * Activer la licence *.

Si vous avez entré votre clé de licence correctement, vous devriez voir * Licence activée avec succès *.

Retournez maintenant à la page principale de configuration de WP Offload Media en cliquant sur * Media Library * en haut de la fenêtre.

À ce stade, WP Offload Media a été configuré avec succès pour une utilisation avec votre espace DigitalOcean. Vous pouvez maintenant commencer à décharger des ressources et à les livrer à l’aide du CDN Spaces.

Configuration du support de déchargement WP

Maintenant que vous avez lié WP Offload Media à votre espace DigitalOcean, vous pouvez commencer à décharger des actifs et à configurer la réécriture d’URL pour fournir des médias à partir du CDN Spaces.

Vous devriez voir les options de configuration suivantes sur la page de configuration principale de WP Offload Media:

image: https: //assets.digitalocean.com/articles/wordpress_cdn_offload/wp_offload_main_nav.png [Déchargement de la navigation principale du WP]

Ces valeurs par défaut devraient fonctionner correctement pour la plupart des cas d’utilisation. Si votre médiathèque existe dans un chemin non standard de votre répertoire WordPress, entrez-le dans la zone de texte sous l’option * Chemin *.

Si vous souhaitez modifier les adresses URL des ressources afin qu’elles soient directement servies depuis Spaces et non votre serveur WordPress, assurez-vous que la bascule est réglée sur * On * à côté de * Réécrire les URL de média *.

Pour livrer les ressources de la médiathèque à l’aide du CDN Spaces, assurez-vous que vous avez activé le CDN pour votre espace (voir https://www.digitalocean.com/community/tutorials/how-to-speed-up-word-asset-delivery- using-digitalocean-spaces-cdn # activation-spaces-cdn [Activer les espaces CDN] pour savoir comment) et avoir noté l’URL du noeud final * Edge *. Appuyez sur la bascule en regard de * Domaine personnalisé (CNAME) * et dans la zone de texte qui apparaît, entrez l’URL du noeud final CDN * Edge *, sans le préfixe + https: // +.

Dans ce guide, le point de terminaison Spaces CDN est le suivant:

https://.nyc3.cdn.digitaloceanspaces.com

Nous entrons donc ici:

.nyc3.cdn.digitaloceanspaces.com

Si vous utilisez un sous-domaine personnalisé avec Spaces CDN, entrez ce sous-domaine ici:

.example.com

Pour améliorer la sécurité, nous allons forcer HTTPS pour les demandes adressées aux ressources de la médiathèque (désormais desservies via le CDN) en définissant le commutateur sur * On *.

Vous pouvez éventuellement supprimer les fichiers déchargés de votre serveur WordPress vers Spaces pour libérer de l’espace disque. Pour ce faire, appuyez sur * On * à côté de * Supprimer les fichiers du serveur *.

Une fois la configuration de WP Offload Media terminée, cliquez sur * Enregistrer les modifications * en bas de la page pour enregistrer vos paramètres.

La zone * URL Preview * devrait afficher une URL contenant votre point de terminaison CDN Spaces. Cela devrait ressembler à ceci:

+ https: //. nyc3.cdn.digitaloceanspaces.com / wp-content / uploads / 2018/09/21211354 / photo.jpg +

Si vous utilisez un sous-domaine personnalisé avec Spaces CDN, l’aperçu de l’URL doit contenir ce sous-domaine.

Cette URL indique que WP Offload Media a été configuré avec succès pour fournir des actifs de médiathèque à l’aide du CDN Spaces. Si le chemin ne contient pas + cdn +, assurez-vous que vous avez correctement entré l’URL * Edge * du noeud final et not l’URL * Origin * (cela ne s’applique pas à l’utilisation d’un sous-domaine personnalisé).

À ce stade, WP Offload Media a été configuré pour livrer votre médiathèque à l’aide du CDN Spaces. Tous les * futurs * téléchargements dans votre médiathèque seront automatiquement copiés dans votre espace DigitalOcean et servis à l’aide du CDN.

Vous pouvez maintenant décharger en masse des ressources existantes dans votre médiathèque à l’aide de l’outil de téléchargement intégré.

Déchargement de la médiathèque

Nous allons utiliser l’outil de téléchargement intégré du plugin pour décharger les fichiers existants dans notre médiathèque WordPress.

Sur le côté droit de la page de configuration principale de WP Offload Media, vous devriez voir la boîte suivante:

image: https: //assets.digitalocean.com/articles/wordpress_cdn_offload/wp_offload_upload_tool.png [Outil de téléchargement de déchargement WP]

Cliquez sur * Décharger maintenant * pour télécharger vos fichiers de médiathèque sur votre espace DigitalOcean.

Si la procédure de téléchargement est interrompue, la boîte changera pour afficher ce qui suit:

image: https: //assets.digitalocean.com/articles/wordpress_cdn_offload/wp_offload_upload_tool_2.png [Outil de téléchargement de déchargement WP 2]

Appuyez sur * Décharger le reste maintenant * pour transférer les fichiers restants sur votre espace DigitalOcean.

Une fois que vous avez déchargé les éléments restants de votre médiathèque, vous devriez voir les nouvelles cases suivantes:

image: https: //assets.digitalocean.com/articles/wordpress_cdn_offload/wp_offload_success.png [Succès du déchargement de WP]

À ce stade, vous avez déchargé votre médiathèque sur votre espace et livrez les fichiers aux utilisateurs via le CDN Spaces.

À tout moment, vous pouvez télécharger les fichiers sur votre serveur WordPress à partir de votre espace en appuyant sur * Télécharger des fichiers *.

Vous pouvez également vider votre espace DigitalOcean en cliquant sur * Supprimer les fichiers *. Avant de faire cela, assurez-vous d’avoir préalablement téléchargé les fichiers sur votre serveur WordPress à partir de Spaces.

Au cours de cette étape, nous avons appris à décharger votre médiathèque WordPress sur des espaces DigitalOcean et à réécrire les liens vers ces actifs de la bibliothèque à l’aide du plug-in WP Offload Media.

Pour décharger des ressources WordPress supplémentaires telles que des thèmes et des fichiers JavaScript, vous pouvez utiliser l’add Asset Pull ou consulter la page https: // www. .digitalocean.com / community / tutorials / comment-accélérer-wordpress-la-livraison-des-actifs-avec-digitalocean-spaces-cdn # offload-additional-assets- (facultatif) Section [Décharger les actifs supplémentaires] de ce guide.

Pour vérifier et vérifier que les téléchargements de votre médiathèque sont livrés à partir du CDN Spaces, passez à https://www.digitalocean.com/community/tutorials/how-to-speed-up-word-adpress-asset-delivery-using-digitalocean. -spaces-cdn # testing-cdn-cache [Test de la mise en cache CDN].

Media Library Folders Pro et plug-ins CDN Enabler

La MaxGalleria Media Library Folders Pro plugin est un plugin WordPress pratique qui vous permet de mieux organiser vos ressources de la bibliothèque de médias WordPress. En outre, l’addon gratuit Spaces vous permet de décharger en bloc vos ressources de la médiathèque sur des espaces DigitalOcean et de réécrire les URL sur ces ressources pour les servir directement depuis un objet. espace de rangement. Vous pouvez ensuite activer le CDN Spaces et utiliser le point de terminaison Spaces CDN pour servir les actifs de votre bibliothèque à partir du réseau de distribution distribué. Pour accomplir cette dernière étape, vous pouvez utiliser le plug-in CDN Enabler pour réécrire les URL de point de terminaison CDN pour les actifs de votre médiathèque.

Nous allons d’abord commencer par installer et configurer le plug-in MLFP (Media Library Folders Pro), ainsi que l’addon Espaces MLFP. Nous installerons et configurerons ensuite le plug-in CDN Enabler pour fournir les actifs de la médiathèque à l’aide du CDN Spaces.

Installation du plugin MLFP

Après avoir acheté le plugin MLFP, vous devriez avoir reçu un email contenant les informations d’identification de votre compte MaxGalleria, ainsi qu’un lien de téléchargement du plugin. Cliquez sur le lien de téléchargement du plugin pour télécharger l’archive zip du plugin MLFP sur votre ordinateur local.

Une fois l’archive téléchargée, connectez-vous à l’interface d’administration de votre site WordPress (+ https: /// wp-admin +), puis accédez à * Plugins * puis * Ajouter * dans la barre de gauche.

Sur la page * Add Plugins *, cliquez sur * Upload Plugin *, puis sélectionnez l’archive zip que vous venez de télécharger.

Cliquez sur * Installer maintenant * pour terminer l’installation du plug-in. À partir de l’écran * Installation du plug-in *, cliquez sur * Activer le plug-in * pour activer MLFP.

Vous devriez alors voir un élément de menu * Media Library Folders Pro * apparaître dans la barre latérale gauche. Cliquez dessus pour accéder à l’interface Media Library Folders Pro. Ce guide ne couvre pas les diverses fonctionnalités du plug-in, mais pour en savoir plus, vous pouvez consulter the site MaxGalleria et https: // maxgalleria .com / forums / [forums].

Nous allons maintenant activer le plugin. Cliquez sur * Paramètres * sous l’élément de menu MLFP et entrez votre clé de licence en regard de la zone de texte * Licence *. Vous pouvez trouver votre clé de licence MLFP dans le courrier électronique qui vous a été envoyé lorsque vous avez acheté le plug-in. Appuyez sur * Enregistrer les modifications * puis * Activer la licence *. Ensuite, appuyez sur * Update Settings *.

Votre plugin MLFP est maintenant actif et vous pouvez l’utiliser pour organiser les ressources existantes ou nouvelles de la médiathèque pour votre site WordPress.

Nous allons maintenant installer et configurer le plug-in Spaces afin que vous puissiez décharger et servir ces actifs à partir de DigitalOcean Spaces.

Installation du plug-in d’extension des espaces MLFP et de la médiathèque de déchargement

Pour installer l’addon Spaces, connectez-vous à votre compte MaxGalleria account. Vous pouvez trouver les informations d’identification de votre compte dans un courrier électronique qui vous a été envoyé lorsque vous avez acheté le plug-in MLFP.

Naviguez jusqu’à la page * Addons * dans la barre de menus supérieure et faites défiler jusqu’à * Media Sources *. De là, cliquez sur l’option * Dossiers de la bibliothèque multimédia Pro S3 and Spaces *.

Faites défiler la page jusqu’à la section * Tarifs * et sélectionnez l’option qui convient à la taille de votre médiathèque WordPress (pour les médiathèques de 3 000 images ou moins, l’addon est gratuit).

Après avoir terminé l’achat «achat», vous pouvez revenir à la page de votre compte (en cliquant sur le lien * Compte * dans la barre de menu supérieure), à ​​partir de laquelle le plug-in du addon sera désormais disponible.

Cliquez sur l’image * Media Library Folders Pro S3 * et le téléchargement du plug-in devrait commencer.

Une fois le téléchargement terminé, revenez à votre interface d’administration WordPress et installez le plug-in téléchargé en suivant la même méthode que ci-dessus, en cliquant sur * Upload Plugin *. Encore une fois, appuyez sur * Activer le plugin * pour activer le plugin.

Vous recevrez probablement un avertissement concernant la configuration des clés d’accès dans votre fichier + wp-config.php. Nous allons les configurer maintenant.

Connectez-vous à votre serveur WordPress à l’aide de la console ou de SSH, puis accédez à votre répertoire racine WordPress (dans ce tutoriel, il s’agit de + / var / www / html +). A partir de là, ouvrez + wp-config.php + dans votre éditeur favori:

sudo nano wp-config.php

Faites défiler jusqu’à la ligne `+ / * C’est tout, arrêtez de modifier! Bonne blogging. * / + `, et avant qu’il insère les lignes suivantes contenant votre paire de clés d’accès Spaces et une option de configuration de plug-in (pour savoir comment générer une paire de clés d’accès, consultez la page https://www.digitalocean.com/docs/spaces/ how-to / administrative-access / # clés d’accès [documents produit Spaces]):

wp-config.php

. . .
define('MF_AWS_ACCESS_KEY_ID', '');
define( 'MF_AWS_SECRET_ACCESS_KEY', '');
define('MF_CLOUD_TYPE', 'do')

/* That's all, stop editing! Happy blogging. */
. . .

Une fois l’édition terminée, enregistrez et fermez le fichier.

Maintenant, accédez à votre espace DigitalOcean à partir du Cloud Control Panel et créez un dossier appelé + wp-content + en cliquant sur * Nouveau dossier *.

De là, revenez à l’interface d’administration de WordPress, puis cliquez sur * Media Library Folders Pro *, puis sur * S3 & Spaces Settings * dans la barre latérale.

La bannière d’avertissement relative à la configuration des clés d’accès devrait maintenant avoir disparu. S’il est toujours présent, vous devez revérifier votre fichier + wp-config.php + pour rechercher des fautes de frappe ou des erreurs de syntaxe.

Dans la zone de texte * Clé de licence *, entrez la clé de licence qui vous a été envoyée par courrier électronique après l’achat de l’addon Spaces. Notez que cette clé de licence est différente de la clé de licence MLFP. Appuyez sur * Enregistrer les modifications * puis * Activer la licence *.

Une fois activé, vous devriez voir le volet de configuration suivant:

image: https: //assets.digitalocean.com/articles/wordpress_cdn_offload/spaces_addon_config.png [Configuration de l’addon pour les espaces MLFP]

À partir de là, cliquez sur * Sélectionner une image et une région * pour sélectionner votre espace DigitalOcean. Ensuite, sélectionnez la région appropriée pour votre espace et appuyez sur * Enregistrer la sélection de segment *.

Vous avez maintenant connecté avec succès le plug-in Spaces offload à votre espace DigitalOcean. Vous pouvez commencer à décharger vos ressources de la médiathèque WordPress.

La case à cocher * Utiliser les fichiers sur le serveur cloud * vous permet de spécifier la provenance des ressources de la médiathèque. Si vous cochez la case, les ressources seront desservies à partir d’espaces DigitalOcean et les URL des images et des autres objets de la médiathèque seront réécrites en conséquence. Si vous prévoyez d’utiliser le CDN Spaces pour servir les actifs de votre médiathèque, * ne cochez pas cette case, car le plug-in utilisera le point de terminaison Spaces * Origin * et non le point de terminaison CDN * Edge *. Nous allons configurer la réécriture du lien CDN dans une prochaine étape.

Cliquez sur la case * Supprimer les fichiers du serveur local * pour supprimer les ressources de la médiathèque locale une fois qu’elles ont été téléchargées avec succès sur DigitalOcean Spaces.

La case à cocher * Supprimer les fichiers téléchargés individuels du serveur cloud * doit être utilisée lors du téléchargement en bloc de fichiers depuis Spaces sur votre serveur WordPress. Si cette case est cochée, ces fichiers seront supprimés de Spaces après leur téléchargement sur votre serveur WordPress. Nous pouvons ignorer cette option pour le moment.

Puisque nous configurons le plug-in à utiliser avec le CDN Spaces, laissez la case * Utiliser les fichiers sur le serveur cloud * décochée et cliquez sur * Copier la médiathèque sur le serveur cloud * pour synchroniser la médiathèque WordPress de votre site avec votre DigitalOcean Space.

Vous devriez voir apparaître une boîte de progression, puis * Télécharger terminé. * Indiquant que la synchronisation de la médiathèque est terminée.

Accédez à votre espace DigitalOcean pour vérifier que les fichiers de votre médiathèque ont été copiés dans votre espace. Ils devraient être disponibles dans le sous-répertoire + uploads + du répertoire + wp-content + que vous avez créé précédemment dans cette étape.

Une fois vos fichiers disponibles dans votre espace, vous êtes prêt à configurer le CDN des espaces.

Installation de CDN Enabler Plugin pour délivrer des actifs à partir d’espaces CDN

Pour utiliser le CDN de Spaces afin de servir vos fichiers maintenant déchargés, commencez par https://www.digitalocean.com/community/tutorials/how-to-speed-up-wordpress-asset-delivery-using-digitalocean-spaces-cdn#enabling -spaces-cdn [assurez-vous que vous avez activé le CDN] pour votre espace.

Une fois le CDN activé pour votre espace, vous pouvez désormais installer et configurer le CDN Enabler plug-in WordPress pour réécrire les liens vers les actifs de votre médiathèque. Le plug-in réécrira les liens vers ces actifs afin qu’ils soient servis à partir du noeud final CDN Spaces.

Pour installer CDN Enabler, vous pouvez utiliser le menu * Plugins * à partir de l’interface d’administration WordPress ou installer le plug-in directement à partir de la ligne de commande. Nous allons démontrer cette dernière procédure ici.

Commencez par vous connecter à votre serveur WordPress. Ensuite, accédez à votre répertoire de plugins:

cd /wp-content/plugins

Assurez-vous de remplacer le chemin ci-dessus par le chemin de votre installation WordPress.

A partir de la ligne de commande, utilisez l’interface + wp-cli + pour installer le plugin:

wp plugin install cdn-enabler

Maintenant, activez le plugin:

wp plugin activate cdn-enabler

Vous pouvez également installer et activer le plug-in CDN Enabler à l’aide du programme d’installation du plug-in built-in.

De retour dans la zone d’administration de WordPress, sous * Paramètres *, vous devriez voir un nouveau lien vers * Paramètres CDN Enabler *. Cliquez sur * CDN Enabler *.

Vous devriez voir l’écran des paramètres suivants:

image: https: //assets.digitalocean.com/articles/wordpress_cdn_offload/cdn_enabler_settings.png [Paramètres d’activateur CDN]

Modifiez les champs affichés comme suit:

  • * URL CDN *: entrez le point final Spaces * Edge *, que vous pouvez trouver dans le tableau de bord Spaces. Dans ce tutoriel, il s’agit de + https: //. Nyc3.cdn.digitaloceanspaces.com +. Si vous utilisez un sous-domaine personnalisé avec Spaces CDN, entrez ce sous-domaine ici. Par exemple, + https: //. Example.com +.

  • * Répertoires inclus *: Entrez + wp-content / uploads +. Nous allons apprendre à servir d’autres répertoires + wp-content + dans les https://www.digitalocean.com/community/tutorials/how-to-speed-up-wordpress-asset-delivery-using-digitalocean-spaces -cdn # offload-additional-assets [Section [Décharger des actifs supplémentaires]].

  • * Exclusions *: Laissez la valeur par défaut + .php

  • * Chemin relatif *: laissez la case cochée

  • * CDN HTTPS *: Activez-le en cochant la case

  • Laissez les deux champs restants vides

Ensuite, appuyez sur * Enregistrer les modifications * pour enregistrer ces paramètres et les activer pour votre site WordPress.

À ce stade, vous avez transféré avec succès la bibliothèque multimédia de votre site WordPress vers les espaces DigitalOcean et les fournissez aux utilisateurs finaux à l’aide du CDN.

Dans cette étape, nous n’avons pas _ déchargé _ de décharger le thème WordPress ou d’autres actifs + wp-content +. Pour apprendre à transférer ces ressources vers des espaces et à les servir à l’aide du CDN Spaces, passez à l’adresse https://www.digitalocean.com/community/tutorials/how-to-speed-up-wordpress-asset-delivery-using-digitalocean. -spaces-cdn # offload-additional-assets- (facultatif) [Décharger des actifs supplémentaires].

Pour vérifier et vérifier que les téléchargements de votre médiathèque sont livrés à partir du CDN Spaces, passez à https://www.digitalocean.com/community/tutorials/how-to-speed-up-word-adpress-asset-delivery-using-digitalocean. -spaces-cdn # testing-cdn-cache [Test de la mise en cache CDN].

Déchargement d’actifs supplémentaires (facultatif)

Dans les sections précédentes de ce guide, nous avons appris à décharger la bibliothèque multimédia WordPress de notre site sur Spaces et à servir ces fichiers à l’aide du CDN Spaces. Dans cette section, nous aborderons le déchargement et la gestion d’actifs WordPress supplémentaires tels que des thèmes, des fichiers JavaScript et des polices.

La plupart de ces actifs statiques résident dans le répertoire + wp-content + (qui contient + wp-themes +). Pour décharger et réécrire les URL de ce répertoire, nous utiliserons CDN Enabler, un plug-in à code source ouvert développé par KeyCDN.

Si vous utilisez les https://www.digitalocean.com/community/tutorials/how-to-speed-up-wordpress-asset-delivery-using-digitalocean-spaces-cdn#wordword-offload-media-plugin [ Plug-in WP Offload Media], vous pouvez utiliser le Asset Pull addon pour servir ces fichiers à l’aide d’un CDN extrait. L’installation et la configuration de cet addon sort du cadre de ce guide. Pour en savoir plus, consultez le produit DeliciousBrains page.

Nous allons d’abord installer CDN Enabler. Nous allons ensuite copier nos thèmes WordPress dans Spaces et enfin configurer CDN Enabler pour les utiliser à l’aide du CDN Spaces.

Si vous avez déjà installé CDN Enabler à une étape précédente, passez à l’étape 2.

Étape 1 - Installation de CDN Enabler

Pour installer CDN Enabler, connectez-vous à votre serveur WordPress. Ensuite, accédez à votre répertoire de plugins:

cd /wp-content/plugins

Assurez-vous de remplacer le chemin ci-dessus par le chemin de votre installation WordPress.

A partir de la ligne de commande, utilisez l’interface + wp-cli + pour installer le plugin:

wp plugin install cdn-enabler

Maintenant, activez le plugin:

wp plugin activate cdn-enabler

Vous pouvez également installer et activer le plug-in CDN Enabler à l’aide du programme d’installation du plug-in built-in.

De retour dans la zone d’administration de WordPress, sous * Paramètres *, vous devriez voir un nouveau lien vers * Paramètres CDN Enabler *. Cliquez sur * CDN Enabler *.

Vous devriez voir l’écran des paramètres suivants:

image: https: //assets.digitalocean.com/articles/wordpress_cdn_offload/cdn_enabler_settings.png [Paramètres d’activateur CDN]

À ce stade, vous avez installé CDN Enabler avec succès. Eh bien maintenant, téléchargez vos thèmes WordPress dans Spaces.

Étape 2 - Télécharger des ressources WordPress statiques dans des espaces

Dans ce tutoriel, pour illustrer une configuration de base de plug-in, nous allons uniquement servir + wp-content / themes +, le répertoire WordPress contenant les fichiers PHP, JavaScript, HTML et les thèmes de thèmes WordPress. Vous pouvez éventuellement étendre ce processus à d’autres répertoires WordPress, tels que + wp-includes +, et même l’ensemble du répertoire + wp-content +.

Le thème utilisé par l’installation de WordPress dans ce didacticiel est + twentyseventeen +, le thème par défaut d’une nouvelle installation de WordPress au moment de la rédaction. Vous pouvez répéter ces étapes pour n’importe quel autre thème ou contenu WordPress.

Premièrement, nous allons télécharger votre thème dans notre espace DigitalOcean en utilisant + s3cmd. Si vous n’avez pas encore configuré + s3cmd +, consultez la documentation produit de DigitalOcean Spaces.

Accédez au répertoire d’installation wp-content de WordPress:

cd /wp-content

À partir de là, téléchargez le répertoire + themes + sur votre espace DigitalOcean en utilisant + s3cmd +. Notez qu’à ce stade, vous pouvez choisir de ne télécharger qu’un seul thème, mais pour des raisons de simplicité et pour décharger le plus de contenu possible de notre serveur, nous téléchargerons tous les thèmes du répertoire + themes + dans notre espace.

Nous allons utiliser + find + pour construire une liste de fichiers non PHP (donc pouvant être mis en cache), que nous dirigerons ensuite vers + s3cmd + pour les télécharger dans Spaces. Nous exclurons également les feuilles de style CSS dans cette première commande, car nous devons définir le type MIME + text / css + lors de leur téléchargement.

find themes/ -type f -not \( -name '*.php' -or -name '*.css' \) | xargs -I{} s3cmd put --acl-public {} s3:///wp-content/{}

Assurez-vous de remplacer ++ dans la commande ci-dessus par votre nom d’espace.

Ici, nous ordonnons à + ​​find de rechercher des fichiers dans le répertoire` + themes / + , et ignorons les fichiers + .php` et + .css. Nous utilisons ensuite + xargs -I {} + pour parcourir cette liste, en exécutant + s3cmd put + pour chaque fichier, et définissons les autorisations du fichier dans Spaces sur + public + en utilisant + - acl-public +.

Ensuite, nous allons faire la même chose pour les feuilles de style CSS, en ajoutant l’indicateur + - mime-type =" text / css "+ pour définir le type MIME + text / css + pour les feuilles de style sur Spaces. Ainsi, Spaces servira les fichiers CSS de votre thème en utilisant le bon en-tête HTTP + Content-Type: text / css +:

find themes/ -type f -name '*.css' | xargs -I{} s3cmd put --acl-public  {} s3:///wp-content/{}

Encore une fois, assurez-vous de remplacer "++" dans la commande ci-dessus par votre nom d’espace.

Maintenant que nous avons téléchargé notre thème, vérifions qu’il se trouve bien sur le bon chemin dans notre espace. Accédez à votre espace à l’aide du panneau de configuration DigitalOcean.

Entrez le répertoire + wp-content, suivi du répertoire` + themes`. Vous devriez voir le répertoire de votre thème ici. Sinon, vérifiez votre configuration + s3cmd + et re-téléchargez votre thème sur votre espace.

Étape 3 - Configuration de CDN Enabler pour réécrire les liens d’actifs

Maintenant que notre thème vit dans notre espace et que nous avons défini les métadonnées appropriées, nous pouvons commencer à servir ses fichiers à l’aide de CDN Enabler et du CDN DigitalOcean Spaces.

Revenez à la zone d’administration WordPress et cliquez sur * Paramètres * puis * CDN Enabler *.

Ici, modifiez les champs affichés comme suit:

  • * URL CDN *: Entrez le point final Spaces * Edge *, comme indiqué à * Étape 1 *. Dans ce tutoriel, il s’agit de + https: //. Nyc3.cdn.digitaloceanspaces.com +. Si vous utilisez un sous-domaine personnalisé avec Spaces CDN, entrez ce sous-domaine ici. Par exemple, + https: //. Example.com +.

  • * Répertoires inclus *: Si vous n’utilisez * pas * le plug-in MLFP, cela devrait être + wp-content / themes +. Si vous êtes, cela devrait être + wp-content / uploads, wp-content / themes

  • * Exclusions *: Laissez la valeur par défaut + .php

  • * Chemin relatif *: laissez la case cochée

  • * CDN HTTPS *: Activez-le en cochant la case

  • Laissez les deux champs restants vides

Vos paramètres finaux devraient ressembler à ceci:

image: https: //assets.digitalocean.com/articles/wordpress_cdn_offload/cdn_enabler_final.png [Paramètres finaux de l’activateur CDN]

Appuyez sur * Enregistrer les modifications * pour enregistrer ces paramètres et les activer pour votre site WordPress.

À ce stade, vous avez transféré avec succès les ressources de thème de votre site WordPress vers DigitalOcean Spaces et les transmettez aux utilisateurs finaux à l’aide du CDN. Nous pouvons le confirmer en utilisant les outils de développement de Chrome, en suivant la procédure décrite à l’adresse https://www.digitalocean.com/community/tutorials/how-to-speed-up-wordpress-asset-delivery-using-digitalocean-spaces-cdn#test- cdn-caching [ci-dessous].

En utilisant le plugin CDN Enabler, vous pouvez répéter ce processus pour d’autres répertoires WordPress, tels que + wp-includes +, et même l’ensemble du répertoire + wp-content +.

Test de la mise en cache CDN

Dans cette section, nous montrerons comment déterminer à partir de quel point vos ressources WordPress sont servies (par exemple, votre serveur hôte ou le CDN) à l’aide des outils de développement de Google Chrome.

Étape 1 - Ajout d’une image échantillon à la médiathèque pour tester la synchronisation

Pour commencer, nous allons d’abord télécharger un exemple d’image dans notre médiathèque et vérifier qu’il est servi à partir des serveurs CDN de DigitalOcean Spaces. Vous pouvez télécharger une image à l’aide de l’interface Web WordPress Admin ou à l’aide de l’outil de ligne de commande + wp-cli +. Dans ce guide, nous utiliserons + wp-cli + pour télécharger l’image exemple.

Connectez-vous à votre serveur WordPress à l’aide de la ligne de commande, puis accédez au répertoire de base de l’utilisateur non root que vous avez configuré. Dans ce tutoriel, nous allons utiliser l’utilisateur **.

cd

À partir de là, utilisez + curl + pour télécharger le logo DigitalOcean sur votre Droplet (si vous avez déjà une image avec laquelle vous souhaitez tester, ignorez cette étape):

curl https://assets.digitalocean.com/logos/DO_Logo_horizontal_blue.png > do_logo.png

Maintenant, utilisez + wp-cli + pour importer l’image dans votre médiathèque:

wp media import --path=/ /home//do_logo.png

Assurez-vous de remplacer ++ par le chemin correct du répertoire contenant vos fichiers WordPress.

Certains avertissements peuvent s’afficher, mais la sortie devrait se terminer comme suit:

OutputImported file '/home/sammy/do_logo.png' as attachment ID 10.
Success: Imported 1 of 1 items.

Ce qui indique que notre image de test a été copiée avec succès dans la médiathèque WordPress et également téléchargée dans notre espace DigitalOcean à l’aide de votre plug-in de déchargement préféré.

Accédez à votre espace DigitalOcean pour confirmer:

image: https: //assets.digitalocean.com/articles/wordpress_cdn_offload/spaces_upload_confirm.png [Succès du chargement des espaces]

Cela indique que votre plug-in de déchargement fonctionne comme prévu et synchronise automatiquement les téléchargements WordPress sur votre espace DigitalOcean. Notez que le chemin exact vers les téléchargements de votre médiathèque dans l’espace dépend du plug-in que vous utilisez pour décharger vos fichiers WordPress.

Ensuite, nous vérifierons que ce fichier est en cours d’utilisation au moyen du CDN Spaces et non à partir du serveur exécutant WordPress.

Étape 2 - Inspection de l’URL de l’actif

Dans la zone d’administration de WordPress (+ https: /// wp-admin +), accédez à * Pages * dans le menu de navigation de gauche.

Nous allons créer un exemple de page contenant notre image téléchargée pour déterminer l’endroit où il est servi. Vous pouvez également exécuter ce test en ajoutant l’image à une page existante de votre site WordPress.

Dans l’écran * Pages *, cliquez sur * Sample Page * ou sur une page existante. Vous pouvez également créer une nouvelle page.

Dans l’éditeur de page, cliquez sur * Ajouter un média *, puis sélectionnez le logo DigitalOcean (ou une autre image que vous avez utilisée pour tester cette procédure).

Un volet * Détails de la pièce jointe * devrait apparaître sur le côté droit de votre écran. À partir de ce volet, ajoutez l’image à la page en cliquant sur * Insérer dans la page *.

Maintenant, dans l’éditeur de page, cliquez sur * Publier * (si vous avez créé un nouvel exemple de page) ou sur * Mise à jour * (si vous avez ajouté l’image à une page existante) dans le champ * Publier * à droite. de votre écran.

Maintenant que la page a été mise à jour pour contenir l’image, naviguez jusqu’à celle-ci en cliquant sur le * Lien permanent * sous le titre de la page. Vous serez amené à cette page dans votre navigateur Web.

Pour les besoins de ce didacticiel, les étapes suivantes supposent que vous utilisez Google Chrome, mais vous pouvez utiliser les navigateurs Web les plus modernes pour exécuter un test similaire.

Dans l’aperçu de la page affichée dans votre navigateur, cliquez avec le bouton droit de la souris sur l’image et cliquez sur * Inspecter *:

image: https: //assets.digitalocean.com/articles/wordpress_cdn_offload/inspect.png [Menu Inspection]

Une fenêtre DevTools devrait apparaître, mettant en évidence l’actif + img + dans le code HTML de la page:

image: https: //assets.digitalocean.com/articles/wordpress_cdn_offload/devtools_output.png [Sortie de DevTools]

Le point de terminaison CDN de votre espace DigitalOcean doit apparaître dans cette URL (dans ce tutoriel, notre point de terminaison CDN Spaces est + https: //. Cdn.digitaloceanspaces.com +), ce qui indique que le fichier image est diffusé à partir des espaces DigitalOcean. CDN Edge Cache. Si vous utilisez un sous-domaine personnalisé avec le CDN Spaces, l’URL de l’actif doit utiliser ce sous-domaine personnalisé.

Cela confirme que les téléchargements de votre médiathèque sont synchronisés sur votre espace DigitalOcean et servis à l’aide du CDN Spaces.

Étape 3 - Inspection des en-têtes de réponse d’actif

À partir de la fenêtre de DevTools, nous allons exécuter un dernier test. Cliquez sur * Réseau * dans la barre d’outils en haut de la fenêtre.

Une fois dans la fenêtre * Réseau * vierge, suivez les instructions à l’écran pour recharger la page.

Les ressources de la page doivent être renseignées dans la fenêtre. Localisez votre image de test dans la liste des ressources de la page:

image: https: //assets.digitalocean.com/articles/wordpress_cdn_offload/devtools_asset_list.png [Liste des actifs de Chrome DevTools]

Une fois que vous avez localisé votre image de test, cliquez dessus pour ouvrir un volet d’informations supplémentaire. Dans ce volet, cliquez sur * En-têtes * pour afficher les en-têtes de réponse pour cet actif:

image: https: //assets.digitalocean.com/articles/wordpress_cdn_offload/response_headers.png [En-têtes de réponse]

Vous devriez voir l’en-tête HTTP + Cache-Control +, qui est un en-tête de réponse CDN. Cela confirme que cette image a été diffusée à partir du CDN Spaces.

Étape 4 - Inspection des URL pour les actifs de thème (facultatif)

Si vous avez déchargé votre répertoire + wp-themes + (ou autre), comme décrit à l’adresse https://www.digitalocean.com/community/tutorials/how-to-speed-up-wordpress-asset-delivery-using-digitalocean- spaces-cdn # offload-additional-assets [Décharger des actifs supplémentaires], vous devez effectuer la vérification rapide suivante pour vérifier que les actifs de votre thème sont en cours de traitement à partir du CDN Spaces.

Accédez à votre site WordPress dans Google Chrome et cliquez avec le bouton droit n’importe où dans la page. Dans le menu qui apparaît, cliquez sur * Inspecter *.

Vous serez à nouveau amené à l’interface de Chrome DevTools.

image: https: //assets.digitalocean.com/articles/wordpress_cdn_offload/chrome_devtools_theme_confirm.png [Interface de Chrome DevTools]

De là, cliquez sur * Sources *.

Dans le volet de gauche, vous devriez voir une liste des actifs de votre site WordPress. Faites défiler jusqu’à votre point de terminaison CDN (ou votre sous-domaine personnalisé) et développez la liste en cliquant sur la petite flèche située en regard du nom du point de terminaison:

image: https: //assets.digitalocean.com/articles/wordpress_cdn_offload/devtools_sources_assets.png [Liste des actifs du site DevTools]

Notez que l’en-tête de votre thème WordPress, JavaScript et la feuille de style CSS sont maintenant diffusés à partir du CDN Spaces.

Conclusion

Dans ce didacticiel, nous avons montré comment décharger du contenu statique de votre serveur WordPress vers DigitalOcean Spaces et comment servir ce contenu à l’aide du CDN Spaces. Dans la plupart des cas, cela devrait réduire la bande passante de votre infrastructure hôte et accélérer le chargement de pages par les utilisateurs finaux, en particulier ceux situés plus loin géographiquement de votre serveur WordPress.

Nous avons montré comment décharger et servir à la fois les ressources Media Library et + themes + à l’aide du CDN Spaces, mais ces étapes peuvent être étendues pour décharger davantage le répertoire + wp-content +, ainsi que + wp-includes +.

L’implémentation d’un CDN pour fournir des actifs statiques n’est qu’un moyen d’optimiser votre installation WordPress. D’autres plugins tels que W3 Total Cache peuvent encore accélérer le chargement des pages et améliorer le référencement de votre site. Https://developers.google.com/speed/pagespeed/insights/[PageSpeed ​​Insights] est un outil utile pour mesurer la vitesse de chargement de votre page et l’améliorer. Https://www.pingdom.com/[Pingdom] est un autre outil utile qui fournit une analyse détaillée des temps de réponse et des demandes, ainsi que des optimisations suggérées.

Pour en savoir plus sur les réseaux de distribution de contenu et leur fonctionnement, consultez la page https://www.digitalocean.com/community/tutorials/using-a-cdn-to-speed-up-st-st-static-content-deliveryOH à l’aide d’un CDN Up Static Content Delivery].

Related