Saiba mais sobre os três novos lançamentos de desempenho na Web do I/O 2019.
Durante a palestra"Speed at Scale" (em inglês) no Google I/O 2019, anunciamos três coisas que esperamos que possam melhorar o desempenho da Web no próximo ano.
O Lighthouse agora é compatível com o Orçamento de performance
O LightWallet é um novo recurso no Lighthouse que adiciona suporte a orçamentos de desempenho. Os orçamentos de desempenho estabelecem padrões para o desempenho do seu site. Mais importante ainda, eles facilitam a identificação e a correção de regressões de desempenho antes do envio.
O LightWallet está disponível na versão mais recente da CLI do Lighthouse e leva apenas alguns minutos para ser configurado. Estas instruções fornecem mais informações.
Não sabe quais devem ser seus orçamentos? Teste nossa Calculadora experimental de orçamento de desempenho, que pode gerar uma configuração de orçamento compatível com LightWallet.
Carregamento lento de iframe e imagem no nível do navegador na Web
As páginas da Web geralmente contêm um grande número de imagens, o que contribui para o uso de dados, sobrecarga de páginas e carregamentos de página mais lentos. Muitas dessas imagens estão fora da tela, e o usuário precisa rolar a tela para visualizá-las.
Até agora, você precisava resolver imagens de carregamento lento usando uma biblioteca JavaScript, mas isso pode mudar em breve. Nos próximos meses, o Chrome será compatível com o atributo loading, que leva o carregamento lento padronizado de <img> e <iframe> para a Web.
O atributo loading permite que um navegador adie o carregamento de imagens e
iframes fora da tela até que os usuários rolem perto deles. loading é compatível com três valores:
lazy: é um bom candidato para carregamento lento.eager: não é um bom candidato para carregamento lento. Carregue imediatamente.auto: o navegador vai determinar se o carregamento deve ser feito de forma lenta ou não.
<img src="io2019.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>
A heurística exata para "quando o usuário rola por perto" é deixada para o navegador. Em geral, esperamos que os navegadores comecem a buscar imagens adiados e conteúdo de iframe antes de eles chegarem à janela de visualização.
O atributo loading é implementado por trás de sinalizações no Chrome Canary. Teste
esta demonstração no Chrome
75 e versões mais recentes com as sinalizações about://flags/#enable-lazy-image-loading e
about://flags/#enable-lazy-frame-loading ativadas.
Há um artigo sobre o recurso de carregamento lento disponível com mais detalhes.
O Google Fonts agora oferece suporte à exibição de fontes como um parâmetro de consulta
Anunciamos que o suporte para font-display já está disponível em produção para todas as fontes do Google pelo parâmetro "display de consulta":
https://fonts.googleapis.com/css?family=Lobster&display=swap
O descritor font-display permite que você decida como as fontes da Web serão renderizadas ou
substitutas, dependendo do tempo necessário para carregar. Ela aceita vários valores, incluindo auto, block, swap, fallback e optional.
Antes, a única maneira de especificar font-display para fontes da Web do Google Fonts era auto-hospedá-las, mas essa mudança elimina a necessidade de fazer isso.
A documentação do
Google Fonts
foi atualizada para incluir font-display nas incorporações do código padrão, como mostrado
abaixo. Esperamos que isso incentive mais desenvolvedores a testar essa
incrível adição.
Confira uma demonstração do Glitch para usar a tela
com várias famílias de fontes. Faça um teste com a emulação de rede
do DevTools (link em inglês)
para conferir o impacto do font-display: swap.
Assistir para saber mais
Nossa conversa também cobriu vários estudos de caso de produção do uso de padrões avançados de desempenho para melhorar a experiência do usuário. Isso incluiu sites que usam CDNs de imagem, compactação Brotli, disponibilização inteligente de JavaScript e pré-busca para acelerar as páginas. Assista à palestra para saber mais :)