01. Minimize as solicitações HTTP Reduza as solicitações HTTP
Imagem, CSS, Script, Flash, etc. aumentarão o número de solicitações HTTP. Reduzir o número desses elementos pode reduzir o tempo de resposta. Escreva vários JS e CSS em um arquivo, se possível; também é uma má prática escrever imagens diretamente na página. Você deve escrevê-las em CSS, usar CSS Sprite para montar as imagens pequenas e depois usar o plano de fundo para encontrar a posição; use "Mapa de imagem" (colocando URLs diferentes na mesma imagem, este método pode reduzir o número de solicitações de imagens. Após o teste, o tempo para obter o mapa de imagem é 56% mais rápido que o tempo para obter cada imagem individual. Mapa de imagem Existem duas maneiras, uma é "mapa de imagem do lado do servidor" e a outra é "mapa de imagem do lado do cliente". A implementação do lado do servidor é passar as coordenadas XY clicadas pelo usuário para o servidor e, em seguida, para o servidor. side mapeia as operações correspondentes. Use tags MAP em primeiro plano. O método de mapa de imagem torna a manutenção da programação muito mais difícil).
02. Use uma rede de distribuição de conteúdo usando tecnologia CDN
"Rede de distribuição de conteúdo". Seu objetivo é publicar o conteúdo do site na “borda” da rede mais próxima do usuário, adicionando uma nova camada de arquitetura de rede à Internet existente.
Recursos do CDN:
1. Aceleração de cache local – melhora a velocidade de acesso de sites corporativos (especialmente sites que contêm um grande número de imagens e páginas estáticas) e melhora muito a estabilidade de sites da natureza acima.
2. Serviço de espelhamento – elimina o impacto dos gargalos de interconexão entre diferentes operadoras, realiza aceleração de rede entre operadoras e garante que usuários em diferentes redes possam receber boa qualidade de acesso.
3. Aceleração remota – Os usuários de acesso remoto selecionam de forma inteligente e automática o servidor de cache com base na tecnologia de balanceamento de carga DNS e selecionam o servidor de cache mais rápido para acelerar o acesso remoto.
4. Otimização de largura de banda – Gere automaticamente um servidor Mirror Cache remoto para o servidor e leia os dados do servidor Cache quando usuários remotos o acessam, reduzindo a largura de banda do acesso remoto, compartilhando o tráfego de rede e reduzindo a carga no servidor WEB do site original , etc.
5. Anti-ataque de cluster – Os nós CDN amplamente distribuídos e o mecanismo de redundância inteligente entre os nós podem prevenir eficazmente invasões de hackers e reduzir o impacto de vários ataques DDOS no site, garantindo ao mesmo tempo uma boa qualidade de serviço.
03. Adicione um cabeçalho Expires ou Cache-Control para definir "expiração do arquivo de cabeçalho" ou "cache estático"
Os navegadores usam cache para reduzir o número de solicitações HTTP e acelerar o tempo de carregamento da página. Se um longo prazo de validade for adicionado ao cabeçalho da página, o navegador sempre armazenará em cache os elementos da página. No entanto, se algo na página mudar, o nome deverá ser alterado, caso contrário, o cliente não será atualizado ativamente.
(1) Conceito
O controle de cache é usado para controlar o cache HTTP (não pode ser parcialmente implementado em HTTP/1.0, apenas Pragma: no-cache é implementado)
Formato: Cache-Control: diretiva de cache
A diretiva de cache pode ser a seguinte:
Usado ao solicitar:
| "sem cache"
| "sem loja"
| “idade máxima” “=” delta-segundos
| "max-obsoleto" [ "=" delta-segundos ]
| “min-fresh” “=” delta-segundos
| "sem transformação"
| "somente se armazenado em cache"
| "extensão de cache"
Usado em resposta:
| "público"
| "privado" [ "=" <"> nome do campo <"> ]
| "sem cache" [ "=" <"> nome do campo <"> ]
| "sem loja"
| "sem transformação"
| "deve-revalidar"
| "revalidação de proxy"
| “idade máxima” “=” delta-segundos
| “s-maxage” “=” delta-segundos
| "extensão de cache"
Descrição parcial:
Dividido de acordo com a possibilidade de armazenamento em cache
Público indica que a resposta pode ser armazenada em cache por qualquer cache.
Privado indica que toda ou parte da mensagem de resposta de um único usuário não pode ser processada pelo cache compartilhado. Isso permite que o servidor descreva apenas uma resposta parcial de um usuário que não é válida para solicitações de outros usuários.
no-cache indica que a mensagem de solicitação ou resposta não pode ser armazenada em cache (HTTP/1.0 é substituído pelo no-cache do Pragma)
Com base no que pode ser armazenado em cache
no-store é usado para evitar que informações importantes sejam divulgadas involuntariamente. Enviá-lo na mensagem de solicitação fará com que as mensagens de solicitação e de resposta usem o cache.
Com base no tempo limite do cache
max-age indica que o cliente pode receber respostas com um tempo de vida não superior ao tempo especificado em segundos.
min-fresh indica que o cliente pode receber respostas com um tempo de resposta menor que o horário atual mais o tempo especificado.
max-stale indica que o cliente pode receber mensagens de resposta além do período de tempo limite. Se um valor para mensagens max-stale for especificado, o cliente pode
Recebe mensagens de resposta que estão dentro do período de tempo limite especificado.
Expires representa o tempo de existência, permitindo ao cliente não verificar (enviar solicitação) antes desse horário, o que equivale a max-age.
Efeito. Mas se existirem ao mesmo tempo, serão substituídos pela idade máxima do Cache-Control.
Formato: Expira = "Expira" ":" Data HTTP
Por exemplo: Expira em: Qui, 01 de dezembro de 1994, 16:00:00 GMT (deve estar no formato GMT)
(2) Aplicação
Definir expiração e controle de cache por meio de HTTP META:
<meta http-equiv=”Cache-Control” content=”max-age=7200″ />
<meta http-equiv=”Expira” content=”Seg, 20 de julho de 2009 23:00:00 GMT” />
As configurações acima são apenas exemplos e qualquer uma delas pode ser usada na prática. Se escrito assim, será válido apenas para a página web, não será usado para imagens ou outras solicitações na página web e não fará nenhum cache. Além disso, há mais solicitações do cliente. Embora esteja apenas verificando o status Última modificação, o aumento nas solicitações deve impactar na velocidade de navegação.
Se você quiser adicionar um cache ao arquivo, você pode usar o módulo mod_expire do Apache ( http://httpd.apache.org/docs/2.2/mod/mod_expires.html ), que é escrito como
<IfModule mod_expires.c>
Expira Ativo em
ExpiresDefault "acesso mais 1 dia"
</IfModule>
Lembro que ExpiresActive está definido como On. Não configurei On inicialmente. Parece que o YSlow não consegue encontrar o mecanismo de cache, não importa o que aconteça. Se adicionado desta forma, será incluído por padrão. Se quiser atingir tipos MIME individuais, você pode:
ExpiresByType imagem/gif “acesso mais 5 horas e 3 minutos”
Além disso, quando você clica em atualizar no navegador, as solicitações enviadas pelo cliente são todas max-age=0, indicando a operação de validação. Geralmente, você envia uma solicitação ao servidor para verificar o cache. obtenha 304 Not Modified, o que significa que não há alteração.
04. Componentes Gzip Compressão Gzip
O formato Gzip é uma tecnologia de compactação muito comum. Quase todos os navegadores têm a capacidade de descompactar o formato Gzip, e a taxa de compactação que ele pode compactar é muito grande, com uma taxa geral de compactação de 85%. Compressão ou não, você pode testar aqui.
05. Coloque folhas de estilo no topo Coloque CSS no topo
Use a tag LINK para colocar a folha de estilo no HEAD do documento para que os visualizadores possam ver o estilo completo do site o mais cedo possível.
As páginas HTML são renderizadas passo a passo Quando os usuários abrem a página, precisamos considerar a experiência do usuário – a velocidade de abertura da página da web. O primeiro requisito para exibir uma página é HTML, e o HTML é composto de DIVs um por um, e o CSS é a base de tudo.
06. Coloque Scripts na parte inferior Coloque JS na parte inferior
Após a renderização do site, você pode definir as funções. É claro que esses JS não devem afetar o desempenho do conteúdo durante o processo de carregamento.
Como a página é renderizada gradualmente, o conteúdo abaixo do script será bloqueado. A renderização da página não continuará até que o script termine de carregar. Colocação correta
(1) Pior cenário: coloque o script no topo. Isso bloqueará a renderização de conteúdo subsequente e o download subsequente de componentes.
(2) Melhor cenário: coloque o script na parte inferior. Não impede a renderização da página.
07. Evite expressões CSS Evite expressões CSS
Expressões CSS são terríveis. Essa coisa que só é suportada pelo IE requer uma quantidade muito grande de cálculos quando executada. Ela será recalculada toda vez que você mover o mouse, mas às vezes isso deve ser usado para compatibilidade do navegador.
08. Torne JavaScript e CSS externos
Falamos sobre cache anteriormente. Para alguns dos JS e CSS mais comuns, podemos usar links externos, como vincular arquivos Jquery do Google.
09. Reduza pesquisas de DNS Reduza pesquisas de DNS
Reduza os recursos externos de chamadas do site.
A Internet encontra servidores por endereço IP. O DNS também tem sobrecarga. Em circunstâncias normais, o tempo que um navegador leva para encontrar um determinado endereço IP de host é de 20 a 120 ms. Para reduzir o tempo gasto no processo de pesquisa de DNS, algumas das seguintes técnicas precisam ser adotadas:
(1) Cache DNS
As pesquisas de DNS podem ser armazenadas em cache para melhorar o desempenho. No computador do usuário, após a resolução de um nome de host, as informações de DNS correspondentes serão armazenadas no cache de DNS do sistema operacional, o que pode reduzir o tempo necessário para uso subsequente. Alguns outros navegadores também possuem funções de cache DNS correspondentes. Mas o número de DNS em cache é limitado. Normalmente o sistema operacional considera o valor TTL, e o navegador ignora esse valor e define seu próprio horário.
(2) TTL
O cache DNS traz algum consumo do sistema e o endereço IP do servidor não permanece necessariamente inalterado. O servidor pode indicar por quanto tempo o registro pode ser armazenado em cache, e o registro DNS retornado pela pesquisa contém um valor de tempo de vida (TTL) que indica por quanto tempo o cliente pode armazenar o registro em cache. Geralmente, pode ser definido para 1 dia.
10. Minimize JavaScript e CSS Reduza o tamanho de JS e CSS
Existem habilidades para escrever JS e CSS. Use a menor quantidade de código para realizar a mesma função, reduza os espaços em branco, melhore a lógica, use abreviações, etc.
11. Evite redirecionamentos
Ao escrever o link novamente, embora haja apenas uma diferença final "/" entre "http://xxx.com" e "http://xxx.com/", os resultados são diferentes. converta o redirecionamento anterior para o último e depois pule. Você precisa prestar atenção a isso. Você também pode usar Alias ou mod_rewrite ou DirectorySlash no Apache para resolvê-lo.
Além disso, os usos do redirecionamento incluem: conectar diferentes sites; rastrear visitas a sites e embelezar URLs;
12. Remover scripts duplicados Remover scripts duplicados
O navegador não reconhecerá e ignorará o código que é chamado repetidamente, mas irá calculá-lo novamente, o que é obviamente um grande desperdício.
13. Configurar ETags Configurar ETags
Não sei o que aconteceu, mas excluí-o no arquivo .htaccess.
14. Torne o cache do Ajax armazenável em cache Ajax
O Ajax responde em tempo real Antes que o navegador receba novos dados, os dados antigos são armazenados em cache, o que pode melhorar melhor a eficiência.
15. Limpe o buffer antecipadamente. Libere o buffer o mais cedo possível
Quando um usuário faz uma solicitação de página, o servidor precisa gastar de 200 a 500 milissegundos para montar o HTML, escrevê-lo entre o cabeçalho e o corpo e liberar o buffer. Dessa forma, o cabeçalho do arquivo pode ser enviado primeiro e depois. o conteúdo do arquivo pode ser enviado para melhorar a eficiência.
16. Use GET para solicitações AJAX Use GET para solicitações AJAX
O método Get interage com o servidor apenas uma vez (enviando dados), enquanto Post requer duas interações (enviando cabeçalhos e depois dados).
17. Componentes de pós-carregamento Componentes de carregamento lento
Primeiro carregue os componentes necessários para a inicialização da página e depois carregue outros. O método de implementação específico pode ser "IFRAME oculto" ou javascript. "YUI Image Loader" é um bom exemplo.
18. Componentes de pré-carregamento Componentes de pré-carregamento
Carregar coisas que podem ser usadas posteriormente não entra em conflito com o carregamento lento. Seu objetivo é fornecer uma resposta mais rápida às solicitações subsequentes. Consulte o aplicativo CSS sprites na página inicial do Google.
19. Reduza o número de elementos DOM Reduza o número de elementos DOM
Estrutura de página complexa significa tempos de download e resposta mais longos, resultando em renderização de página mais lenta. Usar tags de forma mais razoável e eficiente para estruturar páginas é um pré-requisito para um bom front-end.
20. Divida componentes entre domínios
O objetivo principal é melhorar a capacidade de download paralelo dos componentes da página, mas tome cuidado para não usar muitos nomes de domínio. Mais de 2 a 4 causarão o desperdício das pesquisas de DNS mencionadas acima. O IE só pode ter duas solicitações para o mesmo domínio ao mesmo tempo. As implementações podem utilizar redes CDN ou outras redes de computação distribuídas.
21. Minimize o número de iframes Reduza o número de IFrames
IFrame é um tabu para SEO e o IFrame precisa ser usado de forma mais eficaz.
Vantagens do IFrame: bom para baixar conteúdo lento de terceiros, como anúncios, sandbox de segurança, scripts de download paralelo
Desvantagens do IFrame: Mesmo vazio, consumirá muitos recursos e impedirá o carregamento da página, o que não é semântico.
22. Não 404s Não aparecem na página 404
Páginas 404 aparecem no próprio site (não nos resultados da pesquisa). Páginas 404 sem sentido afetarão a experiência do usuário e consumirão recursos do servidor.
23. Reduza o tamanho do cookie Reduza o cookie
Os cookies são trocados entre o servidor e o navegador através de cabeçalhos de arquivos, reduzindo ao máximo o tamanho dos cookies e definindo um prazo de validade razoável, o que pode melhorar muito a eficiência.
24. Use domínios sem cookies para componentes Use nomes de domínio sem cookies para componentes
Ler cookies para componentes estáticos é um desperdício. É uma boa maneira de usar outro nome de domínio sem cookies para armazenar seus componentes estáticos, ou você só pode armazenar o nome de domínio com www no cookie.
25. Minimize o acesso ao DOM Reduza o número de acessos ao DOM
JS é muito lento para acessar o DOM, então tente não usar JS para definir o layout da página.
26. Desenvolva manipuladores de eventos inteligentes Desenvolva manipuladores de eventos flexíveis
Se muitos elementos na árvore DOM forem adicionados ao manipulador de eventos, a eficiência da resposta será definitivamente baixa. A ferramenta de eventos YUI possui um método onAvailable que pode ajudá-lo a definir o manipulador de eventos DOM de maneira flexível.
27. Escolha <link> em vez de @import Use <link> em vez de @import
Usar @import no IE é o mesmo que usar <link> na parte inferior da página.
28. Evite Filtros Evite o uso de filtros
Se você precisar de transparência Alpha, não use AlphaImageLoader. É ineficiente e aplicável apenas ao IE6 e abaixo. Se você precisar usá-lo, adicione _filter para evitar afetar os usuários do IE7+.
29. Otimize imagens Otimize imagens
Converter seu GIF para PNG8 é uma boa maneira de reduzir o tamanho, e há muitas maneiras de processar suas imagens JPG e PNG para obter resultados de otimização.
30. Otimize Sprites CSS Otimize Sprites CSS
Organizar imagens em CSS Sprites verticalmente e da forma mais compacta possível, e organizar imagens com cores semelhantes, tanto quanto possível, reduzirá o tamanho da própria imagem e aumentará a velocidade de exibição da imagem da página.
31. Não dimensione imagens em HTML Não dimensione imagens em HTML
Use uma imagem tão grande quanto desejar, não seja preguiçoso.
32. Torne o favicon.ico pequeno e armazenável em cache Reduza o tamanho do favicon.ico e armazene-o em cache
O ICO do navegador do site não deve ser alterado com frequência, portanto, armazene-o em cache por um longo tempo e é melhor controlá-lo abaixo de 1K.
33. Mantenha os componentes abaixo de 25K
O iPhone não consegue armazenar em cache componentes acima de 25K, e isso antes de ser compactado.
34. Empacotar componentes em um documento multipartes Empacotar componentes em um documento multipartes
Assim como adicionar um anexo a um e-mail, uma solicitação HTTP é suficiente, mas essa técnica precisa ser suportada pelo seu proxy, o que o iPhone não suporta.
Imagens embutidas:
Use "dados: esquema de URL" para incorporar dados de imagem na página real. O que normalmente vemos são: http, ftp, mailto e outros modos. Na verdade, o modo data:URL foi proposto já em 1995. Isso significa que pequenos pedaços de dados são diretamente integrados ao URL do link. O padrão é o seguinte: data: [<mediatype>][;base64],<data>
O primeiro parâmetro indica o formato do arquivo, como imagem/gif.
Infelizmente, o IE atualmente não oferece suporte a este modo. Além disso, o tamanho dos dados também é limitado.
Declaração: O conteúdo vem da Internet e é baseado nos 34 artigos do Yahoo.