In de vorige tutorial lieten we zien hoe je media kunt offloaden naar Amazon S3. Vandaag bespreken we enkele opties waarmee je media kunt offloaden van je WordPress-website naar Google Cloud Storage, alsook de optie om je media direct te laden vanaf Google Cloud Storage of een CDN.

Aangezien Kinsta wordt ondersteund door het Google Cloud Platform zijn we natuurlijk groot fan van hun technologie en infrastructuur. De voornaamste reden om dit te doen is om te besparen op opslagruimte.

Google Cloud Storage is slechts een klein deel van de vele producten en diensten die Google Cloud Platform levert. Vanwege de enorme infrastructuur van Google en het feit dat ze opslag in enorme volumes managen, is Google in staat om bijzonder lage prijzen te rekenen voor opslag. Veel lagere prijzen dan een WordPress-host.

Meestal wordt cloudopslag zoals deze gebruikt voor sites die ofwel extra back-ups nodig hebben met een oplossing zoals onze externe back-up addon, of grote bestanden moeten leveren (afbeeldingen, foto’s, downloads, software, video’s, games). Een aantal van hun meest bekende klanten zijn Spotify, Vimeo, Coca-Cola, Philips, Evernote en Motorola.

Google Cloud Storage vs. Google Cloud CDN

Google Cloud Storage moet niet verward worden met Google Cloud CDN of een andere CDN-aanbieder. Een Content Delivery Network (CDN) is specifiek ontworpen om je media sneller te laten laden, terwijl Google Cloud Storage specifiek is ontworpen als een oplossing voor grote opslagvolumes.

Desalniettemin kan Google Cloud Storage wel helpen om je website sneller te maken, doordat het gebruik maakt van zogeheten multi-regionale opslag. Dit betekent dat content binnen Google Cloud Storage wordt opgeslagen op en geladen vanaf meerdere locaties binnen een regio, net als een CDN dat doet. Het gebruikt zelfs dezelfde technologie om te cachen. Maar het is belangrijk om op te merken dat dit niet over de hele wereld werkt en waarschijnlijk een hogere netwerklatentie zal hebben dan een volwaardige CDN-oplossing. Google Cloud Storage laat je kiezen tussen drie regio’s:

  • Azië/Oceanië
  • Europese Unie
  • Verenigde Staten

Maar we zullen je hieronder laten zien hoe je ook een CDN kunt gebruiken naast Google Cloud Storage.

Als je een Kinsta klant bent, als onderdeel van onze Cloudflare integratie, slaat Edge Caching je Kinsta site/pagina cache op in een van Cloudflare’s wereldwijde netwerk van 260+ datacenters.

Edge Caching is gratis inbegrepen bij alle Kinsta pakketten, vereist geen aparte plugin, en vermindert de tijd die nodig is om gecachete WordPress HTML te leveren met gemiddeld meer dan 50%!

Kosten van Google Cloud Storage

Google Cloud Platform biedt een  gratis proefperiode aan van 3 maanden, ter waarde van $300, voor nieuwe klanten. Als je nog nooit een betalende klant bent geweest bij Google Cloud Platform en je je nog niet eerder hebt geregistreerd voor de gratis proefperiode, kom je hiervoor in aanmerking. Dit is een perfecte manier om Google Cloud Storage te testen en te kijken of het goed werkt met jouw website, zonder dat je iets hoeft te betalen. Zie de FAQs voor de probeerversie en kosten van Google Cloud Storage.

Google Cloud gratis proefversie
Google Cloud gratis proefversie.

WordPress Google Cloud Storage in combinatie met WP-Stateless

De eerste optie die je hebt om Google Cloud Storage te integreren met je WordPress-website is door de gratis WP-Stateless-plugin te gebruiken, ontworpen door het geweldige team van Usability Dynamics.

Deze plugin kopieert automatisch bestanden van je WordPress-website naar Google Cloud Storage zodra ze in de mediabibliotheek worden geladen. Daarna biedt de plugin verschillende opties, zoals het maken van een back-up van je media of zelfs het verwijderen van je media van WordPress en de media direct laden vanaf Google Cloud Storage.

WP-Stateless WordPress-plugin
WP-Stateless WordPress-plugin

Deze plugin is nog vrij nieuw, maar heeft al een prima reputatie en wordt actief onderhouden en verbeterd. Op het moment dat we dit schrijven heeft het 2000 actieve installaties met een indrukwekkende sterbeoordeling van 5 van 5. De plugin biedt ook officiële compatibiliteit met de volgende plugins:

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

Als een plugin niet hierboven wordt genoemd, betekent dat nog niet per sé dat deze niet zal werken. Dit zijn alleen de plugins waar het team van UsabilityDynamics extra tijd in heeft gestopt om bugs op te lossen en je van compatibiliteit te kunnen verzekeren. Toch raden we altijd aan om nieuwe plugins zoals deze eerst te testen in een proefomgeving.

Stap 1

Het installeren van de gratis WP-Stateless plugin doe je door deze te downloaden van de WordPress-verzameling of door te zoeken op “WP-Stateless” binnen je WordPress-dashboard onder “Add New Plugins”. Klik op “Install Now” en activeer de plugin.

Het installeren van de WP-Stateless WordPress-plugin
Het installeren van de WP-Stateless WordPress-plugin

Stap 2

Klik op “Begin Setup Assistant”. Je kunt ook hun instructies voor een handmatige installatie volgen.

WP-Stateless setup
WP-Stateless setup

Stap 3

Klik op “Google Login”. Je moet het Google-account gebruiken dat je wilt verbinden aan deze website en je moet toestemming geven voor alle verzoeken voor toegang. Als je twijfelt over het toegang geven tot je Google-account, lees dan de documentatie over het verzoek tot toegang. Als je liever geen toegang geeft tot je Google-account, dan kun je ook altijd nog gaan voor het handmatige installatieproces.

WP-Stateless Google login
WP-Stateless Google login

Stap 4

Klik op “Toestaan” zodat ze je data binnen alle Google Cloud Platform-diensten kunnen zien en managen. Opmerking: Zodra het inlogproces doorlopen is bewaren ze verder geen tokens of inloggegevens.

Verzoek om toegang tot je Google-account
Verzoek om toegang tot je Google-account

Stap 5

WP-Stateless helpt je bij het configureren van je Google Cloud-project en de zogeheten ‘bucket’ die al je WordPress-mediabestanden zal opslaan.

  • Google Cloud-project: Elke Google Cloud Bucket bevindt zich binnen een project. Je kunt een nieuw project aanmaken of eentje kiezen uit je al bestaande projecten.
  • Google Cloud Bucket: Al je WordPress-data wordt opgeslagen in een bucket. Je kunt een nieuwe bucket maken of eentje kiezen uit je al bestaande buckets.
  • Google Cloud Bucket multi-regionale locatie:Je nieuwe bucket zal voorzien worden van een multi-regionale opslag class. Selecteer een regio die zo dicht mogelijk bij de meerderheid van je bezoekers is.
  • Google Cloud facturering:Als je geen account hebt voor de facturering, klik dan op de knop om er één in te stellen. Vergeet niet dat ze een proefversie aanbieden van 3 maanden lang die $300 waard is.

Belangrijk: Als je je eigen aangepaste domeinnaam of CDN URL wilt gebruiken bij Google Cloud Storage, zorg er dan voor dat je bucket exact dezelfde naam heeft als je CDN domein-URL. Bucketnaam: gcs.jouwdomein.com. Je zult een waarschuwing krijgen als je leestekens probeert te gebruiken, maar punten zijn geen probleem bij bucketnamen. Zolang het maar begint en eindigt met een cijfer of een letter.

WP-Stateless project en bucket
WP-Stateless project en bucket

Zodra je alles hebt geconfigureerd klik je op “Continue”. Je zou dan een bevestiging moeten krijgen dat alles goed ingesteld is.

WP-Stateless setup
WP-Stateless setup

Google Cloud Storage instellingen bij de WP-Stateless plugin

Je vindt de WP-Stateless en Google Cloud Storage instelling bij “Media → Stateless Settings.” Onder de “Settings”-tab kun je de modus instellen die je wilt hebben.

  • Uitgeschakeld:Uitschakelen van Stateless Media.
  • Back-up:Upload mediabestanden naar Google Storage en laad lokale URL’s van je bestanden.
  • CDN:Kopieer mediabestanden naar Google Storage en laad ze direct daarvandaan. Opmerking: Je kunt niet deze optie én de Kinsta CDN tegelijk gebruiken. Je moet of de één of de ander kiezen.
  • Stateless:Gebruik uitsluitend Google Cloud Storage om de mediabestanden op te slaan en te laden. Mediabestanden worden niet lokaal opgeslagen. Met deze optie bespaar je de meeste opslagruimte.
  • Vervangen van de bestands-URL:Scant de content en metadata van artikelen tijdens de presentatie en vervangt lokale URL’s van mediabestanden met URL’s van Google Cloud Storage. Deze instelling verandert niets aan je database.
WP-Stateless modus
WP-Stateless modus

Maak je je zorgen of je je mediabestanden later nog wel weer kan terughalen? Maak je geen zorgen, de plugin heeft een synchronisatie-feature (hier hebben we het later meer over) mocht je naar een oude versie terug willen gaan. Je kunt ook nog altijd je WordPress-uploadmappen terughalen van de Google Cloud Storage Bucket zelf, aangezien het eenvoudigweg je mediabibliotheek nabootst (zoals je hieronder kunt zien).

Google Cloud Storage WordPress bucket mappen
Google Cloud Storage WordPress bucket mappen

Verder naar beneden op de pagina heb je nog enkele aanvullende instellingen:

  • Cache-Control: Dit staat standaard op: public, max-age=36000, must-revalidate. Dit kun je veranderen als je wilt.
  • Delete Google Cloud Storage File: Schakel deze optie in als je wilt dat het bestand wordt verwijderd van GCS wanneer je het verwijdert van je WordPress-mediabibliotheek.
  • File URL en Domain: Vervang het standaard GCS-domein met je zelfgekozen domein. Hiervoor moet je wel een CNAME Let erop dat de naam van de bucket en de naam van het domein exact hetzelfde zijn. Volgens de documentatie wordt HTTPS niet ondersteund met een aangepast domein, maar bij ons werkte het prima.
  • Organization: Organiseer je uploads in mappen gebaseerd op jaar en maand.
  • Cache Busting: Voegt een willekeurige set cijfers en letters toe aan het begin van de bestandsnaam. Dit is vooral handig om te voorkomen dat je problemen krijgt bij het cachen wanneer je bestanden uploadt met dezelfde bestandsnaam.
Aanvullende instellingen van WP-Stateless
Aanvullende instellingen van WP-Stateless

Afbeeldingen die je uploadt naar je WordPress-mediabibliotheek worden automatisch gekopieerd naar Google Cloud Storage. Maar nadat je de plugin voor het eerst hebt geconfigureerd zul je een massa-synchronisatie willen doen. Onder “Media → Stateless Settings → Sync” heb je de volgende opties:

  • Laad alle stateless afbeeldingen opnieuw en synchroniseer Google Storage met de lokale server. (let op: deze optie zal een tijd duren de eerste keer)
  • Synchroniseer alle bestanden die geen afbeeldingen zijn tussen Google Storage en de lokale server.
  • Synchroniseer alle bestanden die geen media zijn tussen Google Storage en de lokale server.
WP-Stateless sync
WP-Stateless sync

WordPress Google Cloud Storage instellen met WP Offload Media

De tweede mogelijkheid om Google Cloud Storage te integreren met je WordPress-website is het gebruiken van de net zo gave én gratis WP Offload Media Lite plugin (of de premium WP Offload Media) van Delicious Brains Inc.

WP Offload Media WordPress-plugin
WP Offload Media WordPress-plugin

Met de lite-versie van deze plugin zul je zeker aan de meeste van je behoeften kunnen voldoen; maar er zijn nog wat handige features als je upgrade naar de premium-versie:

  • PriorityExpert™ e-mailondersteuning.
  • Upload je bestaande mediabibliotheek naar de cloudopslag.
  • Manage de bestanden op de cloudopslag vanuit de mediabibliotheek.
  • Verwijder bestanden van de server zodra het offloaden klaar is in de achtergrond.
  • Download en verwijder van de cloudopslag.
  • Kopieer bestanden tussen buckets van je storage-provider in de achtergrond.
  • Laad site assets (CSS, JS, afbeeldingen, fonts, etc.) vanaf CloudFront of een andere CDN in slechts enkele klikken met de Assets Pull Addon.
  • Integraties met WooCommerce, WPML, Easy Digital Downloads, Meta Slider, Enable Media Replace, en Advanced Custom Fields.

Stap 1

Het installeren van de gratis WP Offload Media Lite plugin doe je door deze te downloaden van de WordPress-bibliotheek of door te zoeken op “WP Offload Media Lite” binnen je WordPress-dashboard onder “Add New Plugins”. Klik op “Install Now” en activeer de plugin.

Installeren van de WP Offload Lite WordPress-plugin
Installeren van de WP Offload Lite WordPress-plugin

Stap 2

Volg hun snelstart-instructies voor Google Cloud Storage:

Google Cloud Storage CDN-integratie

Maak je je zorgen over de prestaties van Google Cloud Storage? Het is waar dat multi-regionale opslag simpelweg nooit zo snel zal zijn als een normale CDN, en het is zeker geen goed idee voor wereldwijde gebruikers. Maar je kunt nog steeds bestanden laden via je favoriete CDN-provider. Hieronder enkele verschillende opties:

Configureer WP-Stateless met KeyCDN

Volg de stappen hieronder, waarbij we KeyCDN gebruiken als voorbeeld.

Belangrijk: Dit betekent dat je een rekening zult krijgen van zowel Google Cloud Storage als je CDN-provider, dus maak van tevoren wel even een kostenplaatje. Als je de proefversie van Google Cloud Platform gebruikt, is dit een goede manier om je kosten in te schatten zonder dat je daadwerkelijk een rekening krijgt van Google. Deze optie hieronder werkt op het moment nog niet met Kinsta CDN.

  1. Configureer een nieuwe zone specifiek voor je Google Cloud Storage media. Volg de tutorial van KeyCDN over de integratie van CDN met Google Cloud Storage. In de basis gebruik je nu Google Cloud Storage als je originele server.
  2. Implementeer Let’s Encrypt voor HTTPS in de nieuwe zone.
  3. Configureer een nieuwe alias voor de zone bij KeyCDN. Bijvoorbeeld: jouwdomein.com.
  4. Gebruik de nieuwe alias voor de zone bij de instellingen voor de WP-Stateless plugin.

Het resultaat is dat KeyCDN nu al je Google Cloud Storage bestanden levert. Probleem met prestaties opgelost!

Google Cloud Storage en KeyCDN
Google Cloud Storage en KeyCDN

Vanwege het feit dat de WP-Stateless plugin alleen maar werkt met je mediabibliotheek (afbeeldingen) zul je je scripts (JS, CSS) willen laden via een CDN. Volg gewoon de stappen hieronder.

  1. Configureer een aparte zone bij je CDN-provider voor je assets en gebruik een andere URL dan die hierboven, bijvoorbeeld yourdomain.com.
  2. Installeer een WordPress-plugin voor een CDN die uitzonderingen ondersteunt. CDN enabler(gratis), Perfmatters (premium), of WP Rocket (premium).
  3. Configureer uitzonderingen zodat je CDN-plugin alleen CSS, JS en dergelijke laadt. Op deze manier doet de WP-Stateless plugin alle mediabestanden en de CDN-plugin al je assets.
CDN uitzondering bij Perfmatters
CDN uitzondering bij Perfmatters

Het eindresultaat is dat je media laadt vanaf je aangepaste CDN URL (die vanaf je Google Cloud Storage wordt gehaald) en je assets laden vanaf je andere aangepaste CDN URL. En als je draait in “Stateless” modus zal je WordPress-website geen opslagruimte gebruiken voor afbeeldingen. Best handig!

Combinatie van Google Cloud Storage en CDN
Combinatie van Google Cloud Storage en CDN

Configureer WP Offload Media met Google Cloud CDN

WP Offload Media is standaard geconfigureerd om ruwe Google Cloud Storage URL’s te gebruiken bij het leveren van media. Je media-URL’s zullen er ongeveer zo uitzien:

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

Bekijk hun tutorial over hoe je een aangepaste domein CDN voor Google Cloud Storage kunt instellen.