Otimizar o desempenho de Web Parts em páginas de site moderno do SharePoint Online

As páginas de site moderno do SharePoint Online contêm Web Parts que podem contribuir para os tempos totais de carregamento de página. Este artigo ajudará você a entender como determinar de que modo as Web Parts em suas páginas afetam a latência percebida pelo usuário e como corrigir problemas comuns.

Observação

Para obter mais informações sobre o desempenho dos portais modernos do SharePoint Online, confira Desempenho na experiência moderna do SharePoint.

Usar a ferramenta Diagnóstico de Página para SharePoint para analisar Web Parts

A ferramenta Diagnóstico de Página para SharePoint é uma extensão de navegador para os novos navegadores Microsoft Edge (https://www.microsoft.com/edge) e Chrome que analisa o portal moderno do SharePoint Online e as páginas clássicas do site de publicação. A ferramenta fornece um relatório para cada página analisada que mostra o desempenho da página em relação a um conjunto definido de critérios de desempenho. Para instalar e saber mais sobre a ferramenta Diagnóstico de Página para SharePoint, acesse Usar a ferramenta Diagnóstico de Página para SharePoint Online.

Observação

A ferramenta de Diagnóstico de Página só funciona com o SharePoint Online e não pode ser usada em uma página do sistema do SharePoint.

Ao analisar uma página de site do SharePoint com a ferramenta Diagnóstico de Página para SharePoint, você pode ver informações sobre Web Parts que excedem a métrica de linha de base no resultado de As Web Parts estão afetando o tempo de carregamento da página, no painel Testes de diagnóstico.

Os resultados possíveis incluem:

• Atenção necessária (vermelha): Qualquer web part personalizada visível no visor (parte visível da tela da página que é carregada primeiro) que leva mais de dois segundos para carregar. Quaisquer web parts personalizadas fora da janela de exibição que levam mais de quatro segundos para carregar. O tempo total de carregamento é exibido nos resultados do teste e é dividido por carga do módulo, carga lenta, inicialização e renderização.
• Oportunidades de melhoria (amarelo): os itens que podem estar afetando o tempo de carregamento da página são mostrados nesta seção e devem ser examinados e monitorados. Isso pode incluir Web Parts OOTB (“prontas para uso”) da Microsoft. Os resultados de todas as Web Parts da Microsoft mostradas nesta seção são automaticamente relatados à Microsoft, portanto, nenhuma ação é necessária. Você só precisará registrar um tíquete de suporte para investigação se estiver enfrentando um desempenho muito lento na página e todas as Web Parts da Microsoft na página aparecerem nos resultados na seção Oportunidades de melhoria. Observe que uma futura atualização da ferramenta Diagnóstico de Página para SharePoint detalhará ainda mais os resultados com base na configuração específica da web part da Microsoft.
• Nenhuma ação necessária (verde): nenhuma Web Part está demorando mais de dois segundos para retornar dados.

Se o resultado de As Web Parts estão afetando o tempo de carregamento da página aparecer na seção Requer atenção ou Oportunidades de melhoria, clique no resultado para ver detalhes sobre quais Web Parts estão com carregamento lento. Futuras atualizações da ferramenta Diagnóstico de Página para SharePoint podem incluir atualizações de regras de análise, portanto, garanta que você sempre tenha a versão mais recente da ferramenta.

As informações disponíveis nos resultados incluem:

• Feito por mostra se a Web Part é personalizada ou o Microsoft OOTB.

• O nome e a ID mostram informações de identificação que podem ajudá-lo a encontrar a Web Part na página.

• O total mostra o tempo total da Web Part para carregar, inicializar e renderizar. É o tempo relativo total necessário pela Web Part para renderizar na página, do início ao fim.

• A Carga do Módulo mostra o tempo necessário para baixar, avaliar e carregar as extensões arquivos JavaScript e CSS. Em seguida, ele iniciará o processo init.

• O Lazy Load mostra o tempo para o carregamento adiado de web parts não vistos na seção principal da página. Há certas condições em que há muitas web parts para renderizar e elas são enfileiradas para renderizar para minimizar o tempo de carga da página.

• O Init mostra o tempo necessário para a Web Part inicializar os dados.

  É uma chamada assíncrona e o tempo de entrada é o cálculo do tempo para a função onInit quando a promessa retornada é resolvida.

• A renderização mostra o tempo necessário para renderizar a interface do usuário (interface do usuário) depois que a carga do módulo e o Init forem concluídos.

  É o tempo de execução do JavaScript para montar o DOM no documento (página). A renderização de recursos assíncronos, por exemplo, imagens, pode levar mais tempo para ser concluída.

Essas informações são fornecidas para ajudar designers e desenvolvedores a solucionar problemas. Elas devem ser encaminhadas à equipe de design e desenvolvimento.

Solucionar problemas de desempenho de Web Parts

Siga as orientações desta seção para identificar e corrigir problemas de desempenho com Web Parts indicados nos resultados de As Web Parts estão afetando o tempo de carregamento da página.

Há três categorias de possíveis causas do desempenho ruim de uma Web Part. Use as informações abaixo para determinar quais problemas se aplicam ao seu cenário e corrigi-los.

• Dependências e tamanho de script da Web Part
  • Otimize o script inicial que renderiza o cenário principal para somente modo de exibição.
  • Mova os cenários menos frequentes e o código do modo de edição (como o painel de propriedades) para partes separadas usando a instrução import().
  • Examine as dependências do arquivo package.json para remover completamente qualquer código morto. Mova todas as dependência apenas de teste/build para devDependencies.
  • É necessário usar a CDN do Office 365 para baixar o recurso estático ideal. As origens da CDN pública são preferíveis para arquivos js/css. Para saber mais sobre como usar a CDN do Office 365, confira Usar a CDN (Rede de Distribuição de Conteúdo) do Office 365 com o SharePoint Online.
  • Reutilize estruturas como importações do React e do Fabric, que vêm como parte da Estrutura do SharePoint (SPFx). Para saber mais, confira Visão geral da Estrutura do SharePoint.
  • Verifique se você está usando a versão mais recente da Estrutura do SharePoint e atualize para novas versões quando elas estiverem disponíveis.
• Busca/cache de dados
  • Se a Web Part depender de chamadas extras do servidor para buscar dados para exibição, verifique se essas APIs do servidor são rápidas e/ou implementam o cache do lado do cliente (como usar localStorage ou IndexedDB para conjuntos maiores).
  • Se várias chamadas forem necessárias para renderizar dados críticos, considere o uso de envio em lote no servidor ou de outros métodos de consolidação de solicitações em uma única chamada.
  • Como alternativa, se alguns elementos de dados exigirem uma API mais lenta, mas não forem críticos para a renderização inicial, separe-os em outra chamada, executada após a renderização dos dados críticos.
  • Se várias partes usarem os mesmos dados, utilize uma camada de dados comum para evitar chamadas duplicadas.
• Tempo de renderização
  • Quaisquer fontes de mídia, como imagens e vídeos, devem ser dimensionadas de acordo com os limites do contêiner, dispositivo e/ou rede para evitar o download de grandes recursos desnecessários. Para saber mais sobre como usar dependências de conteúdo, confira Usar a CDN (Rede de Distribuição de Conteúdo) do Office 365 com o SharePoint Online.
  • Evite chamadas de API que causem refluxo, regras CSS complexas ou animações complicadas. Para obter mais informações, confira Minimizar o refluxo do navegador.
  • Evite o uso de tarefas de longa execução encadeadas. Em vez disso, divida as tarefas de longa execução em filas separadas. Para obter mais informações, confira Otimizar a execução do JavaScript.
  • Reserve o espaço correspondente para renderizar de forma assíncrona mídia ou elementos visuais, a fim de evitar quadros ignorados e instabilidade (também conhecida como jank).
  • Se determinado navegador não oferecer suporte a um recurso usado na renderização, carregue um polyfill ou exclua o código dependente em execução. Se o recurso não for crítico, descarte recursos como manipuladores de eventos para evitar vazamentos de memória.

Antes de fazer as revisões das páginas para corrigir problemas de desempenho, anote o tempo de carregamento da página nos resultados da análise. Execute a ferramenta novamente após a revisão para ver se o novo resultado está dentro do padrão da linha de base e verifique o tempo de carregamento da nova página para ver se melhorou.

Observação

O tempo de carregamento da página pode variar de acordo com vários fatores, como a carga da rede, hora do dia e outras condições transitórias. Você deve testar o tempo de carregamento da página algumas vezes antes e depois de fazer as alterações para ajudá-lo a calcular uma média dos resultados.

Tópicos relacionados

Ajustar o desempenho do SharePoint Online

Ajustar o desempenho do Office 365

Desempenho na experiência moderna do SharePoint

Redes de distribuição de conteúdo

Usar a Rede de Distribuição de Conteúdo (CDN) do Office 365 com o SharePoint Online