本ブログのドメイン最適化設定に関するいくつかの説明

はじめに

GitHub Pagesで静的ブログを構築することを決めたとき、できるだけページの表示速度を向上させたいと考え、いくつかの小技を使って読み込み速度を速め、ユーザー体験を向上させました。

最適化

百度CDNサービスと七牛静的リソースホスティングの利用

このブログではBootstrap/jQuery/fontawsomeの3つのライブラリ/フォントファイルを使用しています。Bootstrapについては実際の状況に合わせて若干の修正を加え、より適切なレイアウトに適合させたため、サードパーティのCDNは使用せず、七牛のリソースサーバーに配置しました。jQueryについては百度の静的公開リソースサービスを利用しています。

ここで少し宣伝を。個人ユーザーにとって、七牛は支付宝での実名認証後、10GBの無料ストレージを提供しており、実際の効果を見ると速度もまずまずです。私はドメインimg.xheldon.com CNAMEを七牛のリソースサーバーに設定し、前述のカスタマイズ版Bootstrapや画像などの静的リソースをホストしています。利用時にはファイルをアップロードしてパスを記述するだけでよく、img.xheldon.com/path/filename.extを使用すればOKです：

2019年9月3日更新：私のドメインはGodaddyに置いており、国内でICP登録を行っていないため（国内だとブロックされる恐れがある）、未登録のドメインは七牛で解析できません。そのため、画像を記事と同じ場所に置くしかなく、記事を書く際にはできるだけ画像を使わないようにしています -_-

正直なところ、静的ブログなのでリクエストに伴うCookieは大きくなく、リソースを別のサブドメインに配置する最適化の効果は限定的ですが、ないよりはましです。

小規模リソースの直接ページ内埋め込み

小さなcssやjsは直接ページ内に埋め込みました。例えばhighlight.cssとsearch.jsは、styleとscriptタグを使って直接ページに記述しています。この方法には大きな利点があります。これらのファイルは小さいため、ダウンロード時間は無視でき、外部から読み込む場合の主な時間消費はTTFB（FQ必要）になります：

設定

若い頃は世間知らずだったため、このサイトのAに記録されたwwwを直接Github PagesのIP 192.30.252.154/192.30.252.153に向け、トップレベルドメイン@を誤ってCNAMEを使ってxheldon.github.io.に向けてしまいました。実際、MXを@に向ける必要がない場合、これはOKなのですが、履歴書を作成する際に少しクールにしたいと思い、自分のブログのドメインをメールアドレスとして使用し、QQメールが提供するドメインメールサービスを利用しました。そのため、MX解析を行う際には、トップレベルドメイン@をテンセントのmxdomain.qq.comに向ける必要があり、この時点でエラーが発生しました。アリババクラウドは、CNAMEとMXを同時にトップレベルドメイン@に向けることはできないと警告しました。具体的な理由はこちらで確認できますが、ブログを移行してから数か月が経ち、いくつかのリンクはすでに検索エンジンにクロールされているため、今からリンクを修正すると損失が大きすぎます。

私の最初の設定は以下の通りでした：

テンセントドメインメールを使用するため、MXレコードを@に向ける必要がありました。しかし、MXの@とCNAMEの@は共存できません。そこで、私は非表示のURL転送を考え、CNAMEから@への指向を解除し、MXレコードを@に向けて追加し、さらに非表示のURLを新設しました：

ブログのブランチディレクトリにあるCNAMEファイルをxheldon.comからwww.xheldon.comに変更したところ、検索エンジンからブログにアクセスすると、例えばxheldon.com/about/の場合、確かにブログにはリダイレクトされるものの、トップページのみに留まることが判明しました。つまり、以前に検索エンジンにクロールされたすべてのリンクは、単にトップページのwww.xheldon.comに留まってしまうのです。これは、ステルス転送が特定のアドレスに対してのみリダイレクトを行い、アドレス後のパスを自動的に追加しないことを意味します。私のケースでは、URLのステルス転送を設定し、xheldon.comからwww.xheldon.comへの転送を設定した後、すべてのxheldon.com/xxxxへのアクセスリクエストもwww.xheldon.comに転送され、期待していたwww.xheldon.com/xxxxには転送されませんでした。

この時点でdig xheldon.com:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

; <<>> DiG 9.8.3-P1 <<>> xheldon.com
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 20871
;; flags: qr rd ra; QUERY: 1, ANSWER: 1, AUTHORITY: 0, ADDITIONAL: 0

;; QUESTION SECTION:
;xheldon.com.   IN	A

;; ANSWER SECTION:
xheldon.com.  585	IN	A	42.156.141.13

;; Query time: 7 msec
;; SERVER: 172.168.200.110#53(172.168.200.110)
;; WHEN: Thu Mar 30 10:06:41 2017
;; MSG SIZE  rcvd: 45

トップレベルドメインが阿里雲のIPを指していることがわかりました。

そこで考えた末、Aレコードの@を修正し、直接GitHub PagesのIPアドレスを指すようにしました。ブログのルートディレクトリにあるCNAMEファイルの内容は修正後のwww.xheldon.comです:

これが可能な理由は、Github Pagesが自動的に](https://help.github.com/articles/setting-up-an-apex-domain-and-www-subdomain/)をマッチングするためです。具体的には以下の通りです:

1. CNAMEファイルの内容がwww.xheldon.comで、xheldon.comからのリクエストが検出された場合（トップレベルドメイン@のAレコードをGitHub PagesのIPに向ける設定が必要）、www.xheldon.comに転送されます。
2. CNAMEファイルの内容がxheldon.comで、www.xheldon.comからのリクエストが検出された場合（wwwのサブドメインAレコードをGitHub PagesのIPに向ける設定が必要）、xheldon.comに転送されます。

この時点でdig www.xheldon.comが確認されました:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

; <<>> DiG 9.8.3-P1 <<>> www.xheldon.com
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 56061
;; flags: qr rd ra; QUERY: 1, ANSWER: 3, AUTHORITY: 0, ADDITIONAL: 0

;; QUESTION SECTION:
;www.xheldon.com.  IN	A

;; ANSWER SECTION:
www.xheldon.com. 600	IN	CNAME	xheldon.github.io.
xheldon.github.io. 3600	IN	CNAME	github.map.fastly.net.
github.map.fastly.net.  28  IN      A      151.101.100.133

;; Query time: 178 msec
;; SERVER: 172.168.200.110#53(172.168.200.110)
;; WHEN: Thu Mar 30 10:20:30 2017
;; MSG SIZE  rcvd: 115

dig xheldon.comが確認されました:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

; <<>> DiG 9.8.3-P1 <<>> xheldon.com
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 59875
;; flags: qr rd ra; QUERY: 1, ANSWER: 2, AUTHORITY: 0, ADDITIONAL: 0

;; QUESTION SECTION:
;xheldon.com.   IN	A

;; ANSWER SECTION:
xheldon.com.  600	IN	A	192.30.252.154
xheldon.com.  600	IN	A	192.30.252.153

;; Query time: 462 msec
;; SERVER: 172.168.200.110#53(172.168.200.110)
;; WHEN: Thu Mar 30 12:32:23 2017
;; MSG SIZE  rcvd: 61

• 前の記事
  Vue学習まとめ
• 次の記事
  Webpack の非同期オンデマンドローディング