Um resumo das principais notícias e atualizações anunciadas durante nosso evento on-line de três dias para a comunidade e 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 de desenvolvedores web se reuniu on-line para falar sobre o estado do desenvolvimento para a Web. Começamos cada dia em um fuso horário regional diferente, e os Googlers compartilharam uma série de atualizações, notícias e dicas com o objetivo de ajudar os desenvolvedores com ferramentas e orientações para manter a Web estável, eficiente e acessível.
Se você perdeu alguma parte da transmissão ao vivo, todas as sessões foram gravadas e estão disponíveis para você assistir no YouTube. Também temos eventos regionais em todo o mundo, organizados pelos Google Developer Groups, que vão oferecer sessões de investigação sobre tópicos relacionados ao que abordamos durante o web.dev LIVE.
Vamos conferir algumas das notícias e atualizações compartilhadas durante os três dias.
Métricas da Web
A equipe do Chrome anunciou a iniciativa Web Vitals para fornecer orientações, métricas e ferramentas unificadas que ajudam os desenvolvedores a oferecer ótimas experiências do usuário na Web. A equipe da Pesquisa Google também anunciou recentemente que vai 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 carregamento, interatividade e estabilidade visual do conteúdo da página, que são capturados pelas seguintes métricas:
- A Largest Contentful Paint 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 First Input Delay mede a capacidade de resposta e quantifica a experiência dos usuários ao tentar a primeira interação com uma página.
- A Cumulative Layout Shift mede a estabilidade visual e quantifica a quantidade de movimento inesperado do conteúdo da página.
No web.dev LIVE, compartilhamos as práticas recomendadas sobre como otimizar para as Core Web Vitals e como usar o Chrome DevTools para analisar os valores das métricas do seu site. Também compartilhamos muitas outras palestras relacionadas ao desempenho, que você pode encontrar em web.dev/live na programação do Dia 1.
tooling.report
Desenvolver para uma plataforma tão ampla quanto a Web pode ser um desafio. As ferramentas de build costumam ser o coração do seu projeto de desenvolvimento web, assumindo um papel fundamental no gerenciamento do ciclo de vida do desenvolvedor e do produto.
Todos nós já vimos arquivos de configuração de build difíceis de usar. Por isso, para ajudar os desenvolvedores web e os autores de ferramentas a lidar com a complexidade da Web, criamos o tooling.report. É 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 as práticas recomendadas à configuração de ferramentas e à base de código.
Criamos um conjunto de testes para determinar quais ferramentas de build permitem que você siga as práticas recomendadas de desenvolvimento web. Trabalhamos com os autores das ferramentas de build para garantir que as ferramentas fossem usadas corretamente e representadas de forma justa.
A versão inicial do tooling.report abrange o webpack v4, o Rollup v2, o Parcel v2 e o Browserify com o Gulp, que parecem ser as ferramentas de build mais usadas no momento. Criamos o tooling.report com a flexibilidade de adicionar mais ferramentas de build e testes adicionais com a ajuda da comunidade.
Se estiver faltando uma prática recomendada que precisa ser testada, proponha-a em um problema do GitHub. Se você quiser escrever um teste ou adicionar uma nova ferramenta que não incluímos no conjunto inicial, contribua.
Enquanto isso, leia mais sobre nossa abordagem para criar o tooling.report e assista à nossa sessão do web.dev LIVE.
Privacidade e segurança na Web
O Chrome acredita em uma Web aberta que respeite a privacidade dos usuários e mantenha os principais casos de uso que fazem a Web funcionar para todo mundo.
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 os cookies para contextos de terceiros sejam explicitamente marcados como tal. Especificamente, isso fornece 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 devido à COVID-19, infelizmente, durante uma crise em que as pessoas estão mais vulneráveis, também há um aumento desse tipo de ataque. Portanto, com o lançamento do Chrome 84 Stable (meados de julho de 2020), as mudanças vão começar 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 web.dev LIVE para saber mais.
Além disso, sob o banner do Sandbox de privacidade, o Chrome está introduzindo várias propostas de padrões que visam oferecer suporte aos casos de uso que permitem 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á buscando ativamente feedback sobre essas propostas e participando dos 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 permitia que um código malicioso em execução em um processo do navegador pudesse ler todos os 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 do web.dev LIVE sobre as novas políticas de abertura e incorporação entre origens (COOP e COEP) para saber mais.
Como criar uma Web com recursos avançados
O Chrome quer que você tenha liberdade para criar apps da Web de alta qualidade que ofereçam o maior alcance para usuários em vários dispositivos. Combinando a capacidade de instalação e a confiabilidade dos PWAs com o projeto de recursos (Project Fugu), o Chrome está se concentrando em três coisas para reduzir 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 estão trabalhando para dar aos desenvolvedores 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 para algumas empresas ter o app na loja. Para ajudar, o Chrome lançou o Bubblewrap, uma biblioteca e CLI que facilita a inclusão do PWA na Google Play Store. Na verdade, o PWABuilder.com (link em inglês) agora usa o Bubblewrap em segundo plano. Com apenas alguns cliques do mouse, você pode gerar um APK e fazer upload do PWA para a Google Play Store, desde que atenda aos critérios.
Em segundo lugar, o Chrome oferece uma integração mais estreita 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 um app instalado diferente. Você pode manter os usuários atualizados ou notificá-los sutilmente sobre novas atividades com selos de apps. Além disso, agora é mais fácil para os usuários iniciarem rapidamente uma ação 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 que não eram possíveis antes, como editores que leem e gravam arquivos no sistema de arquivos local do usuário ou recebem 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 funcionalidades que permitem oferecer o mesmo tipo de experiência, com os mesmos recursos, que os apps específicos da plataforma. Confira todas as sessões em web.dev/live 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 às Web Vitals
Um dos recursos mais avançados do Chrome DevTools é a capacidade de identificar problemas em uma página da Web e chamar a atenção do desenvolvedor para eles. Isso é mais pertinente à medida que avançamos para a próxima fase de uma Web com foco na privacidade. Para reduzir o cansaço de notificações e a desordem no Console, o Chrome DevTools lançou a guia Problemas, que se concentra em três tipos de problemas críticos para começar: problemas de cookies, conteúdo misto e problemas de COEP. Para começar, assista à sessão do web.dev LIVE sobre como encontrar e corrigir problemas com a guia "Problemas".
Além disso, como as Core Web Vitals se tornaram um dos conjuntos de métricas mais importantes para os desenvolvedores web acompanharem e medirem, o DevTools quer garantir que os desenvolvedores possam acompanhar facilmente o desempenho em relação a esses limites. Portanto, essas três métricas agora estão no painel de desempenho do Chrome DevTools.
Por fim, com um número crescente de desenvolvedores focando na acessibilidade, o DevTools também introduziu um emulador de deficiências de visão de cores que permite que os desenvolvedores emulem visão embaçada e outros tipos de deficiências visuais. Saiba mais sobre esse e muitos outros recursos na sessão Novidades do DevTools.
Lighthouse 6.0: novas métricas, medições de laboratório das 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 a performance do site. Na versão mais recente, a equipe do Lighthouse se concentrou em fornecer insights com base em métricas que dão 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 proxy para FID, já que o Lighthouse é uma ferramenta de laboratório e a FID só pode ser medida em campo) e CLS. O Lighthouse também removeu três métricas antigas: First Meaningful Paint, First CPU Idle e Max Potential FID. Essas remoções se devem a considerações como variabilidade de métricas e métricas mais recentes que oferecem melhores reflexos da parte da experiência do usuário que o Lighthouse está tentando medir. Além disso, o Lighthouse também fez alguns ajustes na forma como cada métrica influencia a pontuação geral de desempenho com base no feedback dos usuários.
O Lighthouse também adicionou uma calculadora de pontuação para ajudar você a analisar sua pontuação de desempenho, comparando 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 seus resultados preenchidos.
Por fim, o Lighthouse adicionou várias novas auditorias, com foco na análise de JavaScript e na acessibilidade.
Para saber mais, assista à sessão Novidades nas ferramentas de velocidade.
Saiba mais
Agradecemos a todos na comunidade que se juntaram a nós para discutir as oportunidades e os desafios da plataforma da Web.
Este post resumiu alguns dos destaques do evento, mas houve muito mais. Confira todas as sessões e assine a newsletter do web.dev se quiser receber mais conteúdo diretamente na sua caixa de entrada. E acesse a seção Eventos regionais em web.dev/live para encontrar um evento da comunidade no seu fuso horário.