- \n
- O que saber antes<\/li>\n\n\n\n
- Por dentro dos Early Hints<\/li>\n\n\n\n
- Como implementar<\/li>\n\n\n\n
- Conclus\u00e3o<\/li>\n<\/ol>\n\n\n\n
O que saber antes de entrar no assunto<\/h2>\n\n\n\n
Antes de falar diretamente dos Early Hints, primeiro precisamos entender como o acesso a um site funciona. Toda vez que um usu\u00e1rio digita um endere\u00e7o WEB no navegador e pressiona enter pra visitar um site, h\u00e1 o reconhecimento do servidor onde aquele site est\u00e1 hospedado, o que \u00e9 poss\u00edvel gra\u00e7as ao DNS.<\/p>\n\n\n\n
Cada vez que ocorre um acesso, o navegador do visitante envia um pedido ao servidor acessado, para que esse servidor informe quais conte\u00fados (como m\u00eddias, fontes, etc.) e estrutura ser\u00e3o usados para compor a “pintura” da p\u00e1gina que o visitante buscou.<\/p>\n\n\n\n
![\"Esquema](\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2024\/11\/Esquema-acesso-site-HTTP-1.jpg\")
<\/figure>\n\n\n\nDe forma um pouco mais t\u00e9cnica, o “pedido” feito do navegador para o servidor \u00e9 chamado de requisi\u00e7\u00e3o, onde ele de fato pede que o servidor devolva algum tipo de informa\u00e7\u00e3o, que nesse caso s\u00e3o as instru\u00e7\u00f5es para compor a pintura do site.<\/p>\n\n\n\n
J\u00e1 esse retorno dado pelo servidor \u00e9 chamado de resposta, onde uma s\u00e9rie de informa\u00e7\u00f5es pode ser retornadas, como HTML, JSON, textos planos, arquivos, e por a\u00ed vai. No caso de um site, o retorno costuma ser um HTML com toda a estrutura e informa\u00e7\u00f5es da p\u00e1gina, que ser\u00e1 ent\u00e3o renderizada pelo navegador do usu\u00e1rio.<\/p>\n\n\n\n
O que s\u00e3o os Early Hints?<\/h2>\n\n\n\n
Os Early Hints s\u00e3o uma tecnologia relativamente recente, que foi implementada nos navegadores para proporcionar melhores tempos de carregamento da p\u00e1gina, algo muito diretamente relacionado \u00e0 experi\u00eancia de navega\u00e7\u00e3o do visitante e fortemente ligado ao SEO, por isso sendo uma quest\u00e3o totalmente relevante.<\/p>\n\n\n\n
Os Early Hints s\u00e3o implementados a partir de um novo c\u00f3digo de status HTTP, que foi numerado como 103 e funciona basicamente por meio de requisi\u00e7\u00f5es ass\u00edncronas, ou seja, que ser\u00e3o processadas paralelamente enquanto a requisi\u00e7\u00e3o principal acontece. <\/p>\n\n\n\n
Na pr\u00e1tica, isso permite que, enquanto o servidor processa as informa\u00e7\u00f5es que devolver\u00e1 na resposta, o seu navegador j\u00e1 possa come\u00e7ar a receber e pr\u00e9-carregar alguns dos recursos que ser\u00e3o usados pela p\u00e1gina, permitindo que o tempo de carregamento final acabe diminuindo em n\u00edveis consider\u00e1veis<\/p>\n\n\n\n
![\"Esquema](\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2024\/11\/Esquema-diagrama-early-hints.jpg\")
<\/figure>\n\n\n\nCom esse mecanismo ass\u00edncrono, o servidor continua processando as informa\u00e7\u00f5es que devem ser pintadas na p\u00e1gina acessada pelo visitante, ao mesmo que tempo em que devolve outros recursos que tamb\u00e9m ser\u00e3o usados.<\/p>\n\n\n\n
Como implementar?<\/h2>\n\n\n\n
Por mais interessante que essa funcionalidade seja, \u00e9 muito importante dizer que esse \u00e9 um recurso que ainda n\u00e3o \u00e9 amplamente suportado por todos os Servidores Web<\/a>, assim como tamb\u00e9m est\u00e1 em estado experimental em alguns navegadores de internet.<\/p>\n\n\n\n
Por isso, sua ado\u00e7\u00e3o pode n\u00e3o ser t\u00e3o efetiva para alguns sites ou visitantes, visto que o servidor ou visitante pode n\u00e3o dispor dos recursos necess\u00e1rios para que essa metodologia seja realmente relevante. Al\u00e9m disso, \u00e9 v\u00e1lido mencionar que a ado\u00e7\u00e3o de Early Hints pode n\u00e3o ser necess\u00e1ria se o seu site n\u00e3o precisar de um tempo para pr\u00e9-processar informa\u00e7\u00f5es, e em vez disse oferece uma resposta de c\u00f3digo 200 de forma mais r\u00e1pida.<\/p>\n\n\n\n
Com os avisos em m\u00e3os, agora sim podemos falar de como adotar isso em seu site. Considerando ainda que nem todos os WebServers disp\u00f5em dessa funcionalidade, os olhos se voltam ao CloudFlare<\/a>, que tem esse recurso de forma experimental em seus planos.<\/p>\n\n\n\n
Dessa forma, os Early Hints s\u00e3o tratados diretamente pelo CDN, em vez de serem tratados pelo servidor, o que ajuda a permitir que qualquer site que utilize a plataforma possa implementar facilmente, atrav\u00e9s de poucos cliques pelo painel de controle.<\/p>\n\n\n\n
Conclus\u00e3o<\/h2>\n\n\n\n
Os Early Hints s\u00e3o, de fato, algo extremamente promissor, e que podem mudar muito a forma como experimentamos o acesso aos sites em um futuro n\u00e3o muito distante, mas infelizmente ainda \u00e9 um recurso n\u00e3o muito difundido ou utilizado, assim como n\u00e3o totalmente suportado.<\/p>\n\n\n\n
Por isso, \u00e9 algo que ainda precisa de algum amadurecimento e maior ado\u00e7\u00e3o dos usu\u00e1rios para que se torne ainda mais est\u00e1vel e possa realmente come\u00e7ar a mudar o jogo, fazendo grande diferen\u00e7a nos tempos de carregamento, algo que todo webmaster sempre sonha, claro.<\/p>\n\n\n\n