1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
|
---
title: Dicas para criar páginas HTML de carregamento rápido
slug: Learn/HTML/Howto/Author_fast-loading_HTML_pages
tags:
- Performance
translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages
original_slug: Web/HTML/Dicas_para_criar_páginas_HTML_de_carregamento_rápido
---
<p>Estas dicas são baseadas em conhecimento comum e experimentação.</p>
<p>Uma página web otimizada não apenas provê um site mais responsivo aos visitantes, como também reduz a carga sobre os servidores e a conexão com a Internet. Isso pode ser crucial para sites de grande volume ou sites que tenham um pico de tráfego devido a circunstâncias extraordinárias, como plantões de notícias urgentes.</p>
<p>Otimizar a performance do carregamento de páginas não serve apenas para o conteúdo que será visto por visitantes com linha discada ou aparelhos móveis. É igualmente importante para banda larga e pode levar a melhorias dramáticas até mesmo para seus visitantes com as mais rápidas conexões.</p>
<h2 id="Dicas" name="Dicas">Dicas</h2>
<h3 id="Reduza_o_peso_da_página" name="Reduza_o_peso_da_página">Reduza o peso da página</h3>
<p>O peso da página é, de longe, o fator mais importante na performance de seu carregamento.</p>
<p>Reduzir o peso da página através da eliminação de espaço em branco desnecessário e comentários, comumente conhecido como minimização, e mover scripts e CSS <em>inline</em> para arquivos externos pode melhorar a performance de download sem muita necessidade de outras mudanças na estrutura da página.</p>
<p>Ferramentas como <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> podem automaticamente cortar espaços em branco desnecessários e linhas vazias de um código HTML validado. Outras ferramentas podem "comprimir" JavaScript ao reformatar o código-fonte ou o obfuscando e substituindo identificadores longos por versões mais curtas.</p>
<h3 id="Minimize_o_número_de_arquivos" name="Minimize_o_número_de_arquivos">Minimize o número de arquivos</h3>
<p>Reduzir o número de arquivos referenciados por uma página diminui o número de conexões <a href="/en-US/docs/HTTP" title="en-US/docs/HTTP">HTTP</a> requeridas para realizar o download da página.</p>
<p>Dependendo das configurações de cache do <em>browser</em>, este pode enviar uma requisição <code>If-Modified-Since</code> ao servidor para cada arquivo CSS, JavaScript ou de imagem, perguntando se o arquivo foi modificado desde a última vez que foi baixado.</p>
<p>Ao reduzir o número de arquivos referenciados de dentro de uma página, reduz-se o tempo necessário para essas requisições serem enviadas e suas respostas recebidas.</p>
<p>Se você usa muitas imagens de fundo em seu CSS, pode reduzir o número de verificações HTTP combinando imagens em um único arquivo, o que é conhecido como um <em>sprite</em> de imagens. Então você apenas utiliza a mesma imagem cada vez que precisá-la, ajustando as coordenadas x/y apropriadamente. Essa técnica funciona melhor com elementos que terão dimensões limitadas, não sendo aplicável para todas as imagens. Contudo, o número menor de requisições HTTP e <em>caching</em> de uma única imagem devem ajudar a reduzir o tempo de carregamento.</p>
<p>Muito tempo gasto pesquisando quando foi a modificação mais recente de arquivos referenciados pode atrasar a exibição inicial de uma página, já que o <em>browser</em> deve verificar o momento de modificação para cada arquivo CSS ou JavaScript antes de carregar a página.</p>
<h3 id="Reduza_pesquisa_de_domínio" name="Reduza_pesquisa_de_domínio">Reduza pesquisa de domínio</h3>
<p>Já que cada domínio distinto demanda tempo durante uma pesquisa de DNS, o tempo de carregamento da página aumentará conforme o número de domínios distintos que aparecem em links de CSS e fontes de JavaScript e imagens.</p>
<p>Pode nem sempre ser prático, mas você deve sempre tomar cuidado para utilizar apenas o mínimo necessário de domínios diferentes nas suas páginas.</p>
<h3 id="Conteúdo_em_cache_reutilizado" name="Conteúdo_em_cache_reutilizado">Conteúdo em cache reutilizado</h3>
<p>Assegure que qualquer conteúdo que possa ser armazenado em cache o seja, e com tempos de expiração adequados.</p>
<p>Em especial, atente ao cabeçalho <code>Last-Modified</code>. Ele permite mecanismos de cache eficientes; através desse cabeçalho, informações sobre o arquivo que o agente de usuário quer carregar, como quando foi modificado da última vez, são transferidas. A maioria dos servidores web automaticamente anexam o cabeçalho <code>Last-Modified</code> a páginas estáticas (p. ex.: <code>.html</code>, <code>.css</code>), baseado na data de última modificação armazenada no sistema de arquivos. Com páginas dinâmicas (p. ex:<code>.php</code>, <code>.aspx</code>), isso não pode ser feito, e o cabeçalho não é enviado.</p>
<p>Então, para essas páginas que são geradas dinamicamente, alguma pesquisa adicional é benéfica. Isso vai salvar muito tempo em requisições nas páginas que normalmente não permitem armazenamento em cache.</p>
<p>Mais informações:</p>
<ol>
<li><a class="external" href="http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers">Get HTTP Condicional para Hackers RSS</a></li>
<li><a class="external" href="http://annevankesteren.nl/archives/2005/05/http-304">HTTP 304: Not Modified</a></li>
<li><a class="external" href="http://www.cmlenz.net/archives/2005/05/on-http-last-modified-and-etag">Sobre o Last-Modified HTTP e ETag</a></li>
</ol>
<h3 id="Estabeleça_a_ordem_dos_componentes_da_página_de_forma_otimizada" name="Estabeleça_a_ordem_dos_componentes_da_página_de_forma_otimizada">Estabeleça a ordem dos componentes da página de forma otimizada</h3>
<p>Baixe o conteúdo da página primeiro, junto com qualquer CSS ou JavaScript que pode ser requerido para sua exibição inicial, de modo que o usuário receba a resposta mais rápida possível durante o carregamento. Esse conteúdo é tipicamente texto, e portanto pode ser beneficiado por técnicas de compressão de texto durante o tráfego, permitindo uma resposta ainda mais rápida ao usuário.</p>
<p>Quaisquer elementos dinâmicos que requeiram que a página complete seu carregamento antes de serem usados devem ser inicialmente desabilitados, e apenas habilitados após o carregamento completo. Isso fará com que o JavaScript seja carregado após o conteúdo da página, o que melhorará a aparência geral do carregamento.</p>
<h3 id="Reduza_o_número_de_scripts" name="Reduza_o_número_de_scripts">Reduza o número de scripts <em>inline</em></h3>
<p>Scripts <em>inline</em> podem ser custosos para o carregamento, uma vez que o parser deve assumir que o script pode modificar a estrutura da página enquanto o processo de <em>parsing</em> está em andamento. Reduzir o número de scripts <em>inline</em> no geral e reduzir o uso de <code>document.write()</code> para a saída de conteúdo pode melhorar o carregamento da página. Use métodos <a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a> modernos para manipular o conteúdo da página, ao invés de abordagens antigas baseadas em <code>document.write()</code>.</p>
<h3 id="Use_CSS_moderno_e_marcação_validada" name="Use_CSS_moderno_e_marcação_validada">Use CSS moderno e marcação validada</h3>
<p>O uso de CSS moderno reduz a quantidade de marcação, pode reduzir a necessidade de imagens, em termos de layout, e frequentemente substitui imagens de textos estilizados -- que "custam" muito mais do que o texto estilizado com CSS.</p>
<p>Usar marcações validadas tem outras vantagens. Primeiro, <em>browsers</em> não precisarão realizar correção de erros durante o <em>parsing</em> de HTML (isso é à parte da preocupação filosófica de permitir variação de formato na entrada do usuário, e então programaticamente "corrigir" ou normalizá-la; ou se, ao invés disso, forçar um formato de entrada rígido, sem tolerância a desvios).</p>
<p>Além do mais, marcação válida permite o livre uso de outras ferramentas que podem pré-processar páginas web. Por exemplo, <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> pode remover espaços em branco e tags finais opcionais; contudo, a ferramenta não será executada em uma página com erros graves de marcação.</p>
<h3 id="Divida_seu_conteúdo" name="Divida_seu_conteúdo">Divida seu conteúdo</h3>
<p>Layout de tabelas é um método legado que não deve mais ser empregado. Layouts utilizando blocos {{ HTMLElement("div") }} e, no futuro próximo, <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="en-US/docs/CSS3_Columns">layout multi-colunas CSS3</a> ou <a href="/pt-BR/docs/Usando_caixas_flexiveis_css" title="pt-BR/docs/Usando_caixas_flexiveis_css">layout de caixas flexíveis CSS3</a>, devem ser utilizadas ao invés disso.</p>
<p>Tabelas ainda são consideradas marcações válidas, mas devem ser usadas para exibir dados tabulares. Para ajudar o browser a renderizar sua página mais rapidamente, você deve evitar aninhar suas tabelas.</p>
<p>Ao invés de realizar aninhamentos profundos como:</p>
<pre><TABLE>
<TABLE>
<TABLE>
...
</TABLE>
</TABLE>
</TABLE></pre>
<p>use tabelas não-aninhadas ou divs, como em</p>
<pre><TABLE>...</TABLE>
<TABLE>...</TABLE>
<TABLE>...</TABLE>
</pre>
<p>Veja também: <a class="external" href="http://www.w3.org/TR/css3-multicol/">Especificações do layout multi-colunas CSS3</a> e <a class="external" href="http://www.w3.org/TR/css3-flexbox/">layout de caixas flexíveis CSS3</a></p>
<h3 id="Especifique_tamanhos_para_imagens_e_tabelas" name="Especifique_tamanhos_para_imagens_e_tabelas">Especifique tamanhos para imagens e tabelas</h3>
<p>Se o <em>browser</em> puder imediatamente determinar a altura e/ou largura de suas imagens e tabelas, ele será capaz de exibir uma página sem ter que recalcular o fluxo do conteúdo. Isso não apenas acelera a exibição da página como previne mudanças irritantes no layout ao finalizar o carregamento. Por essa razão, <code>height</code> e <code>width</code> devem ser especificadas para imagens, sempre que possível.</p>
<p>Tabelas devem usar a combinação CSS selector:property:</p>
<pre> table-layout: fixed;
</pre>
<p>e devem especificar as larguras das colunas usando as tags HTML <code>COL</code> e <code>COLGROUP</code>.</p>
<h3 id="Escolha_bem_seus_requisitos_de_agente_de_usuário" name="Escolha_bem_seus_requisitos_de_agente_de_usuário">Escolha bem seus requisitos de agente de usuário</h3>
<p>Para atingir as maiores melhorias no design de páginas, tenha certeza de que requisitos de agente de usuário razoáveis estejam especificados para os projetos. Não espere que seu conteúdo apareça de forma perfeita, pixel por pixel, em todos os <em>browsers</em>, especialmente nos obsoletos.</p>
<p>Idealmente, seus requisitos básicos devem ser baseados em considerações sobre os <em>browsers</em> modernos que suportam os padrões relevantes. Isso pode incluir: Firefox 3.6+ em qualquer plataforma, Internet Explorer 8.0+ no Windows, Opera 10+ no Windows, e Safari 4 no Mac OS X.</p>
<p>Note, contudo, que muitas das dicas listadas neste artigo são técnicas de senso comum que se aplicam a qualquer agente-usuário, e podem ser aplicadas a qualquer página web, independentemente de requisitos de compatibilidade em <em>browsers</em>.</p>
<h2 id="Exemplo_de_estrutura_de_página" name="Exemplo_de_estrutura_de_página">Exemplo de estrutura de página</h2>
<p>· <code>HTML</code></p>
<dl>
<dd>
· <code>HEAD</code></dd>
</dl>
<dl>
<dd>
<dl>
<dd>
· <code>LINK </code>...<br>
Arquivos CSS requeridos para a aparência da página. Minimize o número de arquivos para performance enquanto mantém CSS não-relacionado em arquivos separados para manutenção.</dd>
</dl>
</dd>
</dl>
<dl>
<dd>
<dl>
<dd>
· <code>SCRIPT </code>...<br>
Arquivos JavaScript para funções <strong>requeridas</strong> durante o carregamento da página, sem qualquer DHTML que só pode ser executado após o carregamento completo.</dd>
<dd>
Minimize o número de arquivos para performance enquanto mantém JavaScript não-relacionado em arquivos separados para manutenção.</dd>
</dl>
</dd>
</dl>
<dl>
<dd>
· <code>BODY</code></dd>
<dd>
· Páginas de conteúdo visíveis ao usuário em pequenas divisões (tabelas / divs) que podem ser exibidas sem esperar a página inteira ser baixada.</dd>
</dl>
<dl>
<dd>
<dl>
<dd>
· <code>SCRIPT </code>...<br>
Quaisquer scripts que forem usados para realizar DHTML. Um script DHTML geralmente só pode ser executado após o carregamento completo da página e a inicialização de todos os objetos necessários. Não há necessidade de carregar esses scripts antes do conteúdo. Isso apenas desacelera a aparência inicial do carregamento da página.</dd>
<dd>
Minimize o número de arquivos para performance enquanto mantém CSS não-relacionado em arquivos separados para manutenção.</dd>
<dd>
Se uma ou mais imagens forem usadas para efeitos de <em>rollover</em>, você deve pré-carregá-las aqui após o conteúdo da página ter sido baixado.</dd>
</dl>
</dd>
</dl>
<h2 id="Use_async_and_defer_se_possível" name="Use_async_and_defer_se_possível">Use async and defer, se possível</h2>
<p>Faça com que scripts JavaScript sejam compatíveis tanto com <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> como <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">defer</a> e use <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> sempre que possível, especialmente se você tiver múltiplas tags de script.</p>
<p>Com isso, a página pode parar de renderizar enquanto o JavaScript ainda estiver sendo carregado. Do contrário, o <em>browser</em> não renderizará nada que estiver após as tags de script sem esses atributos.</p>
<p>Nota: Apesar desses atributos ajudarem muito na primeira vez que a página for carregada, você não pode confiar que vai funcionar em todos os <em>browsers</em>. Se você seguir todas as orientações para produzir bom código JavaScript, não há necessidade de alterá-lo.</p>
<h2 id="Links_Relacionados" name="Links_Relacionados">Links Relacionados</h2>
<ul>
<li>Livro: <a class="external" href="http://www.websiteoptimization.com/">"Speed Up Your Site" por Andy King</a></li>
<li>O excelente e muito completo <a class="external" href="http://developer.yahoo.com/performance/rules.html">Melhores Práticas para Acelerar Seu Web Site</a> (Yahoo!)</li>
<li>Ferramentas para analisar e otimizar a performance: <a href="https://developers.google.com/speed/pagespeed/">Google PageSpeed</a></li>
</ul>
<div class="originaldocinfo">
<h2 id="Informações_do_Documento_Original" name="Informações_do_Documento_Original">Informações do Documento Original</h2>
<ul>
<li>Autor(es): Bob Clary, Evangelista de Tecnologia, Netscape Communications</li>
<li>Última Data de Atualização: Publicado em 04 Abr 2003</li>
<li>Informações de Copyright: Copyright © 2001-2003 Netscape. Todos os direitos reservados.</li>
<li>Nota: Este artigo reeditado foi originalmente parte do site DevEdge.</li>
</ul>
</div>
<p> </p>
|
