以下のような対応をしました。

CSSとJS


このサイトはHexo向けのtranquilpeakというテーマを魔改造して使っているのですが、いままで「使うかもしれんので残しておこう」という理由で残していた不要なCSSやJSはあらかた削除しました。

Chromeでは開発者モードのCoverageというのでページごとにCSSとJSのどの行が使用されているかというのを調べることができます。(詳しいことは他サイトさん参考にしてください)このツールはページごとしか確認できないので全てを確認というのはなかなか難しいのですが、どのページでも全く使用されていないという行はほとんどなくなったのではないかと思います。

nginx


nginxからの配信時にフォントとfaviconがgzip圧縮されていなかったので圧縮するようにしました。具体的にはgzip_typesに下記を追記しました。

1
application/font-woff application/font-tff image/x-icon

画像の圧縮


背景画像、アバター、faviconの3つを新たに生成しなおして圧縮しなおしました。

問題点


で、これでもいくつか問題点があります。まずおなじみのPageSpeedInsightで確認してみます。

まずトップページ。これは問題ないです。

次に記事。

記事の方ダメですね。これは画像を載せていない記事を選んで図っていますが、画像を載せている場合はもう少しパフォーマンスが落ちます。

一番大きい理由は GoogleAdsenseの関連する広告です。これが山ほどバカスカとリクエストしまくるので遅くなります。表示数を削ろうと思ったのですが、いくら弄っても逆に表示数が増えるばっかりなので結局そのままにしています。もうこの広告外そうかな…

今後やりたいこと


  • 基本ページからJQueryを排除
  • 脱Fontawesome

このサイトでJQueryを使用している箇所はそこまでないです。ページによってはガッツリ依存しているのですが、大概のユーザーは閲覧しないようなページなのでそういったページでのみJQueryを読み込むようにして、基本的なページでは除外していきたいです。

Fontawesomeも削除したいと思っていて、こちらは単純にフォントファイルがデカすぎるからです。あと、アイコンもちょっとビミョイなと思ってます。