Trocas assinadas (SXGs)

As SXGs são 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) são um mecanismo de entrega que possibilita autenticar a origem de um recurso independentemente de como ele foi entregue. A implementação das SXGs pode melhorar a Largest Contentful Paint (LCP) ativando a pré-busca de origem cruzada que preserva a privacidade. Além disso, essa separação promove vários casos de uso, como experiências de Internet off-line e veiculação a partir de caches de terceiros.

Neste artigo, você encontra uma visão geral abrangente das SXG: como elas funcionam, casos de uso e ferramentas.

Compatibilidade com navegadores

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

Visão geral

Como principal caso de uso, as SXGs usam um cache para pré-buscar e disponibilizar conteúdo que foi assinado criptograficamente pela origem. Isso ajuda a acelerar as navegações entre origens a partir de sites de referência, além de garantir que as páginas permaneçam inalteradas e devidamente atribuídas à origem. Todas as informações potencialmente identificáveis ficam ocultas até que o usuário navegue até um site, protegendo a privacidade dele. A Pesquisa Google é uma das primeiras a adotar os recursos de pré-busca de SXG. Para sites que recebem uma grande parte do tráfego da Pesquisa Google, as SXG podem ser uma ferramenta importante para oferecer carregamentos de página mais rápidos aos usuários. Com o tempo, esperamos expandir o impacto para mais indicadores.

Como funciona

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

Diagrama explicando como funcionam as trocas assinadas. O navegador se comunica com o cache, que se comunica com o site de destino

Historicamente, a única forma de um site usar um terceiro para distribuir o conteúdo dele e manter a atribuição era o site compartilhar os certificados SSL com o distribuidor. Isso tem desvantagens de segurança. Além disso, é um processo muito distante de tornar o conteúdo realmente portátil.

O formato SXG

Uma SXG é encapsulada em um arquivo codificado 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.

Este é um exemplo de um 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 das SXG. As SXGs podem ser válidas por no máximo sete dias. Encontre mais informações sobre o cabeçalho da assinatura na especificação de Signed HTTP Exchanges.

Suporte à personalização do lado do servidor

Uma SXG com um cabeçalho Vary: Cookie será exibida apenas para os usuários que não tiverem cookies para o URL da solicitação assinada. Caso seu site apresente HTMLs diferentes aos usuários conectados, você poderá usar esse recurso para aproveitar as SXGs sem alterar essa experiência. Confira detalhes sobre a personalização do lado do servidor com Dynamic SXG.

Empacotamento da Web

As SXG fazem parte de um grupo mais amplo de propostas de especificações de pacotes da Web. Além das SXGs, o outro componente importante da especificação do Web Packaging são os pacotes da Web ("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 pacotes da Web é um ponto comum de confusão. SXG e Web Bundles são duas tecnologias distintas que não dependem umas das outras. Os pacotes da Web podem ser usados com trocas assinadas e não assinadas. Uma meta comum avançada pelas SXGs e pacotes da Web é a criação de um formato de "pacote da Web" que permita que os sites sejam compartilhados integralmente 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, em especial a Maior exibição de conteúdo (LCP). Como usuário inicial, a Pesquisa Google usa as SXG para oferecer aos usuários uma experiência de carregamento mais rápido das 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 delas que o usuário provavelmente vai visitar, 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 da pré-busca de SXGs. Em muitos casos, essa otimização pode resultar em carregamentos de página quase instantâneos provenientes da Pesquisa Google:

Impacto das trocas assinadas

Em experimentos anteriores, observamos uma média de 300 ms a 400 ms de redução na LCP das pré-buscas habilitadas para SXG. Isso ajuda os sites a causar uma melhor primeira impressão 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 a RebelMouse, um sistema de gerenciamento de conteúdo (CMS, na sigla em inglês) conhecido, a melhorar o desempenho dos clientes e as métricas de negócios:

  • A Narcity melhorou a LCP em 41%
  • A Paper Magazine observou um aumento de 27% em sessões por usuário
  • Blog da MLT diminuiu o tempo de carregamento da página em 21%

A Cloudflare descobriu que a SXG melhorou o TTFB para 98% dos sites testados e melhorou a LCP em 85% dos sites, com uma melhoria mediana de mais de 20% nos carregamentos de página qualificados para SXG.

Indexação

As representações de SXG e não SXG de uma página não são classificadas ou indexadas de maneira diferente pela Pesquisa Google. Em última análise, as SXG são um mecanismo de entrega, elas não mudam o conteúdo subjacente.

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.O AMP tem as próprias ferramentas separadas para gerar SXGs.Saiba como veicular AMP usando trocas assinadas em amp.dev (links em inglês).

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 este exemplo de página de pesquisa. Trocas assinadas podem ser identificadas procurando signed-exchange na coluna Type.

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

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

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

Ferramentas

A implementação de SXGs consiste em gerar as SXGs correspondentes a um determinado URL e, em seguida, exibir essas SXGs aos solicitantes (geralmente rastreadores).

Certificados

Para gerar uma SXG, você vai precisar de um certificado que possa assiná-las, embora algumas ferramentas as adquiram automaticamente. Esta página lista as autoridades certificadoras que podem emitir esse tipo de certificado. Os certificados podem ser obtidos automaticamente pela autoridade certificadora 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 dão suporte a pilhas de tecnologia específicas. Se você já usa uma plataforma com suporte a uma dessas ferramentas, talvez a configuração seja mais fácil do que uma ferramenta de uso geral.

Ferramentas de SXG de uso geral

Servidor HTTP sxg-rs

O http_server sxg-rs atua como um proxy reverso para exibir SXGs. Para solicitações de rastreadores de SXG, http_server assinará as respostas do back-end e responderá com uma SXG. Para instruções de instalação, consulte o README (em inglês).

Servidor do Web Packager

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

CLI do Web Packager

A CLI do Web Packager gera uma 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 seu servidor e exiba-o com o tipo MIME application/signed-exchange;v=b3. Além disso, você precisará exibir 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 do Rust para gerar SXGs. É a biblioteca de SXG mais repleta de recursos e é usada como base para as ferramentas cloudflare_worker e fastly_compute.

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

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

Negociação de conteúdo

Os servidores devem exibir SXG quando o cabeçalho Accept indica que o valor q para aplicativo/troca assinada é maior ou igual ao valor q para texto/html. Na prática, isso significa que um servidor de origem veiculará SXG para os rastreadores, mas não para navegadores. Muitas das ferramentas acima fazem isso por padrão, mas, para outras ferramentas, a seguinte expressão regular pode ser usada para corresponder ao cabeçalho Accept das solicitações que precisam ser exibidas 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 das SXGs do Google tem uma API que os proprietários do site podem usar para remover SXGs do cache antes que expirem devido a Cache-Control: max-age. Consulte a referência da API de atualização de cache para mais detalhes.

Vincular às SXG

Qualquer site pode armazenar em cache, exibir e fazer a pré-busca das 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 ilustra como usar o nginx para distribuir SXGs.

Vantagens exclusivas

As SXGs são uma das muitas tecnologias possíveis para permitir a pré-busca de origem cruzada. Ao decidir qual tecnologia usar, talvez seja necessário negociar entre otimizar diferentes aspectos. As seções a seguir ilustram alguns dos valores exclusivos que as SXG oferecem no espaço de possíveis soluções. Esses fatores podem mudar com o tempo, à medida que o espaço das soluções disponíveis evolui.

Menos solicitações para veicular

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

  • As SXGs são armazenadas em cache e podem ser enviadas aos usuários até expirarem. Assim, muitas pré-buscas podem ser tratadas exclusivamente pelo servidor de cache.
  • As SXGs podem ser exibidas aos usuários com e sem cookies no seu site. Assim, há menos vezes em que a página precisará ser buscada novamente após a navegação.

Melhoria na velocidade da página

Talvez você note uma melhoria adicional na velocidade da página devido às plataformas de pré-busca e aos recursos com suporte no momento:

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

Conclusão

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

Leia mais