以前からずっと気になっていたのでやりました。

動機


このサイトはアイコンにFontAwesomeを使用しているのですが、フォントファイルの読み込みに時間がかかっていそうだったのでインラインSVGにしたいという想いが以前からありました。IEの対応がめんどくさそうだったので見送っていたのですが、思ったより簡単にできてしまったので一気にやりました。

hexo-fontawesome


hexo-fontawesomeを使えば一発です。

まず、全てのFontAwesomeの記述をプラグインのタグヘルパーに書き換えました。

次にCSSを準備する必要があるのですが、このプラグインでインラインSVG向けのCSSを取得できるfa_css()を使えば特になにもすることなくインラインSVG用のCSSが取得できます。

一旦fa_css()をテンプレートエンジンに記述した後にHTMLを確認してそこから埋め込まれたCSSをSCSSファイルにしました。後はテーマでデフォルトで準備されているビルドコマンドでビルドするだけです。これでIEも特に何もすることなく適切にアイコンが表示されました。一部、対応できなかったアイコンに関しては絵文字に置き換えました。

ちなみに始めはfa_css()を使うと良いということに気づかずにしばらく自力でCSSとHTMLをこねくり回してました。

UIの改善


以下のような改善をしました。

  • ヘッダーメニューのアップデート
  • h1~h3の上部のマージンを広げた
  • h1~h3のフォントサイズの変更
  • 本文のフォントサイズの変更
  • テーブルの背景色の変更
  • シンタックスハイライトのboaderの色変更と追加
  • hrの色を薄めに変更

全体的に以前より見やすくなったのではないかと思います。フォントサイズは最近のサイトはどこも大き目ということで、そのムーブメンツに乗ったのと、先日後輩氏が拡大して記事を読んでいたので拡大した方が良いかと思いました。

※このサイトは存在がバレまくってます。検索したらよく引っかかるらしいです。本当にありがとうございました。

やりたいこと


以下ずらずらと残りやりたいことを書いていきます。

Service Worker

hexo-offlineというService Workerつかってほげほげできるプラグインがあるのですが、こちらを 使いたいなと思っています。 導入しました

もともとService WorkerってPWAするためのものぐらいの雑な認識(PWAはやる必要がないと思っているので特に興味がなかった)だったのですが、ちゃんと使えば高速化の恩恵を受けれそうなのでそのうちやりたいと思います。ただ、Service Workerを適当に使ってユーザに迷惑を掛けたくないのでこちらは少し時間がかかると思います。そもそも時間が取れない。

トップへ戻るボタンの改善

いちおう、ひっそりとトップへ戻るボタンがあるのですが、正直使い辛いのでそのうちなおしたいと思ってます。後は逆にボトムに移動ボタンも欲しい。

脱JQuery

やりたいです。これは別に最近の潮流に乗って脱したいとかではなくて、単純にJSのサイズがデカくなってしまうからです。これは結果的にサイトのパフォーマンスを下げることになります。

全scriptのasync読み込み

一部のスクリプトはasyncで読み込んでいるのですが、全てではないです。テーマでHexoのjsヘルパーを使用してJSのパスを生成しているのですが、こいつがasync対応していないからです。これはプルリク出すしかないと思ってます。実装は一時間ぐらいでできると思うのですが、ドキュメント英語で書くんかぁ…と思うと重い腰があがらないです。

フォントをもっときれいにしたい

NotoSansを使いたいのですが、サブセット作ったりWebフォント読み込んだりするのがめんどくさいのと、これも重くなるので嫌なんですね。もっとデバイスにデフォルトで入っているフォントが綺麗になってくれたらいいんですが…