Guia Definitivo para Otimização da Web (Dicas e Melhores Práticas)

Otimização da Web é uma parte vital do desenvolvimento e manutenção da Web, mas também é algo frequentemente ignorado pelos webmasters. Pense no dinheiro que você pode economizar e como isso pode ajudar a aumentar o número de leitores e o tráfego quando eles forem feitos corretamente.

Se você ainda não fez nenhuma otimização no seu website (ou blog) ou apenas curioso para saber como isso pode ajudar a acelerar o seu site, confira esta lista de dicas de otimização que reunimos.

Nós dividimos as coisas em 3 seções separadas para melhor legibilidade - respectivamente otimização do lado do servidor, otimização de ativos (que inclui componentes da web como CSS, Javascript, imagens, etc) e plataforma, onde nos concentraremos Otimização de WordPress. Na última seção, colocamos alguns links que achamos úteis. Lista completa depois do salto.

Otimização: lado do servidor

1. Escolha um host decente

   Sua conta de hospedagem na Web não tem relação direta com as otimizações que você está prestes a realizar, mas achamos que escolher a conta de hospedagem da Web tão importante é que decidimos chamar sua atenção primeiro. A conta de hospedagem é a base do seu site / blog, onde sua segurança, acessibilidade (cPanel, FTP, SSH), estabilidade do servidor, preços e suporte ao cliente desempenham papéis importantes. Você precisa ter certeza de que está em boas mãos.

   Leitura recomendada: Como escolher um host por wikiHow é um ótimo artigo que oferece etapas e dicas que você deve conhecer antes de comprar qualquer conta de hospedagem na web.

2. Ativos do Host Separadamente

   Quando mencionamos ativos, queremos dizer componentes da web, como imagens e scripts estáticos que não exigem processamento no lado do servidor. Estes incluem quaisquer gráficos da Web, imagens, Javascripts, Folhas de Estilo em Cascata (CSS), etc. A hospedagem de recursos separadamente não é obrigatória, mas vimos um tremendo resultado em termos de estabilidade do servidor com essa implementação quando o blog estava com um pico de tráfego.

   Leitura recomendada: Maximizando downloads paralelos na Carpool Lane.

3. Compressão com o GZip

   Em suma, o conteúdo viaja do lado do servidor para o lado do cliente (vicet versa) sempre que uma solicitação HTTP é feita. A compactação do conteúdo para envio reduz bastante o tempo necessário para processar cada solicitação.

   GZip é uma das melhores maneiras de fazer isso e várias de acordo com o tipo de servidores que você está usando. Por exemplo, Apache 1.3 usa mod_zip, Apache 2.x usa mod_deflate e aqui está como você faz isso Nginx. Aqui estão alguns artigos muito bons para você se familiarizar com as compressões do lado do servidor:

   • Acelerar um site habilitando a compactação de arquivos do Apache
   • Comprimir saída da Web usando o mod_gzip e o Apache
   • Como otimizar seu site com compactação GZIP
   • Compactação do lado do servidor para ASP

4. Minimizar redirecionamentos

   Os webmasters fazem o redirecionamento de URL (seja o JavaScript ou o META redireciona) o tempo todo. Às vezes, o objetivo é apontar os usuários de uma página antiga para nova ou apenas orientar os usuários para a página correta. Cada redirecionamento cria uma solicitação HTTP adicional e RTT (round-trip-time). Quanto mais redirecionamento você tiver, mais lento o usuário chegará à página de destino.

   Leitura recomendada: Evite Redirecionamentos pelo Google Code oferece uma boa visão geral sobre o assunto. O artigo também recomenda algumas maneiras práticas de minimizar o redirecionamento para aumentar a velocidade de serviço.

5. Reduzir pesquisas de DNS

   De acordo com Yahoo! Blog da Rede de Desenvolvedores, Demora cerca de 20-120 milissegundos para o DNS (Domain Name System) para resolver o endereço IP para um determinado nome de host ou nome de domínio e o navegador não pode fazer nada até que o processo seja devidamente concluído.

   Autor Steve Souders sugeriu que dividir esses componentes em pelo menos dois, mas não mais que quatro nomes de host, reduz as pesquisas de DNS e permitir downloads paralelos de alto grau. Consulte Mais informação no artigo.

Otimização: Os Ativos (CSS, Javascripts, Imagens)

1. Mesclar Múltiplos Javascripts em Um

   Gente em rakaz.nl compartilha como você pode combinar vários Javascripts como:

    http://www.creatype.nl/javascript/prototype.js http://www.creatype.nl/javascript/builder.js http://www.creatype.nl/javascript/effects.js http: // www .creatype.nl / javascript / dragdrop.js http://www.creatype.nl/javascript/slider.js 

   Em um único arquivo, alterando o URL para:

    http://www.creatype.nl/javascript/prototype.js,builder.js,effects.js,dragdrop.js,slider.js 

   manipulando o .htaccess e usando PHP. Clique aqui ler mais.

2. Comprimir Javascript e CSS

   Minify é um aplicativo PHP5 que pode combinar vários arquivos CSS e Javascript, compactar seu conteúdo (ou seja, remover espaços / comentários desnecessários) e exibir os resultados com codificação HTTP (gzip / deflate) e cabeçalhos que permitem o armazenamento em cache ideal do lado do cliente.

   

   Comprimir on-line!Há também alguns serviços da Web que permitem compactar manualmente seus arquivos Javascripts e CSS on-line. Aqui estão alguns que chegamos a conhecer:

   • compressor.ebiene (Javascript, CSS)
   • javascriptcompressor.com (Javascript)
   • jscompress.com (Javascript)
   • CleanCSS (CSS)
   • Otimizador CSS (CSS)

3. Personalizar expiração de cabeçalho / cache

   Crédito: httpwatch

   Ao usar um cabeçalho Expiry personalizado, seus componentes da Web, como imagens, arquivos estáticos, CSS, Javascript ignoraram a solicitação HTTP desnecessária quando o mesmo usuário recarregou a página pela segunda vez. Reduz a largura de banda necessária e ajuda a servir a página mais rapidamente.

   Leituras recomendadas:

   • Yahoo! Blog da Rede do Desenvolvedor - Adicionar um cabeçalho de expiração
   • Como adicionar bons cabeçalhos de expiração a imagens no Apache 1.3
   • Cache HTTP
   • Tutorial de cache para autores e webmasters da Web

4. Descarregue os Ativos

   Ao descarregar, queremos dizer separar os arquivos Javascripts, imagens, CSS e estáticos do servidor principal onde o site está hospedado e colocá-los em outro servidor ou confiar em outros serviços da web. Vimos uma melhora significativa aqui em Hongkiat descarregando ativos para outros serviços da Web disponíveis, deixando o servidor principalmente para fazer o processamento do PHP. Aqui estão algumas sugestões de serviços on-line para descarregamento:

   • Imagens: Flickr, Smugmug, Hosts pagos *
   • Javascripts: Google Ajax Library, Google App Engine, Hosts pagos *
   • Formulário da Webs: WuFoo, FormStack
   • RSS: Google Feedburner
   • Pesquisa e Pesquisas: SurveyMonkey, PollDaddy

   * Hosts pagos - Os serviços pagos sempre têm melhor confiabilidade e estabilidade. Se o seu site solicitar constantemente os recursos, você precisará verificar se eles estão em boas mãos. Recomendamos o Amazon S3 e o Cloud Front.

5. Manipulando Imagens da Web

   Imagens são parte importante do seu site. No entanto, se eles não são otimizados corretamente, eles podem se tornar um fardo e acabam utilizando uma quantidade imprevisível de larguras de banda diariamente. Aqui estão alguns melhores práticas para otimizar suas imagens:

   • Otimizar imagens PNGO pessoal da Smashing Magazine descreve algumas técnicas inteligentes que podem ajudar você a otimizar suas imagens PNG.
   • Otimizando para a Web - Coisas que você precisa saber (os formatos) Saiba mais sobre Jpeg, GIF, PNG e como você deve salvar suas imagens para web.
   • Não dimensione imagensSempre pratique a inserção do largura e altura para cada imagem. Também não reduza a escala de uma imagem só porque você precisa de uma versão menor na web. Por exemplo: Não force a escala de uma imagem de 200 × 200 px para 50 × 50 px em seu website, alterando a largura e altura. Obter um 50 × 50 px em vez disso.

   Otimizando com serviços e ferramentas da Web. A boa notícia é que você não precisa ser um especialista em Photoshop para otimizar suas imagens. Há uma abundância de serviços e ferramentas da Web para ajudar você a fazer o trabalho.

   • Smush.itProvavelmente uma das ferramentas online mais eficientes para otimizar imagens. Existe até um plugin para WordPress!
   • JPEG e PNG StripperUma ferramenta do Windows para retirar / limpar / remover metadados desnecessários (lixo) de arquivos JPG / JPEG / JFIF e PNG.
   • Otimizador de imagens on-linePermite que você otimize facilmente seus gifs, gifs animados, jpgs e pngs, para que eles sejam carregados o mais rápido possível em seu site, pelo Dynamic Drive
   • SuperGIFSem esforço, faça todas as suas imagens GIF e animações menores.
   • Aqui é mais.

6. Manipulando CSS

   Os sites modernos usam o CSS como a base do estilo, bem como a aparência. Não só o CSS oferece grande flexibilidade às alterações, como também é menor em termos de códigos necessários. No entanto, se forem mal codificados, pode ser um tiro pela culatra. Aqui estão algumas listas de verificação, ou melhor, guias para você certificar-se de que seu CSS esteja adequadamente otimizado:

   • Mantendo os filhos dos seus elementos alinhados com os filhosComo manter sua marcação limpa com os Seletores de CSS.
   • Mantenha o CSS curtoQuando eles dão o mesmo estilo, os códigos são melhores quanto mais curtos eles são. Aqui está um Guia de atalho para CSS você provavelmente precisará.
   • Use CSS SpriteA técnica CSS Sprite reduz a requisição HTTP cada vez que uma página é carregada, combinando várias (ou todas) imagens juntas em um único arquivo de imagem e controlando sua saída com CSS posição de fundo atributo. Aqui estão alguns guias e técnicas úteis para criar Sprites CSS:
     • Gerador de Sprite Online CSS
     • Melhor Gerador de Sprites CSS Online e Offline
   • Usando todas as declarações apenas uma vezAo procurar otimizar seus arquivos CSS, uma das medidas mais poderosas que você pode empregar é usar todas as declarações apenas uma vez.
   • Reduzir a quantidade de arquivos CSSO motivo é simples, quanto mais arquivos CSS você tiver, mais solicitações de HTTP serão necessárias quando uma página da Web estiver sendo solicitada. Por exemplo, em vez de ter vários arquivos CSS, como o seguinte:

     Você pode combiná-los no único CSS:

   Leituras recomendadas:

   • Ferramentas úteis para verificar, limpar e otimizar seu arquivo CSSAlgumas das ferramentas úteis que você pode usar para otimizar seu código CSS, mesmo que você não tenha nenhum conhecimento sobre codificação CSS.
   • 7 princípios do código CSS limpo e otimizadoA otimização não está apenas minimizando o tamanho do arquivo - é também sobre ser organizado, livre de bagunça e eficiente.
   • Práticas recomendadas para otimizar o CSSConsidere este artigo mais como um exercício acadêmico, em vez de dicas de otimização na vida real.

Otimização para o WordPress

De tempos em tempos, monitoramos, comparamos e analisamos o desempenho do nosso blog WordPress. Se o site estiver lento, precisamos saber por quê. Aqui estão algumas mudanças básicas que fizemos e imaginamos que aumentará significativamente a velocidade do seu blog WordPress.

1. Cache seu Worpress Blog

   WP-Cache é um sistema de cache de páginas WordPress extremamente eficiente para tornar o site muito mais rápido e ágil. Também recomendamos WP Super Cache que melhora a partir do plugin mencionado anteriormente e também faz um ótimo trabalho.

2. Desativar e excluir plug-ins não utilizados

   Quando você perceber que o seu blog está carregando muito devagar, veja se você tem muitos plugins instalados. Eles podem ser o culpado.

3. Remova tags PHP desnecessários

   Se você der uma olhada nos códigos fonte do seu tema, você encontrará muitas tags como estas:

   Eles podem ser praticamente substituídos por conteúdo de texto que não causa carga ao servidor. Confira Michael Martin's 13 tags para excluir do seu WordPress Blog

Leituras Recomendadas:

• 3 maneiras mais fáceis de acelerar o WordPressJohn Pozadzides compartilha como seu blog navega suavemente através de um pico de tráfego do Digg.
• 13 Grandes Dicas e Truques de Velocidade WordPress para MAX Performance Aqui estão algumas coisas para tentar se você achar que o seu site WordPress não está funcionando tão bem quanto poderia ser devido ao tráfego intenso ou a problemas ocultos que você não conhece.
• 40 dicas de otimização do WordPressDicas de otimização em slides. 40 dicas em 40 minutos.

Por último mas não menos importante…

Aqui estão alguns serviços e ferramentas da Web úteis que oferecem uma perspectiva mais ampla e melhor análise para ajudá-lo na otimização da Web.

• Yahoo! YSlow

  YSlow analisa páginas da Web e sugere maneiras de melhorar seu desempenho com base em um conjunto de regras para páginas da Web de alto desempenho. Dá uma boa ideia do que precisa ser feito para que o site seja carregado mais rapidamente.

  (Firebug obrigatório)

  

• PageSpeed

  Igual a Yahoo! YSlow, Google Velocidade da página é um complemento do Firebug de código aberto para avaliar os desempenhos do site e como melhorá-los. (Firebug obrigatório)

  

• Ferramentas de Pingdom

  Ferramentas de Pingdom obtenha uma carga completa do seu site, incluindo todos os objetos (imagens, CSS, JavaScripts, RSS, Flash e frames / iframes) e mostra estatísticas gerais sobre a página carregada, como número total de objetos, tempo total de carregamento e tamanho, incluindo todos objetos.

  

Leituras recomendadas:Aqui estão mais dicas e ferramentas que valem a pena conferir.

• Google Web Optimizer
• 15 ferramentas para ajudar você a desenvolver páginas da Web mais rápidas
• Mais de 15 dicas para acelerar o seu site e otimizar seu código!