Velocidade em escala: o que há de novo no desempenho na Web?

Saiba mais sobre três novos lançamentos de desempenho na Web do Google I/O 2019.

Addy Osmani
Addy Osmani
Katie Hempenius
Katie Hempenius

Durante a palestra "Speed at Scale" no Google I/O 2019, anunciamos três coisas que esperamos melhorar a performance da Web no próximo ano.

O Lighthouse agora oferece suporte a orçamentos de desempenho

A LightWallet é um novo recurso do Lighthouse que adiciona suporte a orçamentos de performance. Os orçamentos de performance estabelecem padrões para a performance do seu site. Mais importante, eles facilitam a identificação e a correção de regressões de desempenho antes do envio.

Um relatório da LightWallet mostrando quais recursos estão acima do orçamento de tamanho de arquivo.

A LightWallet está disponível na versão mais recente da CLI do Lighthouse e leva apenas alguns minutos para ser configurada. Confira mais informações nestas instruções.

Não sabe qual deve ser seu orçamento? Teste nossa calculadora experimental de orçamento de performance, que pode gerar uma configuração de orçamento compatível com a LightWallet.

O carregamento lento de imagens e iframes no nível do navegador chega à Web

As páginas da Web geralmente contêm um grande número de imagens, o que contribui para o uso de dados, o inchaço da página e o carregamento mais lento da página. Muitas dessas imagens estão fora da tela, exigindo que o usuário role a tela para visualizá-las.

Até agora, você precisava resolver o carregamento lento de imagens usando uma biblioteca JavaScript, mas isso pode mudar em breve. Neste verão, o Chrome vai lançar o suporte ao atributo loading, que traz o carregamento lento <img> e <iframe> padronizados para a Web.

O carregamento lento no nível do navegador destacando o conteúdo fora da tela sendo carregado sob demanda

O atributo loading permite que um navegador adie o carregamento de imagens fora da tela e iframes até que os usuários rolem até elas. loading aceita três valores:

  • lazy: é um bom candidato para o carregamento lento.
  • eager: não é um bom candidato para carregamento lento. Carregar imediatamente.
  • auto: o navegador vai determinar se o carregamento será preguiçoso 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 para perto" é deixada para o navegador. Em geral, esperamos que os navegadores comecem a buscar imagens adiadas e conteúdo de iframe um pouco antes de chegar à viewport.

O atributo loading é implementado por flags no Chrome Canary. Teste esta demonstração no Chrome 75+ com as flags about://flags/#enable-lazy-image-loading e about://flags/#enable-lazy-frame-loading ativadas.

Um texto sobre o recurso de carregamento lento está disponível com mais detalhes.

O Google Fonts agora oferece suporte a font-display como um parâmetro de consulta

Anunciamos que o suporte a font-display agora está disponível na produção para todas as fontes do Google pelo parâmetro de string de consulta de exibição:

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 usadas como padrão, dependendo do tempo que elas levam para carregar. Ele 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 hospedar o conteúdo por conta própria, mas essa mudança elimina essa necessidade.

A documentação do Google Fonts foi atualizada para incluir font-display nas incorporações de código padrão (como abaixo). Esperamos que isso incentive mais desenvolvedores a testar essa nova funcionalidade.

Código de incorporação das fontes do Google com font-display incluído no URL como um parâmetro de consulta

Confira uma demonstração no Glitch de como usar a tela com várias famílias de fontes. Teste com a emulação de rede do DevTools para conferir o impacto de font-display: swap.

Confira mais

Nossa palestra também abordou vários estudos de caso de produção sobre o uso de padrões de desempenho avançados para melhorar a experiência do usuário. Isso incluiu sites que usavam CDNs de imagem, compactação Brotli e serviço inteligente de JavaScript e pré-carregamento para acelerar as páginas. Assista à palestra para saber mais :)