Como a nova API Priority Hints do Google pode acelerar o seu site

Social copy: o Google acaba de lançar um novo recurso, a API Priority Hints, e nosso engenheiro de software, Matheus Benites, compartilhou sua visão sobre como isso pode melhorar a experiência do usuário e aumentar a velocidade do site.

Meu nome é Matheus de Amorim Benites. Sou apaixonado por inovação e tecnologia. Desde 2017 tenho desenvolvido aplicativos e produtos web/mobile. Acredito que, quanto maior for o desafio, maior será a minha vontade de participar.

Recentemente, o Google publicou um post pedindo aos desenvolvedores e editores de sites que comecem a usar a API Priority Hints, uma nova ferramenta que ajudará a otimizar o carregamento de recursos dos sites, priorizando os mais essenciais para a experiência do usuário. Isso, por sua vez, melhoraria ainda mais o índice de Core Web Vitals (CWV).

Em um teste feito pela equipe do navegador Chrome, havia uma imagem carregada como fundo com o atributo “desempenho”, fazendo com que o navegador economizasse 1,9 segundos no tempo de download dela.

Os navegadores têm sua própria priorização de recursos padrão, mas existem algumas maneiras de dizer ao navegador para reorganizar essas prioridades de download de recursos, fazendo com que ele baixe uma imagem ou script antes de outro, ou até mesmo solicite, antecipadamente, algum recurso específico. Isso faz com que o site renderize com mais facilidade.

Tudo isso parece puramente técnico, mas pense na experiência do usuário.

O Core Web Vitals do Google oferece a melhor experiência ao seu público. Essas pessoas preferem um site que carregue mais rápido e economize tempo, é claro. O mesmo vale para o Google.

O que são Priority Hints?

Priority Hints são uma ferramenta que permite que o desenvolvedor manipule a ordem de prioridade em que os recursos do site serão solicitados e carregados para o usuário.

Imagine que a web é como uma estrada. De um lado está você, com seu dispositivo, e do outro lado da rua está a loja (uma analogia a um site) que você deseja visitar. A própria rua é sua conexão com a Internet. O DNS é como o endereço da loja que você quer ir. O TCP/IP é o mecanismo de transporte que você usa para ir àquele local (caminhando, de bicicleta, de carro etc.) e o HTTP é a linguagem que você usa para se comunicar com aquele site.

Quando você carrega um site, isto acontece: o seu navegador identifica o endereço da loja (site) e envia uma solicitação ao servidor (um computador onde o site está armazenado), pedindo permissão para acessar essa página. Se o servidor aprovar, o navegador reúne os pequenos pedaços de informações em uma página da web completa e a exibe para você.

Assim, quando um navegador solicita um recurso (imagem, script, entre outros), ele recebe uma prioridade que varia de acordo com o tipo e o local de armazenamento do recurso que está sendo solicitado.

Cada tipo tem uma prioridade diferente para o navegador solicitar, fazer o download e renderizar o recurso.

Com as Priority Hints, podemos manipular essa prioridade para melhorar a experiência do usuário nos nossos aplicativos da web.

O atributo “importância” aceita um de três valores:

• alta — o recurso é considerado de alta prioridade e o usuário deseja que o navegador o priorize, desde que as configurações de usabilidade do navegador não impeçam que isso aconteça;
• baixa — o recurso é considerado de baixa prioridade e o usuário deseja que o navegador o despreze se as configurações de usabilidade padrão permitirem;
• automática — esse é o valor padrão em que você não tem uma preferência, e permite que o navegador decida a prioridade apropriada.

Mais controle sobre suas páginas

As Priority Hints podem ter ótimas aplicações na experiência do usuário, já que você, o proprietário do site, pode ter mais controle sobre o que é carregado primeiro nas suas páginas.

Se você monitorar o comportamento do usuário por meio de mapas de calor, widgets, pontos de clique ou qualquer outro meio, poderá implementar as Priority Hints com base nesses dados para melhorar a experiência do seu site.

Você pode priorizar, por exemplo, o carregamento de determinada imagem ou de um botão que você viu os usuários interagirem mais na sua página principal. Ao contrário, você também pode diminuir a prioridade de scripts sem importância, que podem estar afetando o desempenho de outros aspectos mais interessantes do seu site em termos de marketing.

Além disso, as Priority Hints também podem ser benéficas para seus esforços de SEO.

Desde 2020, o Google usa as métricas Core Web Vitals para avaliar o desempenho de um site.

Se você tiver uma pontuação alta no CWV, o Google verá sua página como amigável e, como consequência, aumentará suas chances de obter uma classificação elevada em SERPs.

Por meio do uso de Priority Hints, você pode trabalhar juntamente à sua equipe de TI para fazer alterações ativamente nos processos de carregamento do seu site. Isso permite o teste de versões que tenham um impacto positivo nas métricas CWV e na velocidade de carregamento.

Fique de olho: essas são apenas sugestões,e não instruções — então, o navegador tem a palavra final. O Google diz que esse comportamento pode mudar conforme a implementação do Chrome amadurece. Quanto aos outros navegadores, também esperamos ver alguns avanços relacionados a esse novo recurso.

Como usar Priority Hints

Se você está lendo este artigo e tem um breve conhecimento de HTML, não precisa entrar em contato com um desenvolvedor web para implementar esses novos recursos. Caso contrário, procure um. 

Sabemos que profissionais de marketing costumam ter que lidar com ferramentas de tecnologia e, com mais frequência, precisamos aprender coisas novas e trabalhar com equipes multidisciplinares.

A seguir, veja uma abordagem técnica para Priority Hints.

Basicamente, uma Priority Hint é um recurso HTML. Ao especificar um atributo de “importância” em um elemento <script>, <img> ou <link>, você já terá controle sobre a ordem de prioridade em que o navegador solicita esses recursos.

Por exemplo:

<!-- Uma imagem à qual o navegador atribui prioridade "Alta", mas não queremos isso. -->
<img src="/images/in_viewport_but_not_important.svg" importance="low" alt="Eu sou uma imagem pouco importante!">

Como os elementos da tag <link> são afetados pelo atributo de importância, isso significa que a prioridade pode ser alterada não apenas para inclusões de folhas de estilo comuns, mas também para indicações em rel=preload:.

rel=preload: permite que você defina solicitações de pesquisa declarativas em <head>, especificando os recursos de que suas páginas precisarão logo após o carregamento, que você deseja iniciar o pré-carregamento no início do ciclo de vida de um carregamento de página antes que o renderizador do navegador principal comece a funcionar.

<!-- Queremos iniciar uma busca antecipada por um recurso, mas também desprioritizá-lo -->
<link rel="preload" href=" /js/script.js" as="script"hints importance="low">

Vemos algo diferente no trecho acima porque o “rel=preload” indica ao navegador que nosso recurso é importante e para não para quebrar a renderização da aplicação web, mas logo adiante, passamos sua importância como “baixa”.

Nesse cenário, o navegador sabe que a tag <link> é essencial para renderizar o aplicativo, mas sua importância é baixa. Ela será pré-carregada ao abrir o site, salvando esse recurso em cache e, após finalizar as demais solicitações, incluindo-o novamente no DOM assim que o recurso for referenciado.

As prioridades não se restringem ao uso de HTML.

Você também pode alterar a prioridade das solicitações de fetch em aplicações javascript usando a opção de importância, que assume os mesmos valores do atributo HTML:

fetch("https://example.com/", { importance: "low" }).then(data = > {
   // Faça o que você faria normalmente com busca de dados
});

Exemplos de uso

As tags <img> são normalmente carregadas com prioridade baixa/média, mas podem ser essenciais para a experiência do usuário em certos casos. Para determinadas imagens, o desenvolvedor pode querer indicar que sua importância está acima de outros recursos, enquanto mantém a experiência do usuário consistente.

Um exemplo importante disso é a imagem da página em um site de compartilhamento de imagens, em que a imagem é o conteúdo principal procurado pelos usuários.

Recursos de terceiros (por exemplo, scripts de anúncios) costumam ser carregados com prioridade média/alta, mas os desenvolvedores podem querer carregá-los com prioridade baixa ou alta, dependendo das necessidades de seus aplicativos.

Da mesma forma, os desenvolvedores podem querer carregar todos os recursos primários que são essenciais com alta prioridade.

Aqui estão alguns exemplos de uso do atributo de importância.

• <script src=foo importance=high>: um script deve ser carregado com grande importância, pois é necessário para a experiência do usuário.
• <link rel=preload href=foo as=image importance=high>: uma imagem deve ser pré-carregada com alta importância (potencialmente porque a imagem está na janela de visualização ou a página não tem outros recursos essenciais, pois estão todos integrados). Esse já é o comportamento padrão de pré-carregamento do navegador nas implementações atuais, mas os desenvolvedores seriam capazes de declarar explicitamente essa preferência.
• <link rel=stylesheet href=foo importance=low>: pode ser usado para indicar um estilo de baixa importância/não bloqueador que não afeta a experiência do usuário.
• <iframe src=foo importance=low>: diminui a importância do iframe e todos os seus recursos.
• <img src=foo importance=auto>: uma imagem deve ser carregada sem preferência de importância. O navegador pode usar seu próprio sistema para decidir a importância relativa da imagem.

Sempre priorize a experiência do usuário

Sabemos que alguns códigos podem parecer estranhos para os profissionais de marketing, mas trabalhar com outras áreas da sua empresa vai ser benéfico e melhorar o seu desempenho.

No final das contas, usar as Priority Hints nos ajuda a ter uma experiência do usuário mais natural. Essa é uma das principais condições do Google para classificar um site em uma posição melhor na SERP.

Provavelmente vamos evoluir nossos próprios Core Web Vitals de aplicativos, ajudando-nos a dizer ao navegador o que e quando priorizar ao renderizar nossos sites.

Eu, particularmente, adorei esse novo recurso e vou começar a aplicá-lo nos meus novos projetos. Isso nos dá um controle considerável, permitindo-nos criar aplicações extraordinárias.