Acelerando o Site

Para compartilhar meus artigos usando IPFS é interessante fazer com que o CSS e as imagens fossem inseridas no HTML, dessa forma seria apenas um arquivo para compartilhar.

Inserir o CSS foi a parte mais simples, apenas coloquei o CSS diretamente no modelo do site usando a tag <style></style>, e apenas embuti o CSS já gerou um ganho interessante de velocidade.

Eu uso o HUGO como framework para geração automática do site, o HUGO funciona convertendo paginas escritas em Markdown, mas a mesma ideia pode ser usada não importa como o site é feito, mesmo se escrito a mão, direto no HTML. Mas com o HUGO e um pouco de programação foi simples automatizar meu template e fazer com que as imagens fossem convertidas para Base64 e inseridas na página automaticamente.

{{- if strings.HasPrefix .Destination "http" -}}
    <img src="{{ .Destination | safeURL }}" 
        alt="{{ .Text }}" 
        {{ with .Title}} 
            title="{{ . }}"
        {{ end }} 
    />
{{- else -}}
    {{ $file := index (split .Destination "#") 0 }}
    {{ $class := index (split .Destination "#") 1 }}
    {{ $class = $class | default  "floatleft" }}
    <img 
        src="data:image/jpeg;base64,{{ readFile $file | base64Encode }}" 
        alt="{{ .Text }}" 
    {{ with .Title}} 
        title="{{ . }}"
    {{ end }} 
    {{ with imageConfig ( printf "%s" $file ) }} 
        width={{ .Width }} 
        height="{{ .Height }}" 
    {{ end }}
    />
{{- end -}}

Com as imagens também no HTML, acabou que o site ficou muito mais rápido, o motivo é que tudo é feito em uma única conexão e o aumento no tamanho do HTML não tem um impacto tão grande já que o trafego é comprimido.

Como o resultado foi tão bom, só restava um arquivo para inserir no HTML e fazer com que cada pagina precisasse de apenas uma única requisição HTTP, o favicon e a boa notícia é que os navegadores modernos permitem que o favicon esteja no formato SVG o que torna muito simples inserir como texto no HTML e acaba com a necessidade de ter várias versões da imagem para cada tamanho.

<link rel="icon" 
    sizes="any" 
    type="image/svg+xml" 
    href="data:image/svg+xml;utf8,<svg xmlns=...</svg>" 
/>

A economia de tempo deve variar dependendo do conteúdo do site, os recursos que ele precisa carregar, conexões externas, etc., no meu caso é simples porque eu raramente uso imagens e nunca uso javascript, então, a carga do site já era naturalmente rápida. Os tempos entre o início da requisição e a pagina estar completamente desenhada estão girando entre 300 e 450 milissegundos.

Se você for testar essa ideia no seu site lembre de coletar os tempos e comparar para saber se houve melhoria ou não. Afinal, engenharia sem números é só opinião.

Cesar Gimenes