A largura de banda da Internet está cada vez mais ampla, o que parece ter dado um salto qualitativo na velocidade de carregamento das páginas web. Na verdade, este não é o caso, porque com o aumento da largura de banda, há cada vez mais objetos na página web, por isso acelerar a velocidade de abertura das páginas web ainda é uma questão importante. Existem três maneiras de acelerar a velocidade de abertura de páginas da web. Uma é aumentar a largura de banda da rede, a outra é otimizar a máquina local do usuário e a terceira é otimizar a página da web até certo ponto pelo designer do site. Este artigo é da perspectiva de um designer de site e compartilha algumas dicas para otimizar a velocidade de carregamento de páginas da web.
1. Otimize imagens
Quase não existe página web sem imagens. Se você já viveu a era dos gatos de 56 mil, não vai gostar de sites com muitas fotos. Porque carregar essa página da web levará muito tempo.
Mesmo agora, a largura de banda da rede melhorou muito e os gatos de 56K estão desaparecendo gradualmente. Ainda é necessário otimizar as imagens para acelerar as páginas da web.
A otimização de imagens inclui a redução do número de imagens, a redução da qualidade da imagem e o uso de formatos apropriados.
1. Reduza o número de fotos: remova fotos desnecessárias.
2. Reduza a qualidade da imagem: Se não for necessário, tente reduzir a qualidade da imagem, principalmente no formato jpg. Uma redução de 5% na qualidade pode não parecer uma grande mudança, mas a mudança no tamanho do arquivo é relativamente grande.
3. Use a formatação apropriada: veja o próximo ponto.
Portanto, você precisa editar a imagem antes de carregá-la. Se você acha que o Photoshop é muito problemático, você pode tentar algumas ferramentas de edição de imagens online. Com preguiça de editar, mas quer efeitos especiais em suas fotos? Você pode tentar chamar javascript para obter efeitos de imagem.
2. Seleção de formatos de imagem
Geralmente existem três formatos de imagem usados em páginas da web: jpg, png e gif. Os indicadores técnicos específicos dos três formatos não são o conteúdo deste artigo. Basta saber qual formato deve ser utilizado para reduzir o tempo de carregamento da página web.
1. JPG: Geralmente usado para exibir trabalhos fotográficos de paisagens, pessoas e fotos artísticas. Às vezes usado em capturas de tela de computador.
2. GIF: fornece menos cores e pode ser usado em locais onde os requisitos de cores não são altos, como logotipos de sites, botões, emoticons, etc. Claro, uma aplicação importante do GIF são as imagens animadas. Como uma imagem reflexiva feita com Lunapic.
3. PNG: O formato PNG pode fornecer um fundo transparente e é um formato de imagem especialmente inventado para exibição de páginas da web. Geralmente usado em páginas da web que exigem exibição de fundo transparente ou requisitos de alta qualidade de imagem.
3. Otimize CSS
As folhas de estilo em cascata CSS fazem com que as páginas da web carreguem com mais eficiência e melhorem a experiência de navegação. Com CSS, o layout da tabela pode ser retirado.
Mas às vezes usamos algumas declarações mais prolixas ao escrever CSS, como esta frase:
margin-top: 10px;
margin-right: 20px
margin
-bottom: 10px
margin
-left: 20px;
10px 20px 10px 20px;
ou esta frase:
<p class="decorated">Um parágrafo de texto decorado</p>
<p class="decorated">Segundo parágrafo</p>
<p class= ”decorated”>Terceiro parágrafo </p>
<p class="decorated">Quarto parágrafo</p>
pode ser incluído em uma div:
<div class="decorated">
<p>Um parágrafo de texto decorado</p>
<p>Segundo parágrafo </p>
<p>Terceiro parágrafo</p>
<p>Quarto parágrafo</p>
</div>
Simplificar o CSS pode remover atributos redundantes e melhorar a eficiência operacional. Se você tiver preguiça de simplificar o CSS depois de escrevê-lo, poderá usar algumas ferramentas CSS simplificadas online, como CleanCSS.
4. Adicione uma barra após o URL.
Para alguns URLs, como "www.kenengba.com/220", quando o servidor recebe tal solicitação de endereço, leva tempo para determinar o tipo de arquivo desse endereço. Se 220 for um diretório, você também pode adicionar uma barra extra após o URL para torná-lo www.kenengba.com/220/ , para que o servidor possa saber claramente que deseja acessar o índice ou arquivo padrão em o diretório, economizando tempo de carregamento.
5. Marcar a altura e a largura
é muito importante, mas muitas pessoas sempre ignoram por preguiça ou outros motivos. Ao adicionar imagens ou tabelas a uma página web, você deve especificar sua altura e largura, ou seja, os parâmetros de altura e largura. Caso o navegador não encontre esses dois parâmetros, ele precisará calcular o tamanho durante o download da imagem. Se houver muitas imagens, o navegador precisará ajustar constantemente a página. Isso não afeta apenas a velocidade, mas também a experiência de navegação.
A seguir está um código de imagem amigável:
<img id=”moon” height=”200″ width=”450″ src=”” <p class=”pictext”>alt=”moon image” />
</p>
Quando o navegador conhece os parâmetros de altura e largura, mesmo que a imagem não possa ser exibida temporariamente, ele abrirá espaço para a imagem na página e continuará carregando o conteúdo seguinte. O resultado são tempos de carregamento mais rápidos e uma melhor experiência de navegação.
6. Reduza as solicitações http.
Quando um visualizador abre uma página da web, o navegador emitirá muitas solicitações de objetos (imagens, scripts, etc.). Dependendo do atraso da rede, o carregamento de cada objeto será atrasado. Se houver muitos objetos na página, isso poderá levar muito tempo.
Portanto, é necessário reduzir a carga sobre as solicitações HTTP. Como reduzir a carga?
1. Remova alguns objetos desnecessários.
2. Combine duas imagens adjacentes em uma.
3. Mesclar CSS.
Dê uma olhada no código a seguir. Três CSSs precisam ser carregados:
<link rel=”stylesheet” type=”text/css” href=”/body.css” />
<link rel=”stylesheet ” type= ”text/css” href=”/side.css” />
<link rel=”stylesheet” type=”text/css” href=”/footer.css” />
Podemos combiná-lo em um:
< link rel= ”stylesheet” type=”text/css” href=”/style.css” />
Reduzindo assim as solicitações http.
7. Outras dicas
1. Remova complementos desnecessários.
2. Se widgets de outros sites estiverem incorporados na página da web, se você tiver escolha, certifique-se de escolher aquele com velocidade rápida.
3. Tente usar imagens em vez de flash, o que também é bom para SEO.
4. Se algum conteúdo puder ficar estático, torne-o estático para reduzir a carga no servidor.
5. O código estatístico é colocado no final da página.