Saiba mais sobre três novos lançamentos de desempenho na Web do I/O 2019.
Durante a palestra "Speed at Scale" no Google I/O 2019, anunciamos três coisas que esperamos que melhorem o desempenho da Web no próximo ano.
O Lighthouse agora é compatível com o montante de desempenho
O LightWallet é um novo recurso do Lighthouse que adiciona suporte a montantes de desempenho. Os montantes de desempenho estabelecem padrões para a performance do seu site. E, mais importante, permitem que você identifique e corrija regressões de desempenho antes do lançamento.
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 oferecem mais informações.
Não sabe quais devem ser seus orçamentos? Teste nossa calculadora de montante de desempenho experimental, que pode gerar uma configuração de montante compatível com o LightWallet.
O carregamento lento de imagens e iframe 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 excesso de páginas e carregamentos de página mais lentos. Muitas dessas imagens estão fora da tela, exigindo que o usuário role 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 suporte
para o atributo loading, que
traz 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 para perto deles. loading aceita três valores:
lazy: é um bom candidato para o carregamento lento.eager: não é um bom candidato para o carregamento lento. Carregue imediatamente.auto: o navegador vai determinar se o carregamento lento será usado 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 e conteúdo de iframe adiados um pouco antes de entrarem na janela de visualização.
O atributo loading é implementado por trás de 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.
Uma descrição sobre o recurso de carregamento lento está disponível com mais detalhes.
O Google Fonts agora aceita font-display como um parâmetro de consulta
Anunciamos que o suporte para font-display agora está disponível em produção para todas as Google Fonts 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
substituídas, dependendo do tempo que levam para carregar. Ele é compatível com 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 hospedá-las 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 mostrado abaixo). Esperamos que isso incentive mais desenvolvedores a testar essa adição
interessante.
Confira uma demonstração no Glitch de como usar display
com várias famílias de fontes. Teste com a emulação de rede do DevTools para conferir o impacto de font-display: swap.
Assista para saber 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 usam CDNs de imagem, compactação Brotli, veiculação inteligente de JavaScript e pré-busca para acelerar as páginas. Assista à palestra para saber mais :)