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.
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, esta tudo em um único arquivo com um formato previsível.