4. Content Delivery Network (CDN)

This section will cover activating the Smush CDN. For a complete guide to configuring Smush Pro, visit the Smush usage documentation and learn more about image optimization from the free Ultimate Guide to Image Optimization.

Note that the Smush CDN is only available with the Pro version.

To enable the image CDN, in the Smush Pro dashboard, click the CDN tab in the Admin Menu, then click Get Started.

The, “Your media is currently being served from the WPMU DEV CDN.” message will display when your CDN is running successfully.

In addition to serving your images closer to your visitors, the Smush Pro image CDN includes:

• Automatic resizing – If your images don’t match their containers, we’ll automatically serve a correctly sized image.
• WebP Conversion – Automatically convert and serve your images as WebP NextGen format to compatible browsers.

The Smush Image CDN Supports the following file formats:

• JPG
• PNG
• GIF
• WebP

To verify your image is being served from the Smush CDN, in Chrome or Firefox, right-click on the image and click Inspect. Images being served by the Smush CDN start with xxxxxx.smushcdn.com.

This section provides guidance to quickly activate the Hummingbird Pro CDN. See our Hummingbird usage documentation for guidance configuring the plugin’s other features and visit the blog to learn How to Use Google’s Speed Index to Improve WordPress Performance.

Note, that the Hummingbird CDN is only available with the Pro version.

To enable the Hummingbird CDN, from the Hummingbird Pro Dashboard click Asset Optimization, then click Enable WPMU DEV CDN.

Enabling the CDN will serve your CSS and JS files from the WPMU DEV CDN taking the load off your server so that pages load faster for your visitors.

To verify your files are being served from the Hummingbird CDN, in Chrome or Firefox, right-click on the page and click View Page Source. Use Cmnd+f or ctrl+f to search the source code for hb.wpmucdn.com.

CSS and JS files served from the WPMU DEV CDN begin with hb.wpmucdn.com

Hummingbird Pro includes unlimited WPMU DEV bandwidth for CSS and JS files. There are no overages, upgrades or need to track usage.

Smush CDN bandwidth is calculated separately from Hummingbird bandwidth, which is included in your membership.

The bandwidth for Smush CDN is measured for the current calendar month. The network monitors the total amount of bandwidth used every day by all sites in your account where the Smush CDN is active.

If this check discovers that your account has exceeded its bandwidth limit during the current month, the CDN is automatically deactivated on all sites. If that happens, images will switch to being served from the files stored locally, so visitors won’t see any image content missing from your site pages.

Note however that some page builders and/or caching plugins might still have the CDN URLs cached, so you’ll want to clear all caches if you do see broken images on your site(s).

A deactivated CDN will automatically reactivate on the 1st of the following calendar month, and the CDN bandwidth will reset to zero at that time. You can also reactivate the CDN by increasing your available bandwidth.

You can monitor usage and increase the bandwidth limit from the Add-Ons section of your account. Click your avatar in the upper right corner and select My Account from the drop-down menu.

Then, under the Add-Ons tab, click the Manage link in the Smush CDN row.

That will pop open a modal window where you can select the bandwidth upgrade package that best suits your growing needs.

Available Smush CDN Upgrade Plans:

• 50GB/mo
• 100GB/mo
• 250GB/mo
• 500GB/mo
• 1TB/mo
• 5TB/mo
• 10TB/mo

Your Smush CDN bandwidth plan can be upgraded or downgraded at any time.

The cause of many CDN issues can be quickly identified by querying the API for status.

Before running the query, conduct an initial assessment of the site:

• • Verify that there are no issues on the browser console page.
  • Verfiy that the CDN is enabled in Smush.

Running the query

To query your CDN status, paste the link below into a browser, replacing the bold text with your WPMU DEV API key and a domain name as indicated in the image.

For multisite networks, enter the domain for the main domain only. Entering a subsite will not return usage for just that site because bandwidth is tied to a user account (API), not an individual site.
https://wpmudev.com/api/smush/v1/check/api_key/?domain=domain

Locating your API key

Your WPMU DEV API key can be found in a couple of places. You’ll find it under the Settings Tab of the WPMU DEV Dashboard on any site connected to your Hub.

Your API key is also located on your account page. Click your avatar in the upper right corner of your browser, then click My Account. You’ll find your API Key displayed under the Details & API Key tab.

Status report

Insert the API and the domain in question into the link and then insert the link into your browser. It will return a status report in your browser similar to the one in the image below.

For the Smush CDN to work properly, certain conditions should be met, and the status report includes status indicators for each condition.

{
"success":true,
"data":{
"limit":32,
"cdn_enabled":true,
"site_id":"1311932",
"endpoint_url":"743247.smushcdn.com"
"bandwidth_plan":10,
"bandwidth":"17706999",
"hits":"392",
"cache_misses":"314"
}
}

Condition 1

The bandwidth used by the relevant account during the current calendar month cannot exceed the bandwidth plan limit.

We can see from "bandwidth_plan":10, in the report above that this account is on the default 10GB plan. This data, coupled with the indicator for usage (see below), allows you to determine if you’re exceeding your bandwidth or getting close to doing so. If you expected to see more bandwidth, perhaps because you upgraded your plan, and it isn’t reflected here, there is likely a billing problem.

We can see from "bandwidth":"17706999", that only 1.7GB of this member’s 10GB has been used. So, no bandwidth limit issues here.

Condition 2

The site or network ID must be defined.

We can see from "site_id":"1311932", that a site ID is present. If the status here were "site_id":false, that would prevent the CDN from working. Once the site ID has been added, there is no reason for it to become false again, even if the CDN is deactivated. A false ID status would indicate an API cron issue. Support can verify that a zone has been created for the user and is functioning properly.

Condition 3

The CDN needs to be enabled.

We can see from "cdn_enabled":true, that the CDN is enabled for this user. Therefore, "cdn_enabled":false, would indicate that the CDN has been deactivated for this user. If this status is true, and for example, your images are not being served from Smush, you know that the issue most likely within Smush, because the CDN is all good.

Things often get stuck in cache when migrating your site from one host to another.

After migrating a website with the WPMU DEV CDN active in Smush Pro and/or Hummingbird Pro, disable the CDN features, clear ALL caches on the site, then re-enable CDNs again.

If you replace an image file on your site with the same name as one that has already been cached by the CDN, the old cached version will still be served.

So if you do need to replace one or more images that have already been cached by the CDN, you will need to ensure that you upload them with filenames that differ from the originals.

That way, the new images will get cached and delivered by the CDN instead of the old ones.