Principais insights do Chrome Dev Summit 2021

O Chrome Dev Summit é um evento anual em que especialistas do Chrome compartilham os destaques sobre seus produtos mais recentes e sua visão para o futuro do Chrome e da Web.

Este artigo contém os principais insights do Chrome Dev Summit 2021.

As mudanças mais interessantes anunciadas pela equipe do Chrome incluem:

• Planos para restringir a quantidade de informações em strings de User-Agents,
• Anúncio de novo suporte para fluxos de usuário no Lighthouse e DevTools,
• Apresentando duas novas métricas de desempenho (candidatas a Core Web Vitals) e
• Novos recursos de design responsivo.

Eliminação gradual de cookies de terceiros – Dicas de cliente do agente do usuário

O Privacy Sandbox continua sendo um dos principais elementos do esforço crescente do Google para criar uma web mais focada na privacidade.

O navegador não tem como saber se você está usando cookies de terceiros para algo útil, como fornecer uma experiência personalizada ou manter um usuário conectado, ou para rastreamento entre sites.

fonte: Barb Smith

É por isso que o Chrome visa criar APIs criadas especificamente para permitir que você preserve funcionalidades (como publicidade, detecção de fraudes ou entrega de conteúdo personalizado) sem a necessidade de cookies de terceiros.

Depois de garantir que os desenvolvedores tenham tempo para adotar as APIs, o Chrome descontinuará com segurança o suporte para cookies de terceiros.

As novas tecnologias e seus estágios de desenvolvimento podem ser vistos no Privacy Sandbox Timeline.

Uma das novas soluções lançadas este ano é o User-Agent Client Hints (UA-CH).

A string User-Agent contém muitas informações sobre o dispositivo e o navegador do usuário, que podem ser usadas para impressão digital do navegador.

O Chrome visa combater a impressão digital do navegador, reduzindo a quantidade padrão de informações na string User-Agent e dificultando a identificação de usuários individuais. As informações na string conterão apenas:

• Marca e versão do navegador,
• Informações se é um desktop ou celular, e
• A plataforma em que está sendo executado.

A string User-Agent fornecerá algumas informações por padrão, que podem abranger a maioria dos seus casos de uso, mas informações mais detalhadas estão disponíveis apenas mediante solicitação em um formato direto.

fonte: Desenvolvedores do Chrome

A partir de abril de 2022, o Chrome reduzirá gradualmente as strings do User-Agent.

Você ainda poderá obter dados adicionais sobre seus usuários usando a API User-Agent Client Hints, mas os usuários poderão decidir quanta informação desejam compartilhar.

Atualizações de ferramentas de desempenho

O Chrome anunciou algumas mudanças interessantes e novos recursos para medir e analisar o desempenho da web. Inclui:

• Melhorar a interface do usuário no PageSpeed ​​Insights,
• Adicionando suporte para fluxos de usuário no Lighthouse e DevTools,
• Apresentando duas novas métricas experimentais.

Alterações na interface do PageSpeed ​​Insights

Houve uma atualização na interface do usuário do PageSpeed ​​Insights , tornando-a mais intuitiva e melhorando a apresentação dos dados.

A nova interface inclui uma distinção clara entre “Lab Data” com base no relatório Lighthouse e “Field Data” com base em experiências reais do usuário.

Além disso, um novo recurso chamado “Expand View” adiciona uma função à seção Field Data. Você pode usá-lo para ver detalhes granulares de Core Web Vitals.

O Google também moveu o Resumo de origem abaixo de Dados de campo. Após clicar nele, você pode ver a pontuação agregada de todas as páginas da mesma origem.

Abaixo das seções de dados de campo e laboratório, você pode encontrar informações adicionais e úteis, incluindo:

• Período de coleta de dados,
• Duração da visita,
• Dispositivos,
• Conexões de rede,
• Tamanho da amostra,
• Versões do Chrome.

As mudanças também estão chegando à avaliação do Core Web Vitals. Em vez de uma única palavra “aprovada” ou “reprovada”, ela estará disponível em uma subseção separada.

Por fim, a imagem da página de carregamento será removida da seção de campos. Você encontrará a imagem e as miniaturas exibindo a sequência de carregamento na seção de dados do laboratório.

Suporte para fluxos de usuário no Lighthouse

A nova API do Lighthouse permite analisar o fluxo do usuário simulando cliques em links, rolando e carregando páginas adicionais em vez de analisar o desempenho de cada página separadamente.

O Lighthouse poderá distinguir e fornecer relatórios separados para navegação de página, quaisquer interações do usuário que ocorreram durante um determinado período de tempo e instantâneos para representar um estado capturado de uma página.

fonte: Houssein Djirdeh

Com o novo recurso, você pode entender melhor a experiência do usuário e identificar os problemas de desempenho ao longo da jornada do usuário em seu site.

Novo painel de registro no DevTools

O suporte para análise de fluxos de usuários também foi adicionado diretamente no DevTools.

Com um painel de registro recém-lançado no DevTools , agora você pode analisar, gravar e exportar toda a jornada do usuário em seu site.

A nova ferramenta permite visualizar todas as ações que os usuários realizam em seu site, como pressionamentos de teclas ou cliques em links, diretamente no painel Desempenho. Esse recurso tem como objetivo ajudá-lo a entender e depurar interações complexas com facilidade.

Duas novas métricas de desempenho

O Chrome anunciou duas novas métricas de desempenho como potenciais candidatas ao Core Web Vitals.

Capacidade de resposta

A capacidade de resposta destina-se a capturar a capacidade de resposta geral de uma página.

Atualmente, usamos o Atraso na primeira entrada para medir a capacidade de resposta de uma página durante o carregamento. O FID é uma métrica útil porque a capacidade de resposta é particularmente volátil quando o navegador precisa carregar muitos recursos e o tempo de encadeamento principal está em grande demanda.

Mas todas as medidas do FID são quanto tempo o navegador está pronto para processar uma solicitação do usuário. Ele não permite medir a latência de entrada ao longo do ciclo de vida de uma determinada página.

A equipe do Chrome ainda está conceituando a nova métrica de responsividade. Você pode descobrir mais sobre os desafios de medir a latência de entrada ao longo do ciclo de vida da página aqui.

Suavidade

Suavidade visa abordar a medição de “gaguejos” ou “congelamentos” durante a animação ou rolagem. Essa nova métrica visa entender melhor com que frequência os quadros de animação são descartados e o quanto isso afeta o usuário.

A métrica de Percentual de quadros descartados proposta calcularia o número de quadros descartados e apresentaria uma pontuação média que deveria refletir o quão suave é a animação da perspectiva do usuário.

O que importa é: a proporção de tempo de espera por atualizações importantes. Achamos que isso combina com a maneira natural como os usuários experimentam a suavidade do conteúdo da web na prática. Até agora, usamos o seguinte como um conjunto inicial de métricas :

• Percentual médio perdido: para todos os quadros de animação não inativos em toda a linha do tempo
• Pior Caso de Percentual de Quadros Perdidos: medido em janelas de tempo deslizantes de 1 segundo.
• 95º percentil de Percentual de quadros perdidos: medido em janelas de tempo deslizantes de 1 segundo.

fonte: web.dev

O novo responsivo

O design responsivo não é mais apenas ajustar seu site para funcionar bem em celulares e desktops. É muito mais, e os desenvolvedores precisam fornecer uma experiência personalizada para todos e incluir preferências do usuário, como modo escuro ou dispositivos dobráveis.

As mudanças no Design Responsivo dizem respeito aos recursos CSS. Alguns dos novos recursos incluem novas especificações de consultas de contêiner, Scroll Timeline e propriedades Accent Color.

Propriedade de ajuste de tamanho para tipografia

Um recurso particularmente interessante é a propriedade de ajuste de tamanho para tipografia. Você pode usar o ajuste de tamanho para ajustar a fonte padrão para corresponder à fonte da Web que está prestes a ser carregada.

É especialmente importante porque pode ajudá-lo a evitar o deslocamento cumulativo de layout , reduzindo o deslocamento causado pelo carregamento da fonte da Web.

Modo escuro

Além disso, o Chrome está trabalhando em um recurso de algoritmo de escuridão automática auxiliado por aprendizado de máquina. Isso significa que o navegador pode gerar automaticamente um tema escuro, com a possibilidade de desativar essa funcionalidade.

Visite a página de desenvolvedores do Chrome para saber mais sobre o novo recurso de escurecimento automático do Chrome e testá-lo em seu dispositivo.