Práticas recomendadas para avisos de cookies

Otimize os avisos de cookies para desempenho e usabilidade.

Katie Hempenius
Katie Hempenius
X

Este artigo discute como as notificações de cookies podem afetar o desempenho, a medição do desempenho e a experiência do usuário.

Desempenho

As notificações de cookies podem ter um impacto significativo no desempenho da página porque, geralmente, são carregadas no início do processo, são mostradas a todos os usuários e podem influenciar o carregamento de anúncios e outros conteúdos da página.

Veja como os avisos de cookies podem afetar as Métricas da Web:

  • Maior exibição de conteúdo (LCP): a maioria dos avisos de consentimento de cookies é relativamente pequena e, portanto, normalmente não contém o elemento da LCP de uma página. No entanto, isso pode acontecer, principalmente em dispositivos móveis. Em dispositivos móveis, um aviso de cookie normalmente ocupa uma parte maior da tela. Isso geralmente ocorre quando um aviso de cookie contém um grande bloco de texto (os blocos de texto também podem ser elementos da LCP).

  • Latência na primeira entrada (FID, na sigla em inglês): em geral, sua solução de consentimento de cookies deve ter um impacto mínimo na FID. O consentimento de cookies exige pouca execução do JavaScript. No entanto, as tecnologias ativadas por esses cookies, ou seja, publicidade e scripts de acompanhamento, podem ter um impacto significativo na interatividade da página. O atraso desses scripts até a aceitação do cookie pode servir como uma técnica para diminuir a latência na primeira entrada (FID, na sigla em inglês).

  • Mudança de layout cumulativa (CLS): os avisos de consentimento para cookies são uma fonte muito comum de mudanças de layout.

De modo geral, um aviso de cookie de provedores de terceiros pode ter um impacto maior no desempenho do que um aviso de cookie criado por você. Esse não é um problema exclusivo das notificações de cookies, mas sim da natureza dos scripts de terceiros em geral.

Práticas recomendadas

As práticas recomendadas nesta seção se concentram nos avisos de cookies de terceiros. Algumas dessas práticas recomendadas, mas não todas, também serão aplicáveis aos avisos de cookies primários.

Os scripts de aviso de cookies precisam ser carregados de forma assíncrona. Para fazer isso, adicione o atributo async à tag de script.

<script src="https://cookie-notice.com/script.js" async>

Os scripts que não são assíncronos bloqueiam o analisador do navegador. Isso atrasa o carregamento da página e a LCP. Para mais informações, consulte Carregar JavaScript de terceiros com eficiência.

Os scripts de aviso de cookie precisam ser carregados "diretamente" ao colocar a tag do script no HTML do documento principal, e não por um gerenciador de tags ou outro script. O uso de um gerenciador de tags ou script secundário para injetar o script de aviso de cookie atrasa o carregamento do script de aviso de cookie: oculta o script do analisador de lookahead do navegador e impede que o script seja carregado antes da execução do JavaScript.

Todos os sites que carregam scripts de aviso de cookie de um local de terceiros precisam usar as dicas de recurso dns-prefetch ou preconnect para ajudar a estabelecer uma conexão antecipada com a origem que hospeda esses recursos. Para mais informações, consulte Estabelecer conexões de rede antecipadamente para melhorar a velocidade percebida da página.

<link rel="preconnect" href="https://cdn.cookie-notice.com/">

Alguns sites podem se beneficiar do uso da dica de recurso preload para carregar o script de aviso de cookies. A dica de recurso preload informa ao navegador para iniciar uma solicitação antecipada para o recurso especificado.

<link rel="preload" href="https://www.cookie-notice.com/cookie-script.js">

A propriedade preload é mais eficiente quando o uso dele é limitado à busca de alguns recursos importantes por página. Assim, a utilidade do pré-carregamento do script de aviso de cookie varia de acordo com a situação.

A personalização da aparência de um aviso de cookies de terceiros pode gerar mais custos de desempenho. Por exemplo, os avisos de cookies de terceiros nem sempre podem reutilizar os mesmos recursos (por exemplo, fontes da Web) que são usados em outro lugar da página. Além disso, os avisos de cookies de terceiros tendem a carregar o estilo no final de cadeias de solicitação longas. Para evitar surpresas, saiba como seu aviso de cookie é carregado e aplica estilos e recursos relacionados.

Evitar mudanças de layout

Confira alguns dos problemas mais comuns de mudança de layout associados às notificações de cookies:

  • Avisos de cookies na parte superior da tela:esses avisos são uma fonte muito comum de mudança de layout. Se um aviso de cookie for inserido no DOM depois que a página ao redor já tiver sido renderizada, os elementos da página abaixo dela serão empurrados para baixo na página. Para eliminar esse tipo de mudança de layout, reserve espaço no DOM para o aviso de consentimento. Se essa solução não for viável, por exemplo, se as dimensões do seu aviso de cookie variarem de acordo com a região, use um rodapé fixo ou modal para exibir o aviso de cookie. Como essas duas abordagens alternativas exibem o aviso de cookie como uma "sobreposição" no restante da página, esse aviso não deve causar mudanças de conteúdo quando carregado.
  • Animações: muitas notificações de cookies usam animações. Por exemplo, "deslizar" um aviso de cookie é um padrão de design comum. Dependendo de como esses efeitos são implementados, eles podem causar mudanças de layout. Para saber mais, consulte Como depurar mudanças de layout.
  • Fontes: fontes com carregamento tardio pode bloquear a renderização e causar mudanças de layout. Esse fenômeno é mais aparente em conexões lentas.

Otimizações de carregamento avançadas

A implementação dessas técnicas exige mais trabalho, mas elas podem otimizar ainda mais o carregamento de scripts de aviso de cookies:

Medição da performance

As notificações de cookies podem afetar as medições de performance. Esta seção discute algumas dessas implicações e técnicas para atenuá-las.

Monitoramento de usuários reais (RUM, na sigla em inglês)

Algumas ferramentas de análise e RUM usam cookies para coletar dados de desempenho. Se um usuário recusar o uso de cookies, essas ferramentas não poderão capturar os dados de desempenho.

Os sites precisam estar cientes desse fenômeno. Também vale a pena entender os mecanismos que as ferramentas RUM usam para coletar dados. No entanto, para o local típico, essa discrepância provavelmente não é um motivo para preocupação, dada a direção e a magnitude do desvio dos dados. O uso de cookies não é um requisito técnico para medição de performance. A biblioteca JavaScript web-vitals é um exemplo de biblioteca que não usa cookies.

Dependendo de como seu site usa cookies para coletar dados de performance (ou seja, se os cookies contêm informações pessoais) e da legislação em questão, o uso de cookies para medição de desempenho pode não estar sujeito aos mesmos requisitos legislativos que alguns dos cookies usados no seu site para outros fins, por exemplo, cookies de publicidade. Alguns sites dividem os cookies de desempenho em uma categoria separada ao solicitar o consentimento do usuário.

Monitoramento sintético

Sem a configuração personalizada, a maioria das ferramentas sintéticas (como o Lighthouse e o WebPageTest) avaliará apenas a experiência de um novo usuário que não respondeu a um aviso de consentimento de cookies. No entanto, não apenas as variações no estado do cache (por exemplo, uma visita inicial versus uma visita repetida) precisam ser consideradas ao coletar dados de performance, mas também variações no estado de aceitação de cookies (aceito, rejeitado ou não respondido).

As seções a seguir abordam as configurações do WebPageTest e do Lighthouse que podem ser úteis para incorporar avisos de cookies aos fluxos de trabalho de medição de performance. No entanto, os avisos e avisos de cookies são apenas um dos muitos fatores que podem ser difíceis de simular perfeitamente em ambientes de laboratório. Por esse motivo, é importante tornar os dados RUM a base do comparativo de desempenho, em vez de ferramentas sintéticas.

Criação dos roteiros

Você pode usar scripts para que um WebPageTest clique no banner de consentimento de cookie ao coletar um trace.

Adicione um script na guia Script. O script abaixo navega até o URL a ser testado e, em seguida, clica no elemento DOM com o ID cookieButton.

combineSteps
navigate    %URL%
clickAndWait    id=cookieButton

Ao usar esse script, lembre-se de que:

  • combineSteps instrui o WebPageTest a "combinar" os resultados das etapas de script que seguem em um único conjunto de rastreamentos e medições. Executar esse script sem combineSteps também pode ser útil. Traces separados facilitam a visualização se os recursos foram carregados antes ou depois da aceitação do cookie.
  • %URL% é uma convenção WebPageTest que se refere ao URL que está sendo testado.
  • clickAndWait instrui o WebPageTest a clicar no elemento indicado por attribute=value e aguardar a conclusão da atividade subsequente do navegador. Ele segue o formato clickAndWait attribute=Value.

Se você configurou esse script corretamente, a captura de tela feita pelo WebPageTest não mostrará um aviso de cookies, já que o aviso foi aceito.

Para mais informações sobre o script WebPageTest, confira a documentação do WebPageTest.

Definir cookies

Para executar o WebPageTest com um conjunto de cookies, acesse a guia Avançado e adicione o cabeçalho de cookie ao campo Cabeçalhos personalizados:

Captura de tela mostrando o campo &quot;Cabeçalhos personalizados&quot; no WebPageTest

Mudar o local do teste

Para alterar o local de teste usado pelo WebPageTest, clique no menu suspenso Local de teste localizado na guia Teste avançado.

Captura de tela do menu suspenso &quot;Test Location&quot; no WebPageTest

A definição de cookies durante uma execução no Lighthouse pode servir como um mecanismo para que uma página fique em um estado específico e possa ser testada pelo Lighthouse. O comportamento dos cookies do Lighthouse varia um pouco de acordo com o contexto (DevTools, CLI ou PageSpeed Insights).

DevTools

Os cookies não são apagados quando o Lighthouse é executado no DevTools. No entanto, outros tipos de armazenamento são apagados por padrão. Para mudar esse comportamento, use a opção Limpar armazenamento no painel de configurações do Lighthouse.

Captura de tela destacando a opção &quot;Clear Storage&quot; do Lighthouse

CLI

A execução do Lighthouse pela CLI usa uma nova instância do Chrome. Portanto, nenhum cookie é definido por padrão. Para executar o Lighthouse a partir da CLI com um determinado conjunto de cookies, use o seguinte comando:

lighthouse <url> --extra-headers "{\"Cookie\":\"cookie1=abc; cookie2=def; \_id=foo\"}"

Para mais informações sobre como configurar cabeçalhos de solicitação personalizados na CLI do Lighthouse, consulte Como executar o Lighthouse em páginas autenticadas.

PageSpeed Insights

A execução do Lighthouse pelo PageSpeed Insights usa uma nova instância do Chrome e não define cookies. Não é possível configurar o PageSeed Insights para definir cookies específicos.

Experiência do usuário

A experiência do usuário (UX) de diferentes avisos de consentimento de cookies é, principalmente, o resultado de duas decisões: o local do aviso na página e até que ponto o usuário pode personalizar o uso de cookies em um site. Nesta seção, discutimos possíveis abordagens para essas duas decisões.

Ao considerar possíveis designs para seu aviso de cookies, considere o seguinte:

  • UX: essa é uma boa experiência do usuário? Como esse design específico afetará os elementos da página e os fluxos de usuários?
  • Empresa: qual é a estratégia de cookies do seu site? Quais são suas metas para o aviso de cookies?
  • Jurídico: está em conformidade com os requisitos legais?
  • Engenharia: quanto trabalho seria necessário implementar e manter? Seria difícil mudar?

Canal

Os avisos de cookie podem ser exibidos como cabeçalho, elemento in-line ou rodapé. Eles também podem ser exibidos na parte superior do conteúdo da página usando um modal ou veiculados como intersticiais.

Diagrama com exemplos de diferentes opções de posicionamento para avisos de cookies

Os avisos de cookies costumam ser colocados no cabeçalho ou rodapé. Dessas duas opções, o posicionamento do rodapé geralmente é preferível porque é discreto, não compete por atenção com anúncios de banner ou notificações e normalmente não causa CLS. Além disso, é um local comum para colocar políticas de privacidade e Termos de Uso.

Embora os avisos de cookies inline sejam uma opção, eles podem ser difíceis de integrar às interfaces do usuário existentes e, portanto, são incomuns.

Modais

Os modais são avisos de consentimento de cookies exibidos na parte superior do conteúdo da página. A aparência e o desempenho dos modais podem variar dependendo do tamanho.

Os modais de tela parcial menores podem ser uma boa alternativa para sites que estão com dificuldade para implementar avisos de cookies de uma forma que não cause mudanças de layout.

Por outro lado, modais grandes que ocultam a maior parte do conteúdo da página precisam ser usados com cuidado. Em particular, sites menores podem perceber que os usuários rejeitam o site, em vez de aceitar o aviso de cookies de um site desconhecido com conteúdo oculto. Embora não sejam necessariamente sinônimos, se você estiver pensando em usar um modal de consentimento de cookie em tela cheia, precisará conhecer a legislação relacionada a paredes de cookies.

Configurabilidade

As interfaces de notificação de cookies oferecem aos usuários diferentes níveis de controle sobre quais cookies aceitam.

Sem configurabilidade

Esses banners de cookies com estilo de aviso não oferecem aos usuários controles diretos de UX para desativar os cookies. Em vez disso, eles geralmente incluem um link para a política de cookies do site, que pode fornecer aos usuários informações sobre como gerenciar cookies usando o navegador da Web. Esses avisos geralmente incluem um botão "Dispensar" e/ou "Aceitar".

Diagrama com exemplos de avisos de cookies sem configurabilidade

Pouco configurabilidade

Esses avisos de cookies dão ao usuário a opção de recusar os cookies, mas não são compatíveis com controles mais granulares. Essa abordagem aos avisos de cookies é menos comum.

Diagrama mostrando exemplos de avisos de cookies com alguma configurabilidade de cookie

Configurabilidade total

Esses avisos de cookies oferecem aos usuários controles mais refinados para configurar o uso de cookies aceito.

Diagrama mostrando exemplos de avisos de chookies com total capacidade de configuração de cookies

  • UX:os controles para configurar o uso de cookies são exibidos com mais frequência usando um modal separado que é iniciado quando o usuário responde ao aviso de consentimento de cookie inicial. No entanto, se o espaço permitir, alguns sites exibirão esses controles inline no aviso inicial de consentimento de cookies.

  • Granularidade:a abordagem mais comum para a configuração de cookies é permitir que os usuários ativem os cookies por "categoria". Exemplos de categorias comuns de cookies incluem cookies funcionais, de segmentação e de mídias sociais.

    No entanto, alguns sites vão além e permitem que os usuários façam a ativação com base nos cookies. Outra maneira de oferecer controles mais específicos aos usuários é dividir categorias de cookies, como "publicidade", em casos de uso específicos. Por exemplo, permitindo que os usuários ativem "anúncios básicos" e "anúncios personalizados" separadamente.

Diagrama com exemplos de avisos de cookies com configurabilidade completa de cookies