Ninguém gosta de ficar esperando, principalmente quando o tempo que temos para gastar está dentro de um ônibus, entre o ponto A e o ponto B. Então, o tempo entre acessar um link e de fato consumir seu conteúdo deve ser o menor possível.
Eu criei este blog com a velocidade em mente desde o início. Esse foi inclusive um dos maiores pontos positivos que levei em conta ao escolher entre um CMS como o WordPress e um gerador estático como o Jekyll. Mas por que um site estático é potencialmente muito mais rápido?
Em primeiro lugar, seu servidor não precisa executar nenhum arquivo para gerar a resposta para a requisição do cliente. Isso pode parecer pouco, mas quando cada millisegundo conta, servir um arquivo previamente gerado ajuda a fazer diferença.
Outro grande motivo é a facilidade com que podemos brincar com os arquivos gerados. Neste blog eu uso o Grunt com diversos plugins para me ajudar a espremer cada byte de cada um dos arquivos. Imagens, scripts, stylesheets e htmls. Todos recebem tratamento antes de serem publicados aqui.
Um dos plugins mais interessantes que coloquei aqui foi o grunt-uncss. Em vez de minificar os arquivos para retirar bytes desnecessários para o computador, o UnCSS vai na frente e analisa todas as páginas do site para saber quais estilos serão realmente utilizados pelo site. Isso ajuda a retirar cada seletor que está somente adicionando peso à sua stylesheet. Aqui, onde eu já tomei cuidado para não incluir seletores inúteis, ele ajudou a diminuir o css de 17KB para apenas 4KB (com a ajuda também do ótimo grunt-contrib-cssmin).
A configuração é bastante simples (arquivo original):
uncss: {
prod: {
options: {
htmlroot: './dist/',
report: 'gzip'
},
files: {
'./dist/_assets/css/main.css': ['./dist/**/*.html']
}
}
}
Além de minificar o css, também espremo meus htmls com o grunt-contrib-htmlmin. Cheio de opções, ele reduz ao máximo o tamanho dos htmls e de todos os elementos <script> e <style> dentro deles.
Entretanto, as imagens são, sem dúvida, os arquivos mais pesados que seu site serve para o usuário. Otimizá-las é praticamente obrigatório, principalmente quando você serve imagens para telas de alta resolução como eu faço. Por enquanto estou utilizando o grunt-contrib-imagemin, mas dizem que ele não é o melhor nisso.
Otimizar é praticamente obrigatório
Uma dica importante que aprendi foi a utilizar .jpgs com 1.5x o tamanho a ser mostrado, com 65-75% de qualidade, progressivos e otimizados com um algoritmo lossless. Dessa forma elas ficam bonitas em telas de alta resolução, mas com tamanhos ainda aceitáveis. Ainda não mergulhei nas imagens responsivas, mas parece que finalmente estamos chegando a uma solução interessante para elas.
Se você quiser dar uma olhada como eu configurei meu Gruntfile.js ou como faço qualquer outra coisa neste blog, todo o código-fonte dele está disponível no GitHub.
Leia também sobre como simular conexões lentas localmente. Fazer isso pode ser bastante útil para saber se você pode melhorar sua página com lazy loading e outras técnicas.