Atrasar o carregamento de imagens e JavaScript no SharePoint Online

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

As imagens podem afetar negativamente as velocidades de carregamento de páginas no SharePoint Online. Por predefinição, a maioria dos browsers modernos pré-seleciona imagens ao carregar uma página HTML. Este processo pode fazer com que a página seja lenta a carregar se as imagens não estiverem visíveis no ecrã até o utilizador se deslocar para baixo. As imagens podem impedir que o browser carregue a parte visível da página. Para contornar este problema, pode utilizar o JavaScript para ignorar o carregamento das imagens primeiro. Além disso, carregar JavaScript não essencial também pode abrandar os tempos de transferência nas suas páginas do SharePoint. Este artigo descreve alguns métodos que pode utilizar para melhorar os tempos de carregamento de páginas com JavaScript no SharePoint Online.

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

Pode utilizar o JavaScript para impedir que um browser faça a pré-obtenção de imagens. Esta técnica acelera a composição geral de documentos. Para tal, remova o valor do atributo src da <etiqueta img> 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" />

Neste método, o browser não transfere as imagens imediatamente. Se a imagem já estiver na janela viewport, o JavaScript indica ao browser para obter o URL do atributo de dados e inseri-lo como o valor do atributo src. A imagem só é carregada à medida que o utilizador se desloca e é apresentada.

Para executar esta função, tem de utilizar 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 para o utilizador.

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) &amp;&amp;
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

Em seguida, utilize isElementInViewport() na função loadItemsInView( ). A função loadItemsInView() carrega todas as imagens que têm um valor para o atributo data-src se estiverem na parte do browser que está visível para o 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 mostrado no exemplo seguinte. Esta função garante que todas as imagens que estão na janela viewport são carregadas conforme 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 div da área de trabalho <> #s4 porque os eventos da janela são substituídos para garantir que o friso 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 delayLoadImages.js, pode adicionar os conteúdos do ficheiro a uma página mestra no SharePoint Online ao adicionar uma ligação de script ao cabeçalho na página mestra. Assim que estiver numa página mestra, o JavaScript é aplicado a todas as páginas no seu site do SharePoint Online que utilizam esse esquema de página mestra. Em alternativa, se pretender utilizar apenas a funcionalidade numa página do seu site, utilize a Peça Web editor de scripts para incorporar o JavaScript na página. Para mais informações, consulte:

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

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

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

Para que este exemplo funcione, também tem de referenciar jQuery na página mestra. No exemplo seguinte, pode ver no carregamento da página inicial que só existe uma imagem carregada, mas existem várias outras na página.

A seguinte captura de ecrã mostra o resto das imagens que são transferidas depois de se deslocarem para a vista.

Atrasar o carregamento de imagens com JavaScript pode ser uma técnica eficaz no aumento do desempenho; no entanto, se a técnica for aplicada num site público, os motores de busca não conseguirão pesquisar as imagens da mesma forma que pesquisariam uma imagem formada regularmente. Esta técnica pode afetar as classificações nos motores de busca porque os metadados na própria imagem não estão lá até que a página seja carregada. Pesquisa crawlers do motor só leem o HTML e, por conseguinte, não conseguem ver as imagens como conteúdo na página. As imagens são um dos fatores utilizados para classificar páginas nos resultados da pesquisa. Uma solução é utilizar texto introdutório para as suas imagens.

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

Não perca o artigo e o exemplo de código sobre a injeção de JavaScript fornecida no 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