Atraso no carregamento de imagens e JavaScript no SharePoint Online

Este artigo descreve como pode diminuir o tempo de carregamento de páginas do SharePoint Online ao utilizar o JavaScript para atrasar o carregamento de imagens e também ao esperar para carregar o JavaScript não essencial até que a página carregue.

As imagens podem afetar negativamente a velocidade de carregamento de páginas no SharePoint Online. Por predefinição, os browsers de Internet mais modernos otimizarão as imagens ao carregar uma página HTML. Isto pode fazer com que o carregamento da página seja desnecessariamente lento se as imagens não estiverem visíveis no ecrã até o utilizador deslocar para baixo. As imagens podem impedir o browser de carregar a parte visível da página. Para resolver este problema, pode utilizar o JavaScript para ignorar o carregamento das imagens primeiro. Além disso, o carregamento não essencial do JavaScript também pode abrandar os tempos de transferência nas suas páginas do SharePoint. Este tópico descreve alguns métodos que pode utilizar para melhorar os tempos de carregamento de páginas com o JavaScript no SharePoint Online.

Melhorar os tempos de carregamento de páginas ao atrasar o carregamento de imagens em páginas do SharePoint Online com o JavaScript

Pode utilizar o JavaScript para impedir que um browser oumente as imagens. Esta ação acelera a comtação geral do documento. Para tal, remova o valor do atributo src <img> da etiqueta e substitua-o pelo caminho para um ficheiro num atributo de dados, como: data-src. Por exemplo:

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

Ao utilizar este método, o browser não transfere imediatamente as imagens. Se a imagem já estiver na janela viewport, o JavaScript diz ao browser para obter o URL do atributo de dados e inseri-lo como o valor do atributo src. A imagem só é carregada quando o utilizador se desloca para baixo e a imagem aparece.

Para fazer com que tudo isto aconteça, terá de utilizar o JavaScript.

Num ficheiro de texto, defina a função isElementInViewport() para verificar se um elemento está ou não na parte do browser que está visível ao utilizador.

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, utilize isElementInViewport() na função loadItemsInView(). A função loadItemsInView() irá carregar todas as imagens que tenham um valor para o atributo data-src se estiverem na parte do browser que está visível ao utilizador. Adicione a seguinte função ao ficheiro 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() a partir de window.onscroll() conforme apresentado no exemplo seguinte. Desta forma, garante que as imagens que estão na viewport são carregadas quando o utilizador precisa delas, mas não antes. Adicione o seguinte ao ficheiro de texto:

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

Para o SharePoint Online, tem de anexar a seguinte função ao evento de deslocamento na etiqueta área #s4 trabalho da <div> empresa. Isto ocorre porque os eventos de janela são substituídas para garantir que o fita permanece anexado à parte superior da página.

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

Guarde o ficheiro de texto como um ficheiro JavaScript com a extensão .js, por exemplo, delayLoadImages.js.

Quando terminar de escrever o delayLoadImages.js, pode adicionar os conteúdos do ficheiro a uma página mestra no SharePoint Online. Pode fazê-lo ao adicionar uma ligação de script ao cabeçalho na página mestra. Assim que o mesmo esteja numa página mestra, o JavaScript será aplicado a todas as páginas no seu site do SharePoint Online que utilizem esse esquema de página mestra. Em alternativa, se só pretende utilizar esta página do seu site, utilize a Peça Web Editor de Scripts para incorporar o JavaScript na página. Consulte estes tópicos para obter mais informações:

Exemplo: Referenciar o ficheiro JavaScript delayLoadImages.js a partir de uma página mestra no SharePoint Online

Para que funcione, também tem de referenciar a jQuery na página mestra. No exemplo seguinte, pode ver que, no carregamento de página inicial, existe apenas uma imagem carregada, mas que a página tem muitas mais imagens.

Captura de ecrã a mostrar uma imagem carregada na página.

A captura de ecrã seguinte mostra as restantes imagens que são transferidas depois de as mesmas ficarem vistas.

Captura de ecrã a mostrar várias imagens carregadas na página.

Atrasar o carregamento de imagens através do JavaScript pode ser uma técnica eficaz no aumento do desempenho; no entanto, se a técnica for aplicada num Web site público, os motores de busca não conseguirão pesquisar as imagens da mesma forma que procurariam uma imagem formada regularmente. Isto pode afetar as classificações nos motores de busca, uma vez que os metadados da imagem só estão lá até a página ser carregada. Os crawlers do motor de busca só leem o HTML e, por isso, não veem as imagens como conteúdos na página. As imagens são um dos fatores utilizados para classificar páginas nos resultados da pesquisa. Uma forma de resolver este problema é utilizar texto introdutório para as suas imagens.

GitHub de código: Injetar o JavaScript para melhorar o desempenho

Não perca o artigo e o exemplo de código da injeção do JavaScript fornecida na GitHub.

Consulte também

Browsers suportados no Office 2013 e Microsoft 365 Apps para Grandes Empresas

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

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