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

Acompanhe as novidades e ultimas postagens.


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="https://rockcontent.com/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="https://rockcontent.com/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.

Confira nossos planos de hospedagem de Sites, planos de hospedagem para WordPress, planos Econ√īmicos. Planos de Email Profissional e Servidores VPS. Tenha um atendimento personalizado entrando em Contato pelo Site ou pelo WhatsApp. Se voc√™ √© um revendedor, confira nossos planos de revenda.

Compartilhar:

Deixe um coment√°rio

Categorias
Assinar por e-mail

Digite seu endere√ßo de e-mail para assinar e receber notifica√ß√Ķes de novas publica√ß√Ķes por e-mail.

Estatísticas do blog
  • 54.053 Views