2

Bom dia, tenho um carousel Bootstrap que ocupa a tela toda. Gostaria de saber quais os métodos utilizados para otimizar o carregamento das imagens deste carousel e a página como um todo.

Estou utilizando este carousel: http://bootsnipp.com/snippets/featured/responsive-bs-carousel-with-hero-headers. Ativei compactação gzip e cache via htaccess mas gostaria de alguma forma de fazer com que ele não afete o carregamento de todo o site, que é one page, e o cliente tem liberdade de colocar as imagens conforme a necessidade.

7
  • Não entendi, especifique mais. 20/05/2015 às 14:55
  • Otimização do carregamento das imagens?
    – Ricardo
    20/05/2015 às 14:57
  • Desculpa, Editei a pergunta. 20/05/2015 às 14:57
  • Poderia publicar o que você já fez? Assim ficaria mais fácil de ajudarmos. 20/05/2015 às 15:25
  • Você já fez algum processo de análise na página relativa a performance? Ou so está preocupado com o carregamento das imagens? (download das imagens)
    – Intruso
    20/05/2015 às 15:28

4 Respostas 4

3

Há algumas técnicas que podem ser empregadas:

Utilize Connection: Keep-Alive

Permite que a conexão TCP estabelecida seja re-utilizada para novas requisições HTTP, removendo o tempo necessário para realização do handshake.

Múltiplos Domínios de Conteúdo Estático

Espalhe suas imagens em domínios como static1.site.com.br, static2.site.com.br, etc, e carregue cada uma delas de um site diferente. Em múltiplos domínios você tem a certeza de que várias conexões serão abertas para baixar os recursos, minimizando o impacto do tempo do handshake.

Configurar Cache-Control

Imagens geralmente não mudam com frequência. Utilize Cache-Control para permitir que o navegador e outros nós intermediários armazenem em cache suas imagens. Configure o tempo corretamente, de acordo com a natureza da imagem. Uma dica (meio gambiarra, mas é simples o suficiente), é dividir as imagens em pastas de acordo com sua taxa de atualização e colocar arquivos .htaccess (no caso do Apache) para configurar o controle do cache individualmente.

Exemplo (.htaccess):

# Configura o cache como público e com a idade máxima de 3600 segundos (1 hora).
Header set Cache-Control "public, max-age=3600"

Vale lembrar que 1 hora é pouco para a grande maioria das imagens.

ETag

Para banners, talvez o melhor seja re-validar o banner cada vez que a página seja acessada. A vantagem é que o cliente sempre irá possuir o banner mais atual, mas a desvantagem é que uma requisição por imagem sepre será realizada.

Como isto ajuda se a requisição é feita? O servidor utiliza o campo ETag para verificar se houve alguma mudança na imagem no servidor. Caso não ocorra mudanças, ela retorna um status 304 Not Modified ao invés do 200 OK, e nenhum corpo de resposta.

O Apache faz isso automaticamente, desde que não seja dito o contrário.

Veja mais em: http://en.wikipedia.org/wiki/HTTP_ETag

Codificação

Selecionar o formato e a qualidade correta da imagem ajuda não só na qualidade final das mesmas, como no tempo do carregamento.

Existem algumas ferramentas que otimizam a imagem automaticamente para você:

PNG: https://tinypng.com/

JPG: https://tinyjpg.com/

Observação

Com exceção da codificação, todas as técnicas podem ser empregadas para outros arquivos, como PDF, JS, CSS, HTML, etc. Basta configurá-las do modo mais apropriado.

1
0

Base 64

Realizar o Encode base64 das imagens é uma alternativa muito boa para economia de tempo de carregamento, como? ao invés de fazer uma requisição ao servidor por uma imagem sempre, a imagem (encodada em base64) é enviada junto do arquivo HTML (junto mesmo, na tag as vezes no proprio CSS).

Como ficaria o HTML com imagem base64:

<div>
    <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
    9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
</div>

Formatos de Imagens

Há uma discussão no SOen (mesma rede deste site) que vai de encontro com o que procura: PNG vs. GIF vs. JPEG - When best to use?, darei um resumo do conteúdo da discussão:

  • Para imagem chapada (como o pássaro do twitter o formato .gif é mais indicado por ter uma compressão maior e com 3% de perda de qualidade (e olhe lá)).
  • Para imagens com qualidade tipo Foto é mais indicado .jpg pois ele possui uma compressão maior mesmo guardando uma melhor qualidade de imagem.
  • Para imagem chapada com fundo transparente: .png de 8 bits (representa até 256 cores) é mais indicado por ter uma compressão superior ao .gif.

Obs: Você pode combinar as soluções

8
  • 1
    Obrigado, vou estudar este assunto. 20/05/2015 às 16:44
  • Encoding para base64 é uma prática de portabilidade, não de performance. O volume aumenta em 33% - uma imagem de 100KiB cresceria para 133 KiB. Além disso, o payload de todas das imagens presentes é recarregado toda vez que o arquivo HTML sofre re-fetch do servidor, já que Data URIs não podem sofrer caching independentemente do documento que as porta.
    – OnoSendai
    20/05/2015 às 18:06
  • Mas só é feita uma única requisição isso só seria um prejuízo se ele ficasse recarregando a página
    – Ricardo
    20/05/2015 às 18:09
  • @RicardoHenrique Essa única requisição só é mais performática (e ainda assim por uma margem quase irrelevante) na primeira requisição. Após isso, mesmo no pior cenário possível (HTTPS com renegociação de handshake) a performance de carga direta do cache local é várias ordens de magnitude maior do que o re-fetch do documento contendo Data URIs. Note o post do OP - 'o cliente tem liberdade de colocar as imagens conforme a necessidade'. O conteúdo não pode ser estático.
    – OnoSendai
    20/05/2015 às 18:21
  • Entendo, no cenário onde fosse uma aplicação onde as imagens fossem thumbnails de vídeos e a cada pagina viessem thumbs de videos diferentes, o uso de base64 seria ruim?
    – Ricardo
    20/05/2015 às 18:23
0

O uso da frase pode parecer um clichê, mas, não vou deixar de citar ainda assim: Não existe bala de prata. Cada tipo de software, cada tecnologia e cada particularidade de escolhas de design de projeto vão influenciar na performance.

Então, falando mais especificamente de Web, como começamos? Repare que eu disse Web, não php, ou .net, ou java, eu disse Web.

Então vá para o basico antes de ir para seu código ou Design, sim, todos eles tem abordagens de performance para Web e bem comuns se quer saber.

E o básico é http. Isso mesmo, o bom e velho protocolo que sustenta nossas aplicações e que foi inicialmente implementado pensando em coisas mais simples que hoje.

Entenda o ciclo de vida das páginas da sua aplicação e aplique técnicas específicas em cada parte do ciclo da aplicação.

Como assim? Um cara que começou discutindo muito isso foi o Steve Solders, que começou no yahoo e depois foi para Oraculo, ops, o google.

Ele fez justamente isso, analisou o ciclo de vida e aplicou um monte tecnicas, na interface. Tendo como premissa que o codigo que gera a página foi bem feito, então ele foi pensado para rodar com performance, logo, ele vai rodar mais rápido do que a entrega da requisição (todos os objetos que compoem a pagina e a renderização no browser). O site do cara: https://www.stevesouders.com/

Ele tem um monte de posts sobre isso, começa descrevendo a regra dos 80/20 e depois elenca um conjunto de regras que você deve aplicar e te fornece um Rank, baseado nessas regras, para a performance da sua pagina.

Tem umas ferramentas lá para análise da página (ex: yslow)

Tem um monte de coisas simples e legais la, como: "diminua suas requisições",ou seja, quanto menos objetos numa página, mais rápida ela é entregue pela rede, menos conexões tcp, menos resoluções de dns, menos enfileiramento aguardando uma conexão disponivel, etc.

Um exemplo simples é que um unico arquivo de 100k é baixado mais rapidamente do que 10 arquivos de 10k, porque? Rede. A cada arquivo, se você não os tem no cache, o browser vai resolver o dns, abrir conexão, receber conteudo, mudar de conexão e repete para cada arquivo, como isso acontece pela rede, vai demorar 10 vezes (o tempo para fazer essas ações de infra) a mais do que somente fazer uma vez e baixar o conteudo todo.

Então, 5 arquivos de CSS iguais espalhados pelas suas paginas, que são sempre usados por suas classes, opa, estou literalmente perdendo tempo.

Junta tudo, poe no cache, diminui 4 requests.

Esse é um exemplo de como usar o conhecimento básico dos protocolos de rede, para melhorar o design da aplicação com foco na performance.

Claro que existem soluções de infra mais, hum, robustas e com custo adicional a infra do projeto (CDN, Load Balance, cluster), mas, vamos nos ater a outras coisas, fica o conceito básico delas aqui pra você pesquisar, uma delas vale realmente a pena entender, CDN. Que é, de forma básica, um outro servidor que você coloca tudo que for conteúdo fixo, por assim dizer.

Voltemos as redes, quero baixar uma imagem de um site, uma requisição, dns, tcp, dados, repete tudo. Mas, tem um detalhe importante, o seu Browser. O Browser tenta fazer um bom trabalho e tenta baixar o conteúdo da pagina, de forma simultanea. Ou seja, se no html da minha página tiver 3 imagens, ele le o html, faz o parse dos links das imagens e abre 3 conexões tcp (requests) para o servidor baixando ao mesmo tempo.

Só que na maioria das vezes as páginas tem bem mais que 30 requests e o problema é que o browser tem um limite de conexões simultaneas que ele pode fazer, resultado? Ele cria uma fila de requisições esperando para serem baixadas, cá pra nós fila não é legal né?

O numero máximo de conexões varia de browser para browser, então ai vai solders: http://www.stevesouders.com/blog/2008/03/20/roundup-on-parallel-connections/

E o mesmo problema, você acaba tendo no servidor da aplicação. Dependendo da rede, dos serviços no servidor e da velocidade que ele entrega as requisições, ele pode demorar mais a estabelecer as conexões tcp por baixo do http, ai fila novamente, etc.

Então, pense dobrado, poe uma outra máquina (um clone por assim dizer) muda apenas o endereço (DNS) e aponta todos os links de conteúdo fixo pra la. O seu browser vai abrir as conexões simultaneas com os dois servers, o que gera menos filas, tcp mais rápido, etc.

Se você olhar direitinho, usando cache, você está apenas diminuindo o numero de requisições, é uma boa regra ;)

Uma coisa importante: Eu não falei de C#, java, asp.net, pho, ruby.. falei de http e redes, então esse conhecimento vai para os vários tipos de projetos.

Dá uma olhada no site do cara, se der, compra o livro como referência de consulta. Antes de comprar, vai numa livraria e ve qual dos livros bate mais com que você quer fazer.

Opa, malz, ce ta afim de umas paradas com imagens, slider e pá... então tem uma mulher que escreveu alguns materias sobre isso, design e outras coisas: http://larahogan.me/

Ai é complicado por que tem algumas tecnicas é são tratamento das imagens, tirar o foco, soma com jpeg que descarta nitidez, arquivo menor, download mais rápido. E isso requer treinar a pessoa que vai colocar conteúdo no site. Mas, tem um monte de coisas lá sobre design e a cultura da performance, isso é legal.

Algo tipo: Todo mundo é responsável pela performance.

Continuando, se você pensar bem no fluxo de uma requisição, vai ter algo assim: Browser faz request, a rede (http, dns, tcp) trabalha pra caramba, o server processa o request (faz o parser do html, executa teu código, vai no banco de dados - mais rede - retorna faz o parser do html novamente, mais rede (tcp, cache, etc) e devolve pro Browser, ele começa a renderizar a página, executa os scripts locais e te mostra as coisas, isso pra cada request da página.

Então é o mesmo que, simplificando: Request do Browser-> rede -> Processamento (Teu Código) -> Rede ->Browser.

Já falamos muito de requests, design, rede, então falta o código.

Sim, o request só é atendido quando o código executa e está pronto para retornar um objeto solicitado pelo request (que geralmente monta o html que será o corpo da página solicitada).

Então, não tem receita, analise o fluxo completo da sua página e veja se o que você faz é responsavel por mais de 20% do tempo de load da página, regra do Solders, reclama com ele. Lógico que tem que ter bom senso né? Se sua página é tipo google, praticamente não tem requests e nem render porque não tem objetos, então o tempo de load é basicamente codigo + rede, foque no código. Mas, se o objeto principal da página é responsável por 1% do tempo de load, tua interface ta lascada velho, de boas.

Ai cabe tudo que os mestres falam por ai sobre performance, cursores vs subqueries, refazer os indices das tabelas, diminua os joins, instanciar muitos objetos que nem sempre são usados, não usar lazy load, uso de ORM ineficiente, viewstate grande demais, tookit carregado sem necessidade, ajax implementado erradamente, select aberto nas telas de listagem, não usar filtros para limitar as pesquisas, etc.

Cara, é muita coisa, cada tecnologia vai ter suas particularidades.

Vou deixar aqui algumas coisas legais:

0

Cloudflare é uma excelente ferramenta para isso. Após a devida configuração do Cloudflare, pesquise sobre "regras de página" do Cloudflare!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .