En un tutorial anterior, le mostramos cómo descargar archivos multimedia a Amazon S3. El día de hoy, le enseñaremos de un par de opciones sobre cómo descargar estos archivos multimedia en su sitio de WordPress al Google Cloud Storage, así como servir de forma opcional sus archivos multimedia directamente desde su Google Cloud Storage o una CDN.

Ya que Kinsta funciona gracias a Google Cloud Platform, obviamente somos fans de su tecnología e infraestructura. La razón principal para hacer esto es ahorrar espacio de almacenamiento en el disco.

El Google Cloud Storage es una pequeña parte de todos los productos y servicios del Google Cloud Platform. Debido a la infraestructura masiva de Google y por el simple hecho de que lidian con almacenamiento en masa, ellos tienen la opción de poder ofrecer almacenamiento a muy bajo costo. Mucho menos que un host de WordPress.

Típicamente el almacenamiento en la nube como este se usa para sitios que necesitan copias de seguridad adicionales con una solución como nuestro complemento de copias de seguridad externas, o que sirven archivos grandes (imágenes, fotos, descargas, software, videos, juegos). Algunos de sus clientes incluyen, Spotify, Vimeo, Coca-Cola, Philips, Evernote y Motorola.

Google Cloud Storage vs Google Cloud CDN

Google Cloud Storage no debe ser confundido con el Google Cloud CDN o cualquier otro proveedor de CDN. Una red de entrega de contenido (CDN) es diseñada específicamente para acelerar la entrega de sus archivos multimedia. Mientras que el Google Cloud Storage está diseñado específicamente para servir como una solución de almacenamiento en masa.

Sin embargo, Google Cloud Storage puede ayudar a incrementar la velocidad de su sitio, ya que usa un sistema de almacenamiento multi-regional. Esto quiere decir, que el contenido en Google Cloud Storage es almacenado y distribuido a múltiples ubicaciones dentro de esa región, similar al CDN. Incluso utiliza la misma tecnología de caché edge. Sin embargo, es importante tomar en cuenta que este no es global y tendrá mayor latencia que una solución completa de CDN. El Google Cloud Storage le permite elegir entre tres regiones:

  • Asia Pacifico
  • Unión Europea
  • Estados Unidos

Pero, le mostraremos a continuación cómo utilizar su CDN junto con Google Cloud Storage.

Si eres cliente de Kinsta, como parte de nuestra integración con Cloudflare, Edge Caching guarda el caché de tu sitio/página de Kinsta en cualquiera de los 260+ centros de datos de la red global de Cloudflare.

Edge Caching se incluye de forma gratuita con todos los planes de Kinsta, no requiere un plugin independiente y reduce el tiempo necesario para servir el HTML de WordPress en caché ¡en más de un 50% de media!

Los Precios de Google Cloud Storage

Google Cloud Platform ofrece una prueba gratuita de 3 meses por un precio inicial de $300, para clientes nuevos. Si usted nunca ha sido un cliente que paga por los servicios del Google Cloud Platform y no se ha inscrito anteriormente para recibir la prueba gratuita entonces, usted tendrá derecho a esta prueba. Esta una buena forma para poner a prueba el Google Cloud Storage y ver si es la mejor solución para su sitio, mucho antes de pagar por él. Vea el FAQ de la muestra gratuita y el precio de Google Cloud Storage.

Prueba gratuita de Google Cloud
Prueba gratuita de Google Cloud.

Configurar Google Cloud Storage en WordPress con WP-Stateless

Su primera opción para integrar Google Cloud Storage con su sitio de WordPress es usar el plugin gratuito WP-Stateless, desarrollado por el increíble equipo de Usabilidad Dynamics.

Esta plugin copia archivos del sitio de WordPress al Google Cloud Storage de forma automática, en el transcurso en que son subidos a la biblioteca de multimedia. Luego, este ofrece modos distintos, tal y como la opción de poder respaldar una copia de su multimedia o incluso borrar estos archivos de su WordPress y servir desde el Google Cloud Storage.

WP-Stateless WordPress plugin
WP-Stateless WordPress plugin

El plugin es relativamente nuevo, pero ya cuenta con una excelente reputación y es activamente mantenido y actualizado. Durante la creación de este articulo, ya cuenta con más de 2,000 instalaciones activas con una impresionante calificación de 5 estrellas de 5. También ofrece compatibilidad oficial con los siguientes plugins de otras compañías:

  • 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 porque un plugin no se encuentra en esta lista, no quiere decir que no vaya a funcionar con la integración. Estos, simplemente son plugins que el equipo de UsabilityDinamics se ha tomado tiempo extra para arreglar bugs y confirmar la compatibilidad. Sin embargo, siempre recomendamos probar plugins nuevos, como este, en el entorno de staging primero.

Paso 1

Para instalar el plugin gratuito de WP-Stateless, usted puede descargarlo del repositorio de WordPress o buscarlo como “WP-Stateless” dentro del dashboard de su WordPress, bajo la sección de “Agregar Nuevo” plugin. Haga clic en “Instalar Ahora” y actívelo.

Instalando el plugin WP-Stateless de WordPress
Instalando el plugin WP-Stateless de WordPress

Paso 2

Haga clic en “Iniciar Asistente de Planeación.” O puede seguir las instrucciones para una configuración manual.

WP-Stateless ajustes
WP-Stateless ajustes

Paso 3

Dé clic en “Iniciar Sesión con Google.” Usted debería usar la cuenta de Google con la que preferiría estar asociado con este sitio web y dar consentimiento a los permisos de petición. Si usted no está seguro que quiera brindar acceso a su cuenta de Google, cheque su documentación en petición de permisos. Si usted prefiere no brindar acceso a su cuenta de Google, usted siempre podrá ir con el proceso instalación manual.

WP-Stateless Google login
WP-Stateless Google login

Paso 4

Haga clic en “Permitir” para poder ver y administrar sus datos a través de los servicios de Google Cloud Platform. Nota: Una vez que el inicio de sesión de usuario esté completo, estos no retendrán ni un dato o credencial de acceso.

Petición de permiso de cuenta de Google
Petición de permiso de cuenta de Google

Paso 5

WP-Stateless le ayudará a configurar su proyecto y bucket de Google Cloud, que almacenarán todos sus archivos multimedia de WordPress.

  • Google Cloud Proyect: Cada bucket de Google Cloud es contenido dentro de un proyecto. Usted puede crear un nuevo proyecto o elegir de uno de los proyectos existentes.
  • Google Cloud Bucket: Todos los datos de su WordPress se almacenan en un bucket. Puede crear un bucket nuevo o elegir de una de los ya existentes.
  • Ubicación Multi-Regional del Google Cloud Bucket: Su más reciente bucket será provisionado con una clase de almacenamiento multi-regional. Seleccione la región que se encuentre más cercana a la mayoría de los visitantes de su sitio web.
  • Facturación de Google Cloud: Si usted no tiene una cuenta donde será facturado, dé clic en el botón para establecer una. No olvide que ofrecen una prueba gratuita de $300 por 3 meses.

Importante: Si usted quiere utilizar su propio dominio personalizado o URL de CDN para Google Cloud Storage, asegúrese nombrar su bucket exactamente con el mismo nombre que la URL de su dominio CDN. Nombre de bucket: gcs.sudominio.com. Le dará una advertencia sobre los caracteres, pero puede usar puntos en los nombres de su bucket. Simplemente debe comenzar y terminar con un carácter alfanumérico.

Proyecto y Bucket de WP-Stateless
Proyecto y Bucket de WP-Stateless

Una vez que ya haya configurado todo lo anterior haga clic en “Continuar.” Podrá ver la confirmación de que todo ha sido establecido de forma correcta.

Configuración de WP-Stateless
Configuración de WP-Stateless

Ajustes de Google Cloud Storage en WP-Stateless Plugin

Puede encontrar las opciones de WP-Stateless y Google Cloud Storage bajo “Opciones de Medios de Stateless.” En la pestaña de “opciones” usted podrá configurar el modo que usted prefiera.

  • Disables: Deshabilita el multimedia de Stateless.
  • Backup: Sube archivos multimedia a Google Storage y sirve URLs de archivos locales.
  • CDN: Copia los archivos multimedia a Google Storage y los sirve de forma directa de ahí. Nota: No podrá usar Kinsta CDN y está opción al mismo tiempo. Tendrá que elegir una o la otra.
  • Stateless: Almacena y sirve archivos multimedia solo con Google Cloud Storage. Los archivos multimedia no son almacenados de forma local. Esta opción le ahorrara el mayor espacio en el disco.
  • Reemplazo de URL del archivo: Escanea contenido y meta durante la presentación y reemplaza las URLs de archivos multimedia locales con las URLs de Google Cloud Storage. Esta opción no modifica su base de datos.
Modo WP-Stateless
Modo WP-Stateless

¿Le preocupa obtener sus archivos multimedia de forma atrasada? No se preocupe, el plugin tiene una opción de sincronización (de la cuál exploraremos más abajo) en caso de que usted quiera revertirlo. También puede agarrar los folders de subidas de WordPress del mismo bucket de Google Cloud Storage ya que simplemente imita la misma apariencia de su biblioteca multimedia (como se puede observar a continuación)

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

Al bajar más dentro de esta página, encontrará opciones adicionales:

  • Control de Cache: Por defecto, esta opción se encuentra establecida como: public, max-age=3600, must-revalidate. Usted puede ignorar esto si así lo desea.
  • Borrar archivo GSC: Habilite esta opción si usted quiere borrar el archivo del GSC cuando usted lo borra de su biblioteca multimedia en su WordPress.
  • URL del archivo y Dominio: Reemplaza el dominio GCS por defecto con su propia versión personalizada del dominio. Esto requerirá que usted configure un CNAME. Tenga en consideración que el nombre del bucket y el nombre del dominio deben ser exactamente iguales. De acuerdo a su documentación, el HTTPS no es soportado con un dominio personalizado, pero funcionó bien para nosotros.
  • Organización: Organiza subidas en folders basados en año y mes.
  • Cache Busting: Precede un grupo de números y letras aleatorios al archivo. Este es muy útil para prevenir problemas de cache al subir archivos que tengan el mismo nombre.
Opciones adicionales de WP-Stateless
Opciones adicionales de WP-Stateless

Las imágenes que usted suba a su biblioteca multimedia de WordPress, automáticamente serán copiadas al Google Cloud Storage. Sin embargo, después de que configure por primera vez el plugin, querrá ejecutar una sincronización en masa. Bajo “Medios -> Opciones de Stateless -> Sincronización” usted tendrá las siguientes opciones.

  • Regenerar todas las imágenes de stateless y sincronizar con Google Storage con el servidor local. (Nota: esta opción tardará un poco si es la primera vez).
  • Sincroniza archivos que no son imágenes entre Google Storage y un servidor local.
  • Sincroniza todos los archivos que no son multimedia entre Google Storage y un servidor local.
Sincronización de WP-Stateless
Sincronización de WP-Stateless

Configuración de WordPress Google Cloud Storage con WP Offload Media

Su segunda opción para integrar Google Cloud Storage con su sitio de WordPress es utilizar el plugin gratuito WP Offload Media Lite (o Media WP Offload Media) de Delicious Brains Inc.

WP Offload Media WordPress plugin
WP Offload Media WordPress plugin

Definitivamente puede satisfacer la mayoría de sus necesidades con la versión lite de WP Offload Media; sin embargo, hay algunas características interesantes si actualiza a la versión premium:

  • PriorityExpert ™ soporte por correo electrónico.
  • Carga la biblioteca de medios existente en el almacenamiento en la nube.
  • Controla los archivos de almacenamiento en la nube desde la biblioteca multimedia.
  • Elimina archivos del servidor una vez que se descarga en segundo plano.
  • Descarga y elimina del almacenamiento en la nube.
  • Copia archivos entre buckets en su proveedor de almacenamiento en segundo plano.
  • Sirve los recursos del sitio (CSS, JS, imágenes, fuentes, etc.) desde CloudFront u otro CDN en solo unos pocos clics con el Assets Pull Addon.
  • Integraciones con WooCommerce, WPML, Easy Digital Downloads, Meta Slider, Enable Media Replace, y Advanced Custom Fields.

Paso 1

Para instalar el plugin gratuito WP Offload Media Lite, puede descargarlo desde el repositorio de WordPress o buscar «WP Offload Media Lite» dentro de su panel de control de WordPress en «Agregar nuevos» plugins. Haga clic en «Instalar ahora» y actívelo.

Instalar WP Offload Lite WordPress plugin
Instalar WP Offload Lite WordPress plugin

Paso 2

Siga las instrucciones de la guía para Google Cloud Storage:

Integración de Google Cloud Storage CDN

¿Le preocupa el desempeño de Google Cloud Storage? Es cierto que un almacenamiento multi-regional, simplemente no será tan rápido como una CDN normal, y definitivamente no es lo mejor para los usuarios globales. Sin embargo, usted todavía podrá enviar archivos a través de su proveedor de CDN favorito. A continuación se presentan algunas opciones diferentes.

Configurar WP-Stateless con KeyCDN

Simplemente siga los pasos a continuación en los que usaremos KeyCDN como ejemplo.

Importante: Esto no quiere decir que no será facturado por Google Cloud Storage y su proveedor de CDN, así que probablemente querrá reducir los números antes de hacer esto. Si usted se encuentra usando una prueba gratuita de Google Cloud Platform, esta es una buena forma de estimar sus costos, sin que sea facturado por Google. Lo siguiente no funciona actualmente con Kinsta CDN.

  1. Establezca una nueva zona especialmente para sus medios de Google Cloud Storage. Siga el tutorial de KeyCDN sobre la integración CDN de Google Cloud Storage. Esencialmente usted estará usando Google Cloud Storage como su servidor de origen.
  2. Despliegue Let’s Encrypt para el HTTPS en la nueva zona.
  3. Establezca un nuevo alias para la nueva zona en KeyCDN. Por ejemplo: gcs.sudominio.com.
  4. Use el alias de su zona en las opciones del plugin WP-Stateless

El resultado será que KeyCDN ahora estará distribuyendo todos sus archivos de Google Cloud Storage. ¡Los problemas de desempeño se habrán resuelto!

Google Cloud Storage y KeyCDN
Google Cloud Storage y KeyCDN

Debido a que el plugin de WP-Stateless solo maneja su biblioteca multimedia (imágenes) es probable que quiera servir sus scripts (JS, CSS) a través de CDN. Simplemente siga los siguientes pasos.

  1. Configure una zona separada con su proveedor de CDN, esto es para sus recursos, y utilice una URL distinta a la usada anteriormente, tal y como cdn.sudominio.com.
  2. Instale un plugin CDN para WordPress que soporte exclusiones: CDN enabler (gratuito), Perfmatters (Premium), o WP Rocket (Premium).
  3. Establezca exclusiones para que el plugin de CDN solo cargue CSS, JS, etc. De esta forma el plugin WP-Stateless manejará sus archivos multimedia y el plugin CDN manejará sus recursos.
Exclusiones de CDN en Perfmatters
Exclusiones de CDN en Perfmatters

El resultado final es que sus archivos multimedia se cargarán desde su URL CDN personalizada (la cual será extraída de Google Cloud Storage) y sus recursos se cargaran de la otra URL CDN personalizada. Y si usted está trabajando en modo “Stateless” su sitio web de WordPress no utilizará ni un espacio de disco para sus imágenes. ¡Genial!

El Combo de Google Cloud Storage y CDN
El Combo de Google Cloud Storage y CDN

Configurar WP Offload Media con Google Cloud CDN

De forma predeterminada, WP Offload Media está configurado para usar URL de almacenamiento en la nube de Google sin procesar al servir medios descargados. Las URL de sus medios pueden verse así:

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

Conozca su tutorial sobre cómo configurar un CDN de dominio personalizado para Google Cloud Storage.