Jekyll + gh-pages

Se você tem um site estático gerado com Jekyll, provavelmente ele está hospedado comgh-pages.

gh-pages são ótimas pela simplicidade de hospedagem e publicação do seu site estático, mas elas não te permitem customizar o seu processo de build. Por razões de segurança, o Github não permite que você arbitrariamente rode plugins no seu ambiente.

Nesse post eu juntei várias técnicas para otimizar os seus assets em tempo de build, que você pode usar mesmo hospedando seu site com Jekyll no gh-pages.

Otimizar HTML

Minificar HTML com Compress

Jekyll Compress HTML é um arquivo de layout do Jekyll que comprime HTML removendo espaços desnecessários e tags HTML opcionais.

Trata-se de um único arquivo HTML que você baixa e coloca dentro da sua pasta _layouts e referencia colocando

---
layout: compress
---

no front-matter do seu layout default, ou nos seus arquivos HTML. Você ainda pode remover espaços de arquivos JSON/XML que você gere, usando a mesma abordagem.

Veja como é feito nesse commit.

Otimizar CSS

Jekyll suporta Sass nativamente. Com isso, você já pode concatenar todos seus arquivos SASS em um único bundle. Mas isso não irá minificar seu CSS.

Inline CSS

É recomendado você colocar inline o CSS usado para renderizar o conteúdo acima da primeira dobra da sua página. Mas se o seu site é um simples blog ou página de projeto, provavelmente o seu CSS acima da dobra é todo o seu CSS. Então você pode colocar todo seu CSS em uma tag <style> no head de sua página. Especialmente se seu HTML + inline CSS juntos são menores do que 14.6kb comprimidos (gh-pages serve seu site comprimido com gzip), porque esse é o tamanho que o cliente consegue receber na primeira roundtrip ao servidor.

Para fazer isso, crie um arquivo inline.scss na pasta _includes, e importe os arquivos SCSS que você quer que sejam fiquem inline. Geralmente, algo como importar o arquivo main.scss (da sua pasta _sass):

@import "main";

Então incluímos esse arquivo dentro de uma tag <style> no head do documento, passando o conteúdo pelo filtro nativo do Jekyll scssify:

{% capture inline_css %}
  {% include inline.scss %}
{% endcapture %}
{{ inline_css | scssify }}

Veja como é feito nesse commit.

Claro que você pode escolher colocar inline só uma parte do CSS e carregar um arquivo CSS separado com o resto.

Essa técnica eu aprendi nesse post do Kevin Sweet.

Minificar inline CSS

Lembra do nosso amigo Jekyll Compress HTML? Compress removerá os espaços vazios (que é basicamente como CSS é minificado) de todo seu inline CSS.

Otimizar JS

Concatenar JS

Escreva todo seu JS em quantos arquivos você preciasr e dê include de todos eles em um único arquivo, e adicione uma única tag <script> no seu HTML para requisitar esse arquivo.

include irá procurar arquivos somente na pasta _includes, então se você quiser manter seus arquivos JS em uma pasta separada, use include_relative, que te permite incluir arquivos relativamente ao arquivo no qual você está trabalhando.

Veja como é feito nesse commit.

Minificar JS

Isso é o que eu ainda não descobri como fazer sem um plugin. Se você souber, por favor me conte nos comentários.

Jekyll Compress não vai funcionar: ele somente remove espaços em branco, e não é assim que JS é minificado. Além disso, se você usar // para comentário, todo o código depois disso estará comentado.

Inline JS

Um simples include ou include_relative do seu arquivo dentro de uma tag <script> já basta. Mas não irá funcionar junto com o Jekyll Compress HTML, então escolha qual dos dois é mais útil para você e use só ele.