Minimização e agrupamento no SharePoint Online

Este artigo descreve como usar técnicas de minificação e agrupamento com o Web Essentials para reduzir o número de solicitações HTTP e para reduzir o tempo que ele leva para carregar páginas no SharePoint Online.

Ao personalizar seu site, é possível que você acabe adicionando um grande número de arquivos extras ao servidor para sustentar a personalização. Adicionar JavaScript, CSS e imagens extras aumenta o número de solicitações HTTP ao servidor que, por sua vez, aumenta o tempo necessário para exibir uma página da Web. Se você tiver vários arquivos do mesmo tipo, é possível agrupá-los para agilizar o download deles.

Para arquivos JavaScript e CSS, é possível também usar uma abordagem chamada minimização, em que você reduz o tamanho total dos arquivos removendo o espaço em branco e outros caracteres que não são necessários.

Minimização e agrupando de arquivos JavaScript e CSS com Web Essentials

É possível usar software de terceiros, como o Web Essentials, para agrupar arquivos CSS e JavaScript.

Importante : O Web Essentials é um projeto de terceiros, de código-fonte aberto, com base na comunidade. O software é uma extensão do Visual Studio 2012 e Visual Studio 2013, a qual não possui suporte pela Microsoft. Para baixar o Web Essentials, visite o site em http://vswebessentials.com/download.

O Web Essentials oferece duas maneiras de realizar o agrupamento:

  • .bundle: para arquivos CSS e JavaScript

  • .sprite: para imagens (disponível somente no Visual Studio 2013)

Você pode usar o Web Essentials se você tiver um recurso existente com alguns elementos de identidade visual aos quais são feitas referências dentro de uma página mestra personalizada, como:

eNom-Configure-1-3

Para criar um grupo CSS e TE000127218 no Web Essentials

  1. No Visual Studio, no Explorador de Soluções, selecione os arquivos que você deseja incluir no grupo.

  2. Clique com o botão direito nos arquivos selecionados e selecione Web Essentials > Criar arquivo de grupo de JavaScript no menu de contexto. Por exemplo:

    Oito Papéis que as Imagens Desempenham em uma Apresentação

Exibir os resultados do agrupamento dos arquivos JavaScript e CSS

Ao criar um grupo de JavaScript e CSS, o Web Essentials cria um arquivo XML chamado arquivo da receita que identifica os arquivos JavaScript e CSS, além de algumas outras informações de configuração:

Barra de Ferramentas de Acesso Rápido no canto esquerdo superior (local padrão)

Além disso, se o sinalizador de minificação estiver definido como verdadeiro na receita de agrupamento, os arquivos serão reduzidos de tamanho e agrupados juntos. Isso significa que novas versões minimizadas dos arquivos JavaScript foram criadas de forma que você possa fazer referência a elas na sua página mestra.

Caixa de diálogo Adicionar Nova Conta indicando que a conta não pôde ser configurada

Ao carregar uma página do seu site da Web, use as ferramentas de desenvolvedor do navegador da Web, como Internet Explorer 11, para ver o número de solicitações enviadas ao servidor e quanto tempo cada arquivo levou para carregar.

A figura a seguir é o resultado do carregamento de arquivos JavaScript e CSS antes minimização.

O grupo Número na guia Home

Após agrupar os arquivos JavaScript e CSS juntos, o número de solicitações caiu para 74, e cada arquivo demorou apenas um pouco mais que os arquivos originais baixados individualmente:

Captura de tela mostrando 74 itens sendo baixados

Após o agrupamento, o arquivo de grupo JavaScript reduziu significativamente de 815 KB para 365 KB:

Permitir modificações do tipo de conteúdo no SharePoint Designer

Agrupar imagens criando um sprite de imagem

De forma semelhante a que você agrupa arquivos JavaScript e CSS, é possível combinar vários ícones pequenos e outras imagens comuns em uma planilha de sprite maior e, então, usar o CSS para revelar as imagens individuais. Em vez de baixar cada imagem individualmente, o navegador do usuário baixa a planilha sprite de uma vez e a armazena em cache no computador local. Isso melhora o desempenho de carregamento da página reduzindo o número de downloads e as idas e vindas para o servidor Web.

Para criar um sprite de imagem no Web Essentials

  1. No Visual Studio, no Explorador de Soluções, selecione os arquivos que você deseja incluir no grupo.

  2. Clique com o botão direito nos arquivos selecionados e selecione Web Essentials > Criar sprite de imagem no menu de contexto. Por exemplo:

    Adicione mais páginas a seus blocos de anotações.
  3. Escolha um local para salvar o arquivo sprite. O arquivo .sprite é um arquivo XML que descreve as configurações e os arquivos no sprite. As figuras a seguir mostram um exemplo de um arquivo PNG sprite e o arquivo XML .sprite correspondente.

    Vários slides mestres

    Captura de tela de um arquivo XML de entidade gráfica

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.

×