No momento, as imagens são os maiores recursos da Web em termos de tamanho total da transferência e número de solicitações por página. O tamanho total médio da transferência da página da Web é de aproximadamente 2 MB, em junho de 2022, e as imagens representam quase metade disso. Não é exagero dizer que a otimização de solicitações de imagem pode ser a maior otimização de desempenho que você pode fazer.
Mais adiante, você aprenderá como as imagens responsivas evoluíram para ajudar a resolver os problemas criados ao tentar exibir uma imagem para todas as eventualidades. Nesta seção, descubra as principais métricas de desempenho relacionadas a imagens e como melhorá-las.
Como adiar solicitações de imagem
Você está prestes a aprender várias maneiras de garantir que suas solicitações de imagem sejam as menores e eficientes possíveis, mas a solicitação de imagem mais rápida sempre será aquela que nunca é feita. Agora, quero compartilhar qual pode ser a mudança mais impactante que você pode fazer na forma
como fornece recursos de imagem para seus usuários: o atributo loading="lazy".
<img src="image.jpg" loading="lazy" alt="…">
Esse atributo garante que as solicitações de imagens não sejam feitas até estarem perto da janela de visualização do usuário, adiando-as do carregamento de página inicial (o momento em que o navegador está mais ocupado) e removendo essas solicitações do caminho crítico de renderização.
Simples como pode ser na prática, o uso desse atributo pode ter um enorme impacto positivo no desempenho: uma imagem que nunca se enquadra na janela de visualização do usuário nunca será solicitada, e nenhuma largura de banda será desperdiçada em imagens que o usuário nunca verá.
No entanto, há um problema: adiar essas solicitações significa não aproveitar os processos hiperotimizados dos navegadores para solicitar
imagens o quanto antes. Se loading="lazy" for usado em elementos img na parte de cima do layout e, portanto, mais propensos
a estar na janela de visualização do usuário quando a página for carregada pela primeira vez, essas imagens poderão parecer significativamente mais lentas para o usuário final.
Prioridade da busca
O atributo loading é um exemplo de uma iniciativa maior de padrões da Web para dar aos desenvolvedores mais poder sobre como os navegadores
da Web priorizam solicitações.
Você provavelmente conhece as abordagens básicas dos navegadores para buscar prioridade:
por exemplo, uma solicitação de um arquivo CSS externo na <head> de um documento é considerada essencial para bloquear a renderização, enquanto uma solicitação de um
arquivo JavaScript externo logo acima de </body> é adiada até que a renderização seja concluída. Se o valor de um atributo loading em uma <img> for "lento",
a solicitação de imagem associada será adiada até que o navegador determine que ela vai ser mostrada a um usuário. Caso contrário, essa imagem terá a mesma
prioridade que qualquer outra imagem na página.
O atributo fetchpriority tem como objetivo dar
aos desenvolvedores um controle mais preciso sobre a prioridade dos recursos, permitindo que você sinalize recursos
como "alta" e "baixa" em relação a recursos do mesmo tipo. Os casos de uso de fetchpriority são semelhantes ao atributo loading, embora muito mais amplos. Por exemplo, é possível usar fetchpriority="low" em uma imagem revelada apenas após a interação do usuário
(se essa imagem está dentro ou não da janela de visualização do usuário) para priorizar imagens visíveis em outro lugar da página ou fetchpriority="high"
para priorizar uma imagem que você sabe que vai ser imediatamente visível na janela de visualização assim que a página for renderizada.
A fetchpriority é diferente da loading, já que ela não muda fundamentalmente o comportamento do navegador. Ele não instrui o navegador
a carregar determinados recursos antes de outros. Em vez disso, ele fornece contexto essencial para as decisões sobre a solicitação de recursos.
Como medir o impacto das imagens
Ao otimizar recursos de imagem, o desempenho percebido costuma ser mais importante e mais difícil de medir do que apenas o tamanho total da transferência.
As Métricas da Web oferecem orientações e métricas mensuráveis e acionáveis para melhorar a experiência dos usuários na Web, destacando problemas como tempo de resposta lento de um servidor da Web, problemas de renderização e atrasos de interatividade. As Core Web Vitals são um subconjunto dessas metas, focadas principalmente na experiência direta do usuário com uma página específica, um conjunto de medições técnicas que, juntas, determinam a velocidade da experiência para um usuário.
Mudança de layout cumulativa
A Mudança de layout cumulativa (CLS, na sigla em inglês) é uma medida de estabilidade visual. É uma métrica para capturar quanto o layout do conteúdo de uma página muda conforme os recursos são carregados e a página é renderizada. Qualquer pessoa que passou uma quantidade significativa de tempo usando a Web se perdeu em uma longa sequência de texto devido a uma página "pulando" porque uma fonte da Web ou de imagem atrasada é renderizada de repente, ou um elemento interativo foi movido repentinamente para longe do ponteiro. Uma CLS alta é, na melhor das hipóteses, um incômodo e, na pior das hipóteses, uma causa de erro do usuário. Um botão "cancelar" muda para um espaço anteriormente ocupado por um botão "confirmar" assim que o usuário clica, por exemplo.
Com tempos de carregamento altos e a quantidade de espaço que eles podem ocupar em um layout, é razão que imagens são uma causa comum de pontuações altas de CLS.
Graças às mudanças relativamente recentes em navegadores mais recentes, é mais fácil do que você imagina evitar pontuações de CLS altas devido a imagens.
Se você trabalha com front-end há alguns anos, conhece os atributos width e height no <img>:
antes da ampla adoção do CSS, essa era a única maneira de controlar o tamanho de uma imagem.
<img src="image.jpg" height="200" width="400" alt="…">
Esses atributos deixaram de ser usados em uma tentativa de manter nossas preocupações de estilo separadas da nossa marcação, especialmente porque o Web design
responsivo precisou especificar um dimensionamento baseado em porcentagem via CSS. No início do Web design responsivo, "remover
os atributos width e height não usados" era um conselho comum, já que os valores especificados no CSS (max-width: 100% e
height: auto) os substituiriam.
<img src="image.jpg" alt="…">
img {
max-width: 100%;
height: auto;
}
Depois de remover os atributos height e width, como no exemplo anterior, o único método que o navegador tem para determinar
a altura da imagem nessa situação é solicitar a origem, analisá-la e renderizá-la na proporção intrínseca, com base na
largura do espaço ocupado no layout depois que as folhas de estilo forem aplicadas. Grande parte desse processo ocorre depois que a página é
renderizada, com a altura recém-calculada causando outras mudanças de layout.
A partir de 2019, o comportamento do navegador foi atualizado para lidar com os atributos width e height de forma diferente. Em vez de usar os valores desses
atributos para determinar o tamanho fixo baseado em pixels de um elemento img no layout, pode-se pensar que esses atributos representam
a proporção da imagem, embora a sintaxe seja a mesma. Os navegadores modernos dividem esses valores para
determinar a proporção intrínseca de um elemento img antes da renderização da página, permitindo que ele reserve o espaço que a imagem ocupará durante a renderização do layout.
Como regra, use sempre os atributos height e width no <img>, com valores que correspondam ao tamanho intrínseco da origem da imagem, desde que
você tenha especificado height: auto junto a max-width: 100% para substituir a altura do atributo HTML.
<img src="image.jpg" height="200" width="400" alt="…">
img {
max-width: 100%;
height: auto;
}
Ao usar os atributos width e height nos elementos <img>, você evita uma pontuação de CLS alta devido às imagens.
É importante observar que essa abordagem não tem nenhuma desvantagem, já que ela depende de um comportamento estabelecido do navegador. Qualquer navegador
com suporte a CSS básico vai funcionar como sempre, com os atributos height e width na marcação substituídos pelos seus estilos.
Embora os atributos width e height evitem problemas de CLS reservando o espaço de layout necessário para suas imagens, apresentar
aos usuários uma lacuna vazia ou um marcador de baixa qualidade enquanto
eles aguardam uma imagem ser transferida e renderizada também não é o ideal. Embora você possa realizar ações para reduzir o impacto mensurável e perceptível
de imagens com carregamento lento, a única maneira de apresentar uma imagem totalmente renderizada para um usuário mais rapidamente é reduzir o tamanho da transferência.
Maior exibição de conteúdo
A Maior exibição de conteúdo (LCP, na sigla em inglês) mede o tempo necessário para renderizar o maior elemento de conteúdo visível na janela de visualização do usuário, ou seja, o elemento que ocupa a maior porcentagem da página visível. Pode parecer uma métrica muito específica na superfície, mas esse elemento serve como um substituto prático para o ponto em que a maior parte da página foi renderizada, do ponto de vista do usuário. A LCP é uma medida vital do desempenho (percebido).
Métricas como DOMContentLoaded ou o evento window.onload podem ser úteis para determinar quando o processo de carregamento da página atual foi tecnicamente concluído, mas elas não correspondem necessariamente à experiência do usuário na página. Um pequeno atraso na renderização de um elemento
fora da janela de visualização do usuário seria considerado em qualquer uma dessas métricas, mas provavelmente não seria detectado por um usuário real.
Uma LCP longa significa a primeira impressão do usuário de uma página (o conteúdo mais importante na janela de visualização atual) é que a página é lenta
ou dividida imediatamente.
A percepção do usuário capturada pela LCP tem um impacto direto na experiência do usuário. Um experimento feito pela Vodafone no ano passado descobriu que uma melhoria de 31% na LCP não só levou a 8% mais vendas (um forte resultado por si só), mas, do número total de usuários, descobriu um aumento de 15% no número de visitantes que se tornaram clientes em potencial ("taxa de visitantes para leads") e uma melhoria de 11% no número de usuários que visitaram o carrinho ("carrinho").
Em mais de 70% das páginas da Web, o maior elemento na janela de visualização inicial envolve uma imagem, seja como um elemento <img> independente ou um elemento com uma imagem de plano de fundo. Em outras palavras, 70% das pontuações de LCP das páginas são baseadas no desempenho da imagem. Não é preciso muita imaginação para entender o porquê: imagens e logotipos
grandes que chamam a atenção provavelmente serão encontrados "acima da dobra".
Há algumas etapas que você pode seguir para evitar atrasos de LCP: primeiro, nunca especifique loading="lazy" em uma imagem "acima da dobra", já que atrasar a solicitação até que a página tenha sido renderizada provavelmente vai ter um grande impacto negativo na sua pontuação de LCP.
Em segundo lugar, o uso de fetchpriority="high" pode informar ao navegador que a transferência dessa imagem precisa ser priorizada acima das imagens em qualquer outro lugar da página.
Com essas regras bem em mente, o mais importante para melhorar a pontuação de LCP de uma página é reduzir o tempo necessário para transferir e renderizar essas imagens. Para isso, é necessário manter suas origens de imagem o mais pequenas e eficientes possível (sem sacrificar a qualidade, é claro) e garantir que os usuários recebam apenas os recursos de imagem mais adequados para os contextos de navegação deles.
Conclusão
Os recursos de imagem são o maior gasto na largura de banda dos usuários. A largura de banda é removida da transferência de todos os outros recursos necessários para renderizar uma página. As imagens apresentam problemas significativos em termos de percepção de performance, durante e após a renderização do layout da página ao redor. Resumindo: recursos de imagem danificam.
Isso pode ser assustador, embora "a Web ficaria melhor com menos imagens" certamente seria verdade apenas em termos de desempenho, mas também faria um grande desserviço aos usuários. As imagens são uma parte essencial da Web, e não é permitido comprometer a qualidade de conteúdo significativo apenas para melhorar a performance.
No restante deste curso, você vai aprender sobre as tecnologias que alimentam nossos recursos de imagem e técnicas para reduzir os impactos no desempenho sem comprometer a qualidade.