Otimizar o desempenho da Web Part nas páginas de sites modernas do SharePoint

As páginas de sites modernas do SharePoint contêm web parts que podem contribuir para o tempo de carga geral da 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 em portais modernos do SharePoint, consulte 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 analisam o portal moderno do SharePoint 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, visite Usar a ferramenta Diagnóstico de Página para SharePoint.

Observação

A ferramenta Diagnóstico de Página funciona apenas para o SharePoint 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 (vermelho): qualquer web part personalizada que esteja visível no modo de exibição (parte visível da tela da página, que é carregada primeiro) que leva mais de dois segundos para ser carregada. Quaisquer web parts personalizadas fora da janela de exibição que levam mais de quatro segundos para carregar. O tempo total de carga é exibido nos resultados do teste e é dividido por carga de módulo, carga lenta, init e renderização.
• Oportunidades de melhoria (amarelo): Itens que podem estar afetando o tempo de carga da página são mostrados nesta seção e devem ser revisados e monitorados. Isso pode incluir web parts da Microsoft "out of the box" (OOTB). 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ó deve registrar um tíquete de suporte para investigação se estiver experimentando um desempenho lento na página e todas as web parts da Microsoft na página aparecerem nos resultados na seção Aprimoramento de oportunidades . Uma futura atualização de diagnóstico de página para ferramenta do SharePoint dividirá 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 as Web parts estiverem afetando o resultado do tempo de carga da página aparecer na seção Atenção necessária ou Aprimorar oportunidades dos resultados, selecione o resultado para ver detalhes sobre quais web parts estão sendo carregadas lentamente. Atualizações futuras para a ferramenta Diagnóstico de Página para SharePoint podem incluir atualizações nas regras de análise, portanto, verifique se você sempre tem 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 gasto 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 main da página. Há certas condições em que há muitas web parts para renderizar e elas estão na fila 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 a seguir 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 obter mais informações sobre como usar a CDN Office 365, consulte Usar a CDN (Rede de Distribuição de Conteúdo) Office 365 com o SharePoint.
  • 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 do Estrutura do SharePoint e atualize para novas versões à medida que elas se tornam 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, desacopla-os a uma chamada separada que é executada após a renderização de 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 obter mais informações sobre dependências de conteúdo, consulte Usar a CDN (Rede de Distribuição de Conteúdo) Office 365 com o SharePoint.
  • Evite chamadas de API que causam fluxo de reluxo, 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.

Artigos relacionados

Ajustar o desempenho do SharePoint

Ajustar o desempenho do Office 365

Desempenho na experiência moderna do SharePoint

Redes de distribuição de conteúdo

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