Atraso no carregamento de imagens e JavaScript no SharePoint Online

Este artigo descreve como você pode diminuir o tempo de carregamento para páginas do SharePoint Online usando JavaScript para atrasar o carregamento de imagens e também aguardando para carregar JavaScript não essencial até que a página seja carregada.

As imagens podem afetar negativamente as velocidades de carregamento de página SharePoint Online. Por padrão, a maioria dos navegadores de Internet modernos pré-busca imagens ao carregar uma página HTML. Isso pode fazer com que a página seja desnecessariamente lenta para ser carregada se as imagens não estiverem visíveis na tela até que o usuário role para baixo. As imagens podem impedir que o navegador carrega a parte visível da página. Para contornar esse problema, você pode usar o JavaScript para ignorar o carregamento das imagens primeiro. Além disso, carregar JavaScript não essencial também pode reduzir os tempos de download em SharePoint páginas. Este tópico descreve alguns métodos que você pode usar para melhorar os tempos de carregamento de página com JavaScript no SharePoint Online.

Melhorar os tempos de carregamento de página atrasando o carregamento de imagem em SharePoint online usando JavaScript

Você pode usar o JavaScript para impedir que um navegador da Web busque previamente imagens. Isso acelera a renderização geral do documento. Para fazer isso, remova o valor do atributo src <img> da marca 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/media/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 instrui o navegador a recuperar a URL do atributo de dados e inseri-la como o valor do atributo src. A imagem é carregada apenas à medida que o usuário rola e ela entra em exibição.

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

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

function isElementInViewport(el) {
  if (!el)
    return false;
  var rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &amp;&amp;
    rect.left >= 0 &amp;&amp;
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &amp;&amp;
    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 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() de dentro de window.onscroll() , conforme mostrado no exemplo a seguir. Isso garante que todas as imagens que estão no visor sejam carregadas conforme o usuário precisar 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();
});

Por SharePoint Online, você precisa anexar a função a seguir ao evento de rolagem na marca #s4-workspace<div>. Isso ocorre porque os eventos de janela são substituídos para garantir que a faixa de opções permaneça anexada à 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 JavaScript com a extensão .js, por exemplo, delayLoadImages.js.

Depois de terminar de escrever delayLoadImages.js, você pode adicionar o conteúdo do arquivo a uma página mestra no SharePoint Online. Faça isso adicionando um link de script ao cabeçalho na página mestra. Quando estiver em uma página mestra, o JavaScript será aplicado a todas as páginas em seu site SharePoint Online que usam esse layout de página mestra. Como alternativa, se você pretende usar isso apenas em uma página do seu site, use a Web Part do editor de scripts para inserir o JavaScript na página. Consulte estes tópicos para obter mais informações:

Exemplo: referenciando o arquivo delayLoadImages.js JavaScript de uma página mestra no SharePoint Online

Para que isso funcione, você também precisa fazer referência ao jQuery na página mestra. No exemplo a seguir, você pode ver na carga de página inicial que há apenas uma imagem carregada, mas há várias outras na página.

Captura de tela mostrando uma imagem carregada na página.

A captura de tela a seguir mostra o restante das imagens que são baixadas depois que elas rolam para a exibição.

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

Atrasar o carregamento de imagem usando 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 poderão rastrear as imagens da mesma maneira que rastreariam uma imagem formada regularmente. Isso pode afetar as classificações nos mecanismos de pesquisa porque os metadados na própria imagem não estão lá até que a página seja carregada. Os rastreadores do mecanismo de pesquisa leem apenas o HTML e, portanto, não veem as imagens como conteúdo na página. As imagens são um dos fatores usados para classificar páginas nos resultados da pesquisa. Uma maneira de contornar isso é usar texto introdutório para suas imagens.

GitHub código de exemplo: injetar JavaScript para melhorar o desempenho

Não perca o artigo e o exemplo de código sobre a injeção de JavaScript fornecida GitHub.

Confira também

Navegadores com suporte no Office 2013 e Microsoft 365 Apps para Grandes Empresas

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

Tutorial: criar um layout de página no SharePoint 2013