Font Awesomeのアイコンフォントを使用しない

[sounisi5011]

現在、サイト内で使用しているFont Awesomeのアイコンは、Sassで専用のWebフォントを読み込む方式で使用している。

ところが、このフォントファイルはサイズが74.75KiBもあり、PageSpeed Insightsの診断結果にも挙げられる程の問題になっている。CSSのフォント読み込みに関するレンダリングの問題により、チラツキが生じる可能性も存在する。

これを改善するため、Font Awesomeのアイコンをサーバーサイドレンダリングで生成することを提案する。

[sounisi5011]

PostHTMLのプラグインとして使用できるようにしたほうがいいかなぁ。なんか、すでに誰かが作ってそうな気もするけれど。

[sounisi5011]

@fortawesome/fontawesome-svg-core@1.2.35で試したところ、dom.css()はCSS文字列を返すことが判明した。長さは7797文字。インデントや改行がそのまま入っているため、posthtml-postcssとpostcss-cssoを組み合わせて短縮することを提案する。