Saiba mais sobre três novos lançamentos de desempenho na Web do Google I/O 2019.
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.
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 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.
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 :)