3rdパーティー製スクリプトによるフロントエンドSPOFを検出するChrome拡張

twitter down

6月22日未明、Twitter のサーバーがダウン し、全世界でサービスが停止しました。一部マニアの方々は、動いていた ケータイ用サーバー から この状況を楽しんでいた (?) ようですが、OMG..twitter was down….closest thing to living without oxygen for most of us…. (なんてこった、オレたちに酸素なしで生きろっていうのか) という声に代表されるように、世界各地で悲鳴が上がったようです。

さて純正の Twitter ウィジェット を貼っているあなたのサイトは、この障害でページが真っ白になったり途中で引っかかったりせず、無事にコンテンツを提供できたでしょうか?

ということで、前回 と同ネタですが、こういった フロントエンドの単一障害点SPOF) をより簡単にチェックできる Chrome エクステンション SPOF-O-Matic を紹介します。

SPOF-O-Matic

SPOF-O-Matic は、ブラックホールサーバー (HTTP リクエストを飲み込むだけでレスポンスを返さないサーバーのこと) を運営する WebPagetest のエンジニアが作ったようです。

SPOF-O-Maticアイコン

Chrome にエクステンションをインストールすると、右のように SPOF-O-Matic のアイコンがツールバーに現れます。

SPOFの警告アイコン

次にご自分のサイトを表示してみましょう。警告マークと数字が現れたら要注意です。数字の数だけ SPOF となり得るスクリプト読み込みがある事を示しています。

アイコンをクリックしてみましょう。「Possible Frontend SPOF from」 に SPOF となり得るスクリプトのリストが現れます。

SPOFの要注意リスト

フロントエンドSPOFの恐ろしさ

実際 SPOF-O-Matic は、同期的に読み込んでいる (つまり asyncdefer 属性の付いていない) <script> タグをリストアップします。もしそれらのスクリプトをホストしているサーバーがダウンすれば、以降のパース (HTML の解釈、外部リソースの読み込み、DOM 構築など) とレンダリング (描画) がブロックされてしまいます。「(95%)」 などの数字は、ページの構成要素のうちどれぐらいをブロックする可能性があるかを示しているのです。

SPOF-enable

次に 「Resource blocking is currently Disabled」 の右にある 「Enable」 ボタンを押し、再読み込みしてみましょう。リストアップされたスクリプトの読み込み先が、ブラックホールサーバー にリダイレクトされます。「(95%)」 と高い数値が出ていた場合には、ページが真っ白になる事でしょう。たった1つの外部サーバーの障害でページ全体が見れなくなる、これがフロントエンド SPOF の恐ろしさです 🙂 。

SPOFによってブロックされたページ

対象のスクリプトがブラウザのキャッシュに残ったりしていると、HTTP リクエストが発行されず正しい観測が出来ないようですので、キャッシュをクリアするか、新しいタブを開いてから実行しましょう。

さて、その他のボタンの意味を概説しておきます。

Edit
「Enable」 を押して再読み込みしてから使います「Detected Third-Party Domains」 にリストアップされたスクリプトをブロックするかどうかを決めます。「Whitelist」 で対象外にする事が出来るので、1つ1つホワイトリストに加えていき、影響度合いを調べる事が出来ます。「Return」 で元に戻ります。
Reset
ホワイトリストに入れたスクリプトを元に戻します。
Whitelist
各スクリプトをブロックの対象外とします。「Remove」 で元に戻す事が出来ます。

まとめ

3rdパーティーのサービスを利用するためには外部のサーバーからスクリプトを読み込むわけですが、障害時はもちろん、サイトの応答速度もこういった外部リソースの読み込みに大きく左右されるものです。つまりフロントエンドの高速化対策を施しておく事が、SPOF 対策をする事につながるのです。今回紹介したエクステンションは常時必要とするものではありませんが、少しでも早いサイトを構築するために、一度はご自分のサイトを分析されてみてはいかがでしょうか?

参考情報

3rdパーティー製スクリプトによるフロントエンドSPOFを検出するChrome拡張」への1件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

海外からの投稿は受け付けていません