Cloudflare + Squarespace = una página web más rápida y más inteligente
Esta publicación es una colaboración con BeyondSpace.studio
Squarespace ofrece herramientas sólidas para crear y gestionar sitios web, con todo lo necesario, desde plantillas atractivas hasta soluciones integradas de almacenamiento en caché y copias de seguridad. Sin embargo, para aquellos que buscan aún más control, seguridad y optimización, la integración de Cloudflare puede llevar tu sitio de Squarespace al siguiente nivel. Al conectar tu dominio a Cloudflare, añades una potente capa entre tus visitantes y los servidores de Squarespace, lo que te permite acceder a funciones que van más allá de las capacidades predeterminadas de la plataforma.
Según NerdyData, de los 132.720 sitios web de Squarespace indexados, 17.340 utilizan Cloudflare. En esta entrada se analiza por qué te podría interesar unirte a ellos y cómo sacar el máximo partido a esta combinación.
Configuración de Cloudflare con Squarespace
Esta guía da por hecho que ya has configurado Cloudflare como gestor de servidores de nombres DNS y has vinculado tu dominio de Squarespace mediante registros DNS. Aunque Squarespace suele recomendar utilizar el modo «solo DNS» (desactivando el icono naranja en forma de nube) para evitar posibles problemas, yo sigo las indicaciones de Cloudflare. Este enfoque consiste en redirigir a través del proxy todos los registros, excepto el verify.squarespace.com CNAME, que debe permanecer en modo «solo DNS».
Si no estás seguro de si tu sitio web está conectado a Cloudflare, puedes comprobarlo con esta herramienta. Solo tienes que introducir tu nombre de dominio y hacer clic en «Buscar registro DNS». Si aparecen los registros DNS de Cloudflare, tu sitio web está protegido correctamente por Cloudflare.
Ventajas de utilizar Cloudflare con Squarespace
Incluso con el plan gratuito de Cloudflare, puedes disfrutar de una serie de ventajas. Veamos qué puede aportar a tu página web de Squarespace:
Almacenamiento en caché mejorado
Cloudflare ofrece opciones de almacenamiento en caché de gran calidad, lo que ayuda a que tu sitio web se cargue más rápido al servir el contenido directamente desde su CDN (red de distribución de contenidos). Esto reduce la carga en los servidores de Squarespace y mejora la experiencia del usuario. Ten en cuenta que las imágenes, los vídeos y otros recursos estáticos se almacenan en la CDN de Squarespace, no en el mismo dominio que tu sitio web, por lo que esos recursos no se beneficiarán del almacenamiento en caché. Obtén más información sobre la configuración de Cloudflare Cache.
Consejos para el «Crawler»
La función «Crawler Hints» de Cloudflare puede notificar a los motores de búsqueda los cambios que se produzcan en tu sitio web. Aunque es compatible con el protocolo IndexNow, carece de transparencia en cuanto a cómo y cuándo se envía el contenido a los motores de búsqueda. Es una función útil, pero para tener un mayor control, plantéate seguir utilizando tu servicio de indexación actual. Más información sobre «Crawler Hints».
Bloqueo de bots e IA
Protege tu sitio web contra los bots maliciosos y el scraping mediante IA utilizando las herramientas de gestión de bots de Cloudflare. Esta función es fundamental para mantener la seguridad y el rendimiento del sitio web, y es similar al bloqueo de rastreadores de Squarespace. Obtén más información sobre el bloqueo de bots.
Bloqueo por país o por dirección IP
Puedes bloquear a los visitantes de países específicos o rangos de direcciones IP, lo que proporciona una capa adicional de seguridad y control del contenido. Las reglas de acceso por IP te permiten incluir en la lista de permitidos, bloquear o solicitar autenticación del tráfico en función de la dirección IP, el país o el número de sistema autónomo (ASN) del visitante. Esto resulta especialmente útil para bloquear o solicitar autenticación del tráfico sospechoso de ser malicioso y para permitir el acceso a los servicios que visitan habitualmente tu sitio web, como las API, los rastreadores y los proveedores de pagos. Más información sobre las reglas de acceso por IP.
Zaraz – Gestión de etiquetas del lado del servidor
Zaraz mejora el rendimiento, la seguridad y la privacidad de las aplicaciones web al cargar herramientas de terceros en la nube, independientemente de los navegadores. Esto te permite integrar herramientas de análisis, píxeles publicitarios, widgets y otras herramientas de terceros sin que ello afecte a la velocidad de tus sitios web. Zaraz funciona de manera similar a Google Tag Manager, pero opera en el lado del servidor.
Fuente: Blog de Cloudflare
Con Zaraz, puedes controlar qué tipo de datos quieres compartir con terceros, lo que puede ayudar a que tus sitios web cumplan con la normativa de la UE. Por ejemplo, al conectar Google Analytics a través de Zaraz, puedes optar por no compartir las direcciones IP de los visitantes con Google Analytics.
Excluir la IP de un visitante con «zaraz»
Con el plan gratuito, puedes gestionar hasta 1 millón de eventos al mes. Descubre las herramientas compatibles en Zaraz.
Cloudflare Workers: un cambio revolucionario para Squarespace
Cloudflare Workers es una potente plataforma sin servidor que puede servir como backend para tu sitio de Squarespace, lo que te permite ampliar su funcionalidad sin necesidad de activar el «Modo desarrollador» (que solo está disponible para las plantillas de Squarespace 7.0). Con Cloudflare Workers, puedes implementar hasta 30 scripts y gestionar hasta 100 000 solicitudes al día, todo ello de forma gratuita.
Rutas de los trabajadores ofrecen una forma eficaz de asignar patrones de URL específicos a un Worker cuando tu dominio se gestiona a través de Cloudflare. Por ejemplo, un patrón de ruta como https://*.example.com/blog/* activaría tu Worker ante cualquier solicitud HTTPS dirigida a un subdominio de ejemplo.com que empieza por /blog/.
Fuente:Blog de Cloudflare
Una de las características más destacadas de Cloudflare Workers es el HTMLRewriter de Cloudflare. Esta API de JavaScript te permite analizar y modificar contenido HTML en tiempo real. Cuando tu Worker recupera contenido del servidor de Squarespace a través de Worker Routes, HTMLRewriter puede ajustar dinámicamente el contenido de la página en el borde de la CDN antes de entregarlo al usuario.
Por ejemplo, puedes insertar sin problemas elementos HTML adicionales, como una etiqueta de script, en el contenido de la página utilizando Cloudflare Workers.
El reescritor de HTML de Cloudflare. Fuente:able-test.com
A continuación se indican algunos usos prácticos de Cloudflare Workers:
Crear un archivo Sitemap.xml alternativo
Squarespace genera automáticamente un mapa del sitio, pero con Cloudflare Workers puedes crear mapas del sitio personalizados adaptados a casos de uso específicos. Por ejemplo, es posible que quieras un mapa del sitio que solo incluya contenido de una colección concreta. Esto resulta especialmente útil para el SEO y para organizar mejor el contenido de tu sitio web.
Por ejemplo, en Beyondspace, se puede acceder al mapa del sitio predeterminado en beyondspace.studio/sitemap.xml. No obstante, se puede acceder a un mapa del sitio específico para el blog de casos prácticos en beyondspace.studio/case-study-sitemap.xml.
Lo que hace que este enfoque sea tan eficaz es que el mapa del sitio específico para cada caso práctico se genera sobre la marcha y es accesible desde el nivel raíz del dominio. Esto significa que, tan pronto como se publican nuevos casos prácticos, se incluyen automáticamente en el mapa del sitio alternativo, lo que mantiene al día tus esfuerzos de SEO sin necesidad de intervención manual. El mapa del sitio alternativo se ha probado con Google Search Console y la herramienta para webmasters de Bing, y se acepta sin ningún problema.
Añadir las etiquetas «nofollow» y «noreferrer»
Dado que el editor de enlaces de Squarespace no permite añadir estas etiquetas, puedes utilizar Cloudflare Workers para modificar el DOM e insertar los atributos necesarios, mejorando así el SEO y la privacidad.
Pruebas A/B con Cloudflare Workers
Cloudflare Workers te permite realizar pruebas A/B del lado del servidor modificando el código HTML de tus páginas directamente en el borde de la red, lo que te permite probar diferentes versiones de tu contenido sin problemas. Este enfoque del lado del servidor ofrece a tu equipo de desarrollo un mayor control y precisión a la hora de determinar qué versión del contenido ofrece un mejor rendimiento, lo que, en última instancia, se traduce en decisiones más fundamentadas y experiencias de usuario optimizadas.
Fuente: able-test.com
Llamadas a la API seguras con Cloudflare Workers
Muchos servicios de terceros requieren claves API, que pueden ser vulnerables a un uso indebido si se exponen en el código del lado del cliente. La función de inserción de código personalizado de Squarespace coloca las claves API directamente en el código fuente de tu sitio web, lo cual no es recomendable por motivos de seguridad. Cloudflare Workers resuelve este problema al permitirte gestionar las llamadas a la API desde el lado del servidor, lo que garantiza la seguridad de tus claves API.
Este enfoque es fundamental para integrar servicios de terceros cuando se trata de datos sensibles. Por ejemplo:
API REST de Tapfiliate: gestiona de forma segura los datos de los afiliados sin revelar tus claves de API. Documentación de la API REST de Tapfiliate
API de búsqueda de Algolia: protege tus claves de la API de búsqueda para evitar el acceso no autorizado. Seguridad de las claves de la API de Algolia
Acuity Scheduling: Crea una interfaz de usuario personalizada para la gestión de citas sin revelar claves de integración confidenciales. Documentación de la API de Acuity
Al utilizar Cloudflare Workers para gestionar estas llamadas a la API, te aseguras de que tus datos confidenciales permanezcan seguros, al tiempo que habilitas integraciones y funcionalidades avanzadas en tu sitio de Squarespace.
Ejemplo de interfaz de usuario personalizada de Acuity
Integrar el proceso de tratamiento de imágenes
Cloudflare Workers puede gestionar de forma eficaz la optimización de imágenes para los sitios de Squarespace, sirviendo las imágenes en formato WebP y aplicando un recorte inteligente. Dado que la optimización de imágenes implica sustituir todas las fuentes de las imágenes cuando se carga la página, llevar esto a cabo con una solución de JavaScript en el front-end puede resultar bastante complicado. Sin embargo, con Cloudflare Workers, puedes modificar de forma eficaz todas las fuentes de las imágenes antes de que lleguen a los navegadores de tus visitantes.
Con Cloudflare Workers, puedes optimizar las imágenes antes de que se muestren a los usuarios, lo que garantiza tiempos de carga más rápidos sin afectar al rendimiento. También puedes utilizar CDN de imágenes de terceros o el propio servicio «Image Transformed» de Cloudflare. «Image Transformed» de Cloudflare es un servicio de pago a posteriori que cuesta 0,50 dólares por cada 1.000 transformaciones únicas al mes, lo que lo convierte en una solución rentable para la optimización avanzada de imágenes.
Más detalles sobre la integración entre Cloudflare y Squarespace
Aunque puede producirse un ligero retraso cuando Cloudflare se conecta a Squarespace, este tiempo es increíblemente breve y apenas perceptible, ya que el análisis completo del documento tarda aproximadamente 5 ms utilizando Cloudflare Workers.
Puedes utilizar Cloudflare Workers de forma gratuita hasta un máximo de 100 000 solicitudes al día. A partir de ahí, funciona con un modelo de pago por uso, a partir de 5 dólares al mes.
Cuando conectes tu dominio principal a Cloudflare y actives el proxy, podrás aprovechar todas las funciones de optimización y las rutas de Workers para este dominio, como por ejemplo tu-sitio.com. Sin embargo, tu dominio integrado de Squarespace (por ejemplo, tu-sitio.squarespace.com) no se verá afectado por Cloudflare.
Esta discrepancia puede generar confusión entre los visitantes si acceden al dominio integrado de Squarespace en lugar del dominio principal, sobre todo si se realizan modificaciones importantes en la página. Para solucionar esto, se puede utilizar una redirección mediante JavaScript que dirija a los usuarios a tu dominio principal.
Copia y pega el siguiente script en tu panel de inyección de código
<!-- sqs:redirect-authentic -->
<script>
(() => {
// Define the new hostname
const primaryHostname = Static.SQUARESPACE_CONTEXT.website.authenticUrl;
// Get the current path and query
const path = window.location.pathname;
const query = window.location.search;
// Check if the path is not /config and the current hostname is the old one
if (location.pathname.indexOf("/config") !== 0 && location.host.includes("squarespace.com")
&& window.self === window.top) {
// Construct the new URL
const newUrl = `${primaryHostname}${path}${query}`;
// Redirect to the new URL
window.location.replace(newUrl);
}
})();
</script>
<!-- sqs:redirect-authentic -->
Para los usuarios de Zaraz, se aplica el mismo problema, ya que el dominio integrado no es compatible con Zaraz. Puedes instalar Zaraz en tu dominio integrado siguiendo este tutorial.
Comparación de la integración de Cloudflare en distintas plataformas de CMS:
Shopify: Shopify utiliza Cloudflare de forma predeterminada, pero sus opciones de configuración son limitadas a menos que se disponga de un plan Cloudflare Enterprise. Para los comerciantes que buscan una personalización avanzada y un control del tráfico, el plan Enterprise es esencial como parte de la configuración O2O (Orange-to-Orange). Según NerdyData, el 99,5 % de los sitios de Shopify utilizan Cloudflare: hay 420 930 sitios web en Shopify y 419 184 de ellos utilizan Cloudflare.
Wix: Actualmente, Wix no admite registros DNS con proxy para los dominios conectados a través de Cloudflare. Esta limitación se indica en su documentación oficial de asistencia técnica.
Webflow: Integrar Cloudflare con Webflow resulta complicado. Es posible que tengas que utilizar una «Page Rule» para desactivar el SSL en determinados patrones de URL, tal y como se explica aquí. Como alternativa, quizá tengas que prescindir de ciertas funciones, como el comercio electrónico o las cuentas de usuario, tal y como se menciona en este tutorial.
Configuración recomendada del proxy de Cloudflare para Squarespace
Dada la gran cantidad de opciones disponibles en Cloudflare, puede resultar abrumador configurarlo todo correctamente. A continuación te indicamos los ajustes recomendados que utilizamos para las páginas web de Squarespace con el fin de optimizar el rendimiento y la seguridad.
Configuración de la zona/página web de Cloudflare
Actualiza tu modo de cifrado:
Utiliza esta opción para gestionar el cifrado en dos conexiones: una entre tus visitantes y Cloudflare, y otra entre Cloudflare y el servidor de Squarespace.
Inicia sesión en el panel de control de Cloudflare, selecciona tu cuenta y tu dominio.
Ve a SSL/TLS.
Elige un modo de cifrado: «Completo» o «Completo (estricto)» para el cifrado de extremo a extremo entre Cloudflare y tu servidor de Squarespace.
Configuración del almacenamiento en caché:
Ve a «Almacenamiento en caché» > «Configuración».
Activa las sugerencias para rastreadores para ayudar a que los rastreadores web indexen tu sitio web de forma más eficaz.
Protección contra bots:
Ve a «Seguridad» > «Bots».
Activa el «Modo de lucha contra bots» para bloquear las solicitudes de bots conocidos antes de que accedan a tu sitio web.
Activa la opción «Bloquear rastreadores y scrapers de IA» para evitar que los bots extraigan tu contenido para aplicaciones de IA.
Optimización de la velocidad:
Ve a «Velocidad» > «Optimización».
En el plan gratuito, activa todas las opciones disponibles en «Recomendaciones».
En «Optimización de contenidos»:
Rocket Loader: No lo utilices a menos que sepas lo que estás haciendo.
Minificación automática: esta función está obsoleta; es mejor dejarla desactivada.
Conclusión
La integración de Cloudflare con tu sitio de Squarespace ofrece numerosas ventajas, desde un almacenamiento en caché mejorado y protección contra bots hasta una gestión avanzada de etiquetas con Zaraz. Sin embargo, la característica más destacada es Cloudflare Workers, que abre un abanico de posibilidades que amplían la funcionalidad nativa de Squarespace. Con Workers, puedes crear mapas del sitio personalizados, implementar pruebas A/B del lado del servidor, optimizar imágenes de forma dinámica y proteger las llamadas a la API, todo ello sin alterar la configuración básica de Squarespace.
Al aprovechar Cloudflare Workers, puedes mejorar considerablemente el rendimiento, el posicionamiento en buscadores (SEO) y la seguridad de tu sitio web, lo que lo convierte en una potente herramienta que complementa las funciones de Squarespace.
