WordPress Google Cloud Storage – How to Offload Your Media

Updated on July 19, 2018

In a previous tutorial, we showed you how to offload media to Amazon S3. Today we are going to walk you through 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 this is used for large sites that either need additional backups 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 12-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.

Google Cloud Platform free trial

Google Cloud Platform free trial

WordPress Google Cloud Storage Setup

For integration Google Cloud Storage with your WordPress site, we recommend using the free WP-Stateless plugin, developed by the awesome team over at Usability Dynamics. The 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.

WP-Stateless WordPress plugin

WP-Stateless WordPress plugin

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.

Install WP-Stateless WordPress plugin

Install WP-Stateless WordPress plugin

Step 2

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

WP-Stateless setup

WP-Stateless setup

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.

WP-Stateless Google login

WP-Stateless Google login

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.

Google account permissions request

Google account permissions request

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 12-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.

WP-Stateless Project and Bucket

WP-Stateless Project and Bucket

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

WP-Stateless setup

WP-Stateless setup

Google Cloud Storage Settings

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.
WP-Stateless mode

WP-Stateless mode

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).

Google Cloud Storage WordPress bucket folders

Google Cloud Storage WordPress bucket folders

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.
WP-Stateless additional settings

WP-Stateless additional settings

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.
WP-Stateless sync

WP-Stateless sync

Google Cloud Storage CDN Integration

Worried about 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. 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 before hand. 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!

Google Cloud Storage and KeyCDN

Google Cloud Storage and KeyCDN

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.
CDN exclusions in Perfmatters

CDN exclusions in Perfmatters

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!

Google Cloud Storage and CDN combo

Google Cloud Storage and CDN combo

Was this article helpful?
No, or there was something off

Hand-picked related articles

Use WordPress?

Use WordPress?

Join 20,000+ others who get our FREE weekly newsletter with WordPress tips on how to drive more traffic and revenue to your business!

Consent

You have Successfully Subscribed!

Send this to a friend