O recurso mais rápido e melhor otimizado é o recurso que não é enviado. Elimine os 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 em suas páginas, mas o custo de baixar e exibi-lo compensa o valor que ele oferece ao usuário? Você pode medir e provar seu valor?
- O recurso (especialmente de terceiros) oferece 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, a indisponibilidade do recurso afeta o desempenho 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 dificultam o desempenho da página sem agregar muito valor ao visitante ou ao site em que estão hospedados. 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 permitir que o visitante visualize 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? Você pode estar gerando uma sobrecarga alta com o download de 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ê rastreou quantos visitantes usam o widget ou clicam no conteúdo fornecido por ele? O engajamento gerado pelo widget é suficiente para justificar a sobrecarga dele? 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 a eliminação ou não de downloads desnecessários geralmente requer muita reflexão e medição cuidadosas. Para melhores resultados, faça inventários periodicamente e revise essas perguntas para cada recurso em suas páginas.
Efeitos nas Core Web Vitals
A iniciativa das Core Web Vitals foi apresentada pelo Google para fornecer um conjunto de métricas que refletem as experiências dos usuários ao usar a Web. Embora existam muitas estratégias de otimização para as Core Web Vitals, questionar se é necessário carregar um determinado recurso em uma página pode abrir um caminho para você melhorar essas métricas no seu site. Confira abaixo alguns exemplos, agrupados por Core Web Vitals, que valem a pena ser analisadas. Embora esta não seja uma lista completa de exemplos (e há muitos!), lê-los pode ajudar você a refletir.
Maior exibição de conteúdo (LCP)
A Maior exibição de conteúdo (LCP) mede quando o maior conteúdo (por exemplo, uma imagem principal ou um título) é carregado. É considerada uma métrica perceptiva importante que dá ao usuário a impressão de que um site está sendo carregado rapidamente.
Em geral, fazer o download de menos recursos significa que a largura de banda do usuário será alocada a menos recursos, o que pode resultar em uma melhoria na LCP. Um exemplo clássico é o carregamento lento, em que o download de imagens fora da janela de visualização durante o carregamento da página só é feito quando o navegador determina que é mais provável que o usuário as veja. Se você tiver uma galeria grande de miniaturas com, digamos, 50 imagens, o carregamento lento de todas, exceto as dez principais, significa que o navegador pode fazer um uso mais eficiente da 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 todos esses recursos, especialmente aqueles transferidos por download em alta prioridade, é possível privar o recurso dependente de um possível elemento de LCP. Isso vale principalmente para conexões de rede lentas. Esse recurso dependente pode ser um arquivo de imagem que representa o elemento da LCP da página, mas também pode ser um recurso de fonte da Web necessário para o navegador renderizar um nó de texto que pode ser determinado como o elemento da LCP da página.
Se o site tem muito texto, pode ser que o elemento da LCP de uma página seja um nó de texto. Existem muitas boas estratégias de carregamento e otimização de fonte, mas vale a pena considerar se uma fonte do sistema é suficiente para as necessidades do seu site. Assim, os elementos da 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)
Todo recurso que você carrega pode contribuir para a Cumulative Layout Shift (CLS, na sigla em inglês) de uma página, especialmente 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 de fontes e, possivelmente, a correspondência de fontes substitutas pode minimizar as mudanças durante o período de troca de uma fonte da Web. Para JavaScript, pode ser necessário gerenciar a forma como esse script manipula o DOM para que as mudanças de layout sejam reduzidas a um valor aceitável.
Cada recurso que contribui para a CLS de uma página exige certo esforço 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 os carregamentos de página, também está reduzindo o esforço cognitivo necessário para preservar a estabilidade do layout. Isso não só resulta em uma experiência do usuário muito menos frustrante, mas também em uma experiência do desenvolvedor menos frustrante, pois você terá mais tempo para buscar outros objetivos em seus projetos.
Interação com a Next Paint (INP)
A 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 bastante influenciado pelo JavaScript que carrega, já que o JavaScript é o que impulsiona a maior parte da interatividade que a pessoa vivencia na Web. Particularmente, a quantidade de recursos de script transferidos por download 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, menor será o trabalho do navegador nesse ponto crítico da experiência na página, em que os usuários podem estar tentando interagir com ele.
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 projetos para ver se eles são necessários. Por exemplo, lodash tem muitos métodos que ainda são úteis hoje, mas vem com métodos prontos para uso pelo navegador, como funções específicas de Array
para mapeamento, redução, filtragem e muitos outros.
O aprimoramento progressivo também é uma abordagem útil para JavaScript, porque permite oferecer uma experiência básica, mas ainda funcional, para usuários, à qual você pode adicionar recursos para usuários com dispositivos mais potentes e conexões de rede mais rápidas. Independentemente de você aderir ao princípio do aprimoramento progressivo ou não, a questão permanece: cada recurso JavaScript que não puder ser baixado pode resultar em uma experiência que responde mais rapidamente às interações do usuário, que é um aspecto vital do desempenho da Web.
Conclusão
A auditoria de downloads desnecessários no seu site pode ser apenas um aspecto para proporcionar experiências rápidas aos usuários, mas também tem o potencial de alto impacto. Recapitulando:
- Faça um inventário dos seus próprios recursos e de recursos de terceiros nas suas páginas.
- Meça o desempenho de cada ativo: seu valor e desempenho técnico.
- Determine se os recursos estão fornecendo valor suficiente.
- Entenda 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 maneira, você não apenas melhora o desempenho geral, mas também toma cuidado para não desperdiçar largura de banda dos usuários, além de potencialmente aprimorar métricas centradas no usuário e proporcionar uma melhor experiência ao usuário.