Tuesday , December 10 2019
Home / Uncategorized / How to speed up delivery of WordPress assets using the DigitalOcean CDN spaces

How to speed up delivery of WordPress assets using the DigitalOcean CDN spaces



introduction

Implementation of a CDN or Content Delivery NThe network, to provide the static resources of your WordPress site, can greatly reduce the bandwidth usage of your servers and speed up page load times for geographically dispersed users. WordPress static resources include images, cascading style sheets and JavaScript files. By leveraging a system of peripheral servers distributed around the world, a CDN caches copies of your site's static resources across its network to reduce the distance between end users and this bandwidth-intensive content.

In a previous Solutions Guide, How to save WordPress assets on DigitalOcean spaces, we covered the offload of a WordPress site's media library (where images and other site content are stored) in DigitalOcean Spaces, a storage service of highly redundant objects. We did it using the DigitalOcean Spaces Sync plug-in, which automatically synchronizes WordPress uploads to your space, allowing you to delete these files from your server and free up disk space.

In this solution guide, we will extend this procedure by rewriting the URLs of media library assets. This forces users' browsers to download static resources directly from the DigitalOcean Spaces CDN, a set of geographically dispersed cache servers optimized for static content distribution. We will see how to enable the CDN for Spaces, how to rewrite the links to serve WordPress resources from the CDN network and finally how to verify that the resources of your website are correctly delivered by the CDN.

In addition, we will demonstrate how to implement the Media Library offload and link rewriting using two popular paid WordPress plugins: WP Offload Media is Folders of the Pro media library. You should choose the plug-in that best suits your production needs.

Prerequisites

Before starting this tutorial, you should have a WordPress installation running on a LAMP or LEMP stack. You should also install WP-CLI on your WordPress server, which you can learn how to configure by following these instructions.

To download your multimedia library, you will need a DigitalOcean space and a pair of access keys:

  • To learn how to create a space, refer to the Spaces product documentation.
  • To learn how to create a pair of access keys and upload files to the space using open source s3cmd tool, consult the s3cmd 2.x installation, also on the DigitalOcean product documentation site.

There are some WordPress plugins that you can use to download your WordPress resources:

  • DigitalOcean Spaces Sync is a free and open source WordPress plugin to download your multimedia library in a DigitalOcean space. You can learn how to do it in How to store WordPress resources on DigitalOcean spaces.
  • WP Offload Media is a paid plug-in that copies files from the WordPress library into DigitalOcean Spaces and rewrites URLs to serve files from the CDN. With the addons pull of Assets, you can identify resources (CSS, JS, images, etc.) used by your site (for example with WordPress themes) and also serve them from CDN.
  • Folders of the Pro media library is another paid plug-in that lets you organize your media library assets and download them to DigitalOcean spaces.

For testing purposes, make sure you have a modern web browser like Google Chrome or Firefox installed on your client computer (such as a laptop).

Once you have installed WordPress and created a DigitalOcean space, you are ready to enable the CDN for your space and start from this guide.

Enabling CDN spaces

We will start this guide by enabling the CDN for your DigitalOcean space. This will not affect the availability of existing objects. With the CDN enabled, the objects in your space will be "transferred" to the edge caches in the content delivery network and a new CDN endpoint will be made available. For more information on how CDNs work, see Using a CDN network to speed up the delivery of static content.

First, enable the CDN for your space by following How to enable the spaces CDN.

Go back to your space and reload the page. You should see a new one endpoint link under your space name:

Link to the endpoints

These endpoints should contain the name of the space. We are using wordpress-offload in this tutorial.

Notice the addition of the new one board endpoint. This endpoint addresses requests for Spaces objects through the CDN, serving them from the onboard cache as much as possible. Write this down board endpoint, which will be used to configure the WordPress plug-in in future steps.

Now that you've enabled the CDN for your space, you're ready to start setting up your offload asset and connecting the rewrite plug-in.

If you use DigitalOcean Spaces Sync and continue from How to store WordPress resources on DigitalOcean spaces, start reading from the following section. If you are not using Spaces Sync, go to the WP Offload Media section or the Media Library Folders Pro section, depending on which plug-in you choose to use.

Spaces Sync Plugin

If you want to use the free and open-source DigitalOcean Spaces Sync and CDN Enabler plug-ins to serve your files from CDN's edge caches, follow the steps in this section.

We will start by ensuring that our WordPress installation and the Spaces Sync plugin are configured correctly and are serving assets from DigitalOcean Spaces.

Changing the configuration of the space synchronization plugin

Continuing with How to preserve WordPress assets on DigitalOcean spaces, the media library should be downloaded to your DigitalOcean space and the Spaces Sync plug-in settings should be as follows:

Synchronize only the cloud

We will make some minor changes to ensure that our configuration allows us to download WordPress themes and other directories wp-content / uploads Media Library folder.

First of all, we will modify the Full URL path for files field so that the media library files are served from the CDN of our space and not from the server. This setting essentially rewrites links to media library resources, modifying them from links to files hosted locally on the WordPress server, to store the links hosted on the DigitalOcean Spaces CDN.

Remember the board endpoint noted in the CDN passage of Enabling spaces.

In this tutorial, the name of the space is wordpress-offload and the CDN endpoint of the space is:

https: //wordpress-offload.nyc3.cdn.digitaloceanspaces.com

Now, on the Spaces Sync plug-in settings page, replace the URL in Full URL path for files field with the Spaces CDN endpoint, followed by / Wp-content / uploads.

In this tutorial, using the CDN Spaces endpoint above, the full URL would be:

https: //wordpress-offload.nyc3.cdn.digitaloceanspaces.com / wp-content / uploads

Subsequently, for the Local route field, enter the full path to the wp-content / uploads directory on your WordPress server. In this tutorial, the path to the installation of WordPress on the server is / Var / www /html/, so the complete path for uploads would be / Var / www /html/ Wp-content / uploads.

Note: If you continue from How to archive WordPress resources on DigitalOcean spaces, this guide will slightly modify the path of the files in your space to allow the user to optionally download themes and more wp-content resources. You should free your space before doing so, or alternatively you can transfer existing files to the correct one wp-content / uploads Directory of the space using s3cmd.

In Archive prefix field, we are about to enter / Wp-content / uploads, which will guarantee that we build the correct one wp-content directory hierarchy so that we can download other WordPress directories in this space.

filemask can remain jolly with *, unless you want to exclude certain files.

It is not necessary to check the Archive files only in the cloud and delete … option; check this box only if you want to delete media library resources from your server after they have been successfully uploaded to the DigitalOcean space.

Your final settings should look like this:

Final spaces synchronization settings

Be sure to replace the previous values ​​with the values ​​corresponding to the installation of WordPress and the configuration of Spaces.

Finally, hit Save Changes.

You should see a Saved settings the box appears at the top of the screen, confirming that the Spaces Sync plug-in settings have been updated correctly.

Future WordPress Media Library uploads must now be synchronized with the DigitalOcean space and published using the Spaces content distribution network.

In this passage, we did it not download the WordPress theme or other wp-content resources. To learn how to transfer these resources to Spaces and serve them using the Spaces CDN, switch to Offloading additional resources.

To verify and verify that the uploads from your media library are being sent from the Spaces CDN, go to Test CDN caching.

The WordPress Offload plugin DeliciousBrains offload allows you to quickly and automatically upload your media library resources to DigitalOcean Spaces and rewrite the links to these resources so you can distribute them directly from Spaces or via the Spaces CDN. In addition, the addons pull of Assets allows you to quickly download additional WordPress assets such as JS, CSS and font files in combination with a CDN pull. The configuration of this add-on is beyond the scope of this guide, but to learn more you can consult the DeliciousBrains documentation.

We will start by installing and configuring the WP Offload Media plug-in for a sample WordPress site.

Installation of WP Offload Media Plugin

To get started, you need to purchase a copy of the plug-in on the DeliciousBrains plugin site. Choose the appropriate version based on the number of resources in your media library and the support and functionality requirements for your site.

After completing the payment, you will be redirected to an after-sales site with a download link for the plug-in and a license key. The download link and license key will be sent to you at the e-mail address provided when you purchase the plug-in.

Download the plug-in and access the administration interface of your WordPress site (https: //your_site_url/ Wp-admin). Login if necessary. From here, hover over plugin and click on Add new.

Click Upload plugin and the top of the page, Choose the fileand then select the zip archive you just downloaded.

Click Install now, and then Activate plugins. You will be directed to the WordPress plugin administration interface.

From here, go to the WP Offload Media plugin settings page by clicking settings under the name of the plugin.

You will be taken to the following screen:

WP Offload Media Configuration

Click on the radio button next to DigitalOcean spaces. You will now be prompted to configure the Spaces in access key wp-config.php file (recommended) or directly in the web interface (this last will store Spaces credentials in the WordPress database).

We will configure the access key for the spaces in wp-config.php.

Access your WordPress server via the command line and go to the main WordPress directory (in this tutorial, this is it / Var / www / html). From here, open wp-config.php in your favorite editor:

Scroll down to the line that says / * That's all, stop editing! Good blog. * /and before inserting the following lines containing the Spaces Access key pair (to know how to generate a pair of access keys, consult the Spaces product documents):

wp-config.php

. . .
define (& # 39; AS3CF_SETTINGS & # 39 ;, serialize (array (
& # 39; & # 39 providers; => & # 39; do & # 39 ;,
& # 39; access-key-id & # 39; => & # 39;your_access_key_here& # 39 ;,
& # 39; secret-access-key & # 39; => & # 39;your_secret_key_here& # 39 ;,
)));

/ * That's all, stop editing! Good blog. * /
. . .

Once you're done editing, save and close the file. The changes will take effect immediately.

Back in the WordPress Media Offload plugin administration interface, select the radio button next to Define the access keys in wp-config.php and hit Save Changes.

You should be taken to the following interface:

WP Offload Selection bucket

In this configuration page, select the appropriate region for your space using the Region drop down menu and enter your name Space next to Bucket (in this tutorial, our space is called wordpress-offload).

So hit Save Bucket.

You will be directed to the main configuration page of WP Offload Media. At the top you should see the following warning window:

WP Offload License

Click on enter your license keyand on the next page enter the license key that is in the e-mail receipt or payment page and press Activate the license.

If you entered the license key correctly, you should see License activated successfully.

Now, go back to the main WP Offload Media configuration page by clicking Multimedia library at the top of the window.

At this point, WP Offload Media has been correctly configured for use with your DigitalOcean space. Now you can start downloading resources and distributing them using the Spaces CDN.

Configuring WP Offload Media

Now that you've connected WP Offload Media to your DigitalOcean space, you can start downloading resources and configuring URL rewriting to distribute media content from the Spaces CDN.

You should see the following configuration options on the WP Offload Media main configuration page:

WP Offload Main Nav

These default settings should work properly for most use cases. If your media library exists in a non-standard path inside the WordPress directory, enter the path in the text box below Pathway option.

If you want to change asset URLs to be published directly from Spaces and not from your WordPress server, make sure the switch is set to Above next to Rewrite media URLs.

To deliver media library resources using Spaces CDN, make sure that you have enabled the CDN for your own space (see Enable Spaces CDN to know how) and that you have annotated the URL for the board endpoint. Press the switch next to Custom domain (CNAME)e In the text box that appears, enter the CDN board URL of the endpoint, without the https: // prefix.

In this guide the Spaces CDN endpoint is:

https: //wordpress-offload.nyc3.cdn.digitaloceanspaces.com

So, here we enter:

 wordpress-offload.nyc3.cdn.digitaloceanspaces.com

To improve security, we will impose HTTPS for requests to media library resources (now published using the CDN) by setting the switch to Above.

You can optionally delete files that have been downloaded to Spaces from your WordPress server to free up disk space. To do this, hit Above next to Remove files from the server.

Once the WP Offload Media configuration is finished, press Save Changes at the bottom of the page to save the settings.

The URL preview box should display a URL containing the Spaces CDN endpoint. It should look like the following:

https: //wordpress-offload.nyc3.cdn.digitaloceanspaces.com / wp-content / uploads / 2018/09 / 21.211.354 / photo.jpg

This URL indicates that WP Offload Media has been correctly configured to deploy media library resources using Spaces CDN. If the route does not contain cdn, make sure you have entered correctly board Final URL e not the Origin URL.

At this point, WP Offload Media has been set up to deploy your media library using Spaces CDN. Any future uploads to your media library will automatically be copied to your DigitalOcean space and served using the CDN.

Now you can group the existing resources in your media library using the integrated upload tool.

Offload of the media library

We will use the plug-in's integrated "upload tool" to download existing files to our WordPress media library.

On the right side of the main WP Offload Media configuration page, you should see the following box:

WP Offload Upload Tool

Click Offload Now to upload files from your media library to your DigitalOcean space.

If the upload procedure is interrupted, the box will change to display the following:

WP Offload Upload Tool 2

Hit Remaining offload now to transfer the remaining files to your DigitalOcean space.

Once you've downloaded the remaining items from your media library, you should see the following new boxes:

WP Offload Success

At this point you have downloaded your media library to your space and are delivering files to users using the Spaces CDN.

By striking, you can download files to your WordPress server at any time Download files.

You can even free up your DigitalOcean space by hitting Remove file. Before doing so, make sure you have first downloaded the files to your WordPress server from Spaces.

In this step, we learned how to download our WordPress media library into DigitalOcean spaces and rewrite the links to these library resources using the WP Offload Media plug-in.

To download additional WordPress resources such as themes and JavaScript files, you can use the Pull addon or refer to the Additional Resources Offload section of this guide.

To verify and verify that the uploads from your media library are being sent from the Spaces CDN, go to Test CDN caching.

The MaxGalleria Media Library Folders Pro plugin is a convenient WordPress plugin that allows you to better organize the resources of your WordPress library. In addition, the free Spaces addon allows you to bulk download media library resources into DigitalOcean spaces and rewrite URLs in those resources to serve them directly from the object store. You can then enable the Spaces CDN and use the Spaces CDN endpoint to serve the library resources from the distributed distribution network. To perform this last step, you can use the CDN Enabler plug-in to rewrite CDN endpoints URLs for media library resources.

We will start by installing and configuring the Media Library Folders Pro (MLFP) plug-in and the MLFP Spaces addon. Then we will install and configure the Enabler CDN plug-in to distribute media library resources using Spaces CDN.

Installing the MLFP plugin

After purchasing the MLFP plug-in, you should have received an email containing the credentials for your MaxGalleria account and a link to download the plug-in. Click the plug-in download link to download the MLFP plug-in zip archive to your local computer.

Once you have downloaded the archive, log in to the administration interface of your WordPress site (https: //your_site_url/ Wp-admin), and go to plugin and then Add new in the left sidebar.

From Add plugin page, click Upload plugin and then select the zip archive you just downloaded.

Click Install now to complete the installation of the plugin and from Installing the plugin screen, click Activate plugins activate MLFP.

You should therefore see a Folders of the Pro media library the menu item appears in the left sidebar. Click to access the media library folders interface. The coverage of the various features of the plug-in goes beyond the scope of this guide, but to learn more, you can consult the site and the MaxGalleria forums.

Now we will activate the plugin. Click inside settings under the MLFP menu item, and enter your license key next to the License key text box. You can find your MLFP license key in the e-mail that was sent to you when you purchased the plug-in. Hit Save Changes and then Activate the license. So hit Update settings.

Your MLFP plug-in is now active and you can use it to organize existing or new media library resources for your WordPress site.

We will now install and configure the Spaces addon plug-in so you can download and serve these resources from DigitalOcean Spaces.

Installation of MLFP Spaces Addon Plugin and Offload Media Library

To install Spaces Addon, log in to your MaxGalleria account. You can find your account credentials in an & # 39; email sent when you purchase the MLFP plug-in.

Go to Addons page in the top menu bar and scroll down to Multimedia sources. From here, click on the Pro S3 media library folders and spaces option.

From this page, scroll down to Prices section and select the appropriate option to the size of your WordPress file library (for multimedia libraries with 3000 images or less, the addon is free).

After completing the "purchase" addon, you can return to your account page (by clicking on the button account link in the top menu bar), from which the plugin for the addition will now be available.

Click on Pro S3 media library folders image and download of the plugin should start.

Once the download is complete, go back to your WordPress admin interface and install the downloaded plug-in using the same method above, by clicking on Upload plugin. Again, hit Activate plugins to activate the plugin.

You will probably receive a warning about the configuration of the access keys in yours wp-config.php file. We will configure them now.

Access your WordPress server using the console or SSH and go to the main WordPress directory (in this tutorial, this is it / Var / www / html). From here, open wp-config.php in your favorite editor:

Scroll down to the line that says / * That's all, stop editing! Good blog. * /and before inserting the following lines containing the space access keys pair and a plug-in configuration option (to know how to generate a pair of access keys, consult Spaces product documents):

wp-config.php

. . .
define (& # 39; MF_AWS_ACCESS_KEY_ID & # 39 ;, & # 39;your_access_key_here& # 39;);
define (& # 39; MF_AWS_SECRET_ACCESS_KEY & # 39 ;, & # 39;your_secret_key_here& # 39;);
define (& # 39; MF_CLOUD_TYPE & # 39 ;, & # 39; do & # 39;)

/ * That's all, stop editing! Good blog. * /
. . .

Once you're done editing, save and close the file.

Now go to your DigitalOcean space from the cloud control panel and create a call folder wp-content clicking on New folder.

From here, go back to the WordPress admin interface and click on Folders of the Pro media library and then S3 and space settings in the sidebar.

The warning banner on the configuration of the access keys should now be gone. If it's still there, you should double check yours wp-config.php file for possible typos or syntax errors.

In License key text box, enter the license key that was sent to you by email after purchasing the Spaces add-on. Note that this license key is different from the MLFP license key. Hit Save Changes and then Activate the license.

Once activated, you should see the following configuration panel:

Addon Spaces MLFP configuration

From here, click Select Bucket and image area to select your DigitalOcean space. Then select the correct region for your space and press Save bucket selection.

Now you have successfully connected the Spaces Offload plug-in to your DigitalOcean space. You can start downloading resources from the WordPress media library.

The Use the files on the cloud server the checkbox allows you to specify where the media library resources will be served from. If you check the box, the resources will be provided by DigitalOcean Spaces and the image URLs and other objects in the Media Library will be rewritten accordingly. If you plan to use Spaces CDN to publish media library resources, not check this box, as the plug-in will use spaces Origin endpoint and not the CDN board endpoint. We will configure the rewriting of the CDN link in a next step.

Click the Remove files from the local server box to delete local media library resources once they have been successfully loaded into the DigitalOcean spaces.

The Remove individual files downloaded from the cloud server the checkbox must be used when downloading files from Spaces on the WordPress server. If checked, these files will be deleted from Spaces after successfully downloading to your WordPress server. We can ignore this option for now.

Since we are configuring the plug-in for use with Spaces CDN, leave the command Use the files on the cloud server box unchecked and press Copy the media library to the cloud server to synchronize your site's WordPress file library to your DigitalOcean space.

You should see a progress window appear and then Upload completed. indicating that the media library synchronization was completed successfully.

Access your DigitalOcean space to confirm that the files in your media library have been copied to your space. They should be available in the uploads subdirectory of the wp-content directory created earlier in this step.

Once your files are available in your space, you are ready to go to the Spaces CDN configuration.

Installing the CDN Enabler plug-in for asset distribution from Spaces CDN

To use Spaces CDN to service your downloaded files, please make sure before enabling the CDN for your space.

Once the CDN has been enabled for your space, you can now install and configure the WordPress Enabler CDN plug-in to rewrite links to your media library's resources. The plug-in rewrites the links to these resources so that they are served by the Spaces CDN endpoint.

To install CDN Enabler, you can use plugin menu from the WordPress admin interface or install the plug-in directly from the command line. We will demonstrate the second procedure here.

First, log in to your WordPress server. Then go to the plug-in directory:

  • CD / Var / www / html/ Wp-content / plugins

Be sure to replace the path above with the path to your WordPress installation.

From the command line, use the wp-cli interface to install the plugin:

  • plugin for wp install cdn-enabler

Now, activate the plugin:

  • the wp plugin activates cdn-enabler

Back in the WordPress Administrator Area, below settings, you should see a new link to CDN Enabler settings. Click inside CDN Enabler.

You should see the following settings screen:

CDN Enabler Settings

Edit the fields shown as follows:

  • CDN URL: Enter spaces board endpoints, which you can find from Spaces Dashboard. In this tutorial, this is https: //wordpress-offload.nyc3.cdn.digitaloceanspaces.com
  • Directories included: Log into wp-content / uploads. We will learn how to serve others wp-content directory in the Offload Additional Assets section.
  • exclusions: Leave the default value .php
  • Relative path: Leave the selected box
  • CDN HTTPS: Activate it by checking the box
  • Leave the remaining two fields empty

So hit Save Changes to save these settings and enable them for your WordPress site.

At this point you have successfully downloaded the multimedia library of your WordPress site on DigitalOcean Spaces and are serving them to end users using the CDN.

In this passage, we did it not download the WordPress theme or other wp-content resources. To learn how to transfer these resources to Spaces and serve them using the Spaces CDN, switch to Offloading additional resources.

To verify and verify that the uploads from your media library are being sent from the Spaces CDN, go to Test CDN caching.

Offload of additional resources (optional)

In the previous sections of this guide, we learned how to download the WordPress library of our site on Spaces and serve these files using Spaces CDN. In this section, we will cover offloading and serve additional WordPress resources such as themes, JavaScript files and fonts.

Most of these static resources live within the wp-content directory (which contains wp-themes). To download and rewrite URLs for this directory, we will use CDN Enabler, an open source plug-in developed by KeyCDN.

If you use the WP Offload Media plug-in, you can use the Pull Asson addon to serve these files using a CDN pull. The installation and configuration of this addon are beyond the scope of this guide. To learn more, visit the DeliciousBrains product page.

First of all, we will install the Enabler CDN. We will then copy our WordPress themes to Spaces and finally configure the Enabler CDN to deliver them using the Spaces CDN.

If you already installed CDN Enabler in a previous step, go to step 2.

Step 1: Install Enabler CDN

To install CDN Enabler, log into your WordPress server. Then go to the plug-in directory:

  • CD / Var / www / html/ Wp-content / plugins

Be sure to replace the path above with the path to your WordPress installation.

From the command line, use the wp-cli interface to install the plugin:

  • plugin for wp install cdn-enabler

Now, activate the plugin:

  • the wp plugin activates cdn-enabler

Back in the WordPress Administrator Area, below settings, you should see a new link to CDN Enabler settings. Click inside CDN Enabler.

Dovresti vedere la seguente schermata delle impostazioni:

Impostazioni Enabler CDN

A questo punto hai installato con successo l'Enabler CDN. Ora caricheremo i nostri temi WordPress su Spaces.

Passaggio 2: caricamento di asset statici di WordPress negli spazi

In questo tutorial, per dimostrare una configurazione di base del plugin, serviremo solo wp-content / themes, la directory di WordPress contenente i file PHP, JavaScript, HTML e di immagine di temi WordPress. Opzionalmente puoi estendere questo processo ad altre directory di WordPress, come wp-includese anche il tutto wp-content directory.

Il tema utilizzato dall'installazione di WordPress in questo tutorial è twentyseventeen, il tema predefinito per una nuova installazione di WordPress al momento della scrittura. Puoi ripetere questi passaggi per qualsiasi altro tema o contenuto WordPress.

Innanzitutto, caricheremo il tema sul nostro spazio DigitalOcean utilizzando s3cmd. Se non lo hai ancora configurato s3cmd, consultare la documentazione del prodotto DigitalOcean Spaces.

Passa alla tua installazione di WordPress wp-content directory:

  • CD / Var / www / html/ Wp-content

Da qui, carica il themes directory al tuo spazio DigitalOcean usando s3cmd. Nota che a questo punto puoi scegliere di caricare solo un singolo tema, ma per semplicità e scaricare il maggior numero possibile di contenuti dal nostro server, caricaremo tutti i temi nel themes directory al nostro spazio.

Useremo find per creare un elenco di file non PHP (quindi memorizzabili nella cache), che verranno poi inviati s3cmd per caricare su Spaces. Escluderemo anche i fogli di stile CSS in questo primo comando dato che è necessario impostare il text / css Tipo MIME durante il caricamento.

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

Qui, insegniamo find per cercare file all'interno di Temi / directory e ignorare .php is css File. Quindi usiamo xargs -I {} per scorrere su questa lista, in esecuzione s3cmd put per ogni file e impostare le autorizzazioni del file in Spazi su public using --acl-pubblico.

Successivamente, faremo lo stesso per i fogli di stile CSS, aggiungendo il --mime-type = "text / css" flag per impostare il text / css Tipo MIME per i fogli di stile su Spaces. Questo assicurerà che Spaces serva i file CSS del tuo tema usando il corretto Content-Type: text / css Intestazione HTTP:

  • trova temi / -type f -name '* .css' | xargs -I {} s3cmd metti --acl-public --mime-type = "text / css" {} s3: //wordpress-offload/ Wp-content / {}

Di nuovo, assicurati di sostituire wordpress-offload nel comando precedente con il tuo nome di spazio.

Ora che abbiamo caricato il nostro tema, verificiamo che possa essere trovato nel percorso corretto nel nostro spazio. Passa al tuo spazio utilizzando il pannello di controllo del cloud DigitalOcean.

Inserisci il wp-content directory, seguito dal themes directory. Dovresti vedere la directory del tuo tema qui. Se non lo fai, verifica il tuo s3cmd configurazione e ricarica il tuo tema sul tuo Spazio.

Ora che il nostro tema vive nel nostro spazio e abbiamo impostato i metadati corretti, possiamo iniziare a servire i suoi file utilizzando CDN Enabler e DigitalOcean Spaces CDN.

Torna all'area amministrativa di WordPress e fai clic settings and then Enabler CDN.

Qui, modifica i campi visualizzati come segue:

  • URL CDN: Inserisci gli spazi Bordo endpoint, come fatto in Step 1. In questo tutorial, questo è https: //wordpress-offload.nyc3.cdn.digitaloceanspaces.com
  • Directory incluse: Se tu sei not usando il plugin MLFP, dovrebbe essere questo wp-content / themes. Se lo sei, dovrebbe essere così wp-content / uploads, wp-content / themes
  • exclusions: Lascia il valore predefinito .php
  • Percorso relativo: Lascia la casella selezionata
  • CDN HTTPS: Attivarlo selezionando la casella
  • Lascia vuoti i restanti due campi

Le tue impostazioni finali dovrebbero assomigliare a questo:

Impostazioni finali Enabler CDN

Colpire Salva I Cambiamenti per salvare queste impostazioni e abilitarle per il tuo sito WordPress.

A questo punto hai scaricato con successo le risorse del tema del tuo sito WordPress in DigitalOcean Spaces e le stai servendo agli utenti finali che utilizzano la CDN. Possiamo confermare questo utilizzando Chrome's DevTools, seguendo la procedura descritta di seguito.

Usando il plugin Enabler CDN, puoi ripetere questo processo per altre directory di WordPress, come wp-includese anche il tutto wp-content directory.

Test della cache di CDN

In questa sezione, dimostreremo come determinare da dove vengono servite le risorse di WordPress (ad esempio il server host o il CDN) utilizzando DevTools di Google Chrome.

Step 1 — Adding Sample Image to Media Library to Test Syncing

To begin, we’ll first upload a sample image to our Media Library, and verify that it's being served from the DigitalOcean Spaces CDN servers. You can upload an image using the WordPress Admin web interface, or using the wp-cli command-line tool. In this guide, we’ll use wp-cli to upload the sample image.

Log in to your WordPress server using the command line, and navigate to the home directory for the non-root user you've configured. In this tutorial, we’ll use the user sammy.

From here, use curl to download the DigitalOcean logo to your Droplet (if you already have an image you'd like to test with, skip this step):

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

Now, use wp-cli to import the image to your Media Library:

  • wp media import --path=/ Var / www / html/ /home/sammy/do_logo.png

Be sure to replace / Var / www / html with the correct path to the directory containing your WordPress files.

You may see some warnings, but the output should end in the following:

Output

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

Which indicates that our test image has successfully been copied to the WordPress Media Library, and also uploaded to our DigitalOcean Space, using your preferred offload plugin.

Navigate to your DigitalOcean Space to confirm:

Spaces Upload Success

This indicates that your offload plugin is functioning as expected and automatically syncing WordPress uploads to your DigitalOcean Space. Note that the exact path to your Media Library uploads in the Space will depend on the plugin you’re using to offload your WordPress files.

Next, we will verify that this file is being served using the Spaces CDN, and not from the server running WordPress.

Step 2 — Inspecting Asset URL

From the WordPress admin area (https://your_domain/wp-admin), navigate to Pages in the left-hand side navigation menu.

We will create a sample page containing our uploaded image to determine where it's being served from. You can also run this test by adding the image to an existing page on your WordPress site.

From Pages screen, click into Sample Page, or any existing page. You can alternatively create a new page.

In the page editor, click on Add Media, and select the DigitalOcean logo (or other image you used to test this procedure).

A Attachment Details pane should appear on the right-hand side of your screen. From this pane, add the image to the page by clicking on Insert into page.

Now, back in the page editor, click on either Publish (if you created a new sample page) or To update (if you added the image to an existing page) in the Publish box on the right-hand side of your screen.

Now that the page has successfully been updated to contain the image, navigate to it by clicking on the Permalink under the page title. You'll be brought to this page in your web browser.

For the purposes of this tutorial, the following steps will assume that you're using Google Chrome, but you can use most modern web browsers to run a similar test.

From the rendered page preview in your browser, right click on the image and click on Inspect:

Inspect Menu

A DevTools window should pop up, highlighting the img asset in the page's HTML:

DevTools Output

You should see the CDN endpoint for your DigitalOcean Space in this URL (in this tutorial, our Spaces CDN endpoint is https://wordpress-offload.nyc3.cdn.digitaloceanspaces.com), indicating that the image asset is being served from the DigitalOcean Spaces CDN edge cache.

This confirms that your Media Library uploads are being synced to your DigitalOcean Space and served using the Spaces CDN.

From the DevTools window, we'll run one final test. Click on Network in the toolbar at the top of the window.

Once in the blank Network window, follow the displayed instructions to reload the page.

The page assets should populate in the window. Locate your test image in the list of page assets:

Chrome DevTools Asset List

Once you've located your test image, click into it to open an additional information pane. Within this pane, click on Headers to show the response headers for this asset:

Response Headers

You should see the Cache-Control HTTP header, which is a CDN response header. This confirms that this image was served from the Spaces CDN.

Step 4 — Inspecting URLs for Theme Assets (Optional)

If you offloaded your wp-themes (or other) directory as described in Offload Additional Assets, you should perform the following brief check to verify that your theme’s assets are being served from the Spaces CDN.

Navigate to your WordPress site in Google Chrome, and right-click anywhere in the page. In the menu that appears, click on Inspect.

You'll once again be brought to the Chrome DevTools interface.

Chrome DevTools Interface

From here, click into Sources.

In the left-hand pane, you should see a list of your WordPress site's assets. Scroll down to your CDN endpoint, and expand the list by clicking the small arrow next to the endpoint name:

DevTools Site Asset List

Observe that your WordPress theme's header image, JavaScript, and CSS stylesheet are now being served from the Spaces CDN.

Conclusion

In this tutorial, we've shown how to offload static content from your WordPress server to DigitalOcean Spaces, and serve this content using the Spaces CDN. In most cases, this should reduce bandwidth on your host infrastructure and speed up page loads for end users, especially those located further away geographically from your WordPress server.

We demonstrated how to offload and serve both Media Library and themes assets using the Spaces CDN, but these steps can be extended to further unload the entire wp-content directory, as well as wp-includes.

Implementing a CDN to deliver static assets is just one way to optimize your WordPress installation. Other plugins like W3 Total Cache can further speed up page loads and improve the SEO of your site. A helpful tool to measure your page load speed and improve it is Google's PageSpeed Insights. Another helpful tool that provides a waterfall breakdown of request and response times as well as suggested optimizations is Pingdom.

To learn more about Content Delivery Networks and how they work, consult Using a CDN to Speed Up Static Content Delivery.


Source link

Leave a Reply

Your email address will not be published.