[Web 製作] アセットをインハウス化する

  •  
  •  

サイトが重い ! 表示されない !

以前、知人の製作者様より「運用中サイトが重くて表示されなくなった」と相談を受けました。

Chrome など Developer Tools で接続状況を確認したところ、

Developer Tools > Network タブ表示例
Developer Tools > Network タブ表示例

のようにバーがぴょーんとのびて、アセット読み込みに時間がかかっていることがわかりました。
(上記画像はイメージ)

外部サーバ障害に引きずられて連コケ

当時このサイトは、一部の JavaScript ファイルを外部から読み込みんでいました。

通常は、外部サーバからファイルを取得して表示ができます。

通常アクセス OK
通常アクセス OK

ところが今回、その外部サイトで障害が発生しており、JavaScript ファイルの読み込みができなくなっていました。

障害発生し、読み込みがブロック
障害発生し、読み込みがブロック

その影響で、他の JavaScript / CSS ファイルの読み込みも行われず(ブロック)、結果サイトが表示されなくなっていました。


外部サイトで発生した障害のそのあおりを受けた、というものです。

外部サイト、つまり、 他社が管理しているサイト(サーバ)で障害が発生した場合、こちらからは全く手を打つことができません

それは、相手が回復するのを待つしかない、ということでもあります。 ツラいです。

インハウス化

しかしまあ、指をくわえて眺めているわけにもいきません。

このような障害ケースの対策として 「アセットのインハウス化」が有効です。


この例は「他社サイトの障害に巻きこまれた」ものです。

障害発生し、読み込みがブロック
障害発生し、読み込みがブロック

ならば、他社サイトへの依存をやめれば良いのです。
シンプルな話ですよね。

対応手順は、ざっくり

障害発生し、読み込みがブロック
障害発生し、読み込みがブロック
  • 他社サイトのファイルを、自社サイトにコピーし
  • 他社サイトへの接続を、自社サイトへの接続に置き換える

です。

こうすることによって、すべてのファイルを自社サイトから取得するという状況にできます。

これはつまり、「手出しできない他社サイトに引きずられて連こけすることは絶対になくなる」というわけです。

障害が発生しうるポイントを減らす、なくす 、は基本的な対策ではありますが、一定の効果が見込めます。


余談ですが

自前で持つと遅い、というのがあり、CDN を選択する方もいらっしゃいますね。 確かに CDN は障害対策に加え高速化もでき一石二鳥の選択といえます。

しかしまあ、ごく稀に CDN でも障害発生することもあるようですけれども。