11. Content Delivery Network (CDN)
This guide covers the WPMU DEV Content Delivery Network (CDN) available with the Smush Pro and Hummingbird Pro plugins. Use the index on the left to navigate to specific sections.
This guide provides:
- A brief definition
- How to activate the WPMU DEV CDN in Smush and Hummingbird
- How to track and increase bandwidth
- How to verify the CDN is working & troubleshooting tips
- Tech specs
- WPMU DEV CDN usage notes
For more general information about the benefits of CDNs, how a CDN works, and CDN reviews watch the video below and check our blog.
11.1 What is a CDN?Link to chapter 1
A content delivery network (CDN) is a network of high-performance servers distributed around the globe. It’s designed to increase availability and site performance by storing and sharing your content with your visitors from geographically closer servers.
CDNs can be used to deliver a variety of content from web objects and media files to software and applications. The WPMU DEV CDN is specifically for delivering images and web objects (CSS, JS, scripts and other supported files).
11.2 WPMU DEV CDN Tech SpecsLink to chapter 2
The WPMU DEV CDN is built on StackPath and includes:
- 45 Edge Locations worldwide – high-density, layer-3, top-of-rack spine switches on 100% HP SSDs
- 65+ Tbps Total Throughput – 10/25/40/100Gbps connectivity
- 28,000+ Autonomous System Networks (ASN) – last-mile handoff rates: 95% (EU), 85% (USA)
- Full Stack Deployment – Each server location can perform all tasks, route, and scale on demand.
Edge locations include (cities have multiple locations):
- San Francisco
- San Jose
- Los Angeles
- Hong Kong
- Rio De Janeiro
- Sāo Paulo
11.3 How to Activate the WPMU DEV CDNLink to chapter 3
The WPMU DEV CDN can be configured to deliver images and static assets, such as JS and CSS files. The settings for the image CDN are located in the Smush Pro plugin and the web object settings are in Hummingbird Pro.
If you choose to use a third-party CDN, such as Cloudflare, ensure the content they serve does not overlap with the content being served from the WPMU DEV CDN or the site’s primary server. Multiple CDNs attempting to serve the same content is guaranteed to cause issues.
11.3.1 Smush ProLink to chapter 3
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.
Our blog post, How To Ace Google’s Image Page Speed Recommendations With Smush, focuses on Smush features that directly impact your Google Page Speed score.
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:
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
11.3.2 Hummingbird ProLink to chapter 3
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
11.3.3 WPMU DEV HostingLink to chapter 3
11.4 Bandwidth, Tracking & UpgradesLink to chapter 4
An allotment of WPMU DEV CDN bandwidth is included with your WPMU DEV plan. The included Bandwith amount will depend on the account you choose. Additional Smush bandwidth can be purchased from WPMU DEV Accounts > Add-ons.
If you’re interested in seeing exactly which sites are spending your precious bandwidth, you can check your usage chart in your Hub account. Click on your account gravatar in the top right-hand corner of the Hub, select My Account, and scroll to the bottom of the page to view your Bandwidth Share by Site chart.
This chart is an estimate of the share of bandwidth which is generated by each site. It is based only on the top 50 files across all your sites, each day, for the past 30 days.
11.4.1 Hummingbird Pro BandwidthLink to chapter 4
Hummingbird Pro includes unlimited WPMU DEV bandwidth for CSS and JS files. There are no overages, upgrades or need to track usage.
11.4.2 Smush Pro CDN BandwidthLink to chapter 4
Image CDN Bandwidth is calculated separately from the bandwidth provided with WPMU DEV hosting.
The bandwidth for Image CDN is measured on a continuous 30-day cycle. Every day the network measures the total amount of bandwidth used during the previous 30 days. If this check discovers that a site has exceeded its bandwidth limit during the previous 30 days, the CDN is automatically deactivated. Images will continue being served from the files stored locally to avoid downtime.
A deactivated CDN will automatically reactivate when the site’s bandwidth usage falls below the 30-day limit, which could be a relatively short period of time, since the site will cease to use bandwidth as soon as the CDN is deactivated.
11.4.3 Tracking BandwidthLink to chapter 4
It’s important to note that Smush CDN bandwidth is associated with your member API. Image bandwidth is a shared bucket across all the sites connected to your account.
If you need additional usage data please contact support.
A usage graph is available in your WPMU DEV Accounts under Add-ons.
As you can see, Smush CDN usage data falls into one of three categories:
- Requests – The number of times images were requested
- Bandwidth – Total image file size served through the CDN
- Cache Hits – Number of times a request was served a cached version of an image
The WPMU DEV CDN only bills for bandwidth usage.
11.4.4 Increasing BandwidthLink to chapter 4
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.
Scroll to the Add-ons section where you will find the graph shown below.
To upgrade your Smush CDN bandwidth, click the Manage button, then select the new limit and click Pay Now.
Available Smush CDN Upgrade Plans:
- 50GB – $5/m
- 100GB – $10/m
- 250GB – $20/m
- 500GB – $30/m
- 1TB – $50/m
- 5TB – $200/m
- 10TB – $350/m
Your Smush CDN bandwidth plan can be upgraded or downgraded at any time.
11.5 Important NotesLink to chapter 5
- If you are using Cloudflare, S3 or another 3rd-party CDN, deactivate overlapping features before running the WPMU DEV CDN in Smush Pro or Hummingbird Pro. Trying to serve content from multiple CDNs will cause your appearance to break.
- The Smush Pro image CDN will not work on a staging environment that is not publically accessible. This includes WPMU DEV Hosting.
- WPMU DEV Hosting bandwidth and WPMU DEV CDN bandwidth is tracked separately.
- CDN content is served over HTTPS.
- The WPMU DEV CDN Supports JPG, PNG, GIF, WebP, CSS, and JS files.
- Bandwidth usage is measured on a rolling 30-day cycle that does not reset on a specific day each month. There are no automatic overage charges. If you reach your bandwidth limit on a specific day your CDN will deactivate until your Bandwith drops bellow the account limit.
- The CDN is not active by default on WPMU DEV hosted sites.
- The WPMU DEV CDN is Multisite compatible across an entire network.
- Both Smush CDN and Hummingbird CDN require the Dashboard Plugin and for the site to be registered on the Hub.
11.6 Third-party CDNsLink to chapter 6
The Smush Pro and Hummingbird Pro are designed to work together, and we strongly recommend using them. However, members can use another CDN if they wish.
Smush also includes integration with the Amazon S3 image CDN. Contact support if you have questions or need help integrating with Amazon S3.
Members who choose to use third-party CDNs must ensure that the content they serve does not overlap with content being served from another CDN or the site’s primary server. For example, the Smush CDN serves only images, while the Hummingbird CDN serves virtually any content except images, so they work well together. Multiple CDNs attempting to serve the same content is guaranteed to cause issues.
11.7.1 API status queryLink to chapter 7
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, Hummingbird or both.
Running the query
To query your CDN status, paste the link below into a browser, replacing the bold text with your WMPU 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.
11.7.2 Locating your API keyLink to chapter 7
Your WPMU DEV API key can be found in a couple of places. WPMU DEV members will find their API Key in the Settings Tab of the WPMU DEV Dashboard on any connected site.
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 and scroll down to locate the API key.
11.7.3 Status reportLink to chapter 7
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 CDN to work properly, certain conditions should be met, and the status report includes status indicators for each condition.
The bandwidth used by the relevant account during the past 30 days 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.
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.
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.
11.7.4 Site MigrationLink to chapter 7
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.