À medida que a largura de banda aumenta, há cada vez mais objetos nas páginas da web, portanto, acelerar a abertura das páginas da 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. usado quando. Para reduzir o tempo de carregamento de páginas da 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 declarações mais prolixas ao escrever CSS, como esta frase:
margin-top: 10px;
margem direita: 20px;
margem inferior: 10px;
margin-left: 20px;
você pode simplificá-lo para:
margin: 10px 20px 10px 20px
ou esta frase:
＜p class="decorated">Um parágrafo de texto decorado＜/p>
＜p class="decorado">Segundo parágrafo＜/p>
＜p class="decorado">Terceiro parágrafo＜/p>
＜p class="decorated">Quarto parágrafo＜/p>
pode ser incluído com 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 on-line, como CleanCSS
4. Adicione uma barra após o URL
. Por exemplo, quando o servidor recebe essa solicitação de endereço, leva tempo para determinar o tipo de arquivo neste endereço. Se a web for um diretório, você também pode adicionar uma barra extra após o URL para alterá-lo para /, para que o servidor possa saber claramente que deseja acessar o índice ou arquivo padrão no diretório, salvando assim 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 relativamente amigável:
<img id="moon" height="200" width="450" src=" />
Quando o navegador conhece os parâmetros de altura e largura, mesmo que a imagem não possa ser exibida temporariamente, a página também liberará espaço para imagens e, em seguida, continuará a carregar o conteúdo a seguir. Como resultado, o tempo de carregamento é mais rápido e a experiência de navegação é
melhor
.
página web, o navegador emitirá muitas solicitações de objetos (imagens, scripts, etc.), dependendo do atraso da rede, cada objeto será atrasado. Se houver muitos objetos na página web, isso pode demorar muito. de tempo.
Portanto, comoreduzir
a carga em solicitações http.
Alguns objetos desnecessários2.
Combineduas
imagens adjacentes em uma.
＜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 (adicionadas pelo tradutor)
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.