In un precedente tutorial, vi abbiamo mostrato come scaricare i media su Amazon S3. Oggi vi mostreremo un paio di opzioni per scaricare i media del vostro sito WordPress su Google Cloud Storage; vedremo anche come servire i vostri media direttamente da Google Cloud Storage o da un CDN.

Visto Kinsta è alimentata dalla Google Cloud Platform, siamo ovviamente grandi fan della loro tecnologia e della loro infrastruttura. Il motivo principale per cui li abbiamo scelti è il risparmio di spazio su disco.

Google Cloud Storage è solo una piccola parte dei numerosi prodotti e servizi di Google Cloud Platform. Grazie alla massiccia infrastruttura di Google e al fatto che si occupano di storage massivo, sono in grado di offrire costi di archiviazione molto bassi. Molto più bassi di quelli di un host WordPress.

Di solito un cloud storage come questo viene usato per siti che hanno bisogno di backup aggiuntivi con una soluzione come il nostro add-on di backup esterno, o che servono file di grandi dimensioni (immagini, foto, download, software, video, giochi). Alcuni dei loro clienti includono Spotify, Vimeo, Coca-Cola, Philips, Evernote e Motorola.

Google Cloud Storage contro Google Cloud CDN

Google Cloud Storage non deve essere confuso con Google Cloud CDN o con qualsiasi altro provider CDN. Una rete di distribuzione dei contenuti (CDN) è progettata specificamente per accelerare la consegna dei vostri media, mentre Google Cloud Storage è progettato specificamente come soluzione di archiviazione di massa.

Tuttavia, Google Cloud Storage può velocizzare il vostro sito poiché utilizza quella che viene definita archiviazione multiregionale. Questo significa che il vostro contenuto di Google Cloud Storage è archiviato e consegnato da più sedi all’interno di quella specifica regione, in modo simile a un CDN. Utilizza anche la stessa tecnologia di edge cache. Tuttavia, è importante notare che questa non è globale e probabilmente avrà una maggiore latenza di una soluzione CDN completa. Google Cloud Storage vi consente di scegliere tra tre regioni:

  • Asia Pacifico
  • Unione europea
  • stati Uniti

Ma vi mostreremo di seguito come utilizzare anche un CDN insieme a Google Cloud Storage.

Se siete clienti di Kinsta, come parte della nostra integrazione con Cloudflare, Edge Caching salva la cache del vostro sito/pagina Kinsta in uno qualsiasi dei data center della rete globale di Cloudflare 260+.

Edge Caching è incluso gratuitamente in tutti i piani Kinsta, non richiede un plugin separato e riduce il tempo necessario per servire l’HTML di WordPress nella cache di una media di oltre il 50%!

Prezzi di Google Cloud Storage

Google Cloud Platform offre ai nuovi clienti una prova gratuita di 3 mesi del valore di $300. Se non siete mai stati clienti paganti di Google Cloud Platform, e non vi siete mai iscritti per la prova gratuita, allora avete i requisiti. Questo è un ottimo modo per testare Google Cloud Storage e vedere se va bene per il vostro sito, prima di pagare alcunché. Consultate le FAQ sulla prova gratuita e sui prezzi di Google Cloud Storage.

Prova gratuita di Google Cloud Platform
Prova gratuita di Google Cloud Platform

Configurazione su WordPress di Google Cloud Storage Setup: WP-Stateless

La prima opzione per integrare Google Cloud Storage sul vostro sito WordPress è usare il plugin gratuito WP-Stateless, sviluppato dall’incredibile squadra di Usability Dynamics.

Il plugin copia automaticamente i file dal vostro sito WordPress su Google Cloud Storage, man mano che questi vengono caricati nella libreria multimediale. Offre quindi diverse modalità, ad esempio il backup di una copia dei file multimediali o l’eliminazione dei contenuti multimediali da WordPress e la pubblicazione tramite Google Cloud Storage.

Il plugin per WordPress WP-Stateless
Il plugin per WordPress WP-Stateless

Questo plugin è ancora abbastanza recente ma gode già di un’ottima reputazione ed è mantenuto e aggiornato attivamente. Al momento della stesura di questo articolo, vanta oltre 2.000 installazioni attive con un impressionante valutazione di 5 su 5 stelle. É inoltre ufficialmente compatibile con i seguenti plugin di terze parti:

  • 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

Solo perché un plugin non è elencato qui sopra, però, non significa che non possa essere integrato con WP-Stateless. Quelli elencati sono semplicemente i plugin cui il team di UsabilityDynamics ha dedicato più tempo per risolvere bug e confermare la compatibilità. Tuttavia, consigliamo sempre di testare i nuovi plugin come questo prima in un ambiente di staging.

Passo 1

Per installare il plugin gratuito WP-Stateless, è possibile scaricarlo dalla repository di WordPress o cercando “WP-Stateless” nella dashboard di WordPress, alla voce “Aggiungi nuovo” plugin. Cliccate su “Installa Ora” e attivatelo.

Installazione del plugin WordPress WP-Stateless
Installazione del plugin WordPress WP-Stateless

Passo 2

Fate clic su “Begin Setup Assistant” (“Avvia Assistente Configurazione”). Oppure seguite le istruzioni di configurazione manuale.

Set-up di WP-Stateless
Set-up di WP-Stateless

Passo 3

Fate clic su “Google Login”. Dovreste utilizzare l’account Google che desiderate associare a questo sito web e approvare la richiesta di autorizzazione. Se non siete sicuri di concedere l’accesso al vostro account Google, consultate la documentazione relativa alla richiesta di autorizzazione. Se preferite non fornire l’accesso al vostro account Google, potete sempre procedere con la procedura di configurazione manuale.

Google login in WP-Stateless
Google login in WP-Stateless

Passo 4

Fate clic su “Consenti” (“Allow”) per consentire loro di visualizzare e gestire i vostri dati sui servizi di Google Cloud Platform. Nota: una volta completata la procedura di accesso dell’utente, non conservano alcuna token o credenziali di accesso.

Richiesta di consenso dell'account Google
Richiesta di consenso dell’account Google

Passo 5

WP-Stateless vi aiuterà a configurare il progetto e il bucket di Google Cloud, che archivierà i vostri file multimediali di WordPress.

  • Google Cloud Project: ogni Google Cloud Bucket è contenuto in un progetto. Potete creare un nuovo progetto o scegliere uno dei vostri progetti esistenti.
  • Google Cloud Bucket: tutti i vostri dati WordPress sono archiviati in un bucket. Potete creare un nuovo bucket o scegliere uno dei vostri bucket esistenti.
  • Località multi-regionale di Google Cloud Bucket: al bucket appena creato verrà fornita una classe di archiviazione multiregionale. Selezionate la regione più vicina alla maggioranza dei visitatori del vostro sito web.
  • Google Cloud Billing: se non avete un account di fatturazione, fate clic sul pulsante per configurarne uno. Non dimenticate che offrono una prova gratuita di 3 mesi del valore di $300.

Importante: se desiderate utilizzare il vostro dominio personale o la URL del CDN per Google Cloud Storage, assicuratevi di assegnare un nome al vostro bucket esattamente identico alla URL del dominio del CDN. Nome bucket: gcs.yourdomain.com. Vi verrà mostrato un avvertimento sui caratteri da usare, ma i punti possono essere utilizzati nei nomi dei bucket. Il nome deve solo iniziare e terminare con un carattere alfanumerico.

Progetto e Bucket in WP-Stateless
Progetto e Bucket in WP-Stateless

Una volta che avete configurato tutto, fate clic su “Continua”. Dovreste quindi ricevere la conferma che tutto è stato configurato correttamente.

Set-up di WP-Stateless
Set-up di WP-Stateless

Impostazioni di Google Cloud Storage con il Plugin WP-Stateless

Puoi trovare le impostazioni di WP-Stateless e Google Cloud Storage alla voce di menu “Media → Impostazioni Stateless”. Nella scheda “Impostazioni” dovrete configurare la modalità che preferite.

  • Disabled: disattiva il supporto stateless.
  • Backup: carica i file multimediali su Google Storage e fornisce le URL dei file locali.
  • CDN: copia i file multimediali su Google Storage e li servi direttamente da lì. Nota: non è possibile utilizzare contemporaneamente Kinsta CDN e questa opzione. Dovete scegliere l’uno o l’altro.
  • Stateless: archivia e serve i file multimediali solo con Google Cloud Storage. I file multimediali non sono archiviati localmente. Questa opzione vi farebbe risparmiare la maggior quantità di spazio su disco.
  • File URL Replacement: esegue la scansione dei contenuti e dei meta dati dei post durante la presentazione e sostituisce le URL dei file multimediali locali con le URL di Google Cloud Storage. Questa impostazione non modifica il vostro database.
Modalità WP-Stateless
Modalità WP-Stateless

Siete preoccupati di perdere i vostri file multimediali lungo la strada? Non preoccupatevi, il plugin ha una funzione di sincronizzazione (che analizzeremo più avanti) nel caso in cui vogliate tornare indietro. Potete anche riprendere le cartelle di caricamento di WordPress dallo stesso bucket di Google Cloud Storage, in quanto questo riproduce la struttura esatta della vostra media library (come mostrato di seguito).

WordPress bucket folders in Google Cloud Storage
WordPress bucket folders in Google Cloud Storage

Più in basso nella pagina ci sono le impostazioni aggiuntive:

  • Cache-Control: di default, questa impostazione è impostata su: public, max-age=36000, must-revalidate. Potete sovrascrivere questo valore se volete.
  • Delete GSC File: attivate questa opzione se desiderate che il file venga eliminato anche da GSC quando lo eliminate dalla libreria multimediale di WordPress.
  • File URL and Domain: sostituite il dominio GCS predefinito con il vostro dominio personale. Questo renderà necessario configurare un CNAME. Tenete presente che il nome del bucket e il nome del dominio devono corrispondere esattamente. Secondo quanto riportato nella documentazione, HTTPS non è supportato con un dominio personale, ma per noi ha funzionato.
  • Organization: organizza i caricamenti in cartelle basate su anno e mese.
  • Cache Busting: antepone un set casuale di numeri e lettere al nome del file. Questo è utile per evitare problemi di caching durante il caricamento di file con lo stesso nome.
Impostazioni aggiuntive di WP-Stateless
Impostazioni aggiuntive di WP-Stateless

Le immagini che caricate nella libreria multimediale di WordPress vengono copiate automaticamente su Google Cloud Storage. Tuttavia, dopo aver configurato il plugin per la prima volta, vorrete anche eseguire una sincronizzazione di massa. Alla voce “Media → Impostazioni Stateless → Sync” avete le seguenti opzioni:

  • Rigenera tutte le immagini stateless e sincronizza Google Storage con il server locale. (Nota: la prima volta questa opzione richiederà un po’ di tempo)
  • Sincronizza i file non di immagini tra Google Storage e il server locale.
  • Sincronizza i file delle librerie non multimediali tra Google Storage e il server locale.
WP-Stateless sync
WP-Stateless sync

Configurazione su WordPress di Google Cloud Storage Setup con WP Offload Media

La seconda opzione per integrare Google Cloud Storage con il vostro sito WordPress site è attraverso un altro grande plugin gratuito: WP Offload Media Lite (o WP Offload Media Premium), sviluppato da Delicious Brains Inc.

WP Offload Media WordPress plugin
WP Offload Media WordPress plugin

Con la versione lite di WP Offload Media, potete sicuramente soddisfare la maggior parte delle vostre esigenze; tuttavia, ci sono alcune caratteristiche interessanti di cui approfittare passando alla versione premium:

  • Supporto email PriorityExpert™ email support.
  • Caricamento della Libreria Media esistente all’archiviazione sul cloud.
  • Controllo dei file in cloud storage dalla Libreria Media.
  • Rimozione dei file dal server una volta scaricati in background.
  • Scaricamento e rimozione dal cloud storage.
  • Possibilità di copiare i file da un bucket all’altro del provider di archiviazione, in background.
  • Servire le risorse del sito (CSS, JS, immagini, font, etc) da CloudFront o da un altro CDN in in pochi clic grazie all’Assets Pull Addon.
  • Integrazioni con WooCommerce, WPML, Easy Digital Downloads, Meta Slider, Enable Media Replace, e Advanced Custom Fields.

Passo 1

Per installare il plugin gratuito WP Offload Media Lite, potete scaricarlo dalla repository WordPress o cercando “WP Offload Media Lite” nella vostra dashboard dei plugin WordPress, alla voce “Add New”. Fate clic su “Install Now” e attivatelo.

Installazione del plugin WP Offload Lite WordPress
Installazione del plugin WP Offload Lite WordPress

Passo 2

Seguite la guida di installazione per Google Cloud Storage:

Integrazione CDN e Google Cloud Storage

Vi preoccupa la performance di Google Cloud Storage? È vero che uno storage multi-regionale non sarà mai veloce come un normale CDN, e di sicuro non è la soluzione perfetta per gli utenti globali. Tuttavia, potete comunque usare il vostro CDN preferito per servire i file. Di seguito, ecco alcune opzioni per farlo.

Configurate WP-Stateless con KeyCDN

Seguite gli step qui di seguito in cui usiamo KeyCDN come esempio.

Importante: questo significa che vi verrà addebitata una commissione sia da Google Cloud Storage che dal vostro provider CDN, quindi probabilmente sarà bene fare due conti prima di procedere. Oppure, se stai utilizzando la versione di prova di Google Cloud Platform, questo è un ottimo modo per stimare i vostri costi senza ricevere una fattura da Google. Al momento questa opzione non funziona con Kinsta CDN.

  1. Impostate una nuova zona appositamente per i vostri media su Google Cloud Storage. Seguite il tutorial di KeyCDN sull’integrazione CDN di Google Cloud Storage. In pratica state utilizzando Google Cloud Storage come server di origine.
  2. Implementate Let’s Encrypt per HTTPS nella nuova zona.
  3. Impostate un nuovo alias di zona su KeyCDN. Esempio: gcs.yourdomain.com.
  4. Utilizzate il vostro alias di zona nelle impostazioni del plug-in WP-Stateless.

Il risultato sarò che KeyCDN ora distribuirà tutti i vostri file ospitati da Google Cloud Storage. Il problema delle prestazioni è risolto!

Google Cloud Storage e KeyCDN
Google Cloud Storage e KeyCDN

Dato che il plugin WP-Stateless gestisce solo la vostra libreria multimediale (immagini), potreste anche voler servire i vostri script (JS, CSS) tramite un CDN. Seguite semplicemente questi passaggi.

  1. Configurate per le risorse una zona separata con il vostro provider CDN, e utilizzate una URL diversa da quella precedente, ad esempio cdn.yourdomain.com.
  2. Installate un plugin WordPress per CDN che supporti le esclusioni: CDN enabler (gratuito), Perfmatters (premium), o WP Rocket (premium).
  3. Impostate esclusioni in modo che il vostro plugin CDN carichi solo CSS, JS, ecc. In questo modo il plugin WP-Stateless gestirà i vostri file multimediali e il plugin per la gestione del CDN gestirà i vostri asset.
Esclusioni CDN in Perfmatters
Esclusioni CDN in Perfmatters

Il risultato finale è che il vostro file multimediale sarà caricato dalla URL del vostro CDN personale (che viene prelevato da Google Cloud Storage) e le vostree risorse vengono caricate dall’altra URL del CDN personale. E se lavorando in modalità “Stateless”, il vostro sito WordPress non utilizzerà spazio su disco per le immagini. Ottimo!

Google Cloud Storage e CDN combo
Google Cloud Storage e CDN combo

Configurate WP Offload Media con Google Cloud CDN

Per impostazione predefinita, WP Offload Media è configurato per utilizzare degli URL grezzi di Google Cloud Storage al momento di servire i media scaricati. Questo vuol dire gli URL dei vostri media appariranno in modo simile:

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

Leggete il nostro tutorial su come configurare un dominio CDN personalizzato per Google Cloud Storage.