O recurso mais rápido e melhor otimizado é aquele que não é enviado. Elimine recursos desnecessários do seu aplicativo. É uma boa prática questionar e revisitar periodicamente as suposições implícitas e explícitas com sua equipe. Veja alguns exemplos:
- Você sempre incluiu o recurso X nas suas páginas, mas o custo de download e exibição compensa o valor que ele oferece ao usuário? Você consegue medir e comprovar o valor dele?
- O recurso (especialmente se for de terceiros) oferece desempenho consistente? Esse recurso está no caminho crítico ou precisa estar? Se o recurso estiver no caminho crítico, ele poderá ser um ponto único de falha para o site? Ou seja, se o recurso estiver indisponível, isso afeta a performance e a experiência do usuário nas suas páginas?
- Esse recurso precisa ou tem um SLA? Esse recurso segue as práticas recomendadas de desempenho: compactação, armazenamento em cache e assim por diante?
Muitas vezes, as páginas contêm recursos desnecessários ou, pior ainda, que prejudicam a performance sem oferecer muito valor ao visitante ou ao site em que estão hospedadas. Isso se aplica igualmente aos recursos e widgets próprios e de terceiros:
- O Site A decidiu mostrar um carrossel de fotos na página inicial para que o visitante possa visualizar várias fotos com um clique rápido. Todas as fotos são carregadas quando a página é carregada, e o usuário avança pelas fotos.
- Pergunta:você mediu quantos usuários visualizaram várias fotos no carrossel? Você pode estar gerando uma sobrecarga ao fazer o download de recursos que a maioria dos visitantes nunca acessa.
- O Site B decidiu instalar um widget de terceiros para mostrar conteúdo relacionado, melhorar o engajamento nas redes sociais ou oferecer algum outro serviço.
- Pergunta:você já rastreou quantos visitantes usam o widget ou o clique no conteúdo que ele oferece? O engajamento gerado por esse widget é suficiente para justificar o custo? Além disso, é possível usar uma estratégia de carregamento para garantir que o script não seja carregado até que seja necessário?
Determinar se é necessário eliminar downloads desnecessários muitas vezes requer muita reflexão e medição. Para melhores resultados, faça um inventário e revise essas perguntas periodicamente para cada recurso nas suas páginas.
Efeitos nas Core Web Vitals
A iniciativa das Core Web Vitals foi lançada pelo Google para fornecer um conjunto de métricas que refletem o que os usuários estão enfrentando ao usar a Web. Embora existam muitas estratégias de otimização para as Core Web Vitals, questionar se você deve carregar um recurso específico em uma página pode abrir um caminho para melhorar essas métricas no seu site. Confira abaixo alguns exemplos agrupados por cada Core Web Vital que valem a pena considerar. Embora essa não seja uma lista completa de exemplos (e há muitos), a leitura deles pode dar uma ideia.
Maior exibição de conteúdo (LCP)
A maior exibição de conteúdo (LCP) mede quando o conteúdo maior (por exemplo, uma imagem principal ou um título) é carregado. Ela é considerada uma métrica perceptiva importante que dá ao usuário a impressão de que um site está carregando rapidamente.
Em geral, fazer o download de menos recursos significa que a largura de banda do usuário será alocada em menos recursos e poderá resultar em uma melhoria no LCP. Um exemplo clássico é o carregamento lento, em que as imagens fora da janela de visualização durante o carregamento da página não são baixadas até que o navegador determine que o usuário tem mais chances de vê-las. Se você tiver uma galeria de miniaturas grande de, digamos, 50 imagens, o carregamento lento de todas, exceto as dez primeiras, significa que o navegador pode usar a largura de banda disponível de maneira mais eficiente, e as primeiras imagens que o usuário vai ver serão carregadas mais rapidamente.
No entanto, não se trata apenas de carregar menos imagens. O navegador tem um esquema de priorização interno que determina a quantidade de largura de banda que cada recurso precisa receber. No entanto, mesmo com esses recursos todos, principalmente aqueles que são baixados com alta prioridade, é possível privar um possível recurso dependente de um elemento LCP. Isso é especialmente verdadeiro em conexões de rede lentas. Esse recurso dependente pode ser um arquivo de imagem que representa o elemento LCP da página, mas também pode ser um recurso de fonte da Web que o navegador precisa para renderizar um nó de texto que pode ser determinado como o elemento LCP da página.
Se o site tiver muito texto, é possível que o elemento LCP de uma página seja um nó de texto. Embora existam muitas boas estratégias de carregamento e otimização de fontes, vale a pena considerar se uma fonte do sistema é suficiente para as necessidades do seu site. Assim, os elementos LCP que são nós de texto podem ser carregados sem dependência de um recurso de fonte da Web e pintados quase imediatamente quando o CSS e o HTML chegam do servidor.
Cumulative Layout Shift (CLS)
Cada recurso carregado tem o potencial de contribuir para o Cumulative Layout Shift (CLS) de uma página, principalmente se o download não tiver sido concluído no momento da pintura inicial. Para imagens, evite CLS com práticas como definir dimensões explícitas. Para fontes, gerenciar o carregamento de fontes e a correspondência de fontes substitutas pode minimizar as mudanças durante o período de troca de uma fonte da Web. No JavaScript, pode ser gerenciar como o script manipula o DOM para que as mudanças de layout sejam reduzidas a um valor aceitável.
Todos os recursos que contribuem para o CLS de uma página exigem algum trabalho para garantir que o layout da página seja suficientemente estável. Ao questionar se você precisa ou não de um recurso específico, você não está apenas acelerando o carregamento da página, mas também reduzindo o esforço cognitivo necessário para preservar a estabilidade do layout. Isso leva a uma experiência do usuário muito menos frustrante, mas também a uma experiência do desenvolvedor menos frustrante, já que você terá mais tempo para buscar outras metas nos seus projetos.
Interaction to Next Paint (INP)
A métrica Interaction to Next Paint (INP) mede a capacidade de resposta às entradas do usuário durante a vida útil de uma página. O INP de uma página pode ser muito influenciado pelo JavaScript que ela carrega, já que o JavaScript é o que impulsiona a maior parte da interatividade que as pessoas têm na Web. Especificamente, a quantidade de recursos de script baixados durante o carregamento da página pode iniciar um trabalho potencialmente caro envolvido na avaliação e compilação de scripts. Quanto menos JavaScript você carregar durante a inicialização, menos trabalho o navegador terá nesse ponto crítico da experiência da página, quando os usuários podem tentar interagir com ele.
Embora existam estratégias para reduzir o tamanho dos recursos JavaScript transferidos por download durante a inicialização, como a divisão de código e o desmembramento de árvore, vale a pena auditar os pacotes usados nos projetos para saber se eles são necessários. Por exemplo, o lodash tem muitos métodos que ainda são úteis, mas vem com métodos que o navegador oferece de forma nativa, como funções específicas de Array para mapeamento, redução e filtragem, além de muitos outros.
O aprimoramento progressivo também é uma abordagem útil para JavaScript, já que permite oferecer uma experiência de referência (mas ainda funcional) para usuários com dispositivos mais potentes e conexões de rede mais rápidas. Independente de você aderir ou não ao princípio de melhoria progressiva, o ponto é: cada recurso JavaScript que você evita fazer o download pode resultar em uma experiência que responde mais rapidamente às interações do usuário, o que é um aspecto vital do desempenho da Web.
Conclusão
A auditoria do seu site em busca de downloads desnecessários pode ser apenas um aspecto da experiência do usuário rápida, mas tem o potencial de gerar um grande impacto. Em resumo:
- Faça um inventário dos seus recursos e dos recursos de terceiros nas suas páginas.
- Meça a performance de cada recurso: o valor e a performance técnica.
- Determine se os recursos estão oferecendo valor suficiente.
- Entenda o efeito dos downloads desnecessários nas Core Web Vitals e nas métricas de suporte.
Ao otimizar a eficiência do conteúdo dessa forma, você não só melhora a performance geral, como também evita o desperdício de largura de banda dos usuários, além de melhorar as métricas centradas no usuário e oferecer uma experiência melhor.