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) ".webp" }}{{ $mime = "webp" }}{{ end -}}
13    {{- if eq (path.Ext $file) ".png" }}{{ $mime = "png" }}{{ end -}}
14    {{- if eq (path.Ext $file) ".gif" }}{{ $mime = "gif" }}{{ end -}}
15    {{- if eq (path.Ext $file) ".svg" }}{{ $mime = "svg+xml" }} {{ end -}}
16    <img
17        src="data:image/{{ $mime }};base64,{{ readFile $file | base64Encode }}"
18        alt="{{ .Text }}"
19        title="{{ .Title }}"
20        {{ with imageConfig ( printf "%s" $file ) }}
21            width={{ .Width }}
22            height="{{ .Height }}"
23        {{ end }}
24    />
25{{- 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.

Cesar Gimenes

Última modificação