[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 embute 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 páginas 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.
1{{- if strings.HasPrefix .Destination "http" -}}
2 <img
3 src="{{ .Destination | safeURL }}"
4 alt="{{ .Text }}"
5 {{ with .Title }}title="{{ . }}"{{ end }}
6 />
7{{- else -}}
8 {{ $file := index (split .Destination "#") 0 }}
9 {{ $class := index (split .Destination "#") 1 }}
10 {{ $class = $class | default "floatleft" }}
11 {{ $mime := "jpeg" }}
12 {{- if eq (path.Ext $file) ".png" }}{{ $mime = "png" }}{{ end -}}
13 {{- if eq (path.Ext $file) ".gif" }}{{ $mime = "gif" }}{{ end -}}
14 {{- if eq (path.Ext $file) ".svg" }}{{ $mime = "svg+xml" }} {{ end -}}
15 <img
16 src="data:image/{{ $mime }};base64,{{ readFile $file | base64Encode }}"
17 alt="{{ .Text }}"
18 title="{{ .Title }}"
19 {{ with imageConfig ( printf "%s" $file ) }}
20 width={{ .Width }}
21 height="{{ .Height }}"
22 {{ end }}
23 />
24{{- 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 página 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 página 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.
Acidentalmente, manter todos os recursos de cada artigo auto-contidos teve outros efeitos interessantes. Salvar a página para leitura off-line, arquivar no archive.org e até mesmo usar a página em scripts de integração ficaram mais simples porque não preciso me preocupar em seguir links, está tudo em um único arquivo com um formato previsível.