Atrasar o carregamento de imagens e de JavaScript no SharePoint Online

Este artigo descreve como você pode reduzir o tempo de carregamento das páginas do SharePoint Online usando o JavaScript para atrasar o carregamento de imagens e esperando o carregamento de JavaScript não essenciais até depois do término do carregamento da página.

As imagens podem afetar negativamente as velocidades de carregamento da página no SharePoint Online. Por padrão, a maioria dos navegadores de Internet mais modernos buscam previamente as imagens ao carregar uma página HTML. Isso pode fazer com que seja desnecessariamente lento carregar a página se as imagens não ficarem visíveis na tela até que o usuário role para baixo. As imagens podem impedir o navegador de carregar a parte visível da página. Uma solução alternativa para esse problema é usar o JavaScript para ignorar o carregamento das imagens primeiro. Além disso, ao carregar JavaScript não essenciais é possível reduzir os tempos de carregamento também em suas páginas do SharePoint. Este tópico descreve alguns métodos que você pode usar para melhorar os tempos de carregamento de página com o JavaScript no SharePoint Online.

Melhorar os tempos de carregamento de página ao retardar o carregamento de imagens em páginas do SharePoint Online usando o JavaScript

Você pode usar o JavaScript para impedir a busca prévia de imagens em um navegador da Web. Isso acelera o processamento geral do documento. Para fazer isto, remova o valor do atributo src da marca <img> e substitua-o pelo caminho para um arquivo em um atributo de dados, como data-src. Por exemplo:

<img src=”” data-src=”/sites/NavigationBySearch/_catalogs/masterpage/Images/microsoft-white-8.jpg” />

Usando esse método, o navegador não baixa as imagens imediatamente. Se a imagem já estiver no visor, o JavaScript informa o navegador para recuperar a URL do atributo de dados e inseri-la como o valor para o atributo src. A imagem é carregada apenas quando o usuário rola a tela e ela entra no campo de visualização.

Para fazer tudo isso acontecer, você precisará usar o JavaScript.

Em um arquivo de texto, defina a função isElementInViewport()    para verificar se há ou não um elemento na parte do navegador que fica visível para o usuário.

function isElementInViewport(el) {
  if (!el)
    return false;
  var rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth) 
  );
}

Em seguida, use isElementInViewport()    na função loadItemsInView()   . A função loadItemsInView()    carregará todas as imagens que têm um valor para o atributo data-src se estiverem na parte do navegador que é visível para o usuário. Adicione a seguinte função ao arquivo de texto:

function loadItemsInView() {
  //Select elements by the row id.
  $("#row [data-src]").each(function () {
      var isVisible = isElementInViewport(this);
      if (isVisible) {
          if ($(this).attr("src") == undefined) {
              $(this).attr("src", $(this).data("src"));
          }
      }
  });
}

Por fim, chame loadItemsInView()    por window.onscroll()    conforme mostrado no exemplo a seguir. Isso garante que quaisquer imagens que estejam no visor sejam carregadas conforme o usuário precisa delas, mas não antes. Adicione o seguinte ao arquivo de texto:

//Example of calling loadItemsInView() from within window.onscroll()
$(window).on("scroll", function () {
    loadItemsInView();
});

Para o SharePoint Online, você precisa anexar a seguinte função ao evento de rolagem na marca #s4-workspace <div>. Isso ocorre porque os eventos de janela são substituídos para assegurar que a faixa de opções permaneça conectada à parte superior da página.

//Keep the ribbon at the top of the page
$('#s4-workspace').on("scroll", function () {
    loadItemsInView();
});

Salve o arquivo de texto como um arquivo do JavaScript com a extensão. js. Por exemplo, delayLoadImages.js.

Depois que terminar de gravar delayLoadImages.js, adicione o conteúdo do arquivo a uma página mestra no SharePoint Online. Para tanto, adicione um link de script ao cabeçalho da página mestra. Depois que estiver na página mestra, o JavaScript será aplicado a todas as páginas no seu site do SharePoint Online que usam esse layout de página mestra. Como alternativa, se você pretende usá-lo apenas em uma página do seu site, use a Web Part do editor de scripts para inserir o JavaScript na página. Confira estes tópicos para saber mais:

Exemplo: Fazer referência ao arquivo delayLoadImages.js do JavaScript de uma página mestra no SharePoint Online   

Para fazer isto, você também precisa fazer referência a jQuery na página mestra. No exemplo a seguir, é possível ver no carregamento inicial da página que apenas uma imagem é carregada, mas há muitas mais na página.

Imagem de uma nova tarefa em um diagrama de rede.

A captura de tela a seguir mostra o restante das imagens que são baixadas que aparecem na tela após a rolagem.

Captura de tela mostrando várias imagens carregadas na página

Atrasar o carregamento de imagens usando o JavaScript pode ser uma técnica eficaz para aumentar o desempenho; no entanto, se a técnica for aplicada em um site público, os mecanismos de pesquisa não serão capazes de rastrear as imagens da mesma forma que uma imagem formada regularmente. Isso pode afetar classificações nos mecanismos de pesquisa, pois os metadados sobre a imagem em si não existem realmente até que a página seja carregada. Rastreadores de mecanismos de pesquisa apenas leem o HTML e, portanto, não veem as imagens como conteúdo na página. Imagens são um dos fatores usados para classificar páginas nos resultados da pesquisa. Uma maneira de resolver esse problema é usar texto introdutório para suas imagens.

Amostra de código do GitHub: Inserir JavaScript para melhorar o desempenho

Não perca o artigo e o código de exemplo em Inserção de JavaScript fornecidos no GitHub.

Consulte Também

Navegadores compatíveis com o Office 2013 e com o Office 365 ProPlus

Como: Aplicar uma página mestra a um site no SharePoint 2013

Como: Criar um layout de página no SharePoint 2013

Expanda suas habilidades
Explore o treinamento
Obtenha novos recursos primeiro
Ingressar no Office Insider

Essas informações foram úteis?

Obrigado por seus comentários!

Agradecemos pelos seus comentários! Parece que pode ser útil conectar você a um de nossos agentes de suporte do Office.

×