WordPress Google Cloud Storage – How to Offload Your Media

In a previous tutorial, we showed you how to offload media to Amazon S3. Today we are going to walk you through a couple of options on how to offload media on your WordPress site to Google Cloud Storage, as well as optionally serving your media directly from Google Cloud Storage or a CDN.

Since Kinsta is powered by Google Cloud Platform we are obviously big fans of their technology and infrastructure. The main reason to do this is to save on disk space.

Google Cloud Storage is just a small part of Google Cloud Platform’s many products and services. Due to Google’s massive infrastructure and the fact that they deal with storage in bulk, they are able to offer very low storage costs. Much lower than a WordPress host.

Typically cloud storage like this is used for sites that either need additional backups with a solution like our external backups add-on, or are serving up large files (images, photos, downloads, software, videos, games). Some of their customers include Spotify, Vimeo, Coca-Cola, Philips, Evernote, and Motorola.

Google Cloud Storage vs Google Cloud CDN

Google Cloud Storage is not to be confused with Google Cloud CDN or any other CDN provider. A content delivery network (CDN) is designed specifically to speed up delivery of your media, whereas Google Cloud Storage is designed specifically as a bulk storage solution.

However, Google Cloud Storage can help speed up your site as it uses what is called multi-regional storage. This means your Google Cloud Storage content is stored on and delivered from multiple locations within that region, similar to a CDN. It even uses the same edge cache technology. However, it’s important to note that this isn’t global and will probably have higher latency than a full-fledged CDN solution. Google Cloud Storage lets you choose between three regions:

• Asia Pacific
• European Union
• United States

But we’ll show you below how to also use a CDN along with Google Cloud Storage.

Google Cloud Storage Pricing

Google Cloud Platform offers a 3-month, $300 free trial for new customers. If you have never been a paying customer of Google Cloud Platform and have not previously signed up for the free trial, you are eligible. This is a great way to test Google Cloud Storage and see if it is right for your site before having to pay anything. See free trial FAQs and Google Cloud Storage pricing.

WordPress Google Cloud Storage Setup with WP-Stateless

Your first option for integrating Google Cloud Storage with your WordPress site is to use the free WP-Stateless plugin, developed by the awesome team over at Usability Dynamics.

This plugin copies files from your WordPress site to Google Cloud Storage automatically as they are uploaded to the media library. It then offers different modes, such as backing up a copy of your media or even deleting the media from WordPress and serving up from Google Cloud Storage.

This plugin is still pretty new on the block but has a great reputation and is actively maintained and updated. As of writing this, it currently has over 2,000 active installs with an impressive 5 out of 5-star rating. It also offers official compatibility with the following third-party plugins:

• Easy Digital Downloads
• Imagify Image Optimizer
• ShortPixel Image Optimizer
• WPForms
• WP Smush
• Advanced Custom Fields Image Crop Addon
• SiteOrigin Widget Bundle
• SiteOrigin CSS
• Gravity Forms
• WPBakery Page Builder

Just because a plugin isn’t listed above doesn’t mean it won’t work with the integration. These are simply plugins that the UsabilityDynamics team has spent extra time on to fix bugs and confirm compatibility. However, we always recommend testing new plugins like this in a staging environment first.

Step 1

To install the free WP-Stateless plugin, you can download it from the WordPress repository or by searching for “WP-Stateless” within your WordPress dashboard under “Add New” plugins. Click on “Install Now” and activate it.

Step 2

Click on “Begin Setup Assistant.” Or you can follow their manual setup instructions.

Step 3

Click on “Google Login.” You should use the Google Account you want to be associated with this website and consent to the permissions request. If you’re unsure about granting access to your Google account, check out their documentation on the permissions request. If you prefer to not provide access to your Google account, you can always go with the manual setup process.

Step 4

Click on “Allow” for them to view and manage your data across Google Cloud Platform services. Note: Once the user login process is complete they do not retain any tokens or access credentials.

Step 5

WP-Stateless will then help you configure your Google Cloud project and bucket that will store your WordPress media files.

• Google Cloud Project: Each Google Cloud Bucket is contained within a project. You can create a new project or choose from one of your existing projects.
• Google Cloud Bucket: All your WordPress data is stored in a bucket. You can create a new bucket or choose from one of your existing buckets.
• Google Cloud Bucket Multi-Regional Location: Your newly created bucket will be provisioned with a multi-regional storage class. Select the region that is closest to the majority of your website’s visitors.
• Google Cloud Billing: If you don’t have a billing account click the button to set one up. Don’t forget they do offer a 3-month, $300 free trial.

Important: If you want to use your own custom domain or CDN URL for Google Cloud Storage make sure to name your bucket the exact same as your CDN domain URL. Bucket name: gcs.yourdomain.com. It will give you a warning about characters, but periods are OK to use in bucket names. It simply must start and end with an alphanumeric character.

Once you have configured everything above click “Continue.” You should then see a confirmation that everything is setup correctly.

Google Cloud Storage Settings in WP-Stateless Plugin

You can find the WP-Stateless and Google Cloud Storage settings under “Media → Stateless Settings.” Under the “Settings” tab you will want to configure the mode you prefer.

• Disabled: Disable Stateless Media.
• Backup: Upload media files to Google Storage and serve local file URLs.
• CDN: Copy media files to Google Storage and serve them directly from there. Note: You can’t use both Kinsta CDN and this option. You need to choose one or the other.
• Stateless: Store and serve media files with Google Cloud Storage only. Media files are not stored locally. This option would save you the most disk space.
• File URL Replacement: Scans post content and meta during the presentation and replaces local media file URLs with Google Cloud Storage URLs. This setting does not modify your database.

Worried about getting your media files later down the road? Don’t worry, the plugin has a sync feature (which we explore further below) in case you want to revert back. You can also always grab your WordPress upload folders from the Google Cloud Storage bucket itself as it simply mimics the exact appearance of your media library (as seen below).

Further down the page you have the additional settings:

• Cache-Control: By default, this is set to: public, max-age=36000, must-revalidate. You can override this if you want.
• Delete GSC File: Enable this option if you want the file deleted from GSC when you delete it from your WordPress media library.
• File URL and Domain: Replace the default GCS domain with your own custom domain. This will require you to configure a CNAME. Be advised that the bucket name and domain name must match exactly. According to their documentation HTTPS is not supported with a custom domain, but it worked fine for us.
• Organization: Organize uploads into year and month based folders.
• Cache Busting: Prepends a random set of numbers and letters to the filename. This is useful for preventing caching issues when uploading files that have the same filename.

Images you upload to your WordPress media library are automatically copied to Google Cloud Storage. However, after you first configure the plugin you will want to run a bulk sync. Under “Media → Stateless Settings → Sync” you have the following options:

• Regenerate all stateless images and synchronize Google Storage with the local server. (Note: this option will take a while the first time)
• Synchronize non-images files between Google Storage and the local server.
• Synchronize non-media library files between Google Storage and the local server.

Your second option for integrating Google Cloud Storage with your WordPress site is to use the equally awesome free WP Offload Media Lite plugin (or premium WP Offload Media) from Delicious Brains Inc.

You can definitely meet most of your needs with the lite version of WP Offload Media; however, there are some nice features if you upgrade to the premium version:

• PriorityExpert™ email support.
• Upload existing Media Library to cloud storage.
• Control cloud storage files from the Media Library.
• Remove files from the server once offloaded in the background.
• Download and remove from cloud storage.
• Copy files between buckets on your storage provider in the background.
• Serve site assets (CSS, JS, images, fonts, etc) from CloudFront or another CDN in just a few clicks with the Assets Pull Addon.
• Integrations with WooCommerce, WPML, Easy Digital Downloads, Meta Slider, Enable Media Replace, and Advanced Custom Fields.

Step 1

To install the free WP Offload Media Lite plugin, you can download it from the WordPress repository or by searching for “WP Offload Media Lite” within your WordPress dashboard under “Add New” plugins. Click on “Install Now” and activate it.

Step 2

Follow their quickstart instructions for Google Cloud Storage:

Google Cloud Storage CDN Integration

Worried about the performance of Google Cloud Storage? It’s true that multi-regional storage simply won’t be as fast as a normal CDN, and it’s definitely not great for global users. However, you can still deliver files via your favorite CDN provider. Below are a few different options.

Configure WP-Stateless with KeyCDN

Just follow the steps below in which we’ll be using KeyCDN as an example.

Important: This does mean you’ll be billed both by Google Cloud Storage and your CDN provider, so you’ll probably want to crunch the numbers beforehand. Or if you’re using the Google Cloud Platform trial, this is a great way to estimate your costs without being billed by Google. The following doesn’t currently work with Kinsta CDN.

1. Set up a new zone specifically for your Google Cloud Storage media. Follow KeyCDN’s tutorial on Google Cloud Storage CDN integration. Essentially you’re using Google Cloud Storage as your origin server.
2. Deploy Let’s Encrypt for HTTPS on the new zone.
3. Set up a new zone alias at KeyCDN. Example: gcs.yourdomain.com.
4. Use your zone alias in WP-Stateless plugin settings.

The result is that KeyCDN is now delivering all your Google Cloud Storage files. Performance problem solved!

Due to the fact that the WP-Stateless plugin only handles your media library (images) you probably also want to serve up your scripts (JS, CSS) via a CDN. Simply follow the steps below.

1. Configure a separate zone with your CDN provider for your assets and use a different URL from the one above, such as cdn.yourdomain.com.
2. Install a WordPress CDN plugin that supports exclusions: CDN enabler (free), Perfmatters (premium), or WP Rocket (premium).
3. Setup exclusions so that your CDN plugin only loads CSS, JS, etc. This way the WP-Stateless plugin handles your media files and the CDN plugin handles your assets.

The end result is that your media loads from your custom CDN URL (which is being pulled from Google Cloud Storage) and your assets load from your other custom CDN URL.  And if you’re running in “Stateless” mode your WordPress site won’t utilize any disk space for its images. Pretty cool!

Configure WP Offload Media with Google Cloud CDN

By default, WP Offload Media is configured to use raw Google Cloud Storage URLs when serving offloaded media. Your media URLs might look something like this:

http://storage.googleapis.com/bucket-name/wp-content/uploads/…

Check out their tutorial on how to set up a custom domain CDN for Google Cloud Storage.