Confissão: eu diria que, uma vez por semana, eu realmente gostaria ser um garoto que passa o dia de trabalho cortando grama e fazendo paisagismo. Por quê? Porque, no final do dia, eles são capazes de dizer “a grama está cortada, o trabalho está completo”. Como desenvolvedores web, não podemos nunca dizer isso, não é? Um site pode sempre ser mais eficiente – sempre existem estratégias para eliminar os bytes. Sempre. E enquanto percebermos isso, vamos, interna e eternamente, dizer “o site não é bom o suficiente.” Para sermos grandes desenvolvedores, estamos quase destinados a sentir como se o nosso trabalho não fosse bom o suficiente – o que é uma forma negativa para vivemos nossas vidas!

A boa notícia é que existem alguns métodos para ganhos incríveis e fáceis nos departamentos de tempo de desempenho e de carregamento. Aqui estão cinco ganhos que você pode concluir em minutos para tornar o seu site mais rápido para todos os usuários!

1. Esmague suas imagens – ImageOptim – ImageOptim

O esmagamento de imagens é o passe livre final para melhorar o tempo de carregamento do site. O Photoshop e outros aplicativos de edição de imagem são vergonhosamente ineficientes com a compressão de imagem, causando muitos KBs de carregamento extra em cada solicitação. A boa notícia é que existem muitas utilidades para eliminar aqueles KBs extras! Meu utilitário favorito do Mac é o ImageOptim.

Você pode comprimir com gzip tanto quanto quiser, mas o tamanho extra em KB ainda será um desperdício.
Assim, utilizar uma imagem otimizando o utilitário é tão valioso quanto qualquer outra estratégia que você possa usar!

2. CloudFlare

CloudFlare, um serviço que começa gratuito, oferece um monte de melhorias:

• Serviços de CDN
• JavaScript, CSS, HTML e minificação
• Serviços de backup de tempo ocioso
• Prevenção para DDOS
• Entrega de conteúdo baseado em localização
  

Isto não é um anúncio – davidwalsh.name usa Cloudflare e usou todos os seus recursos. Meu site tem economizado GBs em transferência de dados graças ao CloudFlare. Mesmo quando meu servidor ficou fora do ar, o CloudFlare forneceu as páginas de forma perfeita. Uma vitória completa quando você usa CloudFlare.

3. Bibliotecas de glifos menores com o Fontello

Fontes glifo são populares já há alguns anos, e eu vou listar as razões pelas quais elas são incríveis. O problema é que nós, preguiçosamente, usamos arquivos de fontes glifo inteiros, em vez de usar apenas uma fração das fontes contidas neles. E embora nós raramente os consideremos, arquivos de fontes são geralmente enormes. Por sorte, utilitários como o Fontello existem.

O Fontello permite escolher glifos individuais a partir de várias fontes de glifos e, assim, diminuir a quantidade de KBs de suas folhas de estilo de fontes.

4. Gerar arquivos estáticos

Nós amamos o nosso script dinâmico, mas por que oferecer páginas dinâmicas quando as páginas estáticas o farão? Essa é uma prática muitas vezes vista com WordPress – o conteúdo do artigo em geral não muda, mas os anúncios e os comentários podem mudar.

A resposta? Encontrar os pontos-chave quando uma página pode mudar e gerar conteúdo estático quando ocorrem esses pontos. Um utilitário WordPress legal chamado Really Static realiza essa façanha para o CMS. É claro que o seu CMS não-WordPress exigirá a geração de página personalizada, mas as vantagens de velocidade valerão muito a pena.

Se você tiver conteúdo que precisa rodar nessas páginas estáticas, como anúncios ou links para conteúdos mais atuais, considere os pedidos de JavaScript e AJAX para obter esse conteúdo – a página será estática e o JavaScript será servido a partir CDN – a única velocidade considerada será, então, o pedido AJAX!

5. Carregar recursos tardiamente – LazyLoad – ou embuti-los?

Um sintoma comumente conhecido da lentidão do site é o número de solicitações que cada página gera. No passado, corrigimos esse problema com CSS/image sprites, concatenando recursos JavaScript e CSS, e usando URIs de dados. Você também pode fazer carregamento tardio dos recursos ou simplesmente incluí-los na sua página:

document.querySelectorAll('article pre').length && (function() {
    var mediaPath = '/assets/';

    var stylesheet = document.createElement('style');
    stylesheet.setAttribute('type', 'text/css');
    stylesheet.setAttribute('rel', 'stylesheet');
    stylesheet.setAttribute('href', mediaPath + 'css/syntax.css');
    document.head.appendChild(stylesheet);

    var syntaxScript = document.createElement('script');
    syntaxScript.async = 'true';
    syntaxScript.src = mediaPath + 'js/syntax.js';
    document.body.appendChild(syntaxScript);
})();

O exemplo acima carrega a marcação de sintaxe somente se elementos na página exigirem destaque. E se o syntax highlighter de CSS for apenas algumas linhas? Você pode poupar algumas requisições extras e embuti-lo na página:

<style type="text/css">
	<?php include('media/assets/highlight.css'); ?>
	</style>
</head>

Ou você pode concatenar o highlighter de CSS para seu arquivo CSS em todo o site – de qualquer forma, é um benefício!

Como você pode ver, existe certo ganhos, incríveis e fáceis, de velocidade e do site que podem ser obtidos se você estiver disposto a dedicar um esforço e alguns minutos para fazê-los acontecer. E quando você pensar sobre o número de visitantes que seu site recebe, e depois no número de pageviews, você vai perceber porque essas otimizações são tão importantes!

***

David Walsh faz parte do time de colunistas internacionais do iMasters. A tradução do artigo é feita pela redação iMasters, com autorização do autor, e você pode acompanhar o artigo em inglês no link: http://davidwalsh.name/site-speed