Novidades para a plataforma web | Keynote

[0:05] -Eu sou Ben. -E eu sou Dion. Somos líderes na equipe do Chrome. [Dion] Nós dois trabalhamos juntos na plataforma web por muitos anos. Foi divertido ver os sites evoluírem de simples documentos conectados para os ricos aplicativos web interativos de hoje. A web se tornou uma plataforma de computação de alto desempenho e de uso geral, usada por bilhões de pessoas em todo o mundo. [Dion] O crescimento da web acelerou no último ano, à medida que a pandemia empurrou mais de nossas interações diárias para o ambiente online, desencadeando uma corrida para melhorar as experiências web à medida que o uso dispara.

[0:40] E para nós, isso reforça a importância da web e a necessidade de todos nós trabalharmos juntos para torná-la melhor. Agora, vimos muitas plataformas de computação surgirem e caírem nas últimas décadas. Uma coisa é realmente clara: o velho ditado evolua ou morra desempenha um papel importante na relevância contínua de qualquer plataforma. Agora, a web evoluiu muito ao longo dos anos. E olhando para frente, acho que o ritmo da evolução está acelerando, porque de certa forma precisa acompanhar a tecnologia e a sociedade em geral. Então, no Google I/O deste ano, temos várias sessões que vão atualizá-lo sobre alguns dos últimos desenvolvimentos na web.

[1:19] Nesta sessão, daremos um rápido resumo do que consideramos os principais temas que você deve ter em mente este ano. E indicaremos onde você pode aprender mais e se aprofundar. Vamos começar com privacidade, explicando como a web está evoluindo para permitir uma experiência de navegação privada para todos os usuários por padrão. Em seguida, abordaremos como a web está possibilitando uma nova geração de aplicativos web poderosos, rápidos e integrados, e uma experiência de usuário fantástica. E, finalmente, resumiremos o trabalho que estamos fazendo para ajudar os desenvolvedores a serem produtivos e bem-sucedidos com a web.

[1:52] Então, vamos começar com privacidade, e faremos isso falando sobre sandboxes. Os navegadores modernos são construídos em torno da metáfora de uma sandbox. Cada site que você visita é isolado por padrão do resto do seu sistema, incluindo de sites e outras abas abertas, como se estivéssemos cercados por paredes virtuais como as de uma sandbox em um jardim. Agora, o Chrome inovou com o modelo de sandbox do navegador desde os primeiros dias, primeiro isolando cada site em seu próprio processo.

[2:23] E mais recentemente, expandindo isso para isolar cada iframe de origem cruzada em uma página web em seu próprio processo. Estamos adotando a mesma abordagem com dados do usuário e rastreamento, construindo uma espécie de sandbox de privacidade que busca manter todas as suas informações seguras e protegidas dentro do seu navegador, resultando em uma web onde sua identidade e atividade são privadas por padrão. Anunciamos o esforço do Privacy Sandbox há dois anos, como uma iniciativa aberta, uma colaboração com a comunidade para dar vida a essa visão, ao mesmo tempo em que tomamos cuidado para ajudar a transição do ecossistema web para um novo modelo de maneira ponderada e deliberada.

[3:07] Gostaríamos de dar uma atualização sobre nosso progresso. Nosso primeiro passo, anunciado no Google I/O há dois anos, foi mudar o comportamento dos cookies no Chrome, passando de visíveis entre sites por padrão para visíveis apenas para o mesmo site que os definiu. Antes dessa mudança, não estava realmente claro se um cookie se destinava ao uso primário ou de terceiros, e os navegadores precisavam observar como os cookies eram usados na prática para inferir sua finalidade. Isso também criou um problema de segurança, porque essa ampla visibilidade padrão dos cookies expunha os usuários a ataques de falsificação de solicitação entre sites, com base em terceiros observando as informações nesses cookies.

[3:48] Agora, os desenvolvedores precisam optar por usar cookies entre sites, os chamados cookies de terceiros. E, por sua vez, os navegadores puderam então desativar esses cookies de maneira muito simples. Esse comportamento padrão de preservação da privacidade agora é aplicado no Chrome, Edge e, muito em breve, no Firefox. Em seguida, temos colaborado com o ecossistema em uma nova família de APIs que oferecem alternativas que preservam a privacidade para casos de uso que hoje dependem de cookies de terceiros, como login federado, anúncios personalizados e rastreamento de conversões.

[4:23] Para esclarecer como essas APIs estão abordando esse desafio, vamos examinar mais de perto uma delas: a API Attribution Reporting. Um aspecto fundamental de qualquer negócio na web é como você expande seu público de usuários, e isso geralmente envolve publicidade para aumentar o tráfego. Do outro lado desses dólares de publicidade, os editores de conteúdo na web frequentemente dependem da receita de anúncios para fazer seu modelo de negócios funcionar. Descobrir quantos usuários realmente clicaram no anúncio e se esses usuários subsequentemente fizeram algo como se inscrever em uma newsletter ou concluir uma compra é uma parte importante desse modelo.

[5:01] Tradicionalmente, essa medição é realizada rastreando o usuário antes e depois do clique em sites com um cookie de terceiros. Então, como podemos fazer isso de uma forma que não envolva o rastreamento desse usuário? Bem, aí entra o Attribution Reporting. Usando essa API proposta, nenhum dado de identificação do usuário é compartilhado entre os sites. Em vez disso, é o navegador que acompanha a conversão do anúncio. Depois, o navegador envia um relatório criptografado ao anunciante para cada um desses eventos de conversão.

[5:34] Mas ele adiciona atrasos de tempo e ruído a esses relatórios para conter ainda mais as tentativas de identificar usuários. Essa técnica é amplamente conhecida como privacidade diferencial. Essa abordagem permite que ambas as partes ainda possam medir a eficácia de suas campanhas de anúncios e entender qual comportamento os anúncios conseguem gerar, e fazer isso sem rastrear o usuário entre sites. Agora, o Attribution Reporting é uma de muitas novas propostas de API no projeto Privacy Sandbox.

[6:06] Ele está disponível para uso como experimento de origin trial do Chrome hoje, junto com várias outras APIs, e lançaremos mais ao longo do ano. Enquanto trabalhamos com todos vocês em todo o ecossistema para trazer essas novas APIs para a plataforma web, também estamos avançando com os preparativos para eliminar gradualmente os cookies de terceiros e implementar proteção contra outras formas de rastreamento encoberto. E temos mais detalhes sobre o que fazer com seus próprios cookies hoje nas sessões técnicas.

[6:36] Portanto, o projeto Privacy Sandbox representa uma evolução substancial da plataforma web, permitindo privacidade por padrão e também preservando casos de uso críticos da web. Uma mudança desse tamanho e tão fundamental para a web levará tempo, mas estamos comprometidos com esse trabalho e com os benefícios que ele trará aos usuários da web em todo o mundo. A web evoluiu para uma plataforma de aplicativos poderosa, permitindo que qualquer pessoa com um navegador moderno tenha acesso a experiências líderes de categoria que carregam rápido e funcionam perfeitamente.

[7:11] E dispositivos como os Chromebooks mostram como o acesso à web pode ser tornado acessível, seguro e simples, sem a necessidade de ser um especialista em manter o sistema operacional subjacente. Por anos, estivemos em uma missão para garantir que a web tenha todos os recursos necessários para trazer experiências de computação de ponta para a plataforma. E desde a última vez que falamos com vocês no I/O, a web ganhou uma significativa variedade de novos recursos. Gostaríamos de destacar alguns deles para vocês. Uma área em que temos trabalhado tem sido facilitar para os usuários o reengajamento contínuo com aplicativos web.

[7:47] Há alguns anos é possível adicionar facilmente aplicativos web como ícones aos lançadores nativos, tanto em celular quanto em desktop, e é um dos meus recursos favoritos da plataforma. Queremos falar sobre como aprofundamos essa integração entre aplicativos web e o sistema operacional subjacente. Com o novo recurso de atalhos de aplicativos, os aplicativos web podem expor ações rápidas em sistemas operacionais que oferecem suporte a esse recurso, como Android, Chrome OS, Windows e macOS. E com a Badging API, os aplicativos web podem dar ao usuário um aviso sutil de que há uma oportunidade de reengajamento, decorando o ícone do aplicativo.

[8:24] Em breve, lançaremos um experimento de origin trial do Chrome de outra nova API, o Declarative Link Capturing, que permite que aplicativos web instalados sejam iniciados automaticamente quando o usuário clica em um link apropriado. Isso também pode impedir que várias instâncias do mesmo aplicativo sejam abertas, para que você não tenha tipo 10 abas com o mesmo aplicativo web nelas. Também melhoramos recentemente a interface de instalação de aplicativos web do Chrome. No desktop, agora mostramos um ícone na omnibox e fornecemos ajuda no produto para explicar esse recurso aos usuários.

[8:57] E no Android, deixamos o diálogo com aparência mais rica e mais familiar para os usuários, e facilitamos para os desenvolvedores preencherem o diálogo com imagens e textos personalizados especificados no arquivo manifest do aplicativo web. Então essas são formas pelas quais estamos melhorando a integração da web com os lançamentos do sistema operacional. Também estamos adicionando outras integrações com o sistema operacional, como a Multi-Screen Window Placement API, que permite que aplicativos web descubram todos os monitores conectados e controlem onde a janela é posicionada nessas telas.

[9:29] Na verdade, esse é um recurso bastante útil hoje em dia para aplicativos web de apresentação e videoconferência. Agora os aplicativos web finalmente podem ler e gravar no sistema de arquivos local do usuário usando a File System Access API, permitindo que aplicativos como Gravit Designer e PhotoBee ofereçam uma experiência de usuário muito mais fluida, persistindo o estado em disco e trabalhando com arquivos existentes. Também estamos trabalhando em uma nova File Handling API que permitiria que aplicativos web fossem registrados como manipuladores de tipos de arquivo, permitindo que os usuários abram arquivos diretamente em um aplicativo web a partir dos navegadores de arquivos do sistema operacional.

[10:08] Esperamos lançar uma versão experimental dessa API ainda este ano. Agora vamos falar sobre dispositivos periféricos; coisas como teclados de uso específico, controles de videogame, pianos digitais, headsets e mais. Ora, a web já tem a capacidade de se comunicar com dispositivos Bluetooth e MIDI há algum tempo. Mas várias novas APIs agora permitem suporte a uma coleção mais ampla desses dispositivos. Muitos deles se comunicam usando o protocolo HID. A web agora tem uma API para isso no Web HID.

[10:40] O controle Joy-Con da Nintendo é um exemplo de dispositivo que oferece suporte a esse protocolo. Para controles no estilo gamepad, a Gamepad API, padrão do setor, agora também é suportada pela web, e isso permite jogabilidade sem concessões com aplicativos como o Stadia no navegador. E você também pode usar um gamepad para controlar o dino do Chrome com estilo. A web também agora oferece suporte a portas seriais com a Web Serial API. Isso na verdade desbloqueia um dos meus novos casos de uso favoritos: o Piper Make.

[11:13] É um editor baseado em blocos que permite programar um Raspberry Pi Pico. Tudo o que você faz é simplesmente conectar o dispositivo a qualquer computador, abrir um navegador e pronto. Não é preciso instalar software nem mexer com drivers, tudo graças ao Web Serial. Agora, com esses e outros novos recursos da web, você pode levar experiências profundamente integradas e fluidas aos usuários em todos os lugares, diretamente pelo navegador. O Google Maps ocupa um lugar especial em nossos corações como um aplicativo web singularmente influente quando foi lançado há mais de 15 anos.

[11:46] O Maps continua inovando na web. Vários anos atrás, ele adotou o WebGL, permitindo gráficos acelerados por hardware e entregando uma interface do Maps muito mais poderosa no processo. No ano passado, a equipe do Maps permitiu que esses mesmos recursos de mapa acelerados por WebGL fossem usados em seu aplicativo web por meio da Maps JavaScript API. Este ano, a equipe tem algo novo para compartilhar. Junte-se a mim para receber Travis McPhail, o líder de engenharia da equipe, que nos contará mais sobre isso.

[12:18] Ficamos constantemente maravilhados com todas as formas como vocês usaram sua habilidade, sua criatividade e o conhecimento do Google sobre o mundo real para construir uma variedade inacreditável de experiências que verdadeiramente reimaginaram o mapa. E é nesse espírito que hoje, durante o keynote para desenvolvedores, anunciamos o lançamento beta de dois novos recursos que dão a vocês um controle sem precedentes do mapa base: inclinação e rotação, e WebGLOverlayView. Com esses recursos, você pode manipular o mapa em três dimensões pela primeira vez, aproveitando o poder do mesmo contexto WebGL que usamos para renderizar o mapa base.

[12:57] Pela primeira vez, você pode construir não apenas sobre o mapa, mas pode construir com ele. Vamos dar uma olhada rápida em como funciona. Para facilitar as coisas, estou usando three.js, uma biblioteca gráfica web popular, para renderizar um objeto 3D no mapa. Configurei um aplicativo web básico que carrega o mapa centralizado em um local na Península de Yucatán, no México. E estou usando um ID de mapa para poder usar o mapa vetorial e aplicar algum estilo personalizado.

[13:29] A primeira coisa que preciso fazer é implementar WebGLOverlayView estendendo google.maps.WebglOverlayView. A sobreposição WebGL expõe um conjunto de hooks no ciclo de vida do contexto de renderização WebGL do mapa base. Por hoje, vamos manter as coisas o mais simples possível e focar em apenas três deles. O primeiro, onAdd(), é chamado quando a instância da sobreposição é criada. O segundo, onContextRestored(), é chamado assim que o contexto de renderização estiver disponível.

[14:01] E o terceiro, onDraw(), é onde o mapa e qualquer outra coisa que você especificar é de fato renderizado. Em onAdd(), vou configurar tudo o que a cena precisa que não exija acesso imediato ao contexto de renderização. Começo criando uma nova cena three.js. Também crio uma câmera que representa a viewport da cena. Neste caso, uma câmera em perspectiva. Em seguida, a cena precisa de pelo menos uma fonte de luz para que quaisquer objetos renderizados sejam iluminados na cena.

[14:35] Para este exemplo, a luz ambiente é usada para iluminar igualmente todos os objetos em nossa cena. Agora estou pronto para adicionar meu objeto 3D usando o GLTFLoader. Assim que o objeto é carregado, eu o escalono e roto para que seja renderizado exatamente certo. Depois o adiciono à cena. Em onContextRestored(), configuro o WebGLRenderer do three.js, passando a ele o contexto de renderização do mapa e informações sobre a viewport. Depois que o objeto é renderizado, também quero animar a câmera para dar aos meus usuários uma visão dinâmica do objeto.

[15:13] Chamei moveCamera na função setAnimationLoop do renderizador. Também incremento tilt, heading e zoom só um pouquinho em cada quadro para criar um belo movimento em espiral descendente. Certo. Hora de renderizar. A câmera three.js precisa de uma matriz de projeção para saber como renderizar coordenadas de latitude e longitude no mundo 3D do mapa para as coordenadas 2D da tela. Agora, não sei vocês, mas transformações de matriz não são minha ideia de diversão.

[15:47] Então, para poupar vocês de um monte de matemática, entregamos a vocês um objeto transformer que tem a função fromLatLngAltitude, que cria essa matriz para você. Passo a ele as coordenadas de latitude e longitude onde quero que o modelo apareça, e defino o valor de retorno como camera.projectionMatrix. Tudo o que resta é limpar o estado do GL, dizer ao WebGLOverlayView que quero redesenhar chamando requestRedraw() na instância do WebGLOverlayView e renderizar a cena.

[16:18] E, por fim, crio uma instância da minha classe e defino a instância do mapa à qual quero que ela seja aplicada. E este é o resultado. Nada mal para alguns minutos de programação, certo? Inclinação e rotação e WebGLOverlayView são apenas a mais recente forma de cumprirmos nosso compromisso com vocês. Temos muito mais planejado, e mal podemos esperar para ver todas as formas que vocês vão inventar para reimaginar o mapa mais uma vez e nos mostrar o que vem a seguir. De volta para você, Dion. Obrigado, Travis.

[16:50] O WebGL trouxe um nível totalmente novo de desempenho gráfico para a web quando ficou disponível há vários anos. Atualmente estamos trabalhando em estreita colaboração com as comunidades de gráficos e web no WebGPU, a nova API gráfica de próxima geração, projetada do zero para desbloquear um nível totalmente novo de desempenho gráfico na web. Inspirando-se em APIs de baixo nível como Vulcan, Metal e Direct 3D 12, o WebGPU ainda é muito experimental e guarda uma promessa empolgante para o futuro.

[17:22] Outra tecnologia de desempenho fundamental é o Web Assembly, que fornece um padrão para compilar código em um formato rápido e eficiente que pode ser executado no navegador por mecanismos JavaScript modernos como o V8. Recentemente, demos ao Web Assembly um grande impulso de desempenho ao implementar suporte para instruções de processador SIMD no V8, o que permite que certas classes de aplicativos sejam executadas muito mais rapidamente. O Google Meet fornece um exemplo poderoso do SIMD em ação. Como qualquer aplicativo de videoconferência, o Meet precisa prestar muita atenção ao seu orçamento de desempenho.

[17:55] E há uma tensão constante entre processar o vídeo para aprimorá-lo e manter um fluxo suave e de baixa latência. Usando o teste experimental de origem do SIMD do V8, a equipe do Meet obteve um ganho de desempenho de 200% em seu pipeline de processamento de mídia no navegador. E isso, por sua vez, deu a eles o orçamento para habilitar um recurso de desfoque de fundo para a maioria de seus usuários, que era alimentado pelo TensorFlow no navegador. Estamos planejando enviar o SIMD para todos os usuários do Chrome nos próximos meses.

[18:26] Agora, o Web Assembly também é frequentemente usado para trazer bases de código não JavaScript para a web, desbloqueando-as para novos casos de uso. Por exemplo, os desenvolvedores por trás do mecanismo de sincronização offline-first, Replicache, conseguiram compilar seu código Rust para Web Assembly, permitindo que desenvolvedores web o incorporassem perfeitamente em seu aplicativo web. Para facilitar a portabilidade de código, o V8 adicionou suporte a threads ao Web Assembly em 2019. Mas isso só foi habilitado para sistemas operacionais desktop.

[18:57] Temos o prazer de compartilhar hoje que o Chrome para Android ganhou threads Web Assembly a partir do Chrome 88 em janeiro deste ano. Também aprimoramos a experiência de depuração do Web Assembly do V8 com suporte a breakpoints e inspeção de variáveis diretamente no Chrome DevTools. Estamos muito animados para ver o que você entregará com um runtime universal que funciona no cliente ou no servidor, é livre de bugs e extremamente rápido. Isso é Web Assembly. A equipe do V8 também tem trabalhado arduamente para extrair ainda mais desempenho do JavaScript de seu mecanismo.

[19:31] Então, além de interpretar JavaScript, o V8 também compila código em tempo real para uma execução mais eficiente. E a equipe implementou um compilador totalmente novo chamado Sparkplug. É claro que, às vezes, a melhor maneira de melhorar o desempenho da execução de código é não executar nenhum código. Nesse espírito, no início deste ano, lançamos um novo recurso do Chrome para alguns usuários chamado limitação intensiva de temporizadores, que detecta quando uma aba do navegador está em segundo plano por mais de cinco minutos e, desde que a aba não esteja reproduzindo áudio ou vídeo, o Chrome diminui a frequência com que executa código JavaScript baseado em temporizador nessa aba.

[20:10] Também aplicamos esse conceito com CSS ao lançar suporte para uma nova propriedade CSS chamada content-visibility. Quando você define essa propriedade como auto em um elemento, você está dando permissão ao navegador para pular a renderização do conteúdo dessa árvore de elementos se ela não estiver visível no momento na tela do usuário, e isso pode levar a um aumento dramático de velocidade para sites com muito conteúdo. Agora, há uma tonelada de inovação acontecendo na plataforma web para permitir um desempenho de tempo de execução significativamente mais rápido de seus aplicativos web.

[20:40] Além do trabalho que está acontecendo para expandir o poder e o desempenho da web, a plataforma também está evoluindo para oferecer uma experiência instantânea e perfeita para os usuários. No Chrome 87, lançado em novembro do ano passado, adicionamos um chamado cache de avançar/voltar ao Chrome no Android, ou BFCache, abreviadamente. O BFCache mantém algumas páginas web carregadas na memória depois que você navega para longe delas. Então, se um usuário clica em voltar ou avançar, a página é exibida instantaneamente. E acontece que uma em cada cinco navegações em dispositivos móveis faz exatamente isso, movendo-se para trás ou para frente no histórico de navegação.

[21:18] Portanto, esse recurso causa um impacto realmente grande. Embora hoje a implementação do BFCache do Chrome esteja disponível no Android, ela tem algumas limitações. Estamos planejando expandi-la para a plataforma desktop do Chrome em breve. Outra maneira de expandir experiências instantâneas é revisitar a noção de pré-renderização de páginas. A pré-renderização é a técnica de carregar todos os recursos de uma página web e até renderizar o DOM antes que o usuário clique em um link. Assim, ela pode ser exibida verdadeiramente de forma instantânea.

[21:48] Agora, isso é difícil de acertar porque o pré-carregamento dessas páginas também pode causar efeitos colaterais, se a página fizer algo como sair da conta ou se a página reproduzir áudio, então ela também pode começar a tocar de maneira misteriosa. Além disso, pode vazar algumas informações do usuário se for feito entre sites. Mas quando a pré-renderização é feita corretamente, ela proporciona essa experiência poderosa e instantânea de clique para o usuário. Então, estamos trabalhando em novas abordagens para pré-renderização que sejam privadas e seguras. Uma delas envolve uma nova API de pré-renderização que permitiria aos desenvolvedores experimentar isso no pré-carregamento no mesmo site ainda este ano.

[22:26] E as transições são outro aspecto importante da experiência do usuário, garantindo que os usuários possam mudar seu contexto à medida que navegam na web e chegar exatamente onde desejam ir. Um recurso divertido e simples com grande impacto é o scroll to text, adicionado ao Chrome 80 em fevereiro do ano passado. Ao adicionar um novo tipo de expressão ao final da sua URL, os navegadores podem posicionar a viewport em um elemento de texto específico e destacá-lo de alguma forma. Em breve lançaremos uma versão desta API que rola até imagens, e estamos explorando outros tipos de elementos também.

[22:59] Com as novas APIs de transição de documentos que estão chegando ao Chrome em breve como experimentos, também estamos construindo suporte para uma série de transições gráficas entre elementos, permitindo que o usuário perceba uma experiência perfeita à medida que se move entre os estados do seu aplicativo web. Também estamos trabalhando para tornar a segurança mais perfeita na web. Um recurso que me deixa particularmente animado são as senhas de uso único entre dispositivos para a web. Senhas de uso único são esses códigos numéricos que alguns sites podem enviar para você fazer login.

[23:31] Esse recurso permite que você receba uma dessas senhas de uso único no seu celular Android e, em seguida, faça com que ela seja transferida automaticamente para o seu navegador Chrome em execução em outro dispositivo, como um laptop. Todos esses novos recursos da web são empolgantes. Mas, à medida que o ritmo da evolução da web se acelera, também aumenta a complexidade que enfrentamos como desenvolvedores web para acompanhar tudo. Estamos trabalhando para tornar a web mais fácil para os desenvolvedores e fazendo parceria com o ecossistema mais amplo para entender e abordar os principais pontos problemáticos da plataforma.

[24:03] Para entender nossas recomendações mais recentes para desenvolvimento web, visite web.dev. O site inclui tutoriais detalhados sobre tópicos importantes, as últimas notícias e também fornece acesso à nossa ferramenta de auditoria de sites Lighthouse. Agora, com o Lighthouse, você obtém um relatório abrangente sobre como melhorar seu site, em uma variedade de categorias, como desempenho, acessibilidade e SEO. Atualizamos continuamente as orientações do Lighthouse para oferecer os melhores insights que podemos.

[24:35] Descobrimos que três das métricas de desempenho do Lighthouse têm um impacto particularmente grande na experiência do usuário. Nós as chamamos de Core Web Vitals. E, coletivamente, elas medem quão rápido um site exibe conteúdo importante, quão responsivo o site é para a primeira interação e quanto o layout do site se desloca. Sites em toda a web estavam usando as Core Web Vitals como uma Estrela do Norte para desempenho e estão relatando resultados encorajadores. Por exemplo, a editora italiana GEDI viu uma melhoria de 8% na taxa de rejeição em suas páginas de artigos para dispositivos móveis.

[25:13] Eles fizeram isso implementando um placeholder de marca para reservar espaço para anúncios em seus slots de anúncios na página, o que melhorou a estabilidade do layout, e então, adiando o carregamento de parte do código JavaScript até depois que a página estivesse visível, eles melhoraram a velocidade percebida de carregamento da página. Plataformas de conteúdo e comércio web também estão investindo em Core Web Vitals para melhorar o desempenho de todos os seus sites hospedados. Por exemplo, Shopify e Wix implementaram painéis em seu console de administração que colocam o desempenho em primeiro plano para os proprietários de sites.

[25:49] A comunidade WordPress também lançou adições orientadas a desempenho, como carregamento lento para imagens e iframes. Também atualizamos o Site Kit, o plugin oficial do Google para WordPress, com suporte para medir as Core Web Vitals, e ele também faz recomendações específicas de melhoria para os desenvolvedores. O Google Search também anunciou que as Core Web Vitals em breve farão parte de como as páginas são classificadas nos resultados de pesquisa. Achamos isso particularmente empolgante, pois amplia o benefício das Core Web Vitals para você, desenvolvedor.

[26:21] O investimento não apenas dará aos seus usuários uma experiência melhor, mas os ajudará a encontrar seu site por meio disso. Passamos um bom tempo ouvindo desenvolvedores, tanto em pequenos encontros quanto por meio de pesquisas em escala com desenvolvedores. Um dos temas comuns que ouvimos consistentemente é a importância da compatibilidade entre navegadores para os desenvolvedores. Então, este ano, anunciamos recentemente nossa participação em um esforço intersetorial chamado Compat2021, que visa corrigir os cinco principais pontos problemáticos de compatibilidade entre navegadores, conforme votado por desenvolvedores web, que, surpreendentemente, todos são relacionados a CSS.

[27:00] E falando em CSS, estamos vendo um renascimento empolgante nessa área. Temos até nosso próprio jardim zen moderno. CSS Flexbox e Grid foram abraçados pelos desenvolvedores como grandes melhorias para criar layouts de página, e aprendizados de anos de frameworks CSS como Sass estão sendo incorporados à plataforma, como aninhamento. E junto com as consultas de contêiner, que é o recurso mais solicitado por você, eu acho, para CSS, você poderá criar folhas de estilo mais modulares e reutilizáveis, permitindo regras que são naturalmente escopadas ao seu contexto local em vez de agir de forma tão global.

[27:37] Agora, um dos recursos mais populares do Chrome é seu conjunto de ferramentas de desenvolvedor integradas, que oferecem um kit de ferramentas incrivelmente poderoso que pode funcionar como seu copiloto de desenvolvimento web. No ano passado, aprimoramos o DevTools com uma série de novas melhorias, desde um novo seletor de cores, avisos e linting aprimorados de PWAs, uma sobreposição de Core Web Vitals, depuração dedicada de CSS Flexbox, visualização de quadros perdidos, suporte para CSS e JavaScript, e muito mais.

[28:09] E o DevTools também é uma plataforma porque suporta extensões. E um exemplo de uma nova extensão é a extensão Angular DevTools para Chrome, que fornece suporte a depuração e criação de perfil de desempenho específico para aplicativos Angular. Então, confira nossa sessão do Chrome DevTools para mergulhar em tudo isso e aprender mais sobre nossos novos recursos do DevTools. A web está evoluindo de maneiras fundamentais para não se tornar extinta. Ela está se tornando privada por padrão com novas APIs que protegem a privacidade do usuário, e também continua a ganhar novos recursos poderosos que ampliam o que é possível na plataforma, proporcionando melhores experiências ao usuário.

[28:51] Por fim, estamos comprometidos em fazer parceria com você no ecossistema à medida que a web evolui, para garantir que você tenha todas as ferramentas e orientações para o sucesso. Você pode se aprofundar em muitas dessas melhorias em toda a plataforma web conferindo várias outras sessões, muitas das quais destacamos hoje, no I/O deste ano. Obrigado pelo seu tempo, e esperamos ver o que você construirá com os recursos evoluídos da web moderna. E se você estiver assistindo a isso durante a Semana do I/O, venha nos encontrar no Adventure. Obrigado.