Trocas assinadas (SXGs)

Um SXG é um mecanismo de entrega que possibilita autenticar a origem de um recurso, independentemente de como ele foi entregue.

Katie Hempenius
Katie Hempenius
X
Devin Mullins
Devin Mullins
X GitHub

As trocas assinadas (SXG, na sigla em inglês) são um mecanismo de entrega que permite autenticar a origem de um recurso, independentemente de como ele foi entregue. A implementação de SXG pode melhorar a Largest Contentful Paint (LCP) ao ativar a pré-busca entre origens que preserva a privacidade. Além disso, essa separação promove uma variedade de casos de uso, como experiências de Internet off-line e veiculação de caches de terceiros.

Este artigo oferece uma visão geral abrangente do SXG: como ele funciona, casos de uso e ferramentas.

Compatibilidade com navegadores

As SXGs são compatíveis com navegadores baseados no Chromium (a partir das versões Chrome 73, Edge 79 e Opera 64).

Visão geral

Como caso de uso principal, o SXG usa um cache para fazer a pré-busca e veicular conteúdo que foi assinado criptograficamente pela origem. Isso ajuda a acelerar as navegações entre origens de sites de referência, além de garantir que as páginas permaneçam inalteradas e devidamente atribuídas à origem. Qualquer informação de identificação pessoal em potencial fica oculta até que o usuário navegue para um site, protegendo a privacidade dele. A Pesquisa Google é uma usuária inicial dos recursos de pré-busca de SXG. Para sites que recebem uma grande parte do tráfego da Pesquisa Google, as SXGs podem ser uma ferramenta importante para oferecer carregamentos de página mais rápidos aos usuários. Com o tempo, esperamos que esse impacto se estenda a outros referenciadores.

Como funciona

Um site assina um par de solicitação/resposta (uma "troca HTTP") de modo que o navegador possa verificar a origem e a integridade do conteúdo, independentemente de como ele foi distribuído. Como resultado, o navegador pode exibir o URL do site de origem na barra de endereço, em vez do URL do servidor que entregou o conteúdo.

Diagrama que explica como as trocas assinadas funcionam. Navegador se comunicando com o cache, que se comunica com o site de destino

Anteriormente, a única maneira de um site usar um terceiro para distribuir o conteúdo dele e manter a atribuição era compartilhar os certificados SSL com o distribuidor. Isso tem desvantagens de segurança. Além disso, está longe de tornar o conteúdo verdadeiramente portátil.

O formato SXG

Uma SXG é encapsulada em um arquivo codificado em binário que tem dois componentes principais: uma troca HTTP e uma assinatura que abrange a troca. A troca HTTP consiste em um URL de solicitação, informações de negociação de conteúdo e uma resposta HTTP.

Veja um exemplo de arquivo SXG decodificado.

format version: 1b3
request:
  method: GET
  uri: https://example.org/
  headers:
response:
  status: 200
  headers:
    Cache-Control: max-age=604800
    Digest: mi-sha256-03=kcwVP6aOwYmA/j9JbUU0GbuiZdnjaBVB/1ag6miNUMY=
    Expires: Mon, 24 Aug 2020 16:08:24 GMT
    Content-Type: text/html; charset=UTF-8
    Content-Encoding: mi-sha256-03
    Date: Mon, 17 Aug 2020 16:08:24 GMT
    Vary: Accept-Encoding
signature:
    label;cert-sha256=<em>ViFgi0WfQ+NotPJf8PBo2T5dEuZ13NdZefPybXq/HhE=</em>;
    cert-url=&quot;https://test.web.app/ViFgi0WfQ-NotPJf8PBo2T5dEuZ13NdZefPybXq_HhE&quot;;
    date=1597680503;expires=1598285303;integrity=&quot;digest/mi-sha256-03&quot;;sig=<em>MEUCIQD5VqojZ1ujXXQaBt1CPKgJxuJTvFlIGLgkyNkC6d7LdAIgQUQ8lC4eaoxBjcVNKLrbS9kRMoCHKG67MweqNXy6wJg=</em>;
    validity-url=&quot;https://example.org/webpkg/validity&quot;
header integrity: sha256-Gl9bFHnNvHppKsv+bFEZwlYbbJ4vyf4MnaMMvTitTGQ=</p>

<p>The exchange has a valid signature.
payload [1256 bytes]:</p>
<pre class="prettyprint"><code>&lt;title&gt;SXG example&lt;/title&gt;
&lt;meta charset=&#34;utf-8&#34;&gt;
&lt;meta http-equiv=&#34;Content-type&#34; content=&#34;text/html; charset=utf-8&#34;&gt;
&lt;style type=&#34;text/css&#34;&gt;
body {
    background-color: #f0f0f2;
    margin: 0;
    padding: 0;
}
&lt;/style&gt;
</code></pre>
<div>
    <h1>Hello</h1>
</div>

<p>

O parâmetro expires na assinatura indica a data de validade de um SXG. Um SXG pode ser válido por no máximo sete dias. Encontre mais informações sobre o cabeçalho assinado na especificação de Signed HTTP Exchanges.

Suporte para personalização do lado do servidor

Uma SXG que contém um cabeçalho Vary: Cookie será mostrada apenas aos usuários que não têm cookies para o URL da solicitação assinada. Se o site apresenta um HTML diferente para os usuários conectados, use esse recurso para aproveitar os SXGs sem alterar essa experiência. Confira detalhes sobre a personalização do lado do servidor com SXG dinâmico.

Web Packaging

O SXG faz parte da família de propostas de especificação mais ampla do Web Packaging. Além das SXGs, o outro componente principal da especificação do Web Packaging são os Web Bundles ("trocas HTTP agrupadas"). Os pacotes da Web são uma coleção de recursos HTTP e os metadados necessários para interpretar o pacote.

A relação entre SXGs e Web Bundles é um ponto comum de confusão. As SXGs e os pacotes da Web são duas tecnologias distintas que não dependem uma da outra. Os pacotes da Web podem ser usados com trocas assinadas e não assinadas. Uma meta comum avançada por SXGs e pacotes da Web é a criação de um formato de "empacotamento da Web" que permite que os sites sejam compartilhados na íntegra para consumo off-line.

Como acelerar o carregamento de páginas com trocas assinadas

Ativar as trocas assinadas pode ajudar a acelerar o desempenho da página da Web e, assim, afetar as Core Web Vitals do seu site, em especial a Largest Contentful Paint (LCP). Como um usuário inicial, a Pesquisa Google usa SXG para oferecer aos usuários uma experiência de carregamento de página mais rápida para páginas carregadas na página de resultados da pesquisa.

A Pesquisa Google rastreia e armazena em cache as SXGs quando disponíveis e faz a pré-busca das SXGs que o usuário provavelmente vai acessar, por exemplo, a página correspondente ao primeiro resultado da pesquisa.

As SXGs funcionam melhor em conjunto com outras otimizações de desempenho, como o uso de CDNs e a redução de sub-recursos que bloqueiam a renderização. Após a implementação, siga estas recomendações para maximizar o benefício da LCP com a pré-busca de SXGs. Em muitos casos, essa otimização pode resultar em carregamentos de página quase instantâneos na Pesquisa Google:

Impacto das trocas assinadas

Em experimentos anteriores, observamos uma redução média de 300 ms a 400 ms na LCP em pré-buscas com SXG ativadas. Isso ajuda os sites a causar uma primeira impressão melhor nos usuários e, muitas vezes, tem um impacto positivo nas métricas de negócios.

Várias marcas e sites globais já se beneficiaram das trocas assinadas. Como estudo de caso, vamos analisar como a implementação de trocas assinadas ajudou o RebelMouse, um sistema de gerenciamento de conteúdo (CMS) de destaque, a melhorar as métricas de desempenho e de negócios dos clientes:

  • A Narcity melhorou a LCP em 41%
  • A Paper Magazine notou um aumento de 27% nas sessões por usuário
  • O blog MLT reduziu o tempo de carregamento da página em 21%.

A Cloudflare descobriu que as SXGs melhoraram o TTFB em 98% dos sites testados e melhoraram a LCP em 85% dos sites, com uma melhoria média de mais de 20% nos carregamentos de páginas qualificadas para SXGs.

Indexação

As representações de uma página com e sem SXG não são classificadas ou indexadas de forma diferente pela Pesquisa Google. O SXG é um mecanismo de entrega e não muda o conteúdo.

AMP

O conteúdo AMP pode ser enviado usando SXG. As SXGs permitem que o conteúdo AMP seja pré-buscado e exibido usando o URL canônico, em vez do URL de AMP.A AMP tem as próprias ferramentas para gerar SXGs.Saiba como exibir AMP usando trocas assinadas em amp.dev.

Como depurar SXGs com o Chrome DevTools

Para ver uma SXG em primeira mão, use um navegador Chromium, abra o DevTools, abra o painel "Network" e acesse esta página de pesquisa de exemplo. As trocas assinadas podem ser identificadas procurando signed-exchange na coluna Tipo.

Captura de tela mostrando uma solicitação de SXG no painel &quot;Rede&quot; do DevTools
O painel Network no DevTools

A guia Visualização fornece mais informações sobre o conteúdo de um SXG.

Captura de tela da guia &quot;Visualização&quot; de um SXG
A guia Visualização no DevTools

Ferramentas

A implementação de SXGs consiste em gerar a SXG correspondente a um determinado URL e, em seguida, disponibilizar essa SXG para os solicitantes (geralmente rastreadores).

Certificados

Para gerar uma SXG, você precisa de um certificado que possa assinar SXGs, embora algumas ferramentas os adquiram automaticamente. Esta página lista as autoridades de certificação que podem emitir esse tipo de certificado. Os certificados podem ser obtidos automaticamente da autoridade de certificação do Google usando qualquer cliente ACME. O Web Packager Server tem um cliente ACME integrado, e o sxg-rs terá em breve.

Ferramentas de SXG específicas da plataforma

Essas ferramentas são compatíveis com pilhas de tecnologia específicas. Se você já usa uma plataforma compatível com uma dessas ferramentas, talvez seja mais fácil configurar do que uma ferramenta de uso geral.

Ferramentas de SXG de uso geral

Servidor HTTP sxg-rs

O http_server do sxg-rs atua como um proxy reverso para veicular SXGs. Para solicitações de rastreadores de SXG, o http_server assina as respostas do back-end e responde com uma SXG. Para instruções de instalação, consulte o README.

Servidor do Web Packager

O servidor do Web Packager, webpkgserver, é uma alternativa ao http_server do sxg-rs, escrito em Go. Para instruções sobre como configurar o servidor do Web Packager, consulte Como configurar trocas assinadas usando o Web Packager.

CLI do Web Packager

A CLI do Web Packager gera um SXG correspondente a um determinado URL.

webpackager \
    --private\_key=private.key \
    --cert\_url=https://example.com/certificate.cbor \
    --url=https://example.com

Depois que o arquivo SXG for gerado, faça upload dele para o servidor e o disponibilize com o tipo MIME application/signed-exchange;v=b3. Além disso, você precisará disponibilizar o certificado SXG como application/cert-chain+cbor.

Bibliotecas de SXG

Estas bibliotecas podem ser usadas para criar seu próprio gerador de SXG:

  • sxg_rs é uma biblioteca Rust para gerar SXGs. É a biblioteca SXG com mais recursos e é usada como base para as ferramentas cloudflare_worker e fastly_compute.

  • libsxg é uma biblioteca C mínima para gerar SXGs. Ela é usada como base para o módulo de SXG do NGINX e o filtro de SXG do Envoy.

  • go/signed-exchange é uma biblioteca Go mínima fornecida pela especificação do pacote da Web como uma implementação de referência para gerar SXGs. Ele é usado como base para a ferramenta de CLI de referência, gen-signedexchange, e as ferramentas mais completas do Web Packager.

Negociação de conteúdo

Os servidores precisam veicular SXG quando o cabeçalho Accept indica que o valor q para application/signed-exchange é maior ou igual ao valor q para text/html. Na prática, isso significa que um servidor de origem vai disponibilizar SXGs para rastreadores, mas não para navegadores. Muitas das ferramentas acima fazem isso por padrão, mas, para outras, a seguinte expressão regular pode ser usada para corresponder ao cabeçalho Accept das solicitações que precisam ser veiculadas como SXG: http Accept: /(^|,)\s\*application\/signed-exchange\s\*;\s\*v=[[:alnum:]\_-]+\s\*(,|$)/

Esta recomendação inclui exemplos para Apache e nginx.

API Update Cache

O cache de SXG do Google tem uma API que os proprietários de sites podem usar para remover SXGs do cache antes que eles expirem devido a Cache-Control: max-age. Consulte a referência da API de atualização de cache para mais detalhes.

Como vincular a SXGs

Qualquer site pode armazenar em cache, exibir e pré-buscar SXGs das páginas vinculadas, quando disponíveis, usando as tags e : html <a href="https://example.com/article.html.sxg"> <link rel="prefetch" as="document" href="https://example.com/article.html.sxg"> Este artigo (em inglês) ilustra como usar o nginx para distribuir SXGs.

Vantagens exclusivas

A SXG é uma das muitas tecnologias possíveis para permitir a pré-busca entre origens. Ao decidir qual tecnologia usar, talvez seja necessário escolher entre otimizar diferentes aspectos. As seções a seguir ilustram alguns dos valores exclusivos que o SXG oferece no espaço de soluções possíveis. Esses fatores podem mudar ao longo do tempo, conforme o espaço de soluções disponíveis evolui.

Menos solicitações para atender

Com a pré-busca entre sites, seu servidor pode precisar atender a mais solicitações. Isso corresponde aos casos em que uma página foi pré-buscada, mas o usuário não a acessou ou os bytes pré-buscados não puderam ser mostrados ao usuário. Para SXGs, essas solicitações não utilizadas adicionais podem ser significativamente reduzidas:

  • Os SXGs são armazenados em cache e podem ser enviados aos usuários até expirarem. Assim, muitas pré-buscas podem ser processadas apenas pelo servidor de cache.
  • As SXGs podem ser mostradas aos usuários com e sem cookies no seu site. Assim, a página precisará ser buscada novamente menos vezes após a navegação.

Melhoria na Velocidade de página

Você pode notar uma melhora adicional na Velocidade de página devido às plataformas e aos recursos de pré-busca que ela oferece no momento:

  • As SXGs podem ser mostradas aos usuários com cookies do seu site.
  • O SXG também faz a pré-busca de sub-recursos para suas páginas, como JavaScript, CSS, fontes e imagens, quando especificado usando um cabeçalho Link.
  • Em breve, a pré-busca de SXG da Pesquisa Google vai estar disponível em mais tipos de resultados da pesquisa.

Conclusão

As trocas assinadas são um mecanismo de entrega que permite verificar a origem e a validade de um recurso, independentemente de como ele foi entregue. Como resultado, os SXGs podem ser distribuídos por terceiros, mantendo a atribuição completa do editor.

Leitura adicional