O recurso mais rápido e otimizado é aquele que não é enviado. Elimine recursos desnecessários do 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 dele 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 um desempenho consistente? Esse recurso está no caminho crítico ou precisa estar? Se o recurso estiver no caminho crítico, ele pode ser um ponto único de falha para o site? Ou seja, se o recurso estiver indisponível, isso vai afetar o desempenho e a experiência do usuário nas suas páginas?
- Este recurso precisa ou tem um SLA? Esse recurso segue as práticas recomendadas de desempenho: compactação, armazenamento em cache etc.?
Muitas vezes, as páginas contêm recursos desnecessários ou, pior, que prejudicam o desempenho da página sem agregar muito valor ao visitante ou ao site em que estão hospedadas. Isso se aplica igualmente a recursos e widgets próprios e de terceiros:
- O site A decidiu exibir 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 visualizam várias fotos no carrossel? Talvez você esteja gerando uma sobrecarga alta ao baixar recursos que a maioria dos visitantes nunca vê.
- O site B decidiu instalar um widget de terceiros para exibir conteúdo relacionado, melhorar o engajamento social ou fornecer algum outro serviço.
- Pergunta: você monitorou quantos visitantes usam o widget ou clicam no conteúdo que ele oferece? O engajamento que esse widget gera é suficiente para justificar a sobrecarga? 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 geralmente requer muita reflexão e medição cuidadosas. Para ter os melhores resultados, faça um inventário periódico e revise essas perguntas para cada recurso nas suas páginas.
Efeitos nas Core Web Vitals
A iniciativa Core Web Vitals foi lançada pelo Google para fornecer um conjunto de métricas que refletem o que os usuários estão vivenciando ao usar a Web. Embora existam muitas estratégias de otimização para as Core Web Vitals, questionar se um determinado recurso deve ser carregado em uma página pode ajudar a melhorar essas métricas no seu site. Confira abaixo alguns exemplos, agrupados por cada Core Web Vital, que vale a pena considerar. Embora essa não seja uma lista completa de exemplos (e há muitos!), ler esses casos pode dar uma ideia do que fazer.
Maior exibição de conteúdo (LCP)
A Largest Contentful Paint (LCP) mede quando o maior conteúdo (por exemplo, uma imagem principal ou um título) é carregado. Ela é considerada uma métrica de percepção importante que dá ao usuário a impressão de que um site está carregando rapidamente.
Em geral, baixar menos recursos significa que a largura de banda do usuário será alocada em menos recursos, o que pode se traduzir em uma melhoria na 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 provavelmente vai vê-las. Se você tiver uma galeria grande de miniaturas com, por exemplo, 50 imagens, o carregamento lento de todas as imagens, exceto as dez primeiras, significa que o navegador pode usar de forma mais eficiente a largura de banda disponível, e as primeiras imagens que o usuário 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 quanta largura de banda cada recurso deve receber. No entanto, mesmo com isso, todos os recursos, principalmente aqueles baixados com alta prioridade, podem privar um recurso dependente de um possível elemento LCP. Isso é especialmente importante 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 estratégias de otimização e carregamento 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 depender de um recurso de fonte da Web e ser renderizados quase imediatamente quando o CSS e o HTML chegam do servidor.
Cumulative Layout Shift (CLS)
Cada recurso carregado pode contribuir para a Cumulative Layout Shift (CLS) de uma página, principalmente se o download não tiver sido concluído até o momento da pintura inicial. Para imagens, evitar a CLS envolve práticas como definir dimensões explícitas. Para fontes, gerenciar o carregamento e, possivelmente, a correspondência de fontes substitutas pode minimizar as mudanças durante o período de troca de uma fonte da Web. No caso do JavaScript, pode ser o gerenciamento de como esse script manipula o DOM para que as mudanças de layout sejam reduzidas a uma quantidade aceitável.
Cada recurso que contribui para a CLS de uma página exige 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 de páginas, mas também reduzindo o esforço cognitivo necessário para preservar a estabilidade do layout. Isso resulta em uma experiência muito menos frustrante para o usuário e para o desenvolvedor, já que você terá mais tempo para buscar outras metas nos seus projetos.
Interaction to Next Paint (INP)
A Interaction to Next Paint (INP) mede a capacidade de resposta às entradas do usuário durante toda a vida útil de uma página. A INP de uma página pode ser muito influenciada pelo JavaScript que ela carrega, já que o JavaScript é o que impulsiona a maior parte da interatividade que as pessoas têm na Web. Em especial, a quantidade de recursos de script baixados durante o carregamento de 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 momento crítico da experiência na página, em que os usuários podem estar tentando interagir com ela.
Embora existam estratégias para reduzir o tamanho dos recursos JavaScript baixados durante a inicialização, como divisão de código e tree shaking, vale a pena auditar os pacotes usados nos seus projetos para verificar se eles são realmente necessários. Por exemplo, o lodash tem muitos métodos que ainda são úteis hoje, mas é fornecido com métodos que o navegador oferece prontos para uso, 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 o JavaScript, porque permite que você ofereça uma experiência básica (mas ainda funcional) para os usuários, que pode ser complementada para usuários com dispositivos mais potentes e conexões de rede mais rápidas. Seja seguindo o princípio do aprimoramento progressivo ou não, o fato é que cada recurso JavaScript que você evita baixar pode resultar em uma experiência que responde mais rápido às interações do usuário, o que é um aspecto vital da performance na Web.
Conclusão
Auditar seu site para downloads desnecessários pode ser apenas um aspecto de oferecer experiências rápidas ao usuário, mas é um que tem o potencial de alto impacto. Em resumo:
- Faça um inventário dos seus recursos e dos recursos de terceiros nas suas páginas.
- Meça o desempenho de cada recurso: o valor e o desempenho técnico.
- Determine se os recursos estão fornecendo valor suficiente.
- Entender o efeito de 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 apenas melhora o desempenho geral, mas 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.