Um resumo das principais novidades e atualizações anunciadas durante nosso evento on-line de três dias na comunidade, além de um lembrete sobre os próximos eventos regionais.
Acabamos de encerrar nosso evento de três dias, o web.dev LIVE, em que parte da comunidade da Web se reuniu on-line para falar sobre o estado do desenvolvimento da Web. Iniciamos cada dia em um fuso horário regional diferente, e os Googlers compartilharam uma rodada de atualizações, notícias e dicas para ajudar os desenvolvedores com ferramentas e orientações para manter a Web estável, poderosa e acessível.
Se você perdeu parte da transmissão ao vivo, todas as sessões são gravadas e ficam disponíveis para você assistir no YouTube. Também teremos eventos regionais em todo o mundo, organizados por grupos de desenvolvedores do Google, e forneceremos sessões detalhadas sobre tópicos relacionados ao que cobrimos durante o web.dev LIVE.
Vamos nos aprofundar em algumas das notícias e atualizações que foram compartilhadas nos três dias.
Métricas da Web
A equipe do Chrome anunciou a iniciativa Métricas da Web para fornecer orientações, métricas e ferramentas unificadas para ajudar os desenvolvedores a oferecer ótimas experiências do usuário na Web. A equipe da Pesquisa Google também anunciou recentemente que avaliará a experiência na página como um critério de classificação e incluirá as métricas das Core Web Vitals como base.
Os três pilares das Core Web Vitals de 2020 são o carregamento, a interatividade e a estabilidade visual do conteúdo da página, que são capturados pelas seguintes métricas:
- A Maior exibição de conteúdo mede a velocidade de carregamento percebida e marca o ponto na linha do tempo de carregamento da página em que o conteúdo principal provavelmente foi carregado.
- A latência na primeira entrada mede a capacidade de resposta e quantifica a experiência dos usuários ao tentar interagir pela primeira vez com uma página.
- A Mudança de layout cumulativa mede a estabilidade visual e quantifica a quantidade de movimentos inesperados do conteúdo da página.
No web.dev LIVE, compartilhamos práticas recomendadas sobre como otimizar para o Core Web vitals e como usar o Chrome DevTools para explorar os valores vitais do seu site. Também compartilhamos muitas outras palestras sobre desempenho que podem ser encontradas em web.dev/live (em inglês) na programação do primeiro dia.
tooling.report
Desenvolver para uma plataforma tão ampla quanto a web pode ser um desafio. As ferramentas de build geralmente estão no centro do projeto de desenvolvimento da Web e desempenham um papel fundamental no processamento do desenvolvedor e do ciclo de vida do produto.
Todos vimos arquivos de configuração de build desagradáveis. Por isso, criamos o tooling.report para ajudar desenvolvedores da Web e autores de ferramentas a superar a complexidade da Web. É um site que ajuda você a escolher a ferramenta de build certa para seu próximo projeto, decidir se vale a pena migrar de uma ferramenta para outra ou descobrir como incorporar práticas recomendadas à configuração de ferramentas e à base de código.
Projetamos um conjunto de testes para determinar quais ferramentas de build permitem que você siga as práticas recomendadas de desenvolvimento da Web. Trabalhamos com os autores da ferramenta de build para garantir que as ferramentas fossem usadas corretamente e representadas de maneira justa.
A versão inicial do toolsing.report abrange webpack v4, Rollup v2, Parcel v2 e Browserify com Gulp, que parecem ser as ferramentas de build mais usadas no momento. Criamos o toolsing.report com a flexibilidade de adicionar mais ferramentas de build e outros testes com a ajuda da comunidade.
Se faltar uma prática recomendada que precisa ser testada, faça uma proposta em um problema do GitHub (link em inglês). Se quiser escrever um teste ou adicionar uma nova ferramenta que não incluímos no conjunto inicial, sinta-se à vontade para contribuir.
Enquanto isso, você pode ler mais sobre nossa abordagem para a criação de tooling.report e assistir nossa sessão do web.dev AO VIVO (em inglês).
Privacidade e segurança na Web
O Chrome acredita em uma Web aberta que respeite a privacidade dos usuários e mantém os principais casos de uso que mantêm a Web funcionando para todos.
Em 2019, o Chrome propôs uma atualização no padrão de cookies para restringir os cookies a contextos próprios por padrão e exigir que esses cookies em contextos de terceiros fossem explicitamente marcados como tal. Isso oferece, especificamente, uma linha de defesa contra ataques de falsificação de solicitações entre sites. A proposta está sendo adotada pelo Chrome, Firefox, Edge e outros navegadores.
Embora o Chrome tenha decidido reverter temporariamente essas mudanças em função da COVID-19, infelizmente, durante uma crise em que as pessoas estão mais vulneráveis, esses tipos de ataques também aumentam. Portanto, com o lançamento da versão estável do Chrome 84 (meados de julho de 2020), as mudanças começarão a ser lançadas novamente em todas as versões do Chrome a partir da 80. Confira as orientações sobre cookies SameSite e a sessão LIVE da web.dev para saber mais.
Além disso, sob o banner do Sandbox de privacidade, o Chrome está apresentando várias propostas padrão que oferecem suporte aos casos de uso para permitir que as pessoas ganhem a vida usando a plataforma da Web, mas de uma maneira que respeite melhor a privacidade do usuário. O Chrome está ativamente buscando feedback sobre essas propostas e está participando de fóruns abertos do W3C para discutir as propostas, bem como aquelas enviadas por outras partes. Saiba mais sobre essa iniciativa na sessão Segurança e privacidade para a Web aberta.
Por fim, analisando a segurança do usuário, o Spectre era uma vulnerabilidade que significava que um código malicioso executado em um processo de navegador podia ler dados associados a esse processo, mesmo que fossem de uma origem diferente. Uma das mitigações do navegador para isso é o isolamento de sites, ou seja, colocar cada site em um processo separado. Assista à sessão AO VIVO do web.dev sobre as novas políticas de abertura e incorporação de origem cruzada (COOP e COEP) para saber mais.
Como criar uma Web com recursos avançados
O Chrome quer que você tenha liberdade para criar os apps da Web da mais alta qualidade que oferecem o maior alcance de usuários em todos os dispositivos. Combinando a capacidade de instalação e a confiabilidade dos PWAs, com o projeto de recursos (Projeto Fugu), o Chrome está se concentrando em três coisas para preencher a lacuna entre os apps específicos da plataforma e a Web, para ajudar você a criar e oferecer ótimas experiências.
Primeiro, as equipes do Chrome têm trabalhado duro para oferecer aos desenvolvedores da Web e aos usuários mais controle sobre a experiência de instalação, adicionando uma promoção de instalação à omnibox e muito mais. Apesar da onipresença da Web, ainda é importante que algumas empresas tenham o app na loja. Para ajudar, o Chrome lançou o Bubblewrap, uma biblioteca e CLI que facilita o download do seu PWA na Play Store. Na verdade, o PWABuilder.com agora usa o Bubblewrap em segundo plano. Com apenas alguns cliques, você pode gerar um APK e fazer upload do seu PWA para a Play Store, desde que atenda aos critérios.
Em segundo lugar, o Chrome está oferecendo maior integração com o sistema operacional, como a capacidade de compartilhar uma foto, música ou qualquer outra coisa invocando o serviço de compartilhamento no nível do sistema com a API Web Share, ou a capacidade de receber conteúdo quando compartilhado de outro app instalado. Você pode manter os usuários atualizados ou notificá-los sutilmente sobre novas atividades com um selo de app. Além disso, agora é mais fácil para os usuários iniciar uma ação rapidamente usando os Atalhos de apps, que serão lançados no Chrome 84 (meados de julho de 2020).
Por fim, o Chrome está trabalhando em novos recursos que possibilitam novos cenários antes, como editores que leem e gravam em arquivos no sistema de arquivos local do usuário ou acessam a lista de fontes instaladas localmente para que os usuários possam usá-las nos designs.
Durante o web.dev LIVE, falamos sobre vários outros recursos e recursos que podem permitir a você oferecer o mesmo tipo de experiência, com os mesmos recursos, de apps específicos da plataforma. Ver todas as sessões em web.dev/live (em inglês) na programação do dia 2.
Novidades no Chrome DevTools e no Lighthouse 6.0
Chrome Devtools: nova guia "Problemas", emulador de deficiências de cor e suporte para as Métricas da Web
Um dos recursos mais eficientes do Chrome DevTools é a capacidade de detectar problemas em uma página da Web e chamá-los à atenção do desenvolvedor. Isso é mais pertinente à medida que avançamos para a próxima fase de uma Web que prioriza a privacidade. Para reduzir a fadiga e a desordem das notificações no Console, o Chrome DevTools lançou a guia Problemas, que se concentra em três tipos de problemas críticos: problemas de cookies, conteúdo misto e problemas de COEP. Assista à sessão AO VIVO do web.dev sobre como encontrar e corrigir problemas com a guia "Problemas" para começar.
Além disso, com as Core Web Vitals se tornando um dos conjuntos de métricas mais importantes para os desenvolvedores da Web monitorarem e medirem, o DevTools quer garantir que os desenvolvedores possam rastrear facilmente a performance em relação a esses limites. Essas três métricas agora estão no painel de desempenho do Chrome DevTools.
Por fim, com um número cada vez maior de desenvolvedores focados na acessibilidade, o DevTools também lançou um emulador de deficiências de visão de cores (link em inglês), que permite emular a visão borrada e outros tipos de deficiências de visão. Saiba mais sobre esse e muitos outros recursos na sessão O que há de novo no DevTools.
Lighthouse 6.0: novas métricas, medições do laboratório "Core Web Vitals", uma pontuação de desempenho atualizada e novas auditorias
O Lighthouse é uma ferramenta automatizada de código aberto que ajuda os desenvolvedores a melhorar o desempenho dos sites. Na versão mais recente, a equipe do Lighthouse concentrou-se em fornecer insights com base em métricas que oferecem uma visão equilibrada da qualidade da experiência do usuário em relação a dimensões críticas.
Para garantir a consistência, o Lighthouse adicionou suporte às Core Web Vitals: LCP, TBT (um substituto de FID, já que o Lighthouse é uma ferramenta de laboratório e FID só pode ser medido em campo) e CLS. O Lighthouse também removeu três métricas antigas: Primeira exibição significativa, Primeira CPU inativa e Máximo de potencial FID. Essas remoções se devem a considerações como a variabilidade de métricas e as métricas mais recentes que oferecem reflexões melhores sobre a parte da experiência do usuário que o Lighthouse está tentando medir. Além disso, o Lighthouse também fez alguns ajustes no quanto cada métrica afeta a pontuação de desempenho geral com base no feedback dos usuários.
O Lighthouse também adicionou uma calculadora de pontuação para ajudar a analisar sua pontuação de desempenho, fornecendo uma comparação entre as pontuações das versões 5 e 6. Quando você executa uma auditoria com o Lighthouse 6.0, o relatório vem com um link para a calculadora com os resultados preenchidos.
Por fim, o Lighthouse adicionou várias novas auditorias com foco na análise e acessibilidade do JavaScript.
Para saber mais, assista à sessão Novidades em ferramentas de velocidade.
Saiba mais
Agradecemos a todos da comunidade que se juntaram a nós para discutir as oportunidades e os desafios da plataforma da Web.
Essa postagem resumiu alguns dos destaques do evento, mas havia muito mais. Confira todas as sessões e inscreva-se na newsletter web.dev se quiser mais conteúdo diretamente na sua caixa de entrada. Acesse a seção Eventos regionais em web.dev/live para conferir o próximo evento da comunidade no seu fuso horário.