GithubでGTmetrix高速化したお話

  • 2018.04.25
  • Web
GithubでGTmetrix高速化したお話

はい、最近風邪気味のDAFUです。
最近SYOBONという新規仮想通貨開発プロジェクトに参加させていただいているのですが、その中で公式サイト案を一度作った時のGithubPagesを用いてSBNDEVsというサイトを作成しました。
今回は、そのSBNDEVsをGTmetrixでフルスコアにしたのでGithub Pagesという制限の多い環境の中で高速化のためにしたことを備忘録として書きます。

SBNはすでに開発が終了しているため現在このサイトは使用されていません。

SBNDEVsとは

そもそも今回高速化したSBNDEVsとは、公式サイトに載せるほどでもないことや、開発チーム内で共有・検討する情報をまとめるためのサイトです。
Github Pagesを用いており、ソースコードは誰でも閲覧可能です。
サイトURL – https://kikiriko200.github.io/syobon.github.io/devs/

したこと

今回行ったことは大きくまとめると以下の通りです。

  1. HTML以外のファイルのCDN化(RawGit使用)
  2. CSS/JS/画像ファイルなどの縮小(各minifer使用)
  3. Fontawesomeなど使用しないJSファイルのコメントアウト

以下それぞれについて詳しく解説していきます。

HTML以外のファイルのCDN化

まず、CDNとはContents Delivery Networkの略で自分のサイトのコンテンツを別のサーバーにキャッシュして安定して配信するサービスです。
有名なところでいうとCloudflareがこれに当たります。
普通にサイトを作る場合.htaccessをいじれば良かったりするので特に気にすることは無いのですが、今回はGithub Pagesという環境なのでファイルのキャッシュのために利用します。

今回利用したCDNサービスはRawGitです。
このサイトはGithubのファイルをURLを入力するだけで簡単にCDN化してくれるというもので、キャッシュが無制限になるという利点があります。
ただし、CDN化したファイルは上書きされないので(更新を自動反映してくれるサービスもRawgitには備えられているが今回は利用しない)、必ず他の手順を済ませた上で最終版でCDN化しましょう。

2018/10/13追記:RawGitのサービス終了に伴い、現在新規登録が出来なくなっています。

そのため、代替としてjsDelivrをお勧めします。

また、favicon画像は今回Rawgitではなくimgurを用いました。
理由は、Rawgitだとリダイレクトを挟んでしまいこれがGTmetrixで減点要素となるためです。

各ファイルの縮小

各ファイルの縮小というのは、miniferを用いて改行やコメント、閉じタグなどを削除して可読性をなくす代わりに容量を削減するというものです。
以下は私の使用したminiferの一覧です。

ちなみにこれも普通の環境であれば.htaccessで指定して行うことができます。(GithubPagesに親を殺されたような顔)

Fontawesomeなど使用しないJSファイルのコメントアウト

これは見出しの通りです。
解説することも特にないですね。
使用しないJSファイルを読み込むのはもったいないのでやめましょう。特にフォントやFontawesomeは容量が大きい分速度に顕著な影響を与えます。

結果

これらすべてを実施した結果、SBNDEVsではGTmetrixのフルスコアを達成することができました。
ただ、GithubPagesでなく普通のレンタルサーバーであればもっと簡単に実行できることなのが悔しいです。
あ、スクショこれね↓

スクリーンショット (3)
また、この実験を通してFindy?というサービスで自分のHTMLの偏差値を測ったら42でした(JSより低いの納得いかん)
なのでタイトルは”偏差値40のサルでも出来る!GithubPages高速化!!”とかにしようかと一フレーム位思いましたが悲しくなったので没。
それではここらで。(*・ω・)/