Código Google: Chrome Dev Summit

Blog oficial para desenvolvedores que falam português

Chrome Dev Summit 2018: Como criar uma Web mais rápida, mais estável e adequada

11/26/18

O décimo aniversário do Chrome nos proporciona a oportunidade de relembrar o quanto o navegador e a Web evoluíram na última década. Adoramos ver a riqueza dos conteúdos, aplicativos e jogos criados por vocês.
Estamos trabalhando bastante para tornar o Chrome mais rápido, entre outras atualizações feitas. Entendemos que a velocidade é uma das características mais marcantes e importantes da Web. Nenhuma outra plataforma é tão rápida em como o usuário pode ir da descoberta até a experiência real e na movimentação entre sites, mas esses fatores são interrompidos caso o site demore muito para carregar ou se a interface do usuário for precária.
Por isso, gostaríamos de colaborar ainda mais com a comunidade de desenvolvedores da Web, oferecendo experiências extremamente rápidas aos nossos usuários finais a partir do momento que eles clicam em um link.

Velocidade desde o primeiro clique O HTTP Archive mostra que, desde 2011, os sites estão utilizando uma média de oito vezes mais JavaScript. Começamos a ver que a CPU está se tornando um dos principais gargalos de desempenho, especialmente com o crescente número de códigos que muitas vezes são compilados e executados em dispositivos móveis de baixa capacidade.
Empresas que focam o primeiro carregamento (e além) cada vez mais veem ótimos resultados ao se concentrar no uso de Planejamentos de desempenho. Esses planejamentos podem ser baseados no tamanho do byte do seu JavaScript, CSS, imagens e demais recursos, assim como em outras métricas de carregamento. Você pode especificar, por exemplo, que o tempo de interação não exceda cinco segundos em uma rede 3G emulada e em um tipo específico de smartphone.
Não é uma tarefa fácil manter uma consistência no planejamento à medida que você adiciona recursos ao longo do tempo. Após a Wayfair perceber o próprio retrocesso, ela construiu um sistema interno de planejamento de desempenho para que os desenvolvedores pudessem rastrear os resultados. Desde então, a velocidade de página da empresa cresceu gradualmente, e houve um aumento de mais de 10% na taxa de conversão anual.

O Pinterest reformulou a experiência na Web para dispositivos móveis com foco no desempenho e percebeu um crescimento na interação e no engajamento dos usuários. Hoje, o site para dispositivos móveis é a plataforma que mais recebe inscrições. Veja essa jornada aqui:

Fluidez além do clique A otimização da velocidade de carregamento da sua página da Web é importante, mas também é necessário que a experiência do usuário seja fluida e interativa, tanto no carregamento quanto após a exibição. Isso significa responder a todos os comandos do usuário rapidamente, em menos de um décimo de segundo, e assegurar que a interface do usuário não trave, ou seja, que não haja uma pausa e depois uma transição repentina.
Na última década, trabalhamos na evolução do Chrome para que ele possa liberar o máximo de trabalho possível do thread principal. Por exemplo, agora podemos decodificar e analisar o JavaScript separadamente. Ao utilizar Web Workers, podemos executar um JavaScript de longa duração sem bloquear a interface do usuário.
Você consegue fazer com que seus aplicativos da Web sejam leves e fluidos hoje? Especialmente com cargas de trabalho significativas? Nossa equipe se reuniu para explorar justamente esse assunto, e o resultado é um novo aplicativo, lançado hoje, chamado Squoosh. Essa poderosa ferramenta de compactação de imagens é iniciada quase instantaneamente e gerencia a interface do usuário de maneira fluida, mesmo quando está sendo realizada uma tarefa pesada, incluindo usar o Web Assembly para fazer mais com codecs que não estão integrados no navegador. Confira a sessão de Jake e Mariko mais tarde para saber como isso foi feito. Mas ainda há mais para ser feito em relação a isso, e estamos entusiasmados com as futuras APIs de plataforma, como a Worklets, o Virtual Scroller e até mesmo um programador, que ajudam os desenvolvedores a criar experiências fluidas mais facilmente. Mais informações sobre muitas dessas ferramentas e técnicas serão apresentadas na palestra principal do segundo dia e posteriormente.

Capaz de integrações mais profundas Vimos que os PWAs facilitam o encantamento dos usuários, aumentam a interação e melhoram as conversões. Agora, com integrações mais profundas no sistema operacional do host e a capacidade de carregar e executar mais rápido do que nunca, seus PWAs podem se destacar de verdade, embora a maioria dessas integrações tenha foco principal ou exclusivamente em dispositivos móveis.
Nos últimos seis meses, renovamos nossos investimentos no fornecimento desses mesmos conjuntos de recursos em todas as plataformas de computador. O Chrome OS tem nos proporcionado uma superfície fantástica para ampliar os horizontes da Web. Com base nesses aprendizados, estamos expandindo o nosso suporte a PWAs de computador no Chrome para Windows e Linux. O suporte para Mac está previsto para o Chrome 72.

À medida que trazemos cada vez mais recursos tanto para dispositivos móveis quanto para computadores, queremos incluir a voz da comunidade para garantir que estamos priorizando funcionalidades importantes para todos. Por isso, hoje compartilhamos nossos planos para oferecer os recursos de que VOCÊ precisa na Web e a forma que podemos trabalhar juntos para nos certificarmos de que estamos atendendo às suas necessidades reais.

Para ajudar os desenvolvedores da Web Sabemos que você procura um lugar que consolide todas as informações de referência para APIs da Web moderna, e é por esse motivo que continuamos a parceria com a MDN para melhorar a documentação de referência básica da Web.
Também ouvimos que você gostaria de receber mais orientação sobre como ter acesso aos princípios que tornam a experiência na Web excelente. Temos a satisfação de anunciar uma nova abordagem: o web.dev.
Por meio de uma parceria com a Glitch, uma integração profunda com nossa ferramenta Lighthouse e as orientações da nossa equipe, o web.dev ajuda a melhorar seu site com uma prática recomendada direta e direcionada e a habilidade de monitorar seus sites ao longo do tempo, permitindo que você possa sempre mantê-los rápidos, resilientes e acessíveis.
Enquanto trabalhávamos no web.dev, fomos inspirados por outro conteúdo incrível na Web que pode ajudar você. Dave Geddes, o criador do Flexbox Zombies e do CSS Grid Critters, inventou um novo jogo para aprendizado. O Service Workies ajuda a entender como os Service Workers funcionam, do início ao fim. O primeiro capítulo da aventura será disponibilizado na versão Beta. Fizemos uma parceria com Dave para que a aventura completa possa ser gratuita para todos. Então, confira agora e não importa o que aconteça, ouça a vovó!

Web design direto no navegador
Na Chrome Dev Summit, falamos de todas as atualizações das nossas ferramentas e bibliotecas direcionadas ao desenvolvedor, aquelas que você já conhece e adora, mas também queremos mostrar um novo experimento para o qual gostaríamos de receber seu feedback.
Lembramos do impacto que o Firebug teve ao ser lançado e como ele mostrou que o navegador pode, por si só, ser uma ferramenta de desenvolvimento. Agora, também estamos pensando sobre o design na Web e, da mesma forma que o Lighthouse começou como uma extensão do Chrome a ser explorada, temos mais uma extensão, o Project Visbug, que permite criar design diretamente no navegador. Você pode fazer o download agora mesmo, mas antes veja-o em ação aqui:

Confira nosso livestream ou assista aos vídeos do canal Google Chrome Developers no YouTube para acompanhar o restante das sessões do dia. Acesse este espaço para o blog de encerramento do segundo dia, onde faremos mais alguns anúncios incríveis.
Postado por Ben Galbraith e Dion Almaer