Confissão: Eu diria que uma vez por semana eu realmente gostaria de ser um garoto que passava o dia de trabalho cortando grama e fazendo paisagismo. Por quê? Porque, no final do dia, eles podem dizer “a grama está cortada, o trabalho está concluído”. Como desenvolvedores da Web, não podemos jamais podemos dizer isso, não é mesmo? Um site sempre pode ser mais eficiente – sempre há estratégias para eliminar bytes. Sempre. E, enquanto percebemos isso, dizemos interna e eternamente que “o site não é bom o suficiente”. Para ser um grande desenvolvedor diário, estamos quase destinados a sentir que nosso trabalho não é bom o suficiente – que maneira negativa de viver nossas vidas!
A boa notícia é que existem alguns métodos para obter uma incrível fácil ganhos nos departamentos de desempenho e tempo de carregamento. Aqui estão cinco ganhos que o senhor pode realizar em minutos para tornar seu site mais rápido para todos os usuários!
1. Imagens de abóbora – ImageOptim
A compactação de imagens é o melhor passe livre para melhorar o tempo de carregamento do site. O Photoshop e outros aplicativos de edição de imagens são notoriamente ineficientes na compactação de imagens, causando muitos KBs de download extra a cada solicitação. A boa notícia é que existem muitos utilitários para eliminar esses KBs extras! Meu utilitário favorito para Mac é o ImageOptim.
O senhor pode usar o gzipping o quanto quiser, mas o tamanho extra do KB de origem é um desperdício, portanto, usar um utilitário de otimização de imagem é tão valioso quanto qualquer outra estratégia que o senhor possa usar!
2. CloudFlare
O CloudFlare, um serviço que começa como gratuito, oferece muitos aprimoramentos:
- Serviços de CDN
- Minificação de JavaScript, CSS e HTML
- Serviços de backup em tempo de inatividade
- Prevenção de DDOS
- Serviço de ativos baseado em localização
Este não é um anúncio colocado — o site davidwalsh.name usa o Cloudflare e tem usado todos os seus recursos. Meu site economizou GBs de dados em transferência graças ao CloudFlare. Mesmo quando meu servidor esteve fora do ar, o CloudFlare serviu as páginas sem falhas. O senhor ganha completamente quando usa o CloudFlare.
3. Libs de ícones de glifos menores com Fontello
As fontes glifo são populares há alguns anos e não vou listar os motivos – sabemos por que elas são incríveis. O problema é que usamos preguiçosamente arquivos de fontes de glifos inteiros, enquanto usamos apenas uma fração das fontes contidas neles. E, embora raramente consideremos isso, os arquivos de fontes geralmente são enormes. Em um emoji: :(. Utilitários úteis como Fontello existem.
O Fontello permite que o senhor escolha glifos individuais de várias fontes de glifos e, assim, diminua os KBs da folha de estilo de ícones de fontes.
4. Gerar arquivos estáticos
Adoramos nossos scripts dinâmicos, mas por que servir páginas dinâmicas quando páginas estáticas são suficientes? Essa é uma prática frequentemente observada no WordPress: o conteúdo do post geralmente não muda, mas os anúncios e comentários podem mudar.
A resposta? Encontrar os principais pontos em que uma página pode mudar e gerar conteúdo estático quando esses pontos ocorrerem. Um utilitário do WordPress chamado Really Static que realiza essa façanha para a plataforma de blogs. É claro que seu sistema CMS não WordPress exigirá a geração de páginas personalizadas, mas as vantagens de velocidade valerão muito a pena.
Se o senhor tiver conteúdo que precise ser rotacionado nessas páginas estáticas, como anúncios ou links para conteúdo mais atual, considere as solicitações de JavaScript e AJAX para obter esse conteúdo – a página será estática e o JavaScript será fornecido pela CDN – a única consideração de velocidade será a solicitação de AJAX!
5. Lazyload de recursos… ou incorporar?
Um sintoma comumente conhecido de lentidão no site é o número de solicitações que cada página gera. No passado, resolvemos esse problema com Sprites de CSS/imagem, concatenando recursos JavaScript e CSS e usando URIs de dados. O senhor também pode fazer o lazyload de recursos ou simplesmente incorporá-los à 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 o destacador de sintaxe somente se os elementos da página exigirem destaque. E se o CSS do destacador de sintaxe tiver apenas algumas linhas? O senhor poderia salvar a solicitação extra e incorporá-la à página:
<style type="text/css">
<?php include('media/assets/highlight.css'); ?>
</style>
</head>
Ou o senhor pode concatenar o CSS do realçador no arquivo CSS de todo o site – qualquer um dos dois é vantajoso!
Como o senhor pode ver, há alguns ganhos incrivelmente fáceis de velocidade e de site que podem ser obtidos se o senhor estiver disposto a dedicar alguns minutos de esforço para fazê-los acontecer. E quando o senhor pensa no número de visitantes que seu site recebe e, em seguida, no número de visualizações de página, pode ver por que essas micro-otimizações são tão importantes!
